Ajaxian » Tutorial http://ajaxian.com Cleaning up the web with Ajax Tue, 22 May 2012 21:45:06 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 CSS 3 Live: Progressive Enhancement http://ajaxian.com/archives/css-3-live-progressive-enhancement http://ajaxian.com/archives/css-3-live-progressive-enhancement#comments Tue, 14 Sep 2010 12:00:33 +0000 Brad Neuberg http://ajaxian.com/?p=10265 From SitePoint comes a nice series of videos on CSS3, called CSS Live. Here’s one on Progressive Enhancement when using CSS3 features:

]]> http://ajaxian.com/archives/css-3-live-progressive-enhancement/feed 4 Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5 http://ajaxian.com/archives/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5 http://ajaxian.com/archives/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5#comments Thu, 09 Sep 2010 10:30:35 +0000 Brad Neuberg http://ajaxian.com/?p=10177

Our very own Christian Heilmann has posted a tutorial on creating a fancy sticky note effect using CSS3 and HTML5:

He breaks it down in five easy steps to produce the final following demo:

]]> http://ajaxian.com/archives/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5/feed 0 Extending HTML5 http://ajaxian.com/archives/extending-html5 http://ajaxian.com/archives/extending-html5#comments Wed, 01 Sep 2010 10:30:57 +0000 Brad Neuberg http://ajaxian.com/?p=10128 Read the rest...]]>
Google Rich Snippet
Oli Studholme has an excellent new article on HTML5 Doctor on the different ways HTML5 can be extended with things like microformats, the link tag, and more. Why would you want to do this?

While HTML5 has a bunch of semantic elements, including new ones like <article> and <nav>, sometimes there just isn’t an element with the right meaning. What we want are ways to extend what we’ve got, to add extra semantics that are machine-readable — data that a browser, script, or robot can use.

First, he starts with the options HTML4 gave us and what options we now have with HTML5:

There were five fundamental ways we could extend HTML 4:

  • <meta> element
  • class attribute
  • rel attribute
  • rev attribute
  • profile attribute

In HTML5, rev has fallen by the wayside, becoming obsolete since hardly anyone used it correctly, and because it can be replaced by rel. profile is also obsolete, and there is no support for namespaces in HTML5. However,<meta>, class, and rel are all in HTML5. In fact, <meta> now has spec-defined names and a way to submit newname values, and rel has several new link types defined in the HTML5 specification and a way to submit more too.

Even better, WAI-ARIA’s role and aria-* attributes are allowed in HTML5, and HTML5 validators can check HTML5+ ARIA. Other new methods of extending HTML5 include custom data attributes (data-*), microdata, and RDFa. Guest doctor Chris Bewick introduced us to HTML5’s new data-* attribute system, which is perfect for adding private custom data for JavaScript, and we’ll no doubt meet microdata and RDFa sooner or later.

Finally there are microformats. As Dr. Bruce touched on microformats in his article on the <time> element, let’s delve a little deeper into what microformats are and how to use them in HTML5.

Oli then does a great deep dive of microformats, going over the different ones defined by the community to date (there are 33 microformat specifications!) and covering some of the common patterns that you can use if you need to roll your own microformat. If you’ve been wondering how to use things like hCard, hCalendar, XHTML Friends Network (XFN), etc. in your own systems then definitely give this article a gander.

[via John Allsop]

]]> http://ajaxian.com/archives/extending-html5/feed 3 View Source Tutorial: Content Site Using HTML5 Canvas + CSS3 http://ajaxian.com/archives/view-source-tutorial-content-site-using-html5-canvas-css3 http://ajaxian.com/archives/view-source-tutorial-content-site-using-html5-canvas-css3#comments Mon, 30 Aug 2010 10:00:56 +0000 Brad Neuberg http://ajaxian.com/?p=10022 Via Phil Franks comes an interesting HTML5/CSS3 site for There Studio, which is a kind of coworking space in London:

The site itself has a number of circles with information bouncing on the screen that respond to mouse clicks and moves.

Let's crack the site open using View Source and see how they are doing things. First, they have a repeated background with a little plus symbol with the following style rule on the <body> tag:

PLAIN TEXT
CSS:
  1.  
  2. background: #ddd url('../images/bg.gif') 50% 0 repeat fixed;
  3.  

The textual content in each of the circles is clean semantic HTML that is search engine friendly:

PLAIN TEXT
HTML:
  1. <div class="section who first">
  2.   <h3>Who</h3>
  3.   <p>Creatives, makers, thinkers <span class="ampersand">&amp;</span> doers</p>
  4. </div>

To turn that into this:

The <h3> is first transformed into having an underline with the padding and margin being on the bottom:

PLAIN TEXT
CSS:
  1.  
  2. h3 {
  3.         border-bottom: 1px solid #ccc;
  4.         display: block;
  5.         font-size: 25px;
  6.         font-weight: normal;
  7.         padding: 0 0 10px;
  8.         margin: 0 0 8px;
  9. }
  10.  

JavaScript creates the circle. The script tags themselves are at the end of the HTML page at the bottom of the <body> tag, a good performance practice in general.

The heart of drawing each circle is in the createBall and createContentBall methods. If a ball will have HTML content, then the createContentBall method is used, otherwise the createBall method is used. Let's look at the createContentBall method; we'll break it down:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. function createContentBall(className,size,color,html) {
  3.   var element = document.createElement( 'div' );
  4.   element.className = className;
  5.   element.width = element.height = size;
  6.   element.style.position = 'absolute';
  7.   element.style.left = -size + 'px';
  8.   element.style.top = -size + 'px';
  9.   element.style.cursor = "default";
  10.   canvas.appendChild(element);
  11.   elements.push( element );
  12.   var circle = document.createElement( 'canvas' );
  13.   circle.width = size;
  14.   circle.height = size;
  15.   if (className !=='image' && className !=='image first') {
  16.     var graphics = circle.getContext( '2d' );
  17.     graphics.fillStyle = color;
  18.     graphics.beginPath();
  19.     graphics.arc( size * .5, size * .5, size * .5, 0, PI2, true );
  20.     graphics.closePath();
  21.     graphics.fill();
  22.   }
  23.   element.appendChild( circle );
  24.   content = document.createElement( 'div' );
  25.   content.className = "content";
  26.   content.onSelectStart = null;
  27.   content.innerHTML = html;
  28.   element.appendChild(content);
  29.   if (className !=='image' && className !=='image first' ) {
  30.     content.style.width = (size - contentPadding*2) + 'px';
  31.     content.style.left = (((size - content.clientWidth) / 2)) +'px';
  32.     content.style.top = ((size - content.clientHeight) / 2) +'px';
  33.   }
  34.   var b2body = new b2BodyDef();
  35.   var circle = new b2CircleDef();
  36.   circle.radius = size / 2;
  37.   circle.density = ballDensity;
  38.   circle.friction = ballFriction;
  39.   circle.restitution = ballRestitution;
  40.   b2body.AddShape(circle);
  41.   b2body.userData = {element: element};
  42.   b2body.position.Set( Math.random() * stage[2], Math.random() * (stage[3]-size) + size/2);
  43.   b2body.linearVelocity.Set( Math.random() * 200, Math.random() * 200 );
  44.   bodies.push( world.CreateBody(b2body) );
  45. }
  46.  

