I’ve been exploring a variety of interesting web development concepts lately, and I thought I’d share a list of resources and my insights.

My journey began with JavaScript. Years ago, I was captivated by Prototype.js and spent hours dissecting its source code. Recently, I stumbled upon this nicely laid out version of underscore.js source code, which rekindled that same excitement. The concept of chaining-wrapped objects is fascinating, and the code snippets, like the one below, are insightful:

1
2
3
4
5

  var \_ = function(obj) {
    if (obj instanceof \_) return obj;
    if (!(this instanceof \_)) return new \_(obj);
    this.\_wrapped = obj;
  };

This snippet highlights how “this instanceof _” determines if _ is invoked as a function or a constructor.

Another intriguing JavaScript example I encountered is:

1
2

var toStr = Function.prototype.call.bind( Object.prototype.toString );
toStr(\[\]) // \[object Array\]​​​​​​​​​​​​​​​​​​​​​​​​​​​

This achieves the same outcome as the more straightforward:

1

Object.prototype.toString.call( param )

I also delved into advanced jQuery techniques, guided by this excellent presentation.

Furthermore, This article on InfoQ provided valuable insights into optimizing web application speed. This led me to explore this guide, which delves deeper into the subject.

Client-side performance optimization led me to the concepts of repainting and reflow. This is one of the best articles offered a comprehensive overview of this topic. A key takeaway was to avoid creating and appending DOM elements within a loop. Instead, it’s more efficient to append elements to a detached “root” node and then append the “root” node to the DOM. However, when appending to an existing node, like adding “li” elements to a “ul”, Document Fragments presents a useful solution.

In a recent project, I used CSS classes like “editBt” and “saveBt” to identify elements for JavaScript interaction. This approach felt somewhat awkward, as I believe CSS classes should primarily handle presentation. Researching alternatives led me to data-attributes, advocated in articles like [1] and [2]. These articles argue that CSS classes should be reserved for presentation (layout and theme), while data-attributes are better suited for semantics. While data-attributes might seem ideal for microformats, the HTML specification recommends them for private, application-specific use, while microformats are designed for external consumption. If you prefer using CSS classes for JavaScript hooks, here suggests prefixing them with “js-” to distinguish them from presentation-related classes.

This sparked another thought: how should we name our CSS classes effectively? Using class names like “blueText” is clearly not ideal. While striving for semantic class names is generally good practice, determining the appropriate level of semantics can be tricky. Resources like W3C and html5 spec:

…authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

…promote semantic naming. However, the article presents compelling arguments against excessive semanticity, particularly when aiming for reusable CSS classes across projects.

In my opinion, CSS classes, often used for structure and layout, should have presentation-based semantics rather than content-based. The jQuery UI documentation seems to share this view:

The jQuery UI CSS Framework provides semantic presentation classes to indicate…

For instance, jQuery UI classes like “ui-widget-header” and “ui-widget-content” convey presentation semantics without being tied to specific content.

Update (2013/03/03): I came across This post, which aligns with my viewpoint:

If a class name is used to describe the content, that class can only be used where that content exists, but when a class name describes a visual pattern, it can be used in many more places. The more abstract the visual pattern, the more reusable the class.

names used for jQuery UI CSS classes