JavaScript

An AJAX page loading script for WordPress

I have been experimenting with a custom AJAX page loader for my WordPress blog in recent months. Today I broke this project out into its own repo, available here: WP AJAX Page Loader. It is readily installed via Bower: bower install wp-ajax-page-loader. Some additional work is required to integrate and configure this script for your own projects.

I starting working on this project after learning about some of the many problems associated with history.js, a polyfill that many infinite scrolling implementations rely on to this very day. After having a look at some of the options I decided to adapt one of my own scripts to achieve pretty much the same effect with a much smaller payload size and a bit of a smoother user experience (or one that suits my needs anyway).

This script requires jQuery (already included in WordPress), HTML5 History API, and spin.js. Without jQuery (but with the other dependencies) it clocks in at about 15.5 Kb minified (comparable to the 21 Kb of Paul Irish’s Infinite Scroll).

Read the documentation or peruse the source code for more information or have a look at Pendrell for an example of integration and configuration. This script is currently active on this site so you should be able to demo it by browsing around any of the archives and clicking on “next” (or simply positioning the viewport near—but not at—the bottom of the page, for I am running the script in “footer safe” mode).

Roll your own SVG sprite sheets with Bower and Gulp

In this article I will show you how to integrate a custom set of open source icons into a project using Bower (a front-end package manager) and Gulp (a command line task runner). This isn’t exactly the sort of tutorial where you can copy and paste a bunch of code and get up and running—it is more a collection of working notes and scraps of code meant to point you in the right direction. I will assume readers have a basic understanding of modern front-end development tools and the command line. I happen to be using WordPress and PHP to implement the markup but also include some vanilla JavaScript that could be adapted for use pretty much anywhere.

Continue reading →

Getting up to speed with responsive images and Picturefill

This week I have challenged myself to get up to speed with responsive images and Picturefill, a polyfill for the upcoming HTML5 picture element as well as two new attributes for the img element. It wasn’t easy—there’s a surprising amount of reading and processing that needs to be done to understand the many problems and proposed solutions to responsive images on the web. Along the way I realized that I am not yet hugely interested in the art direction use case—which means I have focused more of my time on two less hyped img element attributes, srcset and sizes. Together these provide for most of what I am interested in: swapping source imagery at different resolutions.

Continue reading →