Tag Archive: HTML5

New Blog Title, New Logo

Note: As this post was written long time ago, I’m currently use Mac OS on the MacBook Air. Until I find a stable way to run Ubuntu on my MBA, I will stick to use OS X.

As you already saw, I changed the title for this blog from “Robby Chen Personal Blog” to “Ubuntu Web Coder “as well as the logo.

One reason for changing the blog title is because I’m going to stick to Ubuntu, specifically Lucid Lynx (10.04.1), since I depend on some PPAs to get the updates. Maverick Meerkat (10.10) just doesn’t work for me. I will wait until Natty Narwhal (11.04) is out and see. If this still won’t work for me, I will stay with 10.04.1 and wait for the next release… Anyway, you get the idea.

As most of you who read this blog in the past know, I used to write code in Netbeans until I discovered the hidden potential of gedit for being such a good IDE. That’s why I abandoned Netbeans and replaced with gedit in the new logo. And I renamed blog title specifically to “coder” because I would like to try writing the code in each post from now on.

Besides the gedit logo in the new logo, I have also included two groups of logos, GNU/Linux and PHP. The GNU/Linux logos include Linux penguin, Chrome OS, Android, and Open Source. The PHP logos include PHP, CakePHP, and WordPress. I also included just released HTML5 logo created by W3C. I regularly use these tools and talked and will continue to talk about them in this blog. That’s why I included them in the logo.

What do you think about the new logo, blog title, and background color?

Download WordPress and Other files Directly to your Server with PHP copy



When I tried to get the development environment working with Chrome OS (CR-48), I thought since Chrome OS is primary working for the cloud, why am I downloading, editing, and testing the website files locally? I found out that my hosting provider, iPage, offers a file manager and a basic text editor to manage and edit my PHP files, and since I use gEdit as my main code editor, I’m pretty comfortable with the text editor.

Basic code editor

The basic code editor available in the control panel

I shortly found some useful file operation functions on the official PHP document, one of them is copy. According to its documentation, the source and destination can both be URLs since 4.3.0. This means that I can download the code from another website directly to my server using the server resources. I wrote a test page to test this function and it worked without problem.

The Code

Note that I’m just starting to learn HTML5, so I can’t guarantee the above syntax is correct.


If you have any questions regarding this script, leave a comment below.

Import additional snippets to Bluefish

Bluefish IDE

Update (12/5/2010): As Matt pointed out in the comments section below, you need to replace HTML code for the special characters with raw characters during the import process. For example, replace &lt; with the less than (<) character. Scroll down for more information on the replacement process. Thanks, Matt.

In the last post, I talked about the snippets plugin in Bluefish that allows me to import HTML5 and CSS3 tags as well as other languages for reference and reuse purposes. This time I’m going to show you how to import the snippets from the Bluefish wiki into the Bluefish snippets menu.

    1. First, go here to copy the xml code of your choice. Make sure not to copy the <pre> tag.
    2. Paste the copied code into a text editor and save as a xml file.
      Update (12/5/2010): Make sure to use the Find and Replace feature in your text editor to replace all the HTML code for special characters with the actual characters. Here are some common ones (HTML code is in the parentheses): < (&lt;), > (&gt;).
    3. Start Bluefish and switch to the third tab on the left side bar which looks like the following:

  1. Right-click inside the left-side bar and choose Import.
  2. Select the xml file you just saved and click Open.
  3. If the xml code was copied correctly, there should be a new branch appear inside the left sidebar.
  4. Right-click the newly created branch and choose Edit snippet to change the displayed name if you want.
  5. Now you can browse through the code snippets and hover the cursor over one element to learn more about the new tags of HTML 5.

Switching my Development Environment to Bluefish

Bluefish IDE

Update (10/15/2010): It seems that the snippets plugin for Bluefish is just used for reference and reuse of code. It doesn’t affect the auto-completion feature, which disappoints me. However, it could help me to learn new HTML5 and CSS3 techniques.

I had always used NetBeans for my only web development environment for a long time. Today when I tried it on the netbook and felt a little sluggish. Perhaps it’s because it is a multi-purpose IDE – PHP, Java, C, and Ruby. I don’t use many of its features, such as upload and compile/run, because I use FireFTP and command line to upload and compile code. These features are waste of RAM space and I think that’s the cause to slow down the system.

Therefore I tried to search for a light-weight web development IDE for GNU/Linux and found Bluefish. It has the features I need for a perfect IDE to develop web applications. The auto-complete and spellcheck are two of my most used features. It also has the snippets plugin which I think it is used to add more tags support for the auto-completion feature, such as the HTML 5 tags add pre-defined tags for the reuse purpose.

Bluefish starts up on my netbook very fast. It also runs very smoothly compare to the NetBeans. I enjoyed using it so far. To install Bluefish, type the following command:

It should be placed in the Programming section after installed it.

By the way, it appears to also support the C language according to the snippets, although I have not test it yet.

Please share your thoughts in the comments section on how does the Bluefish IDE work for you.


6 Cool jQuery Animation Plugins

