n3g - Niclas Norgren's WebLog

Is Spotify evil?

2011-11-07T22:45:00.001+01:00

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?

How to make sure FB.init is properly finished

2011-09-29T23:39:00.000+02:00

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>

Kinetic scrolling for WebKit on touch devices

2011-03-14T23:01:00.034+01:00

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 ;)

How to use WebSockets in the iPhone

2010-10-04T22:04:00.002+02:00

Remy Sharp put together a way to use WebSockets in PhoneGap Projects. If you're into doing things the web way, check out the recipe here.

How to write HTML, the JavaScript way.

2010-09-30T07:41:00.028+02:00

Did you ever wish you could write HTML and JavaScript at the same time? Well, I did. The other night I got a bit creative and set out to try to create something neat, and maybe even useful. I'm not sure about the usefullness, but I do think the way it turned out is rather neat :)

The syntax I wanted to use was kind of a mixture of object notation and HTML structure like this:


DIV(
   {
      id: "myDiv",
      onclick: function(){ this.add(DIV("Some text")) }
   },
   P( "Click me!" ),
   HR()
);

And, after some playing with it, here is the source code to make that work:

You can try it out here: http://n3g.net/SimpleElement/

It should work for most HTML tags and basic things like style work pretty well actually. Obviously, this is in no way complete and for large projects it is probably a mess. As a base for creating reusable code for small projects that are basically about putting some HTML mixed with JavaScript and hooking a few things up it might be very handy.

In most cases, one would likely want to add methods to remove or temporarily hide the elements, putting some animation in there and so on but as it would quickly grow out of hands, becoming yet another attempt to handle life, universe and everything, I'll leave it for you to fill in the gaps ;)

Some more on InfiView - Layers Feature Presentation

2009-10-20T09:55:00.001+02:00

Johan created another nice video. This time on the InfiView Layers feature. Check it out at http://www.youtube.com/watch?v=ep21_JIJP44

Time to check out InfiView

2009-09-18T15:20:00.003+02:00

We haven't gone mad, or maybe a bit... InfiView is now free! So now would be a good time to check it out ;)

Get it at http://www.infiview.com/download/

oh, and don't forget to check out the nice video Johan put together on youtube.

Free Gauges with C#

2009-03-23T18:01:00.002+01:00

Johan just posted a nice article on using Bindows Free Gauges with ASP .NET over at the Bindows Blog. Check it out »

IE8 release today

2009-03-19T10:26:00.002+01:00

In case someone missed the news, IE8 is scheduled for release this afternoon (CET).
You should be able to download it after 17:00 CET at http://www.microsoft.com/ie8

Amazing flashbacks from -99

2009-03-19T10:07:00.003+01:00

Some people have been playing around with Chrome, a lot... there are some really awesome samples over at http://www.chromeexperiments.com/. It's fun to see how much, and little, changed since -99 :)

Unsyncronized Asynchronous Communication

2009-03-14T07:13:00.009+01:00

A: Can we go now?
N: So, do you think skiing is fun?
A: That looks like a running boy
N: Where?
A: I want to ski more
N: Ahhh, there. Do you see that he's holding a torch?
A: I think we should go NOW
N: Ok, lets go
A: It looks like he's holding a something
N: Who?
A: The boy with the torch

Bindable properties in Bindows 4

2009-02-26T13:18:00.014+01:00

One nifty thing introduced in Bindows 4.0 is the BiProperty. It enables you to:

- add a property to an instance which throws a change event when the value changes
- set the location of the property, so you can also wrap any other property with it
- use the new name scopes when naming and setting location pointers.

Using these together with the Actions (the end result of Managed Asynchronous Execution Threads), one can in a fairly straightforward way create some simple logic.

Some samples:
Sample 1 - ( XML source )

Sample 2 - ( XML source )

Sample 3 - ( XML source )

Just made the world a bit prettier...

2009-02-26T13:13:00.005+01:00

For quite some time now, I’ve been working on improving the looks of Bindows. Check out this post in the Bindows Blog

Good times for JavaScript Object Notation(JSON)

