09 March 2013

Leveraging jQuery knowledge, mixing it up with Google Closure and making it sing and dance with Plovr

While adapting to working in a digital agency, coming back from a long visit in software engineering and product development, I obviously want to make the most of it, learning what I need and contributing where I can. One thing that stood out to me is that it turns out that using JavaScript in in the digital agency world basically means using


 jQuery.


Using jQuery has 2 main benefits:
  1. A lot of people use it
  2. A lot of people use it
Which gives that the cross browser support for selectors, events, AJAX and other little things is reasonably up to date and a lot of people are familiar with the API.  This is not at all exclusive to jQuery, but the library is becoming a de facto standard, so why not use it, right?

jQuery is great for small, quick things and it looks like it could be the browser abstraction tool of choice for any project. But, as you might know if you worked in a really large scale project using jQuery, it has a way of infecting syntax and design choices in a way that eventually grows into, let’s call it, soup. Even though I’m sure someone has a different experience, for now, let’s assume


it’s good, but not the answer to everything.


For anyone who had the pleasure to work with large teams the obvious answer to how NOT to end up with soup is spelled OOP and MVC. (Yea, i know, everything is MUCH better with MVP, MVVM, ABC 123, whatever...)

There is an interesting framework that goes in the MVC et al direction;


Closure Library, with


it’s accompanying tools which I used for years and really like(kind of). Closure has crazy amounts of good, smart implementations of things you never even knew you needed, but compared to jQuery the Control-based structure of how you create a GUI is about as smooth and flexible as a wooden horse(not at all).  It’s certainly not like you would want to tell your fellow web-hacking buddies:
– Hey! look at your new shiny horse!

They’ll just tell you it’s not a horse... Anyway, maybe what’s really beautiful, sexy and shiny about Closure is the

Closure Compiler,


which gives you AMAZING code compression and smart replacement of common code patterns. Even though it’s beautiful to work with once you get accustomed to it, it

is not for the restless.


To the rescue, there is a little packaged thingie that actually takes away much of the hassle, forgives you when you do mistakes, and bitch-slaps you when you make boo boo’s.

Plovr,


which is a Java runtime that provides a small web server that includes the Closure Library, some tools and automagic dependency loading(Yes!). It:
  • runs each request through the Closure Compiler
  • allows decent file/folder structure
  • provides for jsUnit testing and use of soy templates
  • loads only what’s required
  • outputs any compiler warnings or errors in the top of the web page
And, it does this more or less out of the box. Put simply, it


saves the day.


Now all we need is a way to make use of it all...


To sum it up,

  • jQuery is good for DOM abstraction
  • Closure Library can bring some amazing parts
  • Closure Compiler brings code checking, magic(almost at least) minification
  • Plovr brings it all together.
OOP, MVC, Observer Pattern, Pseudo-Classical inheritance (look, it just popped in there without even mentioning it before) are proven, solid tools of trade when working on large projects, in large teams, over long periods of time. 


Let’s use the good parts!


Of course, there might be several bright, lean, efficient solutions. Let’s do something that actually works in a an environment of multiple stakeholders, working with all kinds of competences and fitting into given environments that are not always the preferred choice.

Stay tuned ;)

06 March 2013

How to describe and use a multidimensional matrix in JavaScript

If you have a set of rules describing eg what value a certain set of options should give, which I would describe as a multidimensional matrix, using bits to identify the options might come in handy.

Here's a gist to describe the approach:



Have fun!




07 November 2011

Is Spotify evil?

I was using Spotify for a while, the premium version, to get the mobile goodies and I rather liked it...

A while back I saw that they did some joined (joint?..) thing with Facebook and it didn't look really interesting to me as an end user but it did look as a major move in the industry and as a professional, it did catch my attention, at least for a little while.

The other day I got some upgrade and suddenly I couldn't log in. Being used to playing around with Facebook integration of things, I accepted my faith and assumed I just (as always) forgot to read what i agreed to when accepting some licence agreement or whatever. Being a good sport, I clicked what they asked me to do and got into my account, seemingly unharmed by the speed bump some programmer put in my way.

