Empower users with keyboard shortcuts

While web interfaces are typically thought of as point-and-click, power users often prefer being able to access functionality quickly just by pressing keys. You might think that JavaScript would be necessary to provide this ability in a website, but it’s possible to create a shortcut key with a simple attribute, namely, accesskey. For example, the…

Details

Why include CSS with the @import rule?

As with most web development techniques, you have multiple options when it comes to applying CSS styles. One of the lesser used techniques is the @import rule. This allows you to load styles from external files (optionally restricted by the current media type) within an external stylesheet, or inside the style element, like so:  …

Details

How to enable higher levels of JavaScript

It’s easy to think of JavaScript as a static thing, but actually it’s continually changing. For example, JavaScript 1.7 added the concept of iterators and generators, and 1.8 gives you generator expressions. Even if the user’s browser supports these JavaScript versions, accessibility to their features isn’t automatic. You need to declare the version of JavaScript…

Details

Take advantage of pixel density with HTML 5.1’s srcset attribute

With advances in screen technology (as pioneered by Apple’s Retina display), some devices may actually be able to offer additional resolution within a pixel. To take advantage of the ability to display sharper images, you can use HTML 5.1’s srcset attribute to specify different images for the same layout. For example, following code displays a…

Details

Resolve box-model woes with this simple CSS property setting

The CSS box model is both the guidepost and nemesis of many web developers and designers. While it specifies how spacing works in and around elements, the way browsers implement it can seem strange and paradoxical. Now that many browsing on mobile devices is so popular, the box model’s faults may be exacerbated by limited…

Details

Create responsive sites quickly with jQuery Mobile

If you need to create a site quickly that works well on all devices, jQuery Mobile is one option to consider. Despite the name, jQuery Mobile isn’t only for mobile devices, nor is it primarily a tool to extend JavaScript. Instead, you can think of it as a lightweight framework that allows you to get…

Details

A quick tool to see just how bad website performance is

No matter how many best practices you follow to maximize website performance, you can’t know if your performance is good unless you test it. That means not just subjective testing to see if pages seem to be loading quickly enough, but also tests that you can quantify. If you run such tests, you may be…

Details

A key requirement when animating with jQuery

JQuery’s animate method simplifies transitions. In particular, it can help avoid the need to calculate element positions in a cross-browser fashion. For example, the following code moves any elements having a class called “block” to the right by 10 pixels, without requiring your code to find out the current position and then add to it:…

Details

Make effective use of the differences between libraries and frameworks

Many developers loosely refer to jQuery as a “framework” or fail to understand the essential difference between it and bonafide JavaScript frameworks such as AngularJS and Bootstrap. Worse, by misunderstanding the difference, developers may miss the reasons to use frameworks or libraries. While both frameworks and libraries can help you enhance functionality and easily handle…

Details

Avoid this easy JavaScript concatenation mistake

Since JavaScript is a loosely typed language, it’s common to concatenate variables of different types with plus (+) signs and expect that everything will just work through implicit conversion. However, this practice can be the source of bugs if you’re not careful. Consider the following code: var num1 = 5; var num2 = 10; alert(“total:…

Details

Resolve box-model woes with this simple CSS property setting

One of the most important decisions you can make in developing any new web functionality is whether to use existing third-party tools and controls, or to code more from scratch. There are a vast number of tools available (many of them open source) to develop various web features, such as date pickers, grids, CRUD interfaces,…

Details

Why won’t my WordPress style update?

Unlike some other CMSs or similar programs, WordPress doesn’t automatically cache your styles, so you may wonder why style changes you make don’t show up on your web page. Two obvious possible reasons could be that the browser is caching your styles (press ctrl-F5 to force the browser to refresh), or you’re using a plugin…

Details