Recently in Web Category

But you are searching it wrong!

| No Comments

Many smart people creating amazing smart things like web searches assume and think that we know what we are looking for. But we don't. Also when we go out to "so called real world", we don't have a specific and concrete task or interest. We just go out for a walk, which it self is a first choice, but then we let things happen and enjoy the ones that caught our attention.

When we go out, our brain is amazing at exploring and hiding the world around us at the same time. We no longer notice or concentrate on walking - we walk, we no longer concentrate so much on driving - we are steering + change gears + look into mirrors + talking to our mates at the same time, we no longer listen to what others say - we are networking, we are no longer paying attention to the TV - we are entertained.

It's not about handling enormous amount of information, it's about filtering them and handling only the ones that really matter. "Indeed," suggests the neuroscientist Monte Buchsbaum, "filtering or coping with the tremendous information overload that the human eye, ear, and other sense organs can dump upon the central nervous system may be one of the major functions of the cerebral cortex." dream.png

Designing search that key feature would be eliminating and filtering could be a nice experiment into unknown, inspired by nature.

Imagine visiting my blog, that has ~160 entries at this time, and being able to filter out the ones that are out of interest for you. You may end up with one or two that you would really like but had no idea about them, or their keywords, before.

... just a dreamer

140 spell

| No Comments

Traditionally Twitter was 140 characters messaging tool. Some people love it because it makes everyone to be brief and clear in their tweets, some hate it because when they are about to finish the last word it say "-2" chars.

If you can't explain it simply, you don't understand it well enough. --Albert Einstein

The interesting thing is that both haters and lovers are right. That's an amazing revelation about conversations. We can be in conflict while both sides are right! The trouble and conflict is not with the reality or truth, but that those two people doesn't share the same reality, their truths are simply not in sync.

We don't see ourselves as the problem because, in fact, we aren't. What we are saying does make sense. What's often hard to see is that what other person is saying also makes sense.
--Douglas Stone + Bruce Patton + Sheila Heen

But back to the 140 spell. May people, including me until 43 minutes ago, believe that in Twitter it's possible to use only 140 letters. Which is true, but Twitter allows to attach a picture to every single tweet. This feature many already use to tell their story with their photos. Stretching that possibility a bit more further allows for attaching screen-shot from website or e-book or taking photo of hand written text and attaching it to the tweet. That way the "Keep it simple, stupid!" rule is satisfied and we are also allowed to express our selves beyond that limitation → win-win.

140-spell.jpg

To make the Debian-Perl module look-up more useful, there are now install instructions included. That means that all non-packaged CPAN dependencies and also all packaged ones are listed and it's clear what can be installed from packages and what needs to be installed from CPAN. Here's an example for App::TimeTracker:

sudo apt-get install libexception-class-perl libclass-accessor-perl libmoosex-role-parameterized-perl libjson-perl libnamespace-autoclean-perl libtry-tiny-perl libtest-trap-perl libtest-most-perl libtest-file-perl librt-client-rest-perl libpath-class-perl libmoosex-types-path-class-perl libmoosex-storage-perl libmoosex-getopt-perl libmoose-perl libmodule-build-perl libtest-mock-lwp-perl libjson-xs-perl libio-capture-perl libhash-merge-perl libgit-repository-perl libfile-homedir-perl libfile-find-rule-perl r-base-core-ra perl-modules libdigest-sha1-perl libdatetime-format-iso8601-perl libdatetime-format-duration-perl libdatetime-perl perl perl-base

sudo cpan -i Iterator Path::Class::Iterator MooseX::Storage::Format::JSONpm App::TimeTracker

deb-perl-it-install-example.png

Just a note that this works fine for Debian stable+testing+unstable. Which is not so common. Most installations will be stable or testing+unstable. Once Debian Wheeze (7.0) will become stable (hopefully soon) I'll split that search to two - one for Debian stable and one for Debian testing+unstable.

Password Hashes Web Tool

| No Comments

Today I've created tool to generate and/or validate different password hashes

For security reasons, you may want to store passwords in hashed form. This guards against the possibility that someone who gains unauthorized access to the database can retrieve the passwords of every user in the system. Hashing performs a one-way transformation on a password, turning the password into another String, called the hashed password. "One-way" means that it is practically impossible to go the other way - to turn the hashed password back into the original password. There are several mathematically complex hashing algorithms that fulfill these needs.

--ATG Personalization Programming Guide

Here's a screenshot:

passphrase-secret.png

new meon logo

| No Comments
meon - digitizing creativity

EU VAT Number checker

| No Comments

Just finished EU VAT Number checker that combines VIES - "VAT Information Exchange System" and Google Maps allowing easy verification of European VAT number. Ex. ATU67038724

Besides web version there is also JSON API version - http://www.tools.meon.eu/eu-vat-json/ATU67038724?cb=call_back_fn.

Social?

| No Comments

Twitter

How to get count per link?

        http://urls.api.twitter.com/1/urls/count.json?url=http://www.perl.org/
        {"count":351,"url":"http://www.perl.org/";}

Statistics tool?

Not yet but soon? https://dev.twitter.com/blog/introducing-twitter-web-analytics

