Recent Blog Posts
Blogs » JavaScript & CSS
Stylish Scripting
: JavaScript & CSS BlogBuilding The Matrix - Notes from The Architect
Matt Magain’s recent blog post about constructing the new SitePoint Book Matrix raised a couple of interesting questions, which I’m going to try to answer, since it was me who built it.
When is a table not a table?
When its data isn’t really tabular; in other words, when the data it represents isn’t really two-dimensional. What we have here is visually two-dimensional, hence at first glance it might seem reasonable to represent it as tabular data; but the data itself isn’t really two-dimensional at all, it’s linear.
A two-dimensional data set has two axes, each representing a different range or set of values, so we should be able to plot axes against the data and be able to make meaningful cross-references. But as the illustration below shows, we can’t:
Sure we can plot those lines and create that reference point, but they don’t mean anything, because the x and y axes both represent the same scale (skill level).
Before we can implement the design we need to decide how the data should be marked up, and that’s why it’s so crucial to determine the …
JavaScript MIME Type: Damned if You Do, Damned if You Don’t!
In an article he posted a little while back, Alex Walker mentioned some trouble he had with <script> tags when trying to add the type attribute. The Google script Alex was embedding had no type attribute but wouldn’t work when he added one. Douglas Crockford has suggested in his Advanced JavaScript videos that we drop the type attribute altogether since browsers default to JavaScript anyway. The problem is under HTML 4.01 and XHTML 1.0 the type attribute is required. So if you care about validation, like Alex does, then you’ll want to add it.
But, what is the correct type value for JavaScript? The other reason Mr Crockford provides for dropping the attribute is that that the value most people use, text/javascript, is wrong! It’s obsolete, according to rfc4329. This is also confirmed by Anne van Kesteren who has covered this issue already (way back in May of 2006 - yes Anne is one of the gurus and I am not), as well as the SitePoint HTML Reference.
The correct type value for JavaScript is actually application/javascript. But wouldn’t you know it, Internet Explorer will not execute the code if you use that type value. So here’s a hell of a situation, …
Is Your JavaScript Library Standards Compliant?
One of the things JavaScript libraries like jQuery, Dojo, and YUI can do for you is add support for features in the latest Web standards long before they are built into browsers. But are some libraries going too far?
For the developers of JavaScript libraries, there is a temptation to extend the features of the standard, and build something even better! A good example of this is the CSS selector queries that first made jQuery famous, but which are now available in most JavaScript libraries.
CSS queries provide an extremely convenient way of getting a list of elements from an HTML document that match certain criteria. As an example, you might write a script that opens all hyperlinks with the attribute rel=”external” in a new window. Using just the DOM API supported by all major browsers, the JavaScript code to retrieve that list of links is pretty cumbersome:
var anchors = document.getElementsByTagName(’a');
for (var i = 0; i < anchors.length; i++)
{
var href = anchors[i].getAttribute(’href’);
var rel = anchors[i].getAttribute(’rel’);
if (href != null && href.length > 0 &&
rel != null && /(^| )external( |$)/.test(rel))
{
// anchors[i] is a link with …
CSS Gradients, Transforms, Animations, and Masks
With the CSS Working Group seemingly toiling in obscurity to pin down the exact wording of specs that may never be implemented in a real-world browser, the WebKit team is leading the charge in moving the web forward by implementing new CSS features that you’ll be able to use in production in just a few months’ time.
Every browser contains a rendering engine responsible for producing a rendered page from the HTML and CSS code that makes up a given web page. WebKit is the rendering engine at the heart of Apple’s Safari browser (not to mention most recent Nokia cell phones and the Adobe AIR platform). You can download the latest work-in-progress version of WebKit to try it out.
Web designers interested in the future of CSS have a very good reason for downloading WebKit right now. The team has introduced some astounding new CSS features that Apple is planning to release in this June’s 2.0 update to Mobile Safari for the iPhone and iPod touch. Presumably we can expect an update to the desktop version of Safari for Mac OS X and Windows around the same time.
Here’s a run-down of the features announced so far …
Adobe AIR for JavaScript Developers
With just under two weeks left in our Adobe AIR/Flex competition, time is running out to get your articles in. As a reminder, we have two copies of Adobe CS3 Web Premium to give away!
If you’ve been experimenting with Adobe AIR and hitting walls due to lack of documentation, here’s a resource that might help: the team behind Adobe AIR have released a pocket guide to AIR for JavaScript developers. It’s available either for free in digital form (under a Creative Commons license) or in print from Amazon.
This is a smart move by Adobe to encourage developers to play and build things with AIR. Hopefully some of you will find it helpful in writing your article!
Download the Adobe AIR for JavaScript Developers pocket guide (PDF, 1.2 MB).
You’re Fat and I Hate You
So this has happened to me a few times recently (mentioning no names) — I read up on some neat trick or other that somebody’s figured out in JavaScript, and I’m like ooh that’s cool, I wonder how it works. So I follow it up, only to find out that the author doesn’t know how it works, and reading their code throws no light on it either, because most of the work is done by an external framework.
It irritates the hell out of me that so much modern JavaScript development hinges on frameworks. Not because there’s anything wrong with that in pragmatic terms, but because I’m interested in the mechanics of things, and programming with frameworks obscures the mechanics. It’s simply too laborious to work through that convoluted chain of dependencies and see what a script is actually doing. And the code of the framework itself is generally optimized to such an extent that it’s virtually illegible — great for speed and efficiency in practice, but very difficult to read and understand.
Of course, from the point of view of developers using frameworks, that’s exactly the point. The mechanics are supposed to be obscured so that the application is easier …
continue - the forgotten statement
I’m a big fan of continue, partly just because it’s a positive and encouraging word (carry on, everything’s fine), but mostly because it can reduce code and improve efficiency, and that’s almost always a good thing.
Here’s a quick precis: the continue statement can be used within an iterator, such as a for loop, and means continue to the next iteration; this is contrast to the break statement which means abandon this loop entirely.
So, whenever the code inside an iterator is finished for that iteration, we can use the continue statemtent to prevent the interpretor from reading unecessary code, and to reduce the actual amount of code we have to type.
For example, this code:
for(var i=0; i<ary.length; i++)
{
if(ary[i] == ‘foo’)
{
//something
}
else
{
//whatever
}
}
Could also be written like this:
for(var i=0; i<ary.length; i++)
{
if(ary[i] == ‘foo’)
{
//something
continue;
}
//whatever
}
I’m also a big fan of continue as a means to jump past conditions we’re never interested in, such as ignoring external prototypes when iterating through the properties of an object; so rather than this:
for(var i in obj)
{
if(obj.hasOwnProperty(i))
{
//whatever
}
}
We can do this:
for(var i in obj)
{
if(!obj.hasOwnProperty(i)) { continue; }
//whatever
}
So what’s the real difference? Well, we’ve avoided the need for a braced condition, which can make the code more efficient (since the interpretor doesn’t …
Opera and Safari Pass Acid3 Test
The development teams for Opera and WebKit (which powers Apple’s Safari browser) both announced in the past week that their browser rendering engine had achieved a score of 100/100 in the Acid3 test for JavaScript and DOM standards compliance run by the Web Standards Project.
Head of Core Technology at Opera Software, Lars Erik Bolstad, was clearly bursting with pride when he wrote:
Since the [Acid3] test was officially announced recently, our Core developers have been hard at work fixing bugs and adding the missing standards support. Today we reached a 100% pass rate for the first time! There are some remaining issues yet to be fixed, but we hope to have those sorted out shortly.
And a few days later, the Opera team released a public build to prove that they weren’t all just talk.
WebKit developer Maciej Stachowiak must have been a little disappointed at being pipped at the post when he wrote on the Surfin’ Safari blog:
With r31342 WebKit has become the first publicly available rendering engine to achieve 100/100 on Acid3. The final test, test 79, was a brutal torture test of SVG text rendering.
He also posted details about …
A collection is not an array
I’m occassionally irked by the fact that a collection of DOM elements (more formally called a NodeList) can’t be manipulated like an array, because it isn’t one. However it does look like one, and thinking it is one is a mistake made so often by JavaScript novices that for our upcoming JavaScript Reference I felt it necessary to note this point for every single DOM object that is, or returns, a collection.
You can iterate through a collection like an array:
for(var i=0; i<collection.length; i++)
{
//whatever
}
But you can’t use Array methods like push(), splice() or reverse() to manipulate it.
Except that you can, if you take the next step and convert it into an array. This is in fact trivial:
function collectionToArray(collection)
{
var ary = [];
for(var i=0, len = collection.length; i < len; i++)
{
ary.push(collection[i]);
}
return ary;
}
The code above is fully cross-browser, and is called with the original collection as an argument:
var elements = collectionToArray(document.getElementsByTagName(’*'));
However if you only need to deal with browsers that support native object prototyping (Opera, Firefox and Safari 3) then you can simply create a toArray() method of NodeList:
NodeList.prototype.toArray = function()
{
var ary = [];
for(var i=0, len = this.length; i < len; i++)
{
ary.push(this[i]);
}
return ary;
};
Which can then be called as a method of the individual collection:
var …
WaSP Releases Acid3 Test
The Web Standards Project announced yesterday that the Acid3 Test for JavaScript and DOM compliance had been released.
The Acid3 Test is designed to test specifications for Web 2.0, and exposes potential flaws in implementations of the public ECMAScript 262 and W3C Document Object Model 2 standards. Collectively known as DOM Scripting, it is these technologies that enable advanced page interactivity and power many advanced web applications such as web-based email and online office applications.
As a series of 100 mini-tests, Acid3 has already been found to expose flaws in all tested browsers, including Internet Explorer, Firefox, Opera, and Safari. WaSP hopes that Acid3 will prove useful to browser makers during the development of future versions of their products.
The driving force behind the test, Ian Hickson, accepted input from the developer community to make the test the most comprehensive collection of (mostly unrelated) edge cases and specification non-compliance. The hope is that, like Acid2 before it, browser makers will strive to improve their product so that it passes the test, therefore (hopefully) making cross-browser JavaScript development both consistent and predictable.
Sponsored Links
Logo Design, Web page Design and more!
- Custom logo designs created ‘just for you’.
- Pick the design you like best.
- Only pay if you’re satisfied with the result.
SitePoint Kits
Download sample chapters of any of our popular kits.
The Search Engine Marketing Kit, 2.0
The Web Design Business Kit 2.0
The Email Marketing Kit
The Usability Kit
SitePoint Books
Download sample chapters of any of our popular books.