2008-10-28T09:34:00.008+01:00

One hurdle in writing good, well performing AJAX applications is the parsing of data. One way of trying to improve the performance has for a long time been to use JSON in the transport layer. While being pretty efficient, and reasonably well supported in server side implementations, the perfomance of serializing/deserializing large JSON objects in the client side has left much to wish for.

Luckily, this is about to change :)

The Mozilla guys have implemented a native JSON parser and will be exposing that to use with JavaScript in coming releases. Furthermore, IE8 beta 2 features a native JSON parser. Now we can just hope that the WebKit guys follow the trend ... Google Chrome with a built in JSON parser would likely rock ;)

IE8 Blog: Native JSON in IE8

Moz JSON support

Managed Asynchronous Execution Threads

2007-11-30T20:36:00.000+01:00

Lately I've been working on a model to describe execution flows in Bindows markup. The simple idea was to remove the need for using JavaScript when defining application logic.

One of the first problems I faced was the dual nature of executions depending on whether they are synchronous or not.

Consider the following: A.value = B.value = C.value

In a synchronous thread, A gets the value of B that gets the value of C.
The requirement here is that A knows about B that knows about C.

In an asynchronous thread, C sets its value on B that sets its value on A.
The requirement here is that C knows about B that knows about A.

In both cases the expression is interpreted first from left to right (parsing), then right to left (execution). For asynchronous threads to work, each instance needs to maintain information about what preceded it in the parsing since asynchronous means that the thread breaks after the parsing.

Looking closer at this, I realized that always satisfying the above described dependencies could give a straightforward, flow based way of describing an action sequence in XML, regardless of asynchronous dependencies. This is when things really started getting interesting…

A.value = B.value = C.value could be described as:


<A>
   <value>
      <B>
         <value>
            <C>
               <value>
                  .. my value ..
               </value>
            </C>
         </value>
      </B>
   </value>
</A>

When the above is deserialized, the parent/child relation is the same as the left/right relation earlier described. Applying a parent property to each instance gives enough for successfully being able to traverse the dependencies in either direction.

Here is a small test where toString represent the normal case and returnValue represent the callback of an asynchronous dependency:


Object.prototype.toString = function (){
   return this._value.toString();
}

Object.prototype.returnValue = function () {
   if ( this.to_the_right_of )
      this.to_the_right_of.returnValue()
   else
      alert( this._value )
}

A = {}
A.to_the_right_of = null // parent relation

A._value =
B = {}
B.to_the_right_of = A    // parent relation

B._value =
C = {}
C.to_the_right_of = B    // parent relation

C._value = ".. my value .."

// left to right (sync)
alert( A )

// right to left (async)
C.returnValue()

I'll elaborate more on this later, but today we release the Bindows implementation. Check it out in the Bindows™ 4.0 (beta) or in the Bindows™ blog (http://blog.bindows.net/?p=65)

Taking charge of replacing in JS

2007-06-19T11:04:00.000+02:00

One of the less documented features of regular expressions in JavaScript is the replacement string in a replace statement and how you can play with it.

Let's say you want to replace "a" and "b" with "c". Typically, you would do something like this:

var s = "a b c";
alert( s.replace( /[ab]/g, "c" ) ); // which would give "c c c"

But what if you want to take some more control of the output? This is where we plunge into the world of the replacement string (the second argument of String.replace()).

As you probably know, you can use $[n] to reference parenthesized substring matches

var s = "a b c"; alert( s.replace( /([abc])/g, "$1$1" );// would give "aa bb cc"

but if you want to use some more rules, the regexp likely gets a bit hairy. Let's say you want to surround any number(0-9) with parentheses and turn a-z into uppercase, now would be the time to use some function, right? What we can do is to use a function reference as the second argument to .replace like this:

function getReplaceString() { var arg = arguments return arg[1] ? arg[1].toUpperCase() : '(' + arg[2] + ')' ; } var s = "a b c 1 2 3"; s = s.replace( /(?:([a-z])([0-9]))/g, getReplaceString ); alert( s ); // would give "A B C (1) (2) (3)"

Neat, huh?