Here is a list of jQuery animation plugins that I found over here (each link below links to the demo page of the plugin):

  1. Blend (http://colorpowered.com/blend/)
  2. Sexy Curls (http://elliottkember.com/sexy_curls.html)
  3. Roundabout
  4. Flip
  5. Quicksand
  6. JQZoom

I personally think that Flip jQuery plugin is best to replace Flash with JavaScript. In the near future, there will be many creative animations written in jQuery. I believe that Flash will be replaced by jQuery and HTML 5 video.

For more information about each of the above plugins, please read the original article.

Draw vector graphics using JavaScript with Raphael JS Library

Raphael JS JavaScript library includes features that are similar to HTML 5 Canvas element JavaScript. However, it’s missing some of the functionality that Canvas has. In my test, Raphael JS doesn’t support RGBA color scheme, it only supports RGB. Its drawing technique is followed under SVG specification, which means that it could work on older version of browsers, including non-SVG and non-HTML5 compatible browsers. Here is my stick finger demonstration using Raphael JS library:

Click to view the original page (http://robbychen.com/vectorJS/)

Here is the source code:

As you can see, the code is much cleaner than HTML 5 canvas JS code. The documentation page for Raphael JS JavaScript library is very compact. It provides an example for each topic. It is very easy to read. Also note that it provides animation effects just as jQuery, including translate/move, scale, rotate, transform, as well as other effects. However, it doesn’t provide the explanation and an example for how to draw an arc. Instead, it provides a link to the SVG specification page on W3C website in order to discover how to do it yourself. Fortunately, after numerous trials, I finally have perfect eye hair for the stick figure demo. You can visit this section on the SVG specification to find out how to draw an arc. Remember to always experiment with them by writing your own code.

Learning HTML5 Canvas

Recently, I’m interested in learning about the use of HTML 5 canvas element. The canvas element in HTML 5 simply uses JavaScript to draw pictures and animations, as well as develop games. It basically uses setTimeout or setInternal JavaScript function to create an animation in the canvas element. This feature is available on all modern browsers, except Internet Explorer.

I followed some basic tutorials on the Mozilla Developer Center website and created the simple image below:

Click the image to enlarge (http://robbychen.com/canvas/)

I wrote the following JavaScript statements to form the picture above:

As I commented out the code for creating various parts of the image, the basic code structure for each part is very easy to understand. The getContext function on the first line of the code is to get the dimension of the image I’ll be creating. The fillStyle function is to give shapes different colors. The beginPath function begins with a new shape. The rect function is to draw a rectangle on the page. The closePath function is to connect the lines together to form a shape. If you want to draw multiple lines that don’t connect together, you simply don’t put the closePath function at the end of the process just like I did to the left and right eyes hair. The fill function simply fill the shape using the color specified in the fillStyle function. The arc function draws an arc on the page. You can draw a circle using this function as well. The lineTo function draws a line on the page.

You can read more about these functions as well as other functions that used on the canvas element at WHAT Working Group website.

Anigma, an online game created Using CSS 3 and JavaScript

As a web developer, I think playing games is a waste of time. However, during the search for more CSS 3 tutorials, I found an interesting online game called Anigma. It is CSS 3 and HTML 5 based puzzle game. The game uses HTML 5 for the background audio, CSS 3 for the animations in each level, and JavaScript for loading the gameplay levels.

This game is created using the latest specification of HTML and CSS. It uses CSS 3 transition and animation effects for the page animation, HTML 5 for playing game audio. It also uses JavaScript to dynamically load the data for each gameplay level from .level files.

As stated on the game homepage, it’s an open source game. The source code for the game can be freely downloaded. Its source code is available at http://github.com/icefox/css3anigma.

Right now Anigma is only available for Chrome and Safari Webkit-based web browsers. However, I believe that it will become cross-browser compatible in the near future. HTML 5 and CSS 3 are already used by web designers and developers. More online games based on CSS 3 and HTML 5 are expected to come as the popularity of these two web standard languages increase. Furthermore, it will be the best alternative to Flash for some web developers who hate Flash.

CSS 3 Rounded Corner Effect and its Problem

CSS 3 is the next version of CSS. It introduces many cool effects for web developer to use. I learned about CSS 3 long time ago, but had never tried it. As I read more and more about CSS 3 and HTML 5 tutorials around the web, I decide to try to learn CSS 3 first. The problem with CSS 3 and HTML 5 is that Internet Explorer doesn’t support these specifications. My personal solution to this problem is to display a warning message through PHP to encourage IE users to completely give up Internet Explorer and switch to other browsers.

When I first learned about CSS 3, I felt that the language is harder to learn than CSS 2. In fact, it is easier to understand once I tried it through hands-on. As far as I know, CSS 3 relies on two different engine: Mozilla and Webkit. That means that to make it cross-browser compatible (except IE), I need to add two CSS properties with same values but slightly different property names. One for the Mozilla engine, another for the Webkit engine. For example, the following produces a black rectangle that has three rounded corners with drop shadow:

Below is the result:

The problem with this effect is that it only displays the rounded corners as a background image. When I add content inside this div tag, the content overlays above the rounded corners instead of appear inside of the corners, as the following screenshot illustrates:

I haven’t found the solution to this problem yet, but I think I will find the solution eventually as I go through CSS 3 tutorials one by one. To learn more about the properties mentioned above and other CSS 3 properties, just google “CSS 3 tutorials“.