First, we create an absolutely positioned DIV that will house our Canvas tag:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var element = document.createElement( 'div' );
  3. element.className = className;
  4. element.width = element.height = size;
  5. element.style.position = 'absolute';
  6. element.style.left = -size + 'px';
  7. element.style.top = -size + 'px';
  8. element.style.cursor = "default";
  9. canvas.appendChild(element);
  10. elements.push( element );
  11.  

Then we draw the actual circle itself using the Canvas tag and append it to our container DIV (Note that an SVG circle created programmatically could have also been used here):

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var circle = document.createElement( 'canvas' );
  3. circle.width = size;
  4. circle.height = size;
  5. if (className !=='image' && className !=='image first') {
  6.    var graphics = circle.getContext( '2d' );
  7.    graphics.fillStyle = color;
  8.    graphics.beginPath();
  9.    graphics.arc( size * .5, size * .5, size * .5, 0, PI2, true );
  10.    graphics.closePath();
  11.    graphics.fill();
  12. }
  13. element.appendChild( circle );
  14.  

Then we create another DIV to house the HTML content itself:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. content = document.createElement( 'div' );
  3. content.className = "content";
  4. content.onSelectStart = null;
  5. content.innerHTML = html;
  6. element.appendChild(content);
  7. if (className !=='image' && className !=='image first' ) {
  8.    content.style.width = (size - contentPadding*2) + 'px';
  9.    content.style.left = (((size - content.clientWidth) / 2)) +'px';
  10.    content.style.top = ((size - content.clientHeight) / 2) +'px';
  11. }
  12.  

Notice that we are setting content.onSelectStart to null above; this is so that when you run the mouse button over the text it doesn't select (An alternative way to do this is to use the HTML pointer-events CSS property).

Next comes code to deal with the physics of the circles, which uses Box2D.js, a JavaScript physics engine ported from Flash:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var b2body = new b2BodyDef();
  3. var circle = new b2CircleDef();
  4. circle.radius = size / 2;
  5. circle.density = ballDensity;
  6. circle.friction = ballFriction;
  7. circle.restitution = ballRestitution;
  8. b2body.AddShape(circle);
  9. b2body.userData = {element: element};
  10. b2body.position.Set( Math.random() * stage[2], Math.random() * (stage[3]-size) + size/2);
  11. b2body.linearVelocity.Set( Math.random() * 200, Math.random() * 200 );
  12. bodies.push( world.CreateBody(b2body) );
  13.  

Basically, we define a circle, give it a radius, density, friction, and restitution, and then add it to our collection of shapes with a position and linear velocity. Box2D will then handle the physics and we can just take the values back out to draw things on the screen with a setInterval, which happens in the loop method:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. function loop() {
  3.   delta[0] += (0 - delta[0]) * .5;
  4.   delta[1] += (0 - delta[1]) * .5;
  5.   world.m_gravity.x = 0 // -(0 + delta[0]);
  6.   world.m_gravity.y = -(100 + delta[1]);
  7.   mouseDrag();
  8.   world.Step(timeStep, iterations);
  9.   for (i = 0; i <bodies.length; i++) {
  10.     var body = bodies[i];
  11.     var element = elements[i];
  12.     element.style.left = (body.m_position0.x - (element.width>> 1)) + 'px';
  13.     element.style.top = (body.m_position0.y - (element.height>> 1)) + 'px';
  14.     if (ballRotation && element.tagName == 'DIV') {
  15.       var rotationStyle = 'rotate(' + (body.m_rotation0 * 57.2957795) + 'deg)';
  16.       element.style.WebkitTransform = rotationStyle;
  17.       element.style.MozTransform = rotationStyle;
  18.       element.style.OTransform = rotationStyle;
  19.     }
  20.   }
  21. }
  22.  

This method gets called with a setInterval periodically. Basically, we apply a delta and a gravity at each time step; see if the mouse is being pressed down (with hooks for touch devices like the iPhone to see if a finger is being pressed down); tell the Box2D World about our gravity and delta and to make an iteration step; and finally use the computed physics values from Box2D to apply CSS3 rotation transforms on our parent DIV and move the element's CSS top and left values around the screen.

]]> http://ajaxian.com/archives/view-source-tutorial-content-site-using-html5-canvas-css3/feed 5 JavaScript Gameboy Emulator: Memory and GPU http://ajaxian.com/archives/javascript-gameboy-emulator-memory-and-gpu http://ajaxian.com/archives/javascript-gameboy-emulator-memory-and-gpu#comments Wed, 18 Aug 2010 11:00:50 +0000 Brad Neuberg http://ajaxian.com/?p=10041 Read the rest...]]>

Jack Vaughn posted on Ajaxian recently about a new blog series on building a Gameboy emulator using JavaScript. Now Parts II and III have been posted in the series:

In the Memory section, Imran Nazar builds up a JavaScript MMU that can interpret the different parts of the Gamboy's memory:

In the previous part of this series, the computer was introduced as a processing unit, which fetches its instructions from memory. In almost every case, a computer's memory is not a simple contiguous region; the GameBoy is no exception in this regard. Since the GameBoy CPU can access 65,536 individual locations on its address bus, a "memory map" can be drawn of all the regions where the CPU has access.

[CC-A by Michael Ngilen]

In the third part Imran is now ready to actually draw things to the screen, using the Canvas tag:

Nintendo's internal name for the GameBoy is "Dot Matrix Game"; its display is a pixel LCD of dimensions 160x144. If each pixel in the LCD is treated as a pixel in a HTML5 <canvas>, a direct mapping can be made to a canvas of width 160 and height 144. In order to directly address each pixel in the LCD, the contents of the canvas can be manipulated as a "framebuffer": a single block of memory containing the entirety of the canvas, as a series of 4-byte RGBA values.

Next in the series will be a blog post on backgrounds and patterns.

]]> http://ajaxian.com/archives/javascript-gameboy-emulator-memory-and-gpu/feed 4 Tricks From Our Flash Friends: 3D in a 2D Context http://ajaxian.com/archives/tricks-from-our-flash-friends-3d-in-a-2d-context http://ajaxian.com/archives/tricks-from-our-flash-friends-3d-in-a-2d-context#comments Mon, 16 Aug 2010 10:00:48 +0000 Brad Neuberg http://ajaxian.com/?p=9932 Read the rest...]]> If you've seen some of the cool work that folks like Mr. Doob or Gerard Ferrandez have done with HTML5/CSS3/SVG/etc., you've probably seen them emulating nifty 3D effects in the browser (move your mouse to pan the camera):

The demo above, by Gerard, uses SVG plus various mathematical tricks to emulate 3D.

Mr. Doob has a similar demo that emulates 3D but using the Canvas tag using his Three.js library:

What both of these samples have in common is they are using special math to simulate three dimensions on a two-dimensional surface (i.e. our screen using SVG, the Canvas tag, or CSS3 Transforms).

I've realized recently that the Flash world is a bit ahead of us in the HTML5 world in terms of doing nifty effects using special tricks such as simulating 3D in a 2D space. I've been actually trying to go deep into learning Flash so that I can learn some of these tricks but use them in an HTML5 context.

