In their own words:

CloudFlare’s caching moves your static content (images, css, javascript, etc.) closer to the visitor who is requesting them. They have data centers scattered across the network. When someone requests your page, they are able to return images directly from the cache server that is closest to the visitor. They also optimize the network route based on the visitor in order to make the content’s return extremely quick. As a result, they’re able to significantly decrease both bandwidth and the amount of server load returning static files. They do not cache html so if you make changes to the content on your site, the changes will appear immediately.

After implementing CloudFlare on designfission – which is hosted on Arvixe.com. I’ve seen markedly improved page loading times from Singapore.

CloudFlare isn’t just a CDN that distributes content though, it also provides analytics and basic security features like IP or Country based blocking. For the full list of details, visit https://www.cloudflare.com/plans.html.

Taking into consideration that this is a FREE service, and it requires NO code, it’s definitely worth considering trying out CloudFlare yourself.

The installation was built using Arduino, a Sharp sensor, Clickatell’s SMS service and the Flash framework as3glue. When a person passes by the sensor, Arduino reads the data, and transfer it to Flash via serproxy, Flash then will trigger a HTTP call to Clickatell’s web service to send out SMSes to 3 Nokia phones placed on the walls of the event space.

Here’re some pictures of the making of and the event space. Enjoy!

As you all know, ThickBox is no longer under development since 2007, the next popular alternative to take over the reigns of ThickBox seems to be ColorBox, and so I’ve done a new tutorial to do the same thing with ColorBox.

There are a few things that remain the same from the other example.

Step 1: Prepare your HTML.

Include the source files to ColorBox’s CSS, and Javascript files, as well as the original jQuery JS files.

Insert in the tags of your HTML:

<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>

Step 2: Insert the Flash

Using SWFObject, insert Flash in your HTML and remember to set the following 2 parameters: “allowScriptAccess” to “always” and “wmode” to “transparent“.

Insert in the tags of your HTML:

<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>

Insert in the tags of your HTML:

<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="200">
  <param name="movie" value="colorbox.swf">
  <param name="quality" value="high">
  <param name="wmode" value="transparent">
  <param name="swfversion" value="6.0.65.0">
  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
  <param name="expressinstall" value="Scripts/expressInstall.swf">
  <param name="allowscriptaccess" value="always">
  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="colorbox.swf" width="550" height="200">
    <!--<![endif]-->
    <param name="quality" value="high">
    <param name="wmode" value="transparent">
    <param name="swfversion" value="6.0.65.0">
    <param name="expressinstall" value="Scripts/expressInstall.swf">
    <param name="allowscriptaccess" value="always">
    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    <div>
      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
    </div>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>

Step 3: Prepare the Javascript Function

Because ColorBox does some parsing of the Javascript functions and ExternalInterface doesn’t seem to be able to call functions with the dollar sign in them. What I’ve done here is to create a simple javascript function and use Flash to call this very function.

Insert in the tags of your HTML:

<script>

	function launchColorBox(url){
		$.colorbox({href:url,width:"80%", height:"80%",iframe:true});
	}

</script>

Step 4: The Flash Code!

The final step is to actually reuse the Flash Code in my previous version, making only slight changes. Create a button with the instance name “btn1″ and put the code in the first frame of your Flash file.

stop()
//Imports the ExternalInterface Class
import flash.external.ExternalInterface;

//Adds the CLICK eventlistener to the button btn1
btn1.addEventListener(MouseEvent.CLICK,openColorBox)

//Launches the JS function that we created earlier.
function openColorBox(e:MouseEvent){
	ExternalInterface.call("launchColorBox","http://www.google.com");
}

You can view the demo here and download the source files here.

I’m posting this using the extremely fast Google Chrome, Google’s latest product – a web browser.

I’m just going to make this a short one and list down some first impressions and things I’ve noted while using it for the past 30mins.

Firstly, the browser is extremely fast when rendering pages! Even faster than Firefox in fact. Booting up the browser for the first time, Chrome prompts you to transfer your bookmarks/passwords/everything from Firefox. And everything they transferred alright. Even the history! Installation was fast, easy, and required little to next prompting.

Now, the first thing that prompted me to make a post is, Chrome doesn’t require users to install Flash as a plugin. Flash works right out of the box. I’m not sure if it’s because I already have Flash installed on Firefox or IE. But on my experience with Firefox, I still need to install the plugin even if I have installed it in IE. And vice versa of course.

This is a sweet little move that shows how much Google supports RIA in their browser.

Next, there’s this sweet little option called the “Create application shortcuts…”. Again, another feature to make RIA “more in sync” and working more like desktop applications. I can create a shortcut for my blog’s admin page, and you can choose to make it appear in Start/Desktop or Quick Launch. Works just like a application – even though IE’s shortcut URLs do the same thing. I guess Google made it sound much nicer – Application shortcuts. =P

Opening a new tab gives you 5 thumbnails of your Most Visited pages. A very handy feature that I never thought I would have need.

Lastly, I tried to access a music site which requires IE due to DRM reasons. And sadly, it still doesn’t work for Chrome as well. What is interesting though, is that the javascript that website is using seem to detect Chrome as Apple’s Safari on Windows.

Take a look for yourself: Nokia Music Store

Other things worth mentioning that perhaps you would have known by now is, tabs appear on the top of the address bar for Chrome, instead of under it. I don’t really see the benefits of this little change in the layout of the UI yet, but after more use, maybe I will prefer/hate it compared to the usual below the address bar tabs.

Conclusion
Chrome is fast becoming a replacement of Firefox for me. What it lacks right now, is the amount of Add-Ons that Firefox has. Time will tell if Chrome will replace Firefox completely for me, but for now, Chrome has impressed me a lot. It’s definitely made a good first impression.

Edit:
Chrome still doens’t support Java integration. That means that iBanking doesn’t work, and so does some upload managers for photo websites that uses Java.

And there is a new incognito Window thing, this is a very useful window to use if you’re in an internet cafe or in office!

http://www.designfission.com/comex2007