JavaScript Selector Library Supports CSS4!

I was reading DailyJS and ran across this great JavaScript selector library called Sel.

It can select elements using the very brand new CSS4 features. The following are some examples.

Read ›

Firefox Extensions: Add Button to Nav Bar

The new Add-On SDK for Firefox rocks! It is so easy to create and test using the cfx command line utility.

One thing that is conspicuously absent is the ability to add a button to the navigation toolbar. You know, the toolbar that holds the URL bar and bookmarks button. It took a fair amount of research and trial and error, but it turns out to be a small bit of code.

Read ›

jsPerf.com Introduces Graphs

If you haven't seen jsPerf.com, you've been missing out. You can benchmark pieces of JavaScript against each other. The site was created by Mathias Bynens (blog) and the benchmarking engine, Benchmark.js, was created by John-David Dalton (blog).

JavaScript is by nature only acurate to 1 millisecond, and some browsers are acurate to only 15 milliseconds in practice. Benchmark.js uses higher resolution timers where available. For browsers it utilizes a Java Applet to access a high-precision timer. When Chrome or NodeJS are run with a --enable-benchmarking flag, it makes use of a native microsecond timer.

Read ›

Canvas Fountain Demo

I got a kick out of this canvas demo from Mozilla.

Read ›

A JavaScript Phone: Microsoft's Night Terrors

Today Mozilla announced their proposal for providing phone-like functionality to the browser in this hacks.mozilla.org article. Their goal is to provide "basic HTML5 phone experience within 3 to 6 months."

Specifically, they want to provide JavaScript APIs for accessing the phone dialer, address book, SMS, and more. We already have support on Android and iOS for getting geolocation data from GPS. There is also some support for taking photos using only JavaScript. And don't forget the FileReader and FileWriter APIs.

Read ›

Using JavaScript in Photoshop

Did you realize that you can write macros and scripts for Photoshop in JavaScript? Yes, JavaScript is everywhere. JSPatterns.com has a great article explaining how to write JavaScript for Photoshop.

In his example, author Stoyan Stefanov takes a layered Photoshop file, shows and hides certain layers, and saves the resulting image to a .png file. The files he saved were charts of guitar chords--156 images saved in an instant.

Read ›

JSON++: The Structured Clone Algorithm

I was using window.postMessage yesterday and ran into this nugget on hacks.firefox.org:

The window.postMessage() method now uses the structured clone algorithm to let you pass JavaScript objects instead of just strings from one window to another.

The Structured Clone Algorithm is an HTML5 specification for serializing complex data structures. The following are data structures that the algorithm can store that JSON cannot.

Read ›

Browser Rendering - Getting Computed Style is Hard

Recently I was looking into how libraries like jQuery get the compute style of an element. I found that in its simplest form, getting computed style is one step:

function getStyle(el, prop) {
	return el.currentStyle ?
		el.currentStyle[prop] : // IE
		document.defaultView.getComputedStyle(el, "")[prop];
}

Read ›

Caution For JavaScript Global Variables

Recently on Twitter Thomas Aylott (@SubtleGradient) recommended using `location` instead of `window.location`. I disagree. Yes, `location` is a global variable, but the problem is that it can be easily overwritten. A careless dev might use a global variable `location`. The same goes for `window.top`, `window.parent`, `window.self`, and `window.history`. Basically I say use `window.` for anything that could be a common variable name.

Read ›

Extending Host Objects: Evil; Extending Native Objects: Not Evil But Risky

Kangax has a good article on extending JavaScript native objects and host objects. He begins by clarifying that extending host objects (e.g. Element) is truly evil. Host objects do not have strong specs and have no rules and extending them risks collisions. Kangax has an older post talking about extending objects. There he says that Prototype JS's biggest mistake was extending Element.

Read ›