I reached out to Gerard Ferrandez recently to ask him where he learned the math to do his demos, and he told me he learned them from the Flash world. He pointed me to an absolutely excellent Flash tutorial series that explains in depth how to do such 3D tricks in your own code. It's straightforward to learn the math but apply it in an HTML5 context. The tutorial series is very complete and easy to understand, basically explaining how to do perspective drawing, first invented in the Renaissance. A classic perspective drawing from the Renaissance:

Notice the lines superimposed on the painting above; shapes that are closer to the viewer are scaled larger, while shapes in the background are smaller. In addition, the location of the shapes on the painting change based on where they located along what is called the 'vanishing point'. Instead of emulating these with paint, as the Old Masters used to do, we use simple mathematics that can then determine the correct x and y coordinates on our fake 2D 'window' in order to simulate a perspective point, then draw it using SVG, Canvas, etc.:

As I continue learning tricks from our Flash friends but in an HTML5 context I'll keep posting here on Ajaxian.

]]> http://ajaxian.com/archives/tricks-from-our-flash-friends-3d-in-a-2d-context/feed 8 Three search engines, one interface – 25 minutes live code http://ajaxian.com/archives/three-search-engines-one-interface-25-minutes-live-code http://ajaxian.com/archives/three-search-engines-one-interface-25-minutes-live-code#comments Wed, 09 Dec 2009 17:44:32 +0000 Chris Heilmann http://ajaxian.com/?p=8183 Read the rest...]]> It is amazing how much easier it is these days to build pretty sweet mashups by using hosted services. Here's a screencast of using Yahoo, Bing and Google to build a search interface in under 25 minutes without having to read any API docs or installing SDKs by using YQL:

Building a search mashup with YQL using Google, Yahoo and Bing - live :) from Christian Heilmann on Vimeo.

Give it a lick of paint and you have a pretty sweet little tool:

GooHooBi - search Google, Yahoo and Bing in one go!

All the source code is available on GitHub.

]]> http://ajaxian.com/archives/three-search-engines-one-interface-25-minutes-live-code/feed 11 View Source Tutorial: Sticky Notes With HTML5 and CSS3 http://ajaxian.com/archives/view-source-tutorial-sticky-notes-with-html5-and-css3 http://ajaxian.com/archives/view-source-tutorial-sticky-notes-with-html5-and-css3#comments Wed, 14 Oct 2009 12:30:08 +0000 Brad Neuberg http://ajaxian.com/?p=7646 Read the rest...]]> View Source is a new series where we crack open cool web sites and applications and detail how they were made, step by step.

Today we will take a look at the Webkit Sticky Notes demo that was created when Webkit first landed it's HTML 5 SQL storage support:

stickynotes_screenshot

In this demo you can create new sticky notes that persist themselves into the local SQL storage and can be accessed while offline. When a sticky note is closed it 'swooshes' offscreen with a nice animated effect.

Technologies used in this View Source tutorial:

Note that the demo will only currently work in Webkit 4+ based browsers, Safari only; the technologies behind it though are beginning to arrive in Firefox and Chrome however.

Let's break this demo down step by step.

Is there a Doctype in the house?

First we have the HTML5 doctype at the top of the page:

PLAIN TEXT
HTML:
  1. <!doctype html>

This causes an HTML5 supporting browser to switch into HTML5 parsing mode.

Tune In, Turn On, Go Offline

Since we want this application to work offline, we have to provide all of the resources necessary to 'draw' this application when away from the network; i.e. we need to tell the browser where to find all of it's HTML, CSS, JavaScript, images, etc. We can't depend on the browser's cache since some resources might not be in there. Instead, we have to use the HTML5 Application Cache API.

To use the HTML5 Application Cache, we first provide a file named StickyNotes.manifest that lists all the files we will need while offline:

PLAIN TEXT
TEXT:
    CACHE MANIFEST
    #version=1
    deleteButton.png
    deleteButtonPressed.png

By default, the first line of this file must have the magic words CACHE MANIFEST. Following this you can provide comments starting with the # character. Afterward we provide all of the files to bring offline. You do not need to provide the originating HTML page since this is included by default, though it is recommended that you do provide it in your files. In our example almost everything is self-contained within the page so all we have to grab are a few image files necessary to draw the small closing X button on each sticky note. The file names must be relative or absolute file names or URLs, but must be on the same domain as the originating page.

Note that your manifest file can have any file name or file extension that you want, but it must be served with the MIME type text/cache-manifest to get recognized.

Finally we have to point to our manifest file using the manifest attribute on the html tag:

PLAIN TEXT
HTML:
  1. <html manifest="StickyNotes.manifest">

