HTML5 Tutorials
We all love trusted JavaScript frameworks like MooTools, jQuery, and Dojo, but there's a big push toward using focused micro-frameworks for smaller purposes. Of course, there are positives and negatives to using them. Positives include smaller JS footprint (especially good for mobile) and less cruft, negatives being that they don't have the community behind them to drive growth and the developer that uses multiple micro-frameworks has to work with inconsistent APIs. To each their own; I don't have a strong feeling either way, as it depends on the project.
Drag and Drop MooTools File Uploads
Honesty hour confession: file uploading within the web browser sucks. It just does. Like the ugly SELECT element, the file input is almost unstylable and looks different on different platforms. Add to those criticism the fact that we're all used to drag and drop operations, yet up until recently, you couldn't drag files into a browser to upload them, making file uploading within the browser unintuitive. With recent advancements in browser technology, the drag and drop method is now supported, but it doesn't look good without a bit of work. Luckily MooTools Core Developer Arian Stolwijk has created a set of classes to accommodate styling drag and drop file uploading within the browser. Let's have a look at how it works!
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
HTML5 Placeholder Styling with CSS
4/25/2011: This attribute is not styleable as of Opera 11. Internet Explorer 10 will introduce placeholder support.
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.
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.
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.
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.
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!
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.