QUnit, used by projects like jQuery and jQuery Mobile, is a rather popular JavaScript testing framework. For tests written using QUnit, how do we measure its code coverage? A possible solution which is quite easy to setup is to leverage the deadly combination of Karma and Istanbul.

Searching for a particular element in a JavaScript array is often carried out using a typical iteration. In some cases, forEach and some can be used as well. What is often overlooked is the potential use of Array.prototype.reduce to perform such an operation.

For modern web application development, having dozens of unit tests is not enough anymore. The actual code coverage of those tests would reveal if the application is thoroughly stressed or not. For tests written using the famous Jasmine test library, an easy way to have the coverage report is via Is...

As part of my little tour this season, last Monday I was in Manhattan to participate at Edge Conference 2013, New York City edition. Organized by FT Labs and Google, Edge (always) featured a fascinating set of panels and high-quality discussions.

Merging a branch is a pretty common operation when using Git. In some circumstances, Git by default will try to merge a branch in a fast-forward mode. How is this different with a merge without fast-forwarding?

Walking the syntax tree of a JavaScript code is often the first step towards building a specialized static analyzer. In some cases however, when the analysis involves variables and functions within the code, an additional scope analysis is necessary. This permits a more thorough examination of those...

Summer is almost over, fall is around the corner. I’ll hit the road again, this time I plan to be in New York, Los Altos, and San Jose.

The second generation Nexus 7, revealed a few weeks ago, is a good refresh of this popular Android tablet. Beside the much improved display density (going to 323 ppi from 216 ppi), this All-New Nexus 7 also has a different SoC. If this tablet is used mainly for browsing the web, how does it perform ...

Iterating over an array to search for an item is a pretty common task. With JavaScript, Array.prototype.forEach is often the popular choice. In some cases however, Array.prototype.some can be a better fit for the job if there is no need to search the entire array once a condition is fulfilled.

Flick list, with its momentum effect and elastic edge, becomes a common user-interface pattern since it was made popular by Apple iPhone a few years ago. Implementing this pattern using HTML and JavaScript seems to be a daunting task for many web developers. In this series, I will uncover the myster...

Getting a consistent 60 fps experience on mobile web means that we need to monitor the performance criteria. One important metric is the painting time, particularly important on a resource-constraint device. Fortunately, with Chrome’s continuous painting mode, it is easy to check whether the perform...

Attending technical events, from the local after-hours meetups to the high-caliber and well-known conferences, becomes the usual part of a developer’s life. Generally, those events are packed with 45-minute talks, often also to the full one hour. I argue that there are more benefits of limiting such...

Profile-guided optimization (PGO) is a known compiler technique to produce an optimized code. The generated code is biased towards the common data set which will be fed to the code. It is definitely possible to apply the same technique to web applications written in JavaScript.

Instead of using loops, JavaScript Array object is quite powerful to create sequences. What about some more complex series and not just a list of consecutive numbers or letters? Fortunately, we still have other Array’s functions such filter, map, every, and reduce at our disposal. Those can be used ...

Generating a sequence is a common programming task. This is rather easy to achieve using a straightforward loop. With JavaScript however, there exists a more functional variant using the powerful Array object. This permits the generation of all kind of sequences, from A..Z to a list of prime numbers...

In the spirit of making our web browsing activities more secure, often times we need to be aware of all the resources and assets being loaded by our important web sites (Internet banking, HR portal, and the likes). Fortunately, it is rather easy to programmatically inspect which JavaScript libraries...

Being able to intercept a certain operation to an object can be really useful, in particular during a troubleshooting session. With ECMAScript 6, this is possible via its new feature, proxy. Creating a proxy on a particular object allows a predefined handler to get notified when something happens.

Geolocation feature in a web browser is the key to improve the location-awareness of a web app. The following simple geolocation demo combines the information given by the browser with a textual geocoded address and a visual marker in a map.

Last week I had the honor of attending Engineers4Engineers, a small developer-oriented event organized by Constant Contact in Waltham (MA). This conference was attended by over 250 people, it was an amazing experience.

Modern web browsers can leverage the ubiquitous graphics processing unit (GPU), both in mobile and desktop, to accelerate page rendering. This is particularly suitable for popular CSS features such as animation, transition, opacity, transformation, and many others. Web developers however need to ens...

These days, a typical web page is quite heavy. Even for a simple blogging site, there are many third-party scripts and resources involved, whether for Facebook Like button or Disqus-based commenting system. How do we know the impact of those extra bits?

Last week I was at Velocity 2013, a conference focusing on web performance and operations. The schedule was packed with high-quality sessions, the event was also attended by many luminaries and experts in the field. This was my third Velocity and it keeps getting better.

Transforming JavaScript source code is essential to build various JavaScript tools, from minifier to transpiler. There are two different techniques for doing the transformation: non-destructive change of the original source or full regeneration from the syntax tree. They serve different purposes and...

Maintainable software projects usually take the issue tracker seriously. More often, it is used not only to monitor bugs and defects, but also to serve as a task tracker. This practice permits the cross-reference between the commit message and the associated entry in the issue tracker, thereby allow...

It is amazing to live in an environment where the Internet connection is ubiquitous and fast. But in case the tube is having a problem and the bits from the web server are broken into random pieces, how does the web site look like? If the content degrades gracefully, the lack of style sheets may red...

When analyzing the performance of a JavaScript-based application, stopwatch is often a convenient tool. Just like any other timing measurements in real life, it is important to ensure that this produces a valid and confident result. Thus, we need to avoid some factors which may reduce its accuracy a...

Today is the final day of Fluent 2013, another conference focusing on JavaScript. There were tons of fascinating talks, everything from ECMAScript 6 to Web Components, organized in several parallel tracks. Overall, the event was very exciting.

The latest high-end gadget from Google, Chromebook Pixel, is a fantastic laptop. With a high-density 239 pixels/inch display, Intel Core i5 processor, and 4 GB RAM, it won’t disappoint many users. On its software side, Pixel runs ChromeOS, a consumer-oriented stack for day-to-day computing usage. It...

Until today, JavaScript comes with a function-level scope for variables and functions. This quirk often trips beginners who are already familiar with other curly braces language. With ECMAScript 6, the situation will change with the availability of the well-understood block scope.

Just like last year, summer means I’ll hit the road and do some evangelism work.