My visitor's satisfaction is one of the top priorities of this blog. For that reason, I decided to remove syntax highlighting completely. I found out that syntax highlighters are bad for performance. In fact, all the syntax highlighters tools used since the very beginning of this blog were actually poor when it comes to performance. Most of my visitors come from the USA, but there's a significant percentage of people who connect to this site from Asia. When the distance increases, it also affects latency and response times. I'd like to explain why JavaScript syntax highlighters are bad for performance using very simple words.

Read more »

There's a widespread tendency to consider the value property of a text field as an attribute instead of a simple property whose value is a string. Such property cannot have a primitive null value because the DOM specifications allow only nodes to have such a value. jQuery wraps the value property with its method val() and it uses the same principles. Let's see why an empty value of a text field cannot be null.

Read more »

CSS selectors fall into several categories. Each category can be actually parsed with JavaScript and regular expressions. In this post I will show you several useful regular expressions used to match CSS selectors taken from the CSSUtilities library.

Read more »

Caching objects and references is a good coding practice to avoid lookups in browsers. Generally speaking, most modern browsers have significantly improved their lookups routines but not all. More specifically, IE8 and lower have still significant problems with lookups and performance. So if you want to get good results with performance, start caching!

Read more »

The Factory design pattern is designed to create new object instances depending on the argument passed to the constructor. In JavaScript, the implementation of this design pattern is rather straightforward. All we have to do is to create a new function which accepts an object as its argument. Depending on the type of object passed in, it will return the appropriate object instance or an empty object if no argument has been specified.

Read more »

After the deep and thorough studies by Steve Souders on web fonts, there's surely a lot of concern among web developers about web fonts and their impact on page performance. However, such a concern should not be taken too seriously, because the interesting results reported by Steve concern only web fonts included via the CSS @font-face rule. In short, Steve found out that this kind of font embedding creates a peculiar effect on web pages: fonts are first rendered without the specified web font and only later the font is completely loaded. This actually slows down page loading.

Read more »

Zepto is a lightweight and powerful JavaScript framework created to handle all the aspects of the mobile development for Webkit-based browsers (Safari, Chrome and related browsers). Zepto uses almost the same syntax and language features of jQuery, which makes this framework very easy to be integrated with other libraries (jQuery above all). Zepto is able to handle AJAX, selectors, touch events, animations, effects and browser detection plus all other features which are typical in a mobile environment.

Read more »

If you come from a classical, traditional OO programming language and you stumbled on this famous article by Douglas Crockford on JavaScript inheritance, you are probably thinking the worst thoughts ever conceived on JavaScript. Don't get me wrong: this article is superb and its author a first-class JavaScript programmer, but surely he doesn't make life easy for non-JavaScript programmers. Let's face it: it's complicated. Yes, it's stimulating, precise, consistent, interesting but, hey, still complicated. Furthermore, this article also describes four sugar methods for dealing with inheritance that, only in theory, should explain inheritance better. Instead, they get things even more complicated to follow. In this post I'll try to explain this article in simpler terms.

Read more »

Sometimes we need to run multiple JavaScript timers in parallel, especially when we have to handle multiple repeated animations. In this post I will show you the implementation of a simple utility function to accomplish this task. This function makes use of the jQuery $.extend() method for its default options. The code is as follows:

Read more »

Sometimes we have to get the dimensions of an element when they're defined in our CSS styles. Unfortunately, the style object attached to every element doesn't work in this case, because it can only handle inline styles. Instead, we should get the actual computed styles of an element. Since Internet Explorer uses the currentStyle property and all other W3C DOM compliant browsers implement the getComputedStyle() method, we have to write the following function, popularized by Peter-Paul Koch:

Read more »

One of the first concepts you need to grasp in JavaScript is the difference between global and local variables. As a rule of thumb, you should avoid global variables because they pollute the global namespace of your JavaScript code and potentially lead to unexpected problems, not to say that they can generated conflicts between libraries and scripts. I realize that the best tutorial is a tutorial when you can experience a sense of empathy with the author, so here it follows an interesting video tutorial taken from YouTube.

Read more »

Serializing a form without jQuery is not a complex task. All we have to do is to loop through all the elements of a form and select the appropriate ones together with their values. To accomplish this, we'll use the special DOM collection called elements which comes bound to every form. This collection is a relic of the DOM Level-0 era, but it's really handy. Bear in mind that if you want to use the DOM Level-1 approach, you have to call getElementsByTagName() for every element type (input, select and so on), or, alternatively, use childNodes. Let's take a look at our code:

Read more »

Today I found some spare time to make a porting of a Coda color scheme for TextMate to Google Prettify. As always with these operations, something is still missing after the process, mainly due to the fact that the color schemes of Coda don't match the CSS classes used by Google Prettify. In fact, Coda features more color combinations than Google Prettify, depending on the language in use.

Read more »

When you include a Twitter tweet button into your page, you basically use an HTML snippet which includes a link and a reference to a JavaScript Twitter file. But what happens behind the scenes? In this post I'm going to describe the inner process behind the creation of a Twitter tweet button in order to help you understand what might go wrong in some use case scenarios.

Read more »

While surfing the Chrome source code I've found an interesting utility library for handling DOM Level 2 tests in XHTML. The author of this small library is the W3C, though no documentation nor commented description has been provided in the source. The Chrome team has further extended it by adding some code at the end of the file. There are a few comments here and there that should indicate the purpose of each component. After viewing the code, this resource looks more a collection of components than a complete library. However, there are some components that catch the eye for their usefulness. For example:

Read more »

Today I wanted to format all my post dates using a custom background image that I've found in one of these useful web graphics packs on a web site. For this blog, I've chosen the format Day, Month DayNumber, Year, that is, Thursday, April 14, 2011. The problem is that the markup used by my template uses a single h2 element with the CSS class date-header associated to it. That is:

Read more »

Clamp is a very interesting JavaScript utility whose purpose is to clamp (ie. cut off) an HTML element's content by adding ellipsis to it if the content inside is too long.. Developed by Joseph Schmitt, it does its job very smoothly, also allowing you for inserting some basic animations during the clamping process.

Read more »

Internet Explorer 6 doesn't support the abbr element. Simply put, IE 6 doesn't recognize this element as a node of the DOM tree. To make IE 6 support this element or, more precisely, to mimic the support to this element, we have to manually create it within the DOM structure. This can be done at the very beginning of our page, like so:

Read more »

JavaScript doesn't provide a native method to get the name of a function. Some browsers have implemented a name property attached to the Function object, but this doesn't work in a cross-browser fashion. So far, we've forced to augment the basic Function object to get the desired result. The code is as follows:

Read more »

An object literal is a peculiar form of JavaScript object that cannot be instantiated using the new operator. In practice, this kind of object works as a singleton. However, sometimes it's preferable to use this object to handle inheritance. In JavaScript, only objects which belong to the Function constructor type can be instantiated using the new operator. Instead, object literals have Object (native code) as their constructor. Attempting to redefine this behavior using the constructor property produces no results. So here's a solution:

Read more »