Mozilla Aurora 11 was recently released with a bevy of new features. One of those great new features is their initial implementation of the Battery Status API. This simple API provides you information about the battery's current charge level, its charging status, and allows you to be notified of changes via a few events. Let's check it out!Read Post View Demo
One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back? The Page Visibility API allows developers to react to changes in page visibility via the
visibilitychange document event. New
document.visibilityChange properties are also available.
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!Read Post View Demo
A while back I showed you the awesome classList API, which allows simple addition, removal, and toggling of CSS classes without the need for parsing the className. Another simple API available in FireFox Aurora Firefox 6, at time of print and Chrome 8 is the element.dataset API. This tiny API allows developers to get and set data- attribute values on HTML elements. Let's take a look at how it works!Read Post
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
4/25/2011: This attribute is not styleable as of Opera 11. Internet Explorer 10 will introduce
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
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
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