When the browser first downloads this page, it will see and grab the manifest file. It will then proceed to download all of the files given in the manifest file. Afterward, in the background, the browser will periodically re-fetch the manifest file to see if it has changed. If it has changed in any way (such as adding or removing a file or changing a comment, such as the #version=1 comment above), it will then do an HTTP HEAD request on each file in the manifest file to see if those have changed. If they have changed then a file is reloaded into the offline manifest.

Swoosh!

Let's break down the UI and the nice swoosh effect that happens when you close a sticky note.

First off, each sticky note is just a DIV with the following styling:

PLAIN TEXT
CSS:
  1. .note {
  2.     background-color: rgb(255, 240, 70);
  3.     height: 250px;
  4.     padding: 10px;
  5.     position: absolute;
  6.     width: 200px;
  7.     -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
  8. }

Basically, we make the background yellow; give it a height and width; give it some internall padding so the text looks nice in the middle; and then position the note absolutely. We then add a black box shadow that is 50% transparent.

The little close button is just two PNG images:

deleteButton.png deleteButtonPressed.png

The first PNG image we only show when the mouse hovers over the corner of the sticky note using a CSS .note:hover pseudo-class. The second PNG image is shown when the user clicks (or 'activates' in CSS pseudo-parlance) the image:

PLAIN TEXT
CSS:
  1. .closebutton:active {
  2.     background-image: url(deleteButtonPressed.png);
  3. }

The cool thing about both the :hover and :active pseudo-classes is it lets you do things like this elegantly without having to use any JavaScript.

The main close button itself is added to the page as a background-image and positioned absolutely within the overall note DIV:

PLAIN TEXT
CSS:
  1. .closebutton {
  2.     display: none;
  3.     background-image: url(deleteButton.png);
  4.     height: 30px;
  5.     position: absolute;
  6.     left: -15px;
  7.     top: -15px;
  8.     width: 30px;
  9. }

When you click the close button you get a nice swoosh effect. This is actually done in JavaScript as follows:

PLAIN TEXT
JAVASCRIPT:
  1. this.note.style.webkitTransition = '-webkit-transform ' + duration + 's ease-in, opacity ' + duration + 's ease-in';
  2. this.note.offsetTop; // Force style recalc
  3. this.note.style.webkitTransformOrigin = "0 0";
  4. this.note.style.webkitTransform = 'skew(30deg, 0deg) scale(0)';
  5. this.note.style.opacity = '0';

Let's break this down. Let's first take a look at the full CSS Transition property after it would be expanded, with the duration set to 2 seconds. Let's expand the rest of the CSS after the JavaScript has been applied to make this more readable:

PLAIN TEXT
CSS:
  1. -webkit-transition: -webkit-transform 2s ease-in, opacity 2s ease-in;
  2. -webkit-transform-origin: 0 0;
  3. -webkit-transform: skew(30deg, 0deg) scale(0);
  4. opacity: 0;

We want two things to happen here; first, we want a transformation to happen on our DIV that will skew the top along the X axis causing a 'shearing' look while also scaling the DIV to zero so it disappears; at the same time, we want the opacity to go from 1 to 0 so it fades over time.

We define the two transformations using the -webkit-transform property: skew(30deg, 0deg) skews 30 degrees along the x-axis and none along the y-axis, and scale(0) scales things to zero. Transformations have to work according to an origin, which we set with -webkit-transform-origin to the upper-left corner: 0 0. We also define the final state of the opacity to be 0.

The next step is to define when all of this happens. We do this in one go by setting -webkit-transition. We use the magic property name -webkit-transform to refer to the transforms we defined earlier (i.e. the skewing and scaling) and say that it will happen over 2 seconds, easing in gradually (ease-in). We then declare that the opacity property will also happen over 2 seconds and also have a nice easing in effect.

The one thing to notice in the JavaScript code is the this.note.offsetTop property; ostensibly this is there to force a fix for a Webkit bug around style recalculations. It is a bit unclear whether this is now fixed in the latest versions of Webkit.

yiddish_phrase

(That's 'JavaScript' translated into Yiddish; I couldn't come up with a good catchy head line for this section).

The JavaScript in this sample is well put together and uses several modern JavaScript features, so let's take a quick look at that.

First, each note is encapsulated into a Note class that keeps track of its DOM elements on screen; handles all mouse actions; and stores its internal state, such as its text, x and y coordinates, etc.

This isn't the place to teach OOP JavaScript programming, but each Note class is a standard function that extends the prototype and internally binds the DOM elements to itself to handle the mouse:

PLAIN TEXT
JAVASCRIPT:
  1. // constructor
  2. function Note() {
  3.    var self = this;
  4.  
  5.     var note = document.createElement('div');
  6.     note.className = 'note';
  7.     note.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
  8.     note.addEventListener('click', function() { return self.onNoteClick() }, false);
  9.     this.note = note;
  10.  
  11.     // etc
  12. }

The interesting thing about this JavaScript (or yiddish_phrase in Yiddish) is that it uses the new JavaScript getter and setter syntax to control getting and setting all internal attributes; this make even more sense when you treat each Note as a kind of Data Access Object that you will store into the local SQL storage, which we will detail in the next section. Here are some of the attributes defined on the Notes class:

PLAIN TEXT
JAVASCRIPT:
  1. Note.prototype = {
  2.     get id()
  3.     {
  4.         if (!("_id" in this))
  5.             this._id = 0;
  6.         return this._id;
  7.     },
  8.  
  9.     set id(x)
  10.     {
  11.         this._id = x;
  12.     },
  13.  
  14.     get text()
  15.     {
  16.         return this.editField.innerHTML;
  17.     },
  18.  
  19.     set text(x)
  20.     {
  21.         this.editField.innerHTML = x;
  22.     },
  23.  
  24.     // etc.
  25.  

When dealing with a particular Note, this now means you can simply say console.log(note.text) for example to grab its text, without having to be exposed to the particular ways in which these values are fetched or stored.

SQL Storage

Finally, it's time to detail how we save and load our notes.

When working with the HTML5 Database, the first step is to open a database by name; note the error handling code in our sample below as well ensuring that we actually have either permission or even the ability to do storage:

PLAIN TEXT
JAVASCRIPT:
  1. try {
  2.     if (window.openDatabase) {
  3.         db = openDatabase("NoteTest", "1.0", "HTML5 Database API example", 200000);
  4.         if (!db)
  5.             alert("Failed to open the database on disk.  This is probably because the"
  6.                   + "version was bad or there is not enough space left in this "
  7.                   + "domain's quota");
  8.     } else
  9.         alert("Couldn't open the database.  Please try with a WebKit nightly with this feature enabled");
  10. } catch(err) { }

The magic is in the openDatabase method. This method takes a unique name for the database ("NoteTest"); a version number so you can later handle upgrading a database if necessary ("1.0"); a human friendly name that can be shown to users if they are exploring what data is saved locally by web sites ("HTML5 Database API example"); and finally the size in bytes that you estimate a web application will need in total (200000). This last value is important; when you first open a database, the user will be prompted on whether to give your site permission with the total you request here. You should estimate the total size you want so that the user isn't pestered whenever the quota is hit. In our example we ask for 200K.

Before jumping into directly using the database, it's important to note some features of the HTML5 Database API. First, it is highly asynchronous, which means most of its methods require a JavaScript callback that get the results. This is an unfortunate necessity so that a web browser's UI does not 'hang' due to JavaScript doing heavy file I/O, which might happen if JavaScript is reading from a particularly large database table for example. Second, every read or write to the database must be surrounded by a transaction, which is another necessity due to the unforgiving environment of the web: a user might leave the page in the middle of a database read or write, close the browser, etc. Both of these aspects make working with the Database API a bit trickier than would otherwise be true.

With this in mind, let's look at code in our sample that reads all of our post-it notes into memory on page load, line by line.

First, we have to grab a transaction, as mentioned above; this method takes a JavaScript callback that will receive the transaction on which we can execute actual SQL:

PLAIN TEXT
JAVASCRIPT:
  1. db.transaction(function(tx) {

The tx result is our transaction object that we can actually start calling SQL on.

Next, we then grab all of our notes from a table named WebKitStickyNotes that was created earlier in the code. This table has several columns: a unique ID, the note text, a timestamp, and the left, top, and z-index on where to place this on the page:

PLAIN TEXT
JAVASCRIPT:
  1. db.transaction(function(tx) {
  2.    tx.executeSql("SELECT id, note, timestamp, left, top, zindex FROM WebKitStickyNotes",
  3.                   [],
  4.                   function(tx, result) {
  5.                     // handle result
  6.                   },
  7.                   function(tx, error) {
  8.                     // handle error
  9.                   });

In the code snippet above, you'll see that we execute our SQL on the transaction we were handed back earlier by calling executeSql. We then provide the SQL to execute, which is a simple SELECT statement grabbing all of our notes and columns. The second argument is an empty array and is only used if we are inserting or updating values, which we will see later. The final two arguments is a JavaScript callback that will receive the results, and a JavaScript callback if an error occurs, respectively.

Let's look at working with the results returned by this SQL call, focusing on just the successful results callback:

PLAIN TEXT
JAVASCRIPT:
  1. for (var i = 0; i <result.rows.length; ++i) {
  2.   var row = result.rows.item(i);
  3.  
  4.   var note = new Note();
  5.   note.id = row['id'];
  6.   note.text = row['note'];
  7.   note.timestamp = row['timestamp'];
  8.   note.left = row['left'];
  9.   note.top = row['top'];
  10.   note.zIndex = row['zindex'];
  11.  
  12.   // code snipped
  13. }

We basically loop over each row of the result, getting the number of rows by calling 'results.rows.length'. We grab an individual row item by calling 'result.rows.item(i)'. Once we have a SQL row result, we can treat it as a normal JavaScript object, where each column just becomes a JavaScript member property that we can fetch. For example, we can grab the timestamp property by calling row['timestamp'] or row.timestamp.

We now see where our JavaScript getters and setters come in handy; we basically just copy over the value of a row into a new Note object, and set each one like a normal property, such as note.text = row['note']. Under the covers our JavaScript object takes this value and updates the DOM and UI based on the new value.

Inserting a new Note into our table works in a similar way. Here is a snippet of code from the saveAsNew function:

PLAIN TEXT
JAVASCRIPT:
  1. db.transaction(function(tx) {
  2.   tx.executeSql("INSERT INTO WebKitStickyNotes "
  3.                + "(id, note, timestamp, left, top, zindex) "
  4.                + "VALUES (?, ?, ?, ?, ?, ?)",
  5.                [note.id, note.text, note.timestamp, note.left,
  6.                 note.top, note.zIndex]);
  7.         });

Basically, we get a transaction object again. Once we have that asynchronously we execute a standard SQL INSERT statement. We provide all of the new values using question marks in the SQL, and then provide the values to fill in as a separate JavaScript array. We again see our JavaScript getters making the code cleaner and more encapsulated to easily grab the values for inserting into the database, even if doing so might involve actually reading them from the DOM.

Creating our initial table and updating existing rows is roughly the same and can be seen yourself by looking at the sticky notes demo.

Conclusion

At this point you've seen a nice example that uses CSS Transitions to create a fancy UI; modern JavaScript coding including using the new getter and setter syntax; working with the HTML5 Application Cache to create offline web apps; and using the HTML5 Database to store your data. Have fun!

]]> http://ajaxian.com/archives/view-source-tutorial-sticky-notes-with-html5-and-css3/feed 7 View Source Tutorial: Fancy Web Page Using HTML5, CSS, and SVG http://ajaxian.com/archives/view-source-tutorial-fancy-web-page-using-html5-css-and-svg http://ajaxian.com/archives/view-source-tutorial-fancy-web-page-using-html5-css-and-svg#comments Wed, 07 Oct 2009 11:30:51 +0000 Brad Neuberg http://ajaxian.com/?p=7553 Read the rest...]]> I recently ran across a site that made my jaw drop when I realized it's completely made with HTML5, CSS, and SVG. It's the site for the GNU Emacs for Mac OS X release:

emacssite1

Who ever knew GNU Emacs could look so sexy? When I think of GNU Emacs I generally imagine Richard Stallman's beard rather than the fancy site shown above.

stallman

Wow, I've got to get that image out of my head :) Moving on.

Here is what is cool about this site: it's completely using open web technologies to put things together. That's not just a big image you're seeing on the site.

Let's crack this thing open with a View Source tutorial and see what makes it tick so you can apply similar techniques in your own work. View Source is a new series of tutorials where we look at open web technology 'in the wild' and break them down step by step so you can learn what they are doing.

First, this is an HTML 5 site with the HTML5 doctype:

PLAIN TEXT
HTML:
  1. <!DOCTYPE html>

Much of the page uses directly embedded SVG into HTML5 to achieve it's affects, and works in Firefox, Opera, and Webkit based browsers (Safari, Chrome, etc.).

If you do a view source on the page the first thing you will notice is all the text is truly plain text; much of the text on the page is directly in the markup, meaning that search engines will correctly extract this text and index it.

The nice gradient background is done with the following:

emacssite2

First, we define a rectangle to fill the background:

PLAIN TEXT
XML:
  1. <rect x="0" y="0"
  2.        width="100" height="100"
  3.        fill="url(#background_gradient_black)" />

Notice that we reference a gradient in there with fill="url(#background_gradient_black)". This is defined as follows:

PLAIN TEXT
XML:
  1. <lineargradient id="background_gradient_black"
  2.                 x1="0%" y1="10" x2="0%" y2="90"
  3.                 gradientUnits="userSpaceOnUse">
  4.   <stop offset="0%"   stop-color="#000" stop-opacity="1" />
  5.   <stop offset="45%"  stop-color="#444" stop-opacity="1" />
  6.   <stop offset="55%"  stop-color="#444" stop-opacity="1" />
  7.   <stop offset="100%" stop-color="#000" stop-opacity="1" />
  8. </lineargradient>

A few things; notice that we give this gradient an id ('background_gradient_black'). We can then later use this gradient in other elements, which we do in the background rectangle. This is a sophisticated gradient; we are essentially giving it four different colors as it does it's drawing (each of these is the 'stops' defined above).

To have our rectangle and gradient fill the whole page, everything is nested into an svg element with the following style block, snipped a bit for brevity:

PLAIN TEXT
XML:
  1. <svg style="width:100%; height:100%; position:fixed; top:0; left:0; z-index:1">

Basically, we have the SVG embedded in our HTML fill up the whole page and 'pin it' to the upper left of the page.

Let's move on to the nice buttons on the page, which when hovered over get a nice blue background:

I really like how these were put together. First, we have a CSS style block in our directly embedded SVG as follows:

PLAIN TEXT
CSS:
  1. a #button {
  2.   fill:url("#button_gradient");
  3.   stroke:grey;
  4. }
  5. a:hover #button {
  6.   fill:url("#active_button_gradient") !important;
  7.   stroke:blue;
  8. }
  9.  

Our buttons are standard SVG rectangles with hyperlinks around them, hence the 'a #button'. Each of the buttons on the page have the ID #button and have the style above applied to them (technically they should be using a CSS class instead, so this is a mistake in this example). The buttons have an SVG fill applied to each one, and when the mouse is hovered over the button we end up triggering the 'a:hover #button' style rule which changes the fill to a different gradient and changes the stroke outline to blue.

Let's look at just one of the buttons to get a sense of what the SVG looks like:

emacssite5
PLAIN TEXT
XML:
  1. <g transform="translate(950,635)" class="small-button">
  2.   <a xlink:href="/about">
  3.     <rect x="2" y="2"
  4.           width="196" height="71"
  5.           rx="15" ry="15"
  6.           stroke-width="2px" id="button"/>
  7.  
  8.     <text x="100" y="37"
  9.           transform="translate(0,10)"
  10.           font-size="25px" font-weight="bold"
  11.           text-anchor="middle">About</text>
  12.   </a>
  13. </g>

There's a few things going on here. First we have the group element ('g'), which acts pretty much just like grouping in Photoshop: you can group things together into a single unit as you work with them, style them, make them interactive, etc. The 'transform' attribute is a way to have a nice, simple way to draw things inside the group, and then 'translate' everything to where you want them on the page.

Inside the group we see a hyperlink element, just like HTML, but with the entire button inside of it hyperlinked to the 'about' page.

Next comes our button's rectangle. The 'rx' and 'ry' properties are a way to get rounded corners (Look! Simple rounded corners in HTML!). We then overlay our text 'About' on top of the rectangle and make it centered. The CSS we saw above will then work with this button to add the nice gradient backgrounds and the mouse over behavior.

Moving on, check out the Emacs 'signature'; the Apple logo, and the fancy Mac OS X. These are defined as SVG symbols that can be referenced and moved around the page. Each of them is essentially a symbol with an ID, filled with a bunch of gradients and path statements probably taken from a tool like Inkscape or grabbed from Wikimedia Commons.

emacssite6

Once they are defined elsewhere, they can be referenced using the use tag and each of their IDs ('#mac-os-x'), have hyperlinks attached to them, and placed on the screen where necessary; finally the whole thing is grouped together with a G tag and translated right into the page where you want it to appear:

PLAIN TEXT
XML:
  1. <g transform="translate(100,0)">
  2.   <use x="250" y="0" width="500" height="500"
  3.        xlink:href="#mac-os-x" />
  4.  
  5.   <a xlink:href="http://www.gnu.org/software/emacs/">
  6.     <use x="0" y="240" width="300" height="300"
  7.          xlink:href="#emacs" />
  8.   </a>
  9.  
  10.   <a xlink:href="http://www.apple.com/macosx/">
  11.     <use x="700" y="225" width="275" height="275"
  12.          xlink:href="#apple-shiny" />
  13.   </a>
  14. </g>

Next, a subtle shadow is placed on the large text at the top of the screen so it falls on the large X; here's a screenshot where we zoom in to show the shadow:

emacssite7

This is achieved with an SVG filter. I'm not going to show the source for this, but you can find it by searching the example page for the the element with the ID "shadow". The cool thing about this is since its just markup so you can learn from it and adapt it for your own needs (remember copyright of course). On the page we apply the shadow as follows using the filter attribute and reference it by name:

PLAIN TEXT
XML:
  1. <text x="600" y="120"
  2.        font-size="100px"
  3.        text-anchor="middle"
  4.        font-weight="bold"
  5.        fill="white"
  6.        filter="url(#shadow)">Emacs For Mac OS X</text>

Finally, we have the little Pure Emacs! label on the lower-left:

emacssite8

First, the star is just a symbol with an ID again, drawn with a bunch of paths either drawn by hand or grabbed from a clip art library or drawing tool. We use the <use> tags to reference this and orient its size and position. Then, we draw all of our text and group them together, rotating and scaling the entire thing at once to turn it to the side: transform="translate(80,80) rotate(-30) scale(.9)"

PLAIN TEXT
XML:
  1. <g transform="translate(100,550)">
  2.   <use x="0" y="0" width="150" height="150" xlink:href="#star" />
  3. </g>
  4. <g transform="translate(80,80) rotate(-30) scale(.9)">
  5.   <text x="0" y="-40" font-size="30px" font-weight="bold"
  6.            text-anchor="middle">Pure</text>
  7.   <text x="0" y="-15" font-size="30px" font-weight="bold"
  8.            text-anchor="middle">Emacs!</text>
  9.   <text x="0" y="+10" font-size="20px" font-weight="bold"
  10.             text-anchor="middle">No Extras!</text>
  11.   <text x="0" y="+30" font-size="18px" font-weight="bold"
  12.             text-anchor="middle">No Nonsense!</text>
  13. </g>
  14.  

Two cool things about all of this; first, on Webkit based browsers all the text is selectable. Also, the page truly scales based on the monitor it's on. If you are a full page on a 40" monitor it will scale to the full size and remain legible and beautiful, as well as scale down on the iPhone. That's cool.

I love this example because it shows a few things. First, that SVG is definitely not dead; this works on every browser but IE -- that doesn't sound like a dead technology to me. Second, this example is much better done with SVG than the Canvas tag. I'm a huge fan of the Canvas tag; in fact I originally liked it much better than SVG when it came out a few years ago. I used to be an SVG-skeptic as well, until I realized making a choice between the two was like being forced to choose as a programmer just Hashtables or Linked Lists; they both are needed. Finally, this sample is in a form that makes it easy for others to learn from this markup to adapt it to their own needs. Have fun!

]]> http://ajaxian.com/archives/view-source-tutorial-fancy-web-page-using-html5-css-and-svg/feed 18 Writing a JavaScript Tetris; Lessons learned from a Ruby chap http://ajaxian.com/archives/writing-a-javascript-tetris-lessons-learned-from-a-ruby-chap http://ajaxian.com/archives/writing-a-javascript-tetris-lessons-learned-from-a-ruby-chap#comments Mon, 02 Feb 2009 13:18:12 +0000 Dion Almaer http://ajaxian.com/?p=5852 Read the rest...]]> We often get games sent our way, and try to keep those posts for Fridays. This one is different though. Thomas Kjeldahl Nilsson didn't just write another Tetris clone in JavaScript, he documented his experience. He posted a series of articles on the various steps, and not only do you learn how to build a nice Tetris game, but you get to see how to develop nice testable code. Thomas comes from the Ruby world and it shows.

