When you are placing images into InDesign, you’re probably accustomed to clicking the loaded cursor on the page to place the image at 100 percent, and then scaling it after the fact. But did you know you can actually scale your image proportionately while you place it? While the cursor is loaded, click and drag…
Details
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
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
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
It’s easy to think of responsive design primarily as using media queries and flexible CSS-based layouts to allow a site to display correctly on any device. But this definition misses an important point: Users of different devices often have different priorities. For example, mobile device users may want the actual content to be more concise…
Details
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
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
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
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
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
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…
DetailsSince 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
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
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
One of the fundamental principles of CSS is that elements inherit their styles from parent elements, unless they override those styles. So it may seem paradoxical that you can set CSS properties to the value of “inherit.” Why set a property to “inherit” if elements will inherit their parents’ values anyway? The answer is that…
Details