We’ve accepted the jankiness of page loads as a quirk of the web even though there is no technical reason for it. smoothState.js lets you add transitions to eliminate the hard cuts and white flashes of page loads that deface the beauty of the user experience.

SmoothState.js is a jQuery plugin that progressively enhances page loads to give us control over page transitions. If the user’s browser doesn’t have the required features, smoothState.js fades into the background and never runs.

Why are page transitions necessary?

Imagine, for a second, how disorienting it would be if touching a doorknob teleported you to the other side of the door. Navigating the web feels like using a teleporting doorknob. Layouts change, elements rearrange or disappear, and it takes time for the user to adjust. Smooth transitions reduce the effort it takes for users to get settled into a new environment.

Javascript SPA frameworks, sometimes referred to as MVC frameworks, are a common way to solve this issue. These frameworks often lose the benefits of unobtrusive code. Writing unobtrusive javascript gives us more resilience to errors, and improved performance and accessibility.

How does smoothState.js work?

smoothState.js provides hooks that can be used to choreograph how elements enter and exit the page during navigation. It uses the time the animations are running to fetch content via AJAX to inject into the page.

smoothState.js doesn’t dictate how things on the page should be animated. It supports CSS animations, as well as JS animation libraries like velocity.js.

Design philosophy and requirements

The project’s main goal is to allow developers to add page transitions without having to add any logic to the backend. We keep things unobtrusive at all times.

smoothState.js initializes on containers, not links. Think of a container as a small window object embedded in the page.

Every URL on your site should return a full layout – not just an HTML fragment
The smoothState container needs to have an id set – a unique hook to tell us what to update on the page
All links and forms on the page should live within the container
These requirements makes the website resilient, since it smoothState.js can abort and simply redirect the user if an error occurs. Making each link return a full page also ensures that pages are created with progressive enhancement in mind.

Illustration by akselkreis

Ad blocking is one of the hot topics in website design and development right now. Adblock Identifier is a sweet little tool that detects ad blocking software and creates an alert for users that functionality will be disabled if the ad block is left running.

Installation is key with this tool and you should follow the instructions carefully. Customization options include the title, description and theme for how the message looks. It comes with light and dark options with a light default.

You have a few customization options to think about, including the text in the alert message. The tool allows you to keep users from specific content if they are using ad block software or just warn them for next time.

Pegasus is the plugin that will allow you to do two things at once; now you can load data while still loading other scripts. Using this technique, you can reduce the time to display data in single page apps without touching the server.

This plugin is a great option for static sites or when you can’t do server-side data bootstrapping or rendering.

Here’s how it is different. Without Pegasus data is loaded only after the library is loaded. (This is a pretty inefficient process.) With Pegasus embedded, data loads parallel to the library. With Pegasus running as a script, data is loaded as soon as the script is loaded. Either of the second pair of options saves a lot of time because of the parallel loads.

This plugin works with all major browsers and IE8+ and the plugin works with any Javascript library.

What’s even better? Pegasus is a tiny plugin, coming in at only 0.2 kB min/gzip, you won’t have any worries about it weighing down your website.

If you are still not convinced, check out the live demo to find out if Pegasus is the right plugin for and existing or your next website project.

SVGMagic is a simple jQuery plugin that searches for SVG images (including background and inline data images) on your website and creates PNG versions if the browser doesn’t support SVG.

Wondering why you should use SVG images? SVG images are vector based! Meaning that they will be as sharp no matter how big they are. In other words: one file for every size. (This is where image handling is going in website design thanks to HD and retina displays.)

What makes this tool even better is that it is super simple. Just download the script, include it and initialize it.

Here’s how it works: First, the script will check which images on your website are SVG and collect the URLs. These URLs are sent to our server which will temporarily download, convert and save them. When that’s done the server sends back a package with new URLs. The SVG images on your website than get replaced by the new PNG images and your old-school visitor can see the “SVG” images.

It might sound complicated, but it actually happens so fast that the user never knows that it is happening. Try it yourself and you will be amazed at how quick and efficient this tool really is.

Detects if an element falls off the right/left side of the viewport.

Automatically alert your users when they’ve lost internet connectivity

Allow advanced css selector in ie6+

Retina, conditionals, done right. Detects browser and pixel ratio, allowing you to serve conditional JS & CSS files.

The jQuery Browser Plugin is an addon for jQuery that makes it easy to uniquely identify your visitors’ browsers.

Auto load and refresh div every 10 Seconds.

Helps ease the pain when having to deal with IE z-index issues.

Ie6 png fix that use Jquery selectors.