Another few days passed, including some speed bumps and requirement to log in after being idle for a day or two.  Then, suddenly, I got into my account, but my playlists were gone along with favorites etc.
Again, being a good sport and fellow programmer, I just assumed they used the same QA team Skype used last year and tried to find if I did something wrong, or just different for that matter.

After some playing around, sometimes being successful, I finally isolated it..

When I use the same username but with different passwords, I get into my Facebook connected account, or my initial (paid) account. The Facebook one being the empty one and the paid one being the one holding my playlists etc that I actually spent some time setting up.

Obviously, my inconvenience is not the major point here. The fact that Spotify store and use my data in a manner that allows my password to control whether I get into one account or the other, just because they have the same user name is *major understatement ahead* outrageous.

I'm left with one thought: are they evil? or just vastly incompetent?

29 September 2011

How to make sure FB.init is properly finished

When working with the Facebook api, there likely comes a time when you will need to know that FB.init has finished successfully and you can run your scripts to create a wonderful user experience.

Looking into this, it turns out that parts of FB.init runs asynchronously even when using the sync version suggested in the API. This obviously means that you simply cannot trust that your script will work just because you called it after the init call.

To work around this until the Facebook people fix the issue or provide a reliable event or callback, many have suggested various solutions based on timers. A more solid approach can be built around the FB api itself:



Loading FB API asynchronously:


 <script type="text/javascript">
     window.fbAsyncInit = function() {
         /**
          * Workaround for FB.init not being synchronous nor providing a callback method.
          */

         FB.init({
             appId : 'YOUR_APP_ID_HERE',
             cookie : true,
             status : true,
             xfbml : true,
             oauth : true
         });
         FB.getLoginStatus(function(oResponse) {
             if (oResponse.status === 'connected') {
                 // the session is complete, and fully initiated,
                 // go ahead and call your scripts here

             } else {
                 // There was a problem, probably because the user was not logged in,
                 // so put a login sequence or your error handling of choice here

             }
         });
     };
     (function() {
         var e = document.createElement('script');
         e.async = true;
         e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
         document.getElementsByTagName('head')[0].appendChild(e);
     }());
 </script>

Loading FB API synchronously:


 <script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
 <script type="text/javascript">
     /**
      * Workaround for FB.init not being synchronous nor providing a callback method.
      */

     FB.init({
         appId : 'YOUR_APP_ID_HERE',
         cookie : true,
         status : true,
         xfbml : true,
         oauth : true
     });
     FB.getLoginStatus(function(oResponse) {
         if (oResponse.status === 'connected') {
             // the session is complete, and fully initiated,
             // go ahead and call your scripts here

         } else {
             // There was a problem, probably because the user was not logged in,
             // so put a login sequence or your error handling of choice here

         }
     });
 </script>  



14 March 2011

Kinetic scrolling for WebKit on touch devices

When creating a web app for a touch device, one thing that can cause some headache is trying to get the right "App-feeling" with a nice header that stays in place, and maybe even a footer. Since position:fixed is not supported (at least on iPhone Safari) and scrolling inline content is done using the little known 2-finger scroll (which is also without any nice feel to it whatsoever) there is basically 2 options; to implement a header and footer that moves into place when scrolling (like those annoying ads), or to implement scrolling of the "mid-part".

I spent some time on trying to find a good, free sample on how to do the later without success(but I'm sure they are out there). This weekend I got some time to play around so I thought I'd try to implement that sweet scrolling that you get inside an app on the iPhone(or the Android for that matter). A bunch of hours and quite a few curses later I came up with something that works pretty well :)

You can try it out here:
http://webkitjs.org/ScrollElement/

And here's the source code:


Although this is only tested on a Galaxy S running Froyo, it should work well on Safari on iOS (iPad, iPod, iPhone) and most Android touch phones running a fairly recent version. Oh, I tested it on Chrome and Safari on PC and Mac with decent results as well.

Feel free to use and abuse it as you please. Speaking of which, I'm not sure whether to bother putting some really open licensing in there just to clarify. Input on this would be much appreciated ;)