Take some time to poke through his series on JavaScript Tetris:

  1. Rationale
  2. Planning
  3. Infrastructure
  4. Graphics & Input
  5. The Life Of A Piece
  6. Lights, Action, Music!
  7. Gameplay
  8. Javascript Tetris Pt 8: Post Mortem & References
]]> http://ajaxian.com/archives/writing-a-javascript-tetris-lessons-learned-from-a-ruby-chap/feed 0 Becoming More Productive With JavaScript and Vim Screencast http://ajaxian.com/archives/becoming-more-productive-with-javascript-and-vim-screencast http://ajaxian.com/archives/becoming-more-productive-with-javascript-and-vim-screencast#comments Fri, 30 Jan 2009 11:29:53 +0000 Dion Almaer http://ajaxian.com/?p=5840 Read the rest...]]> Matthew Russell has created a nice screencast showing how to be more productive in Vim:

I’ve been doing some reflecting this week on how I can work smarter (instead of harder), and one of the things I came up with was adding a few more tools to my Vim repertoire. I spend more than half of my engineering time in Vim (the other half usually being in a web browser), so I figured that a few minutes here and there would eventually add up in a big way.

In hopes of inspiring you to do the same, I put together a short screencast (~4mins; 14.5MB QuickTime file) that talks you through how to generate a custom tags file for Dojo’s API and the keystrokes to put it to work. Although I’m specifically using Dojo, I think this technique should probably apply to a lot of other toolkits as well assuming that they define API call in a consistent manner that can be approximated by a regex.

But like anything else with Vim, there are always multiple ways of accomplishing the very same thing, so I make no guarantees that there aren’t simpler ways of getting this done — but I can say that this way gets the job done, and is pretty easy to get working on your own system.

By the way, here are links to the generateTags.sh script and the tags file (for Core) mentioned in the screencast. I’ve slightly tweaked the tags file to remove duplicate tag names and a few things that weren’t really parts of the public API (regexes are obviously imperfect heuristics). I can’t say that the tags file may not be missing a few API calls, but tags are easy enough to add in manually if you do notice any omissions.

How do you extend your tools to give you a hammer that is suited to your work?

]]> http://ajaxian.com/archives/becoming-more-productive-with-javascript-and-vim-screencast/feed 3 Ajaxian Featured Tutorial: Show/Hide Login Panel Built with MooTools http://ajaxian.com/archives/ajaxian-featured-tutorial-showhide-login-panel-built-with-mootools http://ajaxian.com/archives/ajaxian-featured-tutorial-showhide-login-panel-built-with-mootools#comments Tue, 19 Aug 2008 15:27:04 +0000 Rey Bango http://ajaxian.com/?p=4129 Read the rest...]]> Conserving screen real-estate while still providing good content to the user has always been a challenge for designers and developers and while larger screen dimensions are becoming more prominent, it's still important to take full advantage of the space available to you. Jeeremie over at Web Kreation came up with a very cool method of display a login panel using MooTools v1.2's built-in effects capabilities:

Some of you were wondering what script I used to show/hide the login panel on top of this page (or in my latest WordPress theme: “Night Transition”). In this tutorial, we will see how to create a similar login/signup panel for your website using Mootools 1.2.

Jeeremie walks you through the steps of dropping this code into your site and provides the final source code as well to make the whole process painless. The end result is a very nice and intuitive slide down login panel which provides a nice balance of functionality and preserving screen real-estate.

]]> http://ajaxian.com/archives/ajaxian-featured-tutorial-showhide-login-panel-built-with-mootools/feed 5 Is “finally” the answer to all IE6 memory leak issues? http://ajaxian.com/archives/is-finally-the-answer-to-all-ie6-memory-leak-issues http://ajaxian.com/archives/is-finally-the-answer-to-all-ie6-memory-leak-issues#comments Mon, 09 Jun 2008 15:22:05 +0000 Chris Heilmann http://ajaxian.com/archives/is-finally-the-answer-to-all-ie6-memory-leak-issues Read the rest...]]> Hedger Wang has been scanning a lot of Chinese blogs lately for solutions to IE6 and memory leak issues. One of the things he stumbled upon is a pretty nifty way of nulling the objects to stop memory leaks by using the try ... finally construct. So instead of this solution which leaks memory:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. function createButton() {
  3.       var obj = document.createElement("button");
  4.       obj.innerHTML = "click me";
  5.       obj.onclick = function() {
  6.         //handle onclick
  7.       }
  8.       obj.onmouseover = function() {
  9.         //handle onmouseover
  10.       }
  11.       return obj;//return a object which has memory leak problem in IE6
  12.     }
  13.     var dButton = document.getElementsById("d1").appendChild(createButton());
  14.     //skipped....
  15.  

You can use the following which doesn't:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. function createButton() {
  3.       var obj = document.createElement("button");
  4.       obj.innerHTML = "click me";
  5.       obj.onclick = function() {
  6.         //handle onclick
  7.       }
  8.       obj.onmouseover = function() {
  9.         //handle onmouseover
  10.       }
  11.       //this helps to fix the memory leak issue
  12.       try {
  13.         return obj;
  14.  
  15.       } finally {
  16.         obj = null;
  17.       }
  18.     }
  19.     var dButton = document.getElementsById("d1").appendChild(createButton());
  20. }
  21.  

More demos, proof of concept examples and the "finally" explanation is available on Hedger's blog: Finally, the alternative fix for IE6's memory leak is available

]]> http://ajaxian.com/archives/is-finally-the-answer-to-all-ie6-memory-leak-issues/feed 30 Ajaxian Featured Tutorial: Coda Slider Effect http://ajaxian.com/archives/ajaxian-featured-tutorial-coda-slider-effect http://ajaxian.com/archives/ajaxian-featured-tutorial-coda-slider-effect#comments Tue, 03 Jun 2008 14:28:30 +0000 Rey Bango http://ajaxian.com/?p=3712 Read the rest...]]> The effect of "sliding panels" has become extremely popular for categorizing & displaying large amounts of data on a single page. One of the most notable implementations of this effect was done by Panic to display all of the features and benefits of their Coda web development IDE. Since then, many implementations of this effect have been built and most are now referred to as "Coda sliders" since they provide very similar scrolling capabilities.

Remy Sharp of jQuery for Designers has created a new screencast and tutorial on how to create a coda slider effect using jQuery:

Although Panic didn't really invent the effect, the sliding panels on the Coda is great implementation of this effect.
This article will pick apart the pieces required to create the effect, and how to better it.

Remy's tutorial aimed for several goals:

  1. Degrades perfectly without JavaScript enabled
  2. Sliding panels effect without hogging browser CPU
  3. Next and previous buttons added using JavaScript because they hold no use without JavaScript
  4. Hitting the page with a specific hash (i.e. page.html#preview) shows the right tab, and highlights the right navigation
  5. Any link on the page that refers back to a panel should trigger the effect and highlight the right navigation - this should happen without any extra work

The tutorial is very detailed walking you through the markup of the page, use of several jQuery plugins, setting up the navigation, and handling the events for the slider. Along with that, Remy created a screencast, available in both Quicktime and Flash formats, that explain how everything is put together.

]]> http://ajaxian.com/archives/ajaxian-featured-tutorial-coda-slider-effect/feed 5 Ajaxian Featured Tutorial: Writing Your First YUI Application http://ajaxian.com/archives/ajaxian-featured-tutorial-writing-your-first-yui-application http://ajaxian.com/archives/ajaxian-featured-tutorial-writing-your-first-yui-application#comments Thu, 15 May 2008 11:36:35 +0000 Rey Bango http://ajaxian.com/?p=3655 Read the rest...]]> Eric Miraglia has posted a great tutorial on how to build your first YUI application. He runs you through the steps of creating a simple application that leverages YUI's AutoComplete Control to create a site-search form powered by the Yahoo!'s Search web service.

The tutorial is a great walkthrough of both how to build the application and also leverage YUI's extensive documentation. It also touches on some great points such as:

  • How to configure a YUI implementation and put YUI on the page
  • How to set up the markup for a progressively-enhanced YUI widget
  • How to instantiate and configure a YUI widget
  • How to subscribe to and make use of the "custom evens" provided by a YUI widget
  • And how to override default behavior to get a bespoke implementation that maps to our requirements.
]]> http://ajaxian.com/archives/ajaxian-featured-tutorial-writing-your-first-yui-application/feed 0 The seven rules of pragmatic progressive enhancement http://ajaxian.com/archives/the-seven-rules-of-pragmatic-progressive-enhancement http://ajaxian.com/archives/the-seven-rules-of-pragmatic-progressive-enhancement#comments Wed, 07 May 2008 22:58:24 +0000 Chris Heilmann http://ajaxian.com/archives/the-seven-rules-of-pragmatic-progressive-enhancement Read the rest...]]> I've been talking about progressive enhancement here before and got a lot of flak in comments about it. It seemed that there was a general misunderstanding of progressive enhancement and unobtrusive scripting as a "passing fad" or "backward facing rather than being innovative".

I was asked by a design agency in London to go there and give a brown bag presentation (during lunch break) on the matter and took this as an opportunity to write up reasons and examples for progressive enhancement concentrating more on the why than on the how.

The gist would be to say: enhancing a product progressively means you'll always deliver a working product - as you have no idea how your product can fail in certain environments, you plan for it to fail. This ties in nicely with the agile manifesto - you always deliver software that works.

In my talk I came up with seven "rules" of pragmatic progressive enhancement:

  1. Separate as much as possible
  2. Build on things that work
  3. Generate dependent markup
  4. Test for everything before you apply it
  5. Explore the environment
  6. Load on demand
  7. Modularize code

I've taken these ideas and backed them up with benefits you get by following them and code examples in a full article: Pragmatic Progressive Enhancement.

The article is licensed with Creative Commons and uses YUI in the example scripts, feel free to translate, remix and create examples using other libraries.

You can also read the slides on slideshare:

View 'Pragmatic Progressive Enhancement' on SlideShare

Pending the quality of the recording, there'll also be a video available sooner or later.

]]> http://ajaxian.com/archives/the-seven-rules-of-pragmatic-progressive-enhancement/feed 3 Ajaxian Featured Tutorial: Using YSlow for Performance Analysis http://ajaxian.com/archives/ajaxian-featured-tutorial-using-yslow-for-performance-analysis http://ajaxian.com/archives/ajaxian-featured-tutorial-using-yslow-for-performance-analysis#comments Mon, 05 May 2008 15:14:55 +0000 Rey Bango http://ajaxian.com/?p=3619 Read the rest...]]> Kristopher William Zyp has written a post on how to use YSlow to analyze the performance of JavaScript applications.

To understand what aspects of a Web application you need to improve, you must properly analyze the components of the application. This article looks at how you can use the Firebug extension to Firefox and the YSlow add-on to instrument a Web application. After you install these tools, connect to the site that you are developing and click YSlow on the Firefox status bar. This opens the YSlow interface in Firebug. Now click the Performance button. YSlow performs an analysis of your application and provides a report on the different parts of the network transfer time of your application, as Figure 1 shows.

Most of the concepts mentioned are derived from the 10 rules defined by Yahoo! for better web application performance but Kristopher breaks down some of the concepts into examples and provides explanation on how to interpret the data. The explanation of the FireBug profiler is especially helpful to those just coming into the Ajax development space and want a better understanding of how to optimize their code:

]]> http://ajaxian.com/archives/ajaxian-featured-tutorial-using-yslow-for-performance-analysis/feed 2 Ajaxian Featured Tutorial: Simple Save Message Using MooTools http://ajaxian.com/archives/ajaxian-featured-tutorial-simple-save-message-using-mootools http://ajaxian.com/archives/ajaxian-featured-tutorial-simple-save-message-using-mootools#comments Tue, 04 Mar 2008 13:54:00 +0000 Rey Bango http://ajaxian.com/?p=3399 Read the rest...]]> It's been awhile since we've put up an Ajaxian Featured Tutorial and so we're going to get back into the swing of things with a nice, simple tutorial using MooTools.

Giving users feedback during a "save" process is a very good idea. It allows the user to feel a sense of confidence that the site is responding and their data is being processed. While we're at it, why not make it look good as well? Antonio Lupetti has written a short tutorial which does just that.

My friend David asked to me how to implement a message box which appears when an user submit a form and disappear (with a nice fade effect after some seconds) when a generic Ajax request is completed.

In the image below, Antonio has described the sequence of effects:

To break it down, when the user submits the form, a message box will appear first giving the user an indicator that the save is in progress followed by a message to let them know that the save process has completed. The fade-out effect is very cool window dressing.

Antonio leveraged the MooTools JavaScript library for this tutorial which, apart from making the code a trivial task, already includes their "fx" module which makes adding nice effects very easy.

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. <script type="text/javascript">
  3. window.addEvent('domready', function(){
  4. var box = $('box');
  5. var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
  6.  
  7. $('save_button').addEvent('click', function() {
  8. box.style.display="block";
  9. box.setHTML('Save in progress...');
  10.  
  11. /* AJAX Request here... */
  12.  
  13. fx.start({
  14. }).chain(function() {
  15. box.setHTML('Saved!');
  16. this.start.delay(1000, this, {'opacity' : 0});
  17. }).chain(function() {
  18. box.style.display="none";
  19. this.start.delay(0100, this, {'opacity' : 1});
  20. });
  21. });
  22. });
  23. </script>
  24.  

Antonio has created a demo to show off the results.

]]> http://ajaxian.com/archives/ajaxian-featured-tutorial-simple-save-message-using-mootools/feed 6 Ajaxian Featured Tutorial: Ajax for Chat http://ajaxian.com/archives/ajaxian-featured-tutorial-ajax-for-chat http://ajaxian.com/archives/ajaxian-featured-tutorial-ajax-for-chat#comments Thu, 06 Dec 2007 13:40:42 +0000 Rey Bango http://ajaxian.com/?p=3087 Read the rest...]]> Ever wanted to build a chat module for your application? Jack Herrington shows you how in this tutorial on the IBM Developerworks site.

Learn to build a chat system into your Web application with Asynchronous JavaScriptâ„¢ + XML (Ajax) and PHP. Your customers can talk to you and to each other about the content of the site without having to download or install any special instant-messaging software.

While not exactly Meebo, the tutorial does provide the foundation for building your own little chat app and uses the powerful Prototype library for it's client-side code.

Here is some of the code that Jack listed in the tutorial. The full code for the tutorial can be found here.

PLAIN TEXT
LANGUAGE:
    <?php
    if ( array_key_exists( 'username', $_POST ) ) {
      $_SESSION['user'] = $_POST['username'];
    }
    $user = $_SESSION['user'];
    ?>
    <html>
    <head><title><?php echo( $user ) ?> - Chatting</title>
    <script src="prototype.js"></script>
    </head>
    <body>

    <div id="chat" style="height:400px;overflow:auto;">
    </div>

    <script>
    function addmessage()
    {
      new Ajax.Updater( 'chat', 'add.php',
      {
         method: 'post',
         parameters: $('chatmessage').serialize(),
         onSuccess: function() {
           $('messagetext').value = '';
         }
      } );
    }
    </script>

    <form id="chatmessage">
    <textarea name="message" id="messagetext">
    </textarea>
    </form>

    <button onclick="addmessage()">Add</button>

    <script>
    function getMessages()
    {
      new Ajax.Updater( 'chat', 'messages.php', {
        onSuccess: function() { window.setTimeout( getMessages, 1000 ); }
      } );
    }
    getMessages();
    </script>

    </body>
    </html>

]]> http://ajaxian.com/archives/ajaxian-featured-tutorial-ajax-for-chat/feed 8 Ajaxian Featured Tutorial: JavaScript Basics http://ajaxian.com/archives/ajaxian-featured-tutorial-javascript-basics http://ajaxian.com/archives/ajaxian-featured-tutorial-javascript-basics#comments Thu, 29 Nov 2007 11:30:02 +0000 Rey Bango http://ajaxian.com/?p=3057 Read the rest...]]> I have to say that at one point, I truly thought that JavaScript was using some type of "black magic". Things such as closures really threw me for a loop and I was fortunate to have some good folks to walk me through some of the tougher concepts. Not everyone is as lucky and thankfully, we have developers like Christian Heilmann who continue to put out great postings that cover a broad range of topics and experience levels.

In his latest posting, Christian outlines certain JavaScript shortcut notations which make understanding specific JS techniques a whole lot easier. For example, when dealing with objects, there's the involved way of defining objects:


var links = new Object();
links['Cute Overload'] = 'http://cuteoverload.com';
links['I can has cheeseburger'] = 'http://icanhascheezburger.com';
links['Pencils at dawn'] = 'http://pencilsatdawn.wordpress.com';
links['Hobotopia'] = 'http://apelad.blogspot.com';

and then there's the easier way using object literals:

var links = {
'Cute Overload' : 'http://cuteoverload.com',
'I can has cheeseburger' : 'http://icanhascheezburger.com',
'Pencils at dawn' : 'http://pencilsatdawn.wordpress.com',
'Hobotopia' : 'http://apelad.blogspot.com' // < -- again, no comma!
}

Christian provides plenty of great examples that should substantially help new JavaScript developers.

]]> http://ajaxian.com/archives/ajaxian-featured-tutorial-javascript-basics/feed 2