Tag Archive: HTML5

HTML5 ContentEditable usage

contentEditable and localStorage

The ContentEditable attribute in HTML5 is very useful to those who just want simple and small edit directly in their HTML document without go into the backend. It also can give users the freedom to edit the document the way they want and maintain their edits with the help of Local Storage. This post discusses the second option which uses Local Storage to give users the ability to edit and maintain the document.

Create a new HTML document and type the following code:

<!doctype html>
<html>
	<head>
		<meta charset='utf-8'>
		<title>contentEditable</title>
	</head>
	<body>
		<div id='edit' contenteditable='true'>
			Hello
		</div>
		<script>
			var edit = document.getElementById("edit");
			edit.innerHTML = localStorage.getItem('edit');
			edit.addEventListener('blur', function() {
				localStorage.setItem('edit', this.innerHTML);
			});
		</script>
	</body>
</html>

In the above code, the contentEditable attribute is added to the edit id. It then uses JavaScript to add the localStorage functionality.

One usage tip for contentEditable is that when focused in the contentEditable area, you can select the text and press Ctrl/Command + b, Ctrl/Command + i, and any other keyboard shortcuts for text formatting to format the text as show below.

contentEditable and localStorage

New Blog Title, New Logo

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 Source Code files Directly to your Server without download Locally using PHP copy function

Intro

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

<section id='fileDownloader'>
 <article id='urlForm'>
  <form id='url' name='url' method='post' action=''>
   <label for='urlInput'>The file to be downloaded (URL): </label>
   <input type='text' name='urlInput' id='urlInput' placeholder='URL' size='60' autofocus value="<?=($_POST['submit'])?$_POST['urlInput']:""?>" />
   <br />
   <input type='submit' value='Download' name='submit' />
  </form>
 </article>
 <?php if ($_POST['submit']): ?>
 <article id='downloadStatus'>
  <?php
  if (empty($_POST['urlInput'])): die("Please enter a valid download URL"); endif;
  $path = explode("/", $_POST['urlInput']);
  $fileName = $path[sizeof($path) - 1];
  ?>
  <?php if (file_exists($fileName)): ?>
  This file already <a href="<?=$fileName?>" title="Download file from this server">downloaded</a>.
  <?php elseif (!copy($_POST['urlInput'], $fileName)): ?>
  Download failed. Make sure that the URL is correct.
  <?php else: ?>
  Download completed. You have the option to <a href="<?=$fileName?>" title="Download from this server">download this downloaded file</a> or <a href="<?=$_POST['urlInput']?>" title="Download from the original server">download the original file here</a>.
  <?php endif; ?>
 </article>
 <?php endif; ?>
</section>

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

Questions

If you have any questions regarding this script, leave a comment below. And please don’t spam my server when testing on the test page, If you want to test it on your localhost, you can download the source code here.

Import additional snippets to Bluefish

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 HTML 5 and CSS 3 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 (Updated)

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 HTML 5 and CSS 3 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:

sudo apt-get install bluefish

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.

http://fireftp.mozdev.org/

6 Cool jQuery Animation Plugins

Here is a list of jQuery 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:

window.onload = function() {
var paper = new Raphael(document.getElementById(‘canvas-container’),500,500);

// Face
var face = paper.circle(230,120,50);
face.attr({fill:’rgb(125,240,100)’});

// Left eye
paper.path(‘M 200 100 s 5 -5 10 0′);
var eye1 = paper.circle(205,106,5);
eye1.attr({
fill: ‘#000′
});

// Right eye
paper.path(‘M 250 100 s 5 -5 10 0′);
var eye2 = paper.circle(255,106,5);
eye2.attr({
fill: ‘#000′
});

// Mouth
paper.path(‘M 210 150 s 20 15 45 0′);

// Nose
var nose = paper.path(‘M 225 125 l 10 0 l -5 10 z’);
nose.attr({
fill:’rgb(0,0,255)’
});

// neck
var neck = paper.path(‘M 230 170 l 0 20′);
neck.attr({
‘stroke-width’: 2,
stroke: ‘rgb(255,0,100)’
});

// Body
var body = paper.rect(220,190,20,100,8);
body.attr({
fill:’rgb(255,230,100)’,
‘stroke-width’:2
});

// Left hand
var hand1 = paper.path(‘M 220 200 l -40 80′);

// Right hand
var hand2 = paper.path(‘M 241 200 l 40 80′);

// Left leg
var leg1 = paper.path(‘M 225 290 l -20 50′);

// Right leg
var leg2 = paper.path(‘M 235 290 l 20 50′);

}

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 HTML 5 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:

var ctx = canvas.getContext(“2d”);

// Background
ctx.fillStyle = “rgb(200,255,50)”;
ctx.beginPath;
ctx.rect(0, 0, 500, 500);
ctx.closePath();
ctx.fill();

// Face
ctx.fillStyle = “rgba(125,222,152,0.5)”;
ctx.beginPath();
ctx.arc(200,150,100,0,Math.PI*2, true);
ctx.closePath();
ctx.fill();

// Left eye hair
ctx.fillStyle = “#000″;
ctx.beginPath();
ctx.moveTo(170, 75);
ctx.arc(160,75,10,0,Math.PI,true);
ctx.stroke();

// Left eye
ctx.fillStyle = “#000″;
ctx.beginPath();
ctx.moveTo(170, 85);
ctx.arc(160,85,10,0,Math.PI*2,false);
ctx.closePath();
ctx.fill();

// Right eye hair
ctx.fillStyle = “#000″;
ctx.beginPath();
ctx.moveTo(250, 75);
ctx.arc(240,75,10,0,Math.PI,true);
ctx.stroke();

// Right eye
ctx.fillStyle = “#000″;
ctx.beginPath();
ctx.moveTo(250, 85);
ctx.arc(240,85,10,0,Math.PI*2,false);
ctx.closePath();
ctx.fill();

// Nose
ctx.fillStyle = “rgb(0,0,255)”;
ctx.beginPath();
ctx.moveTo(190, 120);
ctx.lineTo(210, 120);
ctx.lineTo(200, 140);
ctx.closePath();
ctx.fill();

// Mouth
ctx.fillStyle = “#FF0000″;
ctx.beginPath();
ctx.rect(150, 170, 100, 50);
ctx.closePath();
ctx.fill();

// Body
ctx.beginPath();
ctx.moveTo(200, 250);
ctx.lineTo(200, 400);
ctx.closePath();
ctx.stroke();

// Left Arm
ctx.beginPath();
ctx.moveTo(200, 325);
ctx.lineTo(130, 340);
ctx.closePath();
ctx.stroke();

// Right Arm
ctx.beginPath();
ctx.moveTo(200, 325);
ctx.lineTo(270, 340);
ctx.closePath();
ctx.stroke();

// Left Leg
ctx.beginPath();
ctx.moveTo(200, 400);
ctx.lineTo(130, 450);
ctx.closePath();
ctx.stroke();

// Right Leg
ctx.beginPath();
ctx.moveTo(200, 400);
ctx.lineTo(270, 450);
ctx.closePath();
ctx.stroke();

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.