HTML5 Tutorials

• AJAX HTML5 JavaScript

  window.postMessage Tip: Child-To-Parent Communication

  I wrote a super epic post a few months back about the window.postMessage API that's sweeping the nation.  window.postMessage allows you to send messages not only across frames (regular frame or iframe) but also across domains.  My post showed interaction from parent to child and back to the parent, but didn't detail passing messages from a child to a parent without the parent initializing the conversation.  Let me show you how you can initialize that conversation from child to parent

  Read Post

• CSS HTML5

  HTML5 Placeholder Styling with CSS

  4/25/2011: This attribute is not styleable as of Opera 11. Internet Explorer 10 will introduce placeholder support.

  Read Post View Demo

• Browsers HTML5 JavaScript

  WebSocket Update

  A few weeks back I published a post about the awesome new technology that is WebSockets and a great WebSocket wrapper called Socket.IO.  The HTML5 WebSocket API provides socket connection support for faster messaging between client and server.  Consider WebSocket an optimized AJAX solution.  SocketIO provides both server and client side solutions to use WebSocket.  WebSocket is a great match for Comet technologies (GChat, Facebook Chat, etc.).  Unfortunately it looks as though WebSocket revolution will need to be put on hold.

  Read Post

• HTML5 JavaScript Node.js

  WebSocket and Socket.IO

  My favorite web technology is quickly becoming the WebSocket API. WebSocket provides a welcomed alternative to the AJAX technologies we've been making use of over the past few years. This new API provides a method to push messages from client to server efficiently and with a simple syntax. Let's take a look at the HTML5 WebSocket API: its use on the client side, server side, and an outstanding wrapper API called Socket.IO.

  Read Post View Demo

• AJAX HTML5 MooTools

  Supporting the onMessage Event in MooTools

  Yesterday I threw some window.postMessage knowledge right in your face.  The cross frame/window/domain technology that is window.postMessage is really interesting and as IE6 and IE7 fade away, window.postMessage will gain more momentum.  In looking to listen to onMessage events with MooTools, I noticed that message events aren't  handled properly.  The event type is seen as message but the event.data, event.source, and event.origin aren't added to the main-level object — they're relegated to event.event.  It's time to fix that using MooTools custom events.

  Read Post

• AJAX APIs Browsers HTML5 JavaScript

  HTML5′s window.postMessage API

  I've create a MooTools plugin to wrap window.postMessage: PostMessager. Click here to download it!

  Read Post View Demo

• HTML5

  HTML5′s async Script Attribute

  One of the big reasons I'me excited about HMTL5 is that features are being implemented that have been long overdue.  We've been using placeholders forever but we've needed to use JavaScript to do it.  We've been making entire blocks clickable like links but we've needed to use JavaScript to do it.  WebKit recently implemented HTML5's async attribute for SCRIPT tags.  We've been accomplishing this task with a variety of JavaScript hacks but this new attribute will allow us to prevent blocking in an easy way.

  Read Post

• HTML5

  HTML5′s “email” and “url” Input Types

  I've already covered some subtle HTML5 improvements like placeholder, prefetching, and web storage.  Today I want to introduce a few new INPUT element types:  email and url.  Let's take a very basic look at these new INPUT types and discuss their advantages.

  Read Post

• HTML5

  HTML5′s placeholder Attribute

  HTML5 has introduced many features to the browser;  some HTML-based, some in the form of JavaScript APIs, but all of them useful.  One of my favorites if the introduction of the placeholder attribute to INPUT elements.  The placeholder attribute shows text in a field until the field is focused upon, then hides the text.  You've seen this technique a billion times with JavaScript, but native HTML5 support is even better!

  Read Post View Demo

• HTML5

  HTML5: Wrap Block-Level Elements with A’s

  HTML5 presents a simpler line of thought with HTML than XHTML.  And quite honestly, it's a much needed simplification.  One of those simplifications is the ability to wrap block-level elements like DIVs, H-tags, and P's with basic A elements.  You read that correctly:  wrap block-level elements with A tags.

  Read Post