How to hook to an event?

https://dev.twitter.com/docs/intents/events

http://stackoverflow.com/questions/4947825/is-there-a-callback-for-twitters-tweet-button

        twttr.events.bind('tweet',    tweetIntentToAnalytics);

How to create button?

http://twitter.com/goodies/tweetbutton https://dev.twitter.com/docs/tweet-button

    <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
    <div>
      <a href="https://twitter.com/share" class="twitter-share-button"
         data-url="http://bit.ly/twitter-api-announce";
         data-counturl="http://groups.google.com/group/twitter-api-announce";
         data-count="vertical"
         data-lang="es">Tweet</a>
    </div>

Supports Open Graph?

No - https://dev.twitter.com/discussions/1244


Facebook

How to get count per link?

        http://graph.facebook.com/?id=http://www.perl.org/
        {
           "id": "http://www.perl.org/";,
           "shares": 370
        }

Statistics tool?

http://www.facebook.com/insights/

Needs meta tag on the root page.

        <meta property="fb:page_id" content="159636650742750" />

How to hook to an event?

http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/

How to create button?

http://developers.facebook.com/docs/reference/plugins/like/

        <div id="fb-root"></div>
        <script>(function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) {return;}
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
        <div class="fb-like" data-href="http://www.perl.org/"; data-send="false"
        data-layout="button_count" data-width="450" data-show-faces="true"
        data-action="recommend"></div>

Supports Open Graph?

Yes - https://developers.facebook.com/docs/opengraph/

Debug tool - http://developers.facebook.com/tools/debug


Google+

How to get count per link?

        https://plusone.google.com/u/0/_/+1/fastbutton?count=true&url=http://www.perl.org/

Statistics tool?

https://www.google.com/webmasters/tools/

Navigate to "+1 Metrics"

How to hook to an event?

        <g:plusone size="tall" callback="plusone_vote"></g:plusone>

How to create button?

http://www.google.com/webmasters/+1/button/

        <!-- Place this tag where you want the +1 button to render -->
        <g:plusone></g:plusone>
        <!-- Place this render call where appropriate -->
        <script type="text/javascript">
          window.___gcfg = {lang: 'en-GB'};
          (function() {
                var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                po.src = 'https://apis.google.com/js/plusone.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
          })();
        </script>

Supports Open Graph?

Yes - https://developers.google.com/+/plugins/+1button/

If you like it, share it.

| No Comments

Recently there was a discussion on PerlMonks whether to add FaceBook "like" buttons or not. tye said "there will never be a standard facebook button on PerlMonks so long as I have any say". None of us is crazy about putting other sites JavaScript or even images on their site unless it is 100% necessary. On the other hand the social networks and in particularly sharing is important.

What about following solution (already implemented on the right side of this page)? After clicking the link "If you like it, share it.", the page element is replaced by different sharing site links which lead to current url submitting.

(Kudos goes to sixtease and his project csobo for the enormous list of share links.)

Theory, fail 1, fail 2 => so now the current (good?) solution. To get to it, I didn't had to develop a new idea, but I had to escape the old idea that the best thing to do for a mobile devices is to send the images in the native screen resolution. This is still true for the older handsets, but not any more for the new age of smart-phones.

The difficulty is not with developing new ideas - but with escaping from the old ones.

It's enough to put following tags to the HTML header:

<meta name="viewport" content="width=640, user-scalable=yes"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="640"/>

and then just optimize the page for 640px width. This works awesome good for recent devices with recent browsers, or in general the browsers that supports the viewport meta tag. Both image and font-size will be adapted to the screen size and the page will look similar on iPhone 3 or 4, iPad, Android 2.x, new MS phones and Opera browser.

So at $work we will still support the old devices that needs image resizing, for the other companies that doesn't have time, budget or an interest, it might be enough to target the recent smart-phones via 640px optimized pages with a proper viewport tag.

After the theory, first wrong solution, here comes the second wrong solution. It's easier one and the JavaScript is used only for iPhone-s where it was also tested. The problem with iPhone 3 and 4 is that both hardware versions are using the same OS and because of that the same user-agent string. So there is no way of knowing which resolution does the device have when the HTTP request comes to the server.

Following two meta viewport tags works fine for all phones besides the iPhone. The first one is when scaling should be disabled, the other when enabled.

<meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes, target-densitydpi=device-dpi"/>

To get the native resolution for the iPhone 4 I had to create a JavaScript that detects 320px vs 640px resolution, sets the cookie and makes a refresh while setting the url parameter so that it also works when cookies are disabled. Then our server-side code has to resize the images properly and update the "width=640" in the viewport meta tag. Still a little complex, right? But works! :-)

Now what are the problems.The fonts can get pretty small as iPhone 4 applies the 0.5 scale and the Androids with high resolution uses the high-densitydpi. And it doesn't work so well for Opera too.

Here is the JavaScript code (much less lines then the previous one):

Updates

Subscribe to the blog updates with an email:

If you like it, share it.

Pages

About this Archive

This page is an archive of recent entries in the Web category.

SysAdmin is the previous category.

Work is the next category.

Find recent content on the main index or look in the archives to find all content.