Posts Tagged ‘front-end’

CSS Data URIs – Use Them In All Browsers Now!

CSS Data URIs – Use Them In All Browsers Now!

Data URIs are one of the best techniques in CSS, allowing developers to avoid referencing external images and instead embed them directly into a stylesheet. The main advantage of this approach is to save HTTP requests.

HTTP requests are a huge performance bottleneck, and the reason techniques such as CSS image sprites have been popular for some time. Basically, if you can avoid requesting an extra file, not only does it save your server the work of looking up the file, but it also saves your user the download time. In fact, HTTP request management is so important, that it is the top issue in the Yahoo Performance Rules.

Data URIs are an excellent way to reduce HTTP requests and speed up your pages, so let’s walk through how to use them in all major browsers.


Graceful Degradation With CSS3

Graceful Degradation With CSS3

With IE9 in development and Opera 10.5 released, CSS3 is a few steps away from being supported by all modern browsers. But users may take a while to upgrade, and responsible developers will support legacy browsers for years to come.

For some, cross-browser development means making websites that look exactly the same in all browsers. But if developers continue to cater websites to inadequate browsers such as IE6, then they’re just holding back modern browsers from performing to their potential.

Graceful degradation is not about allowing websites to look bad in older browsers, but about making them look great in modern ones. It means taking advantage of CSS3′s useful features to progressively enhance web pages for the vast majority of users.


CSS Summit: The Good Parts

CSS Summit: The Good Parts

Yesterday’s CSS Summit featured some the best CSS minds presenting on cutting edge CSS issues. There was a ton of great information presented across the 8 sessions, but here’s a wrap up of the single best piece of information from each presenter:

Denise Jacobs – Advanced CSS Troubleshooting

The highlight of Denise’s talk was some specific coding tips about clearing floated content.

She started with the standard overflow: hidden method, which falls short with support for borders & margins and also doesn’t allow scrollbars if they’re needed. Denise suggested instead using overflow: auto; width: 100%; which avoids these issues. You don’t have to use the exact values above, you just have to set some type of overflow and width / height value.

Denise went on to discuss a .clearfix:after method, see the gist.

Denise likes this clearing method since it doesn’t include any extra, non-semantic markup (as … Read more…


5 Asset Management Tricks for Faster Websites

5 Asset Management Tricks for Faster Websites

When it comes to front-end performance, good asset management is just as important as good code. Simply put: downloading assets takes time.

Computers and browsers now render pages and execute Javascript faster than ever. Although user bandwidth is increasing, the filesize of assets has been growing in turn.

These factors, combined with the rise of the mobile web, have made bandwidth the primary bottleneck in website performance.

Here are 5 simple steps to reduce download times with better asset management on your sites. Read more…


10 Javascript Performance Boosting Tips from Nicholas Zakas

10 Javascript Performance Boosting Tips from Nicholas Zakas

Nicholas Zakas is a Javascript guru and principle front-end engineer for the Yahoo! homepage. Zakas just announced his new book High Performance JavaScript, which you should order today.

Zakas is pretty much the man when it comes to Javascript performance, and in June he gave a Google Tech Talk entitled Speed Up Your Javascript.

While Javascript optimization is by no means black-and-white, here’s a list of 10 tips from Nicholas’ talk that will help you write Javascript that really flies.

1. Define local variables

When a variable is referenced, Javascript hunts it down by looping through the different members of the scope chain. This scope chain is the set of variables available within the current scope, and across all major browsers it has at least two items: a set of local variables and a set of global variables.

Simply put, the deeper the engine has to dig into this … Read more…


Appending Style Nodes with Javascript

Appending Style Nodes with Javascript

In Javascript it often makes sense to attach a stylesheet rather than style a bunch of individual attributes. Appending a stylesheet to the DOM has a number of advantages:

  • Stylesheets can be easier to work with than Javascript—it’s just more natural to use CSS syntax for styling.
  • It’s nice to avoid the cross-browser headaches associated with Javascript styling. Compare CSS’s simple float: left to Javascript’s style.styleFloat = ‘left’ and style.cssFloat = ‘left’.
  • Appending a stylesheet is better for performance when styling 15 or more elements.
  • CSS allows you to leverage pseudo-classes and define styles with the simple a:hover selector instead of both onmouseover and onmouseout event listeners.

There are a couple ways to append a stylesheet. Although it’s usually best to attach an external stylesheet, there are times when you need to build a stylesheet on the fly with Javascript. Let’s walk through the code we’ll need to append … Read more…


TranslateThis – A Javascript Translation Widget for Noobs and Nerds Alike

TranslateThis – A Javascript Translation Widget for Noobs and Nerds Alike

TranslateThis is a new Javascript widget that provides 52 languages of translation by leveraging the Google Language API.

Installing TranslateThis couldn’t be easier—simply copy and paste the widget code anywhere on your website, you don’t have to upload any files or change any settings.

Besides being easy to use, TranslateThis also provides many attractive features for developers. First off, requests to the Language API run in Javascript, so the translation is pretty fast. Additionally, the script is lightweight, weighing in at just over 11kb with another 7kb of imagery. And since it doesn’t depend on any Javascript library, TranslateThis can be implemented on any website without additional overhead. Finally, TranslateThis has been tested in all modern browsers and its user interface is designed to be straightforward and seamless.

Get your own TranslateThis Widget

Read the TranslateThis Documentation

What can you customize in TranslateThis?


10 Advanced jQuery Performance Tuning Tips from Paul Irish

10 Advanced jQuery Performance Tuning Tips from Paul Irish

There were a lot of good speakers at today’s jQuery Summit, but Paul Irish‘s talk on jQuery Anti-Patterns for Performance & Compression was my stand-out favorite. Covering a number of advanced jQuery performance optimization techniques, this speech put my knowledge of jQuery optimization to shame.

Before Paul’s talk my understanding of jQuery performance tuning was fairly simplistic:

  1. Optimize selectors to descend from an id if possible.
  2. Use tag names when selecting classes and don’t use an excessive number of selectors.
  3. Define variables instead of selecting the same object repeatedly.
  4. Optimize your code replacing repetition with object oriented functions.

But the information Paul presented blew all that out of the water. Here are 10 jQuery performance rules I gathered from his presentation:

1. Optimize selectors for Sizzle’s ‘right to left’ model

As of version 1.3, jQuery has been using the Sizzle Javascript Selector Library which works a bit differently from the … Read more…


10 Things Every Good Web Developer Should Know (A Checklist)

10 Things Every Good Web Developer Should Know (A Checklist)

My favorite thing about web development is the wide variety of skills it uses. Being a good developer means staying on your toes and always learning, because there are so many important skills and these are constantly changing.

Here’s a checklist of 10 skills that are some of the most important for good web developers to have. These focus a bit on front-end skills, but they apply to all developers:

(more…)


QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler

QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler

I’m happy to announce the release of QuickFlip 2, a major reworking of the jQuery plugin that flips any piece of HTML markup over like a card. The new version is faster and even easier to use—simply call the flip animation through a jQuery selector and the QuickFlip will flip the front panel to show its back. The flip effect is similar to the UI animation on the iPhone

Download QuickFlip 2 for jQuery

Read the QuickFlip documentation

QuickFlip works by using an animation shortcut that is barely noticeable when flipped quickly (hence the name). This shortcut improves performance while allowing the flip effect to work smoothly with any piece of markup regardless of images, backgrounds or CSS.

It provides an attractive alternative to other slower and more resource heavy Flash and jQuery flip animations. However if you want a smoother option with … Read more…