Do not store the window.location or document.location!

So many developer use variable to store some property they use all the time to boost up the performance a little bit or to easier to access because it is in the same scoop.

I just had some problem with the deep linking on iOS5 and found out that there is a super weird problem on it. Everytime I go to some other web pages and come back, the deep linking doesn’t work properly. After I did some tests, I found out that on iOS5, some properties in window/document be replaced by some the new instances. Most of the properties on the list I found are not commonly use. But there is one, you might use it in some cases which is the “location” property.

For example:

var storedLocation= window.location;
btn.onclick = function(e){
  console.log(storedLocation);
}

When you click the button after you open the page, it logs the url of the current page. But every after you go to some other pages and click the back button on your device, the button doesn’t work anymore. Strange~

A comparison table I generated from my test:

How to fix the bug of the broken hash link when using back button on iOS5

If you are using iPAD/iPhone with iOS5 to browse some websites with # deep linking, you will notice that the deep linking will be fucked if you go to other site and come back with your back button.

When you come back to your website, there is no event will be triggered. Here is the monkey patch I created:


if (navigator.userAgent.match(/OS 5(_\d)+ like Mac OS X/i)) {
    window.addEventListener("pagehide", function(){
        setTimeout(function(){window.location.reload()}, 100);
    },false);
}

Since there is no event will be triggered when you come back from the other pages, the solution I have is only adding a setTimeout before you leave the page. You may worry that if the other page took more than 100ms, will it be fucked? No, the function in the setTimeout won’t be triggered until you come back from the other pages in iOS5.

 

But I gotta say that, this is just another hack for iOS and just use it wisely :)

See my new post: HERE

NestToucher.js

I have been super busily working on different projects at firstborn in the last couple of weeks and I finally finished the SoBe.com and squeezed some little time on my own stuff. Then I decided to build a little class to handle the touch events on mobile devices. I just finished it yesterday and published it on GitHub.

Most of the web developers when they try to build a website for tablet devices, touch event is always something hard to deal with. It will never get what you want even if it’s just a hover style on a button. NestToucher.js is a handy tool to help you to deal with this shit and spend your precious time on somewhere else.

So, what exactly does this class do? It simply applies set of touch events on the document to deal with all of the touch events on the screen. Well, you will probably think that the performance will be super slow when you want to apply a couple of hundred touch events to different elements. No worry, I didn’t make an array to store all of the touch events and calculate if the touchXY point is insides the rectangle area of each elements. I simply use document.elementfrompoint() to get the touched element from the touchXY point and bubbles it up until it hits the document. It will then only trigger the elements I want to apply the touch events on. I added a variable in the event variable called touchedTarget which is the target user is touching on and another variable called bubbleHistory which is an array list contains the bubbled elements from the touchedTarget to the target itself.

Cool isn’t it?
Feel free to download it here:
https://github.com/edankwan/NestToucher.js

How to customize your own Google plus one image

I haven’t posted for quite awhile since I got here in New York and start working for firstborn. I think I will work here as a Web developer but no longer a Flash developer even though my title is a Flash developer when I got hired.

Now let’s cut to the chase – How to customize your own Google+1 image. Well, I am not saying to teach you how to design a Google Plus image that links back to your Google+ profile. I mean the Google+1 button you can create here

The sizes of the button you can create are as following:

Well, it is true that here is no solution to change the image of the button because the image is in the iframe that everything is from the Google. However, if you want to do some adjustment of the image just like this project I made for Sony, I think this post can help you.

As you might notice that, the Google Plus button in that project are all rounded square. Which make it looks better together with the other social icons like the facebook icon and the twitter icon. How did I make it?

First of all, you need to create a new image for the google plus, I created this:

Well, there are some rules to create your customized button:

  • You can only design the border of the button.
  • You have to leave the rectangle area in the center of your image for the real button.

The image I create above is 20 x 20 with 1 pixel border on left, bottom and right sides and 3 pixels color bar at the top. The clickable area of the button will be at (1,3) with the size 18×16. Therefore, I made the following style sheet and html code:

#container {
  position: relative;
  width: 20px;
  height: 20px;
  background-image: url(button.png);
}
#button-mask{
  position:absolute;
  left: 1px;
  top: 3px;
  width: 18px;
  height: 16px;
  overflow: hidden;
}
#button{
  position:absolute;
  left: -9px;
  top: -6px;
  width: 38px;
  height: 24px;
}
<div id="container">
  <div id="button-mask">
    <div id="button">
      <g:plusone annotation="none" href="http://devblog.edankwan.com/"></g:plusone>
      <!-- Place this render call where appropriate -->
      <script type="text/javascript">
        (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>
    </div>
  </div>
</div>

I chose the standard size of the button on http://www.google.com/webmasters/+1/button/. Which is 38px by 24px and the “+1″ looks just perfect in that 18×16 clickable area. I simply create a couple of divs to contain the g-tag and teh javascript of the Google Plus 1 button and adjust the position and size of the div. Then using overflow to crop the button to fit in your customized button image. Then it’s done!

Well, it’s not a perfect solution for this issue but since Google doesn’t provide any API for this and sometimes all you want is adjusting the size of the Google Plus button and change the image for a bit. This post might help.

Customized Google Plus 1 Button Demo

How did I make “Music Can Be Fun”? Part 1

Thanks to Microsoft for holding this HTML5 contest, it encouraged me to come out of my comfort zone from Flash into HTML5.  I guess there are a lot of Web/Flash developers are struggling to try HTML5 like I was. So, I would like to share my experience of building my first HTML5 app here as a former Flash developer and hope that it helps someone who really wants to learn it.

 

Get the best IDE you like

To get started with HTML5, I needed to find the best free IDE that suits me well. I tried different IDEs and I end up using Visual Studio 2010 express. Using VS to write javascript seems a bit heavy compares with other code editor like Notepad++ but I personally really like its excellent Intelligence (code hints) supports. It is all up to you to choose the IDE you feel comfortable with and I am not going to write an article on “Eclipse vs Visual Studio vs Aptana” here. Just try them all and pick the one you like.

Your own library

I guess every web developers use jQuery and to be honest, I just tried it after I completed my app and it is amazingly convenient for JS development and I should use it in my app to save up some time. But anyway, I used my own library for my app and it suits me just fine. Well, I am not a JS hero who can give a lecture to someone but if you are a beginner developer and want to improve your skills and become an amazing developer, one thing you really need to learn – to build your own library. Because when you build your own library, you will know what is it going on behind the mask. Just get started with building a loader or a tweener is always a good idea.

 

IDEA?


When I started thinking about the idea of the app, I immediately thought of using an ink effect I did in Flash but which is not the one you saw in the final “Music Can Be Fun”. It used Perlin Noise + Blur effect + Displacement effect to achieve some realistic ink effect. Then I began searching the functions or libraries I need online and I found a library - BitmapData.js by Peter Nitsch and a class – StackBoxBlur by Mario Klingemann. Then I modified their codes and create my own displacement class, it works just great but the performance is just too slow because it takes time to draw large imageData on the canvas. I got less than 10 fps on a fix 720 x 480 size canvas. Then I decided to give it up but just using a simple ink effect which you can see on “Music Can Be Fun”.

 

Drawing a line with dynamic width

In order to make the realistic ink effect, I need to draw a line with dynamic width according to the mouse movement. As you all might know that, you can’t really draw a line from point A with 10px width to point B with 15px width using the native canvas function. So…. What is the solution?

1. You can get the points by tracking the mouse positions P2>P1>P0 and draw a line like in picture 1.

2. By angle P0P1P1b = angle P2P1P1b, you can easily find the positions of P1a and P1b. But you may notice that in order to find the angle P0P1P1b, you need P0, which means you can’t draw the point P0a and P0b until you track a new mouse position. So you can use the function Math.atan(P2y-P1y, P2x -P1x) to get an estimated angle before that.

3. As all you may know that, there are 2 kind of curves in HTML5  - Bezier and Quadratic. I use quadratic curve in my app because it only requires one control point to draw a curve which is easier and faster. To find the positions of those control points of p1b, you need to get the angle of P0b to P2b:

var distance =Math.sqrt((_p0ax - _p1ax)*(_p0ax - _p1ax) + (_p0ay - _p1ay)*(_p0ay - _p1ay));
var angle = Math.atan2(_p0ay - _p2ay, _p0ax - _p2ax);
_p1cax = _p2ax + Math.cos(angle) * distance;
_p1cay = _p2ay + Math.sin(angle) * distance;

In the Part 2, I will talk about the interface and the other visual effects I used on “Music Can Be Fun”.

My first HTML5 site for a contest

Hi everyone, I just made a HTML5 site for a contest. I used the idea of “Labuat” to play with the music and merged it with a mini game. To be honest, there is nothing surprising if you are looking for something new and interesting. But it is my first HTML5 experiment and I wanted to explore the possibility of using HTML5 to replace Flash completely.

Well, it seems that the performance of canvas redrawing is quite low if you are not using Internet Explorer 9 because of its hardward acceleration. Seriously, I am really surprised that IE can finally do something better than Firefox and Chrome.

I haven’t minified the source code so feel free to right click and see the source if you are interested. But I have to say I am a very beginner of Javascript and HTML5. I don’t even know how to use JQuery yet but I will definitely spend some time on it if possible.

My submission link:
https://microsoft.promo.eprize.com/ie9app/gallery?id=268

Labuat:
http://soytuaire.labuat.com/