Browsers Tutorials
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.
JavaScript Feature Detection with has.js
Dojo Toolkit Project Lead Peter Higgins has been working on an exciting new project called has.js. Higgins describes this project best:
HTML5′s window.postMessage API
I've create a MooTools plugin to wrap window.postMessage: PostMessager. Click here to download it!
Web Inspector and Firefox Dollar Functions
Many of you probably didn't know this but WebKit-based like Safari and Chrome, in addition to Firefox, contain special dollar functions within the console object that allow you to grab elements within the current page. While I've not determined the use of each method, a few of them are obvious:
MooTools 1.3 Browser Object
MooTools 1.3 was just released and one of the big additions is the Browser object. The Browser object is very helpful in that not only do you get information about browser type and browser versions, you can gain information about the user's OS, browser plugins, and browser features. Let me show you how you can use the Browser object to detect browser feature!
Image Reflections with CSS
Image reflection is a great way to subtly spice up an image. The first method of creating these reflections was baking them right into the images themselves. Within the past few years, we've introduced JavaScript strategies and CANVAS alternatives to achieve image reflections without having to modify original images. The minds behind WebKit have their own idea behind image reflection: pure CSS.
WebKit Marquee CSS: Bringin’ Sexy Back
We all joke about the days of Web yesteryear. You remember them: stupid animated GIFs (flames and "coming soon" images, most notably), lame counters, guestbooks, applets, etc. Another "feature" we thought we had gotten rid of was the marquee. The marquee was a rudimentary, javascript-like effect to move text from one side of a block to another. I was recently looking at WebKit's CSS specs and found that Safari has implemented CSS marquees.
WebKit-Specific Style: -webkit-appearance
I was recently scoping out the horrid source code of the Google homepage when I noticed the "Google Search" and "I'm Feeling Lucky" buttons had a style definition I hadn't seen before: -webkit-appearance. The value assigned to the style was "push-button." They are buttons so that makes sense but I was curious as to the possible values available for that style. What I found was that there are a *ton* and that you can set any HTML element to look like a completely different element.
Using Firefox’s Geolocation API
One interesting aspect of web development is Geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can use Geolocation within Firefox to get location details down to the street!
Prevent Page Zooming in Mobile Browsers
Ever since I got my iPhone, I've been more agreeable in going places that my fiancee wants to go. It's not because I have any interest in checking out women's shoes, looking at flowers, or that type of stuff — it's because my iPhone lets me surf the web the whole time...or until my iPhone's tiny battery dies. It wasn't until recently that I noticed that some sites don't allow the user to zoom in and out of a page. After some research I found that preventing page zooming was as easy as adding a META tag to the page.