The Changelog

Open Source moves fast. Keep up.

HTML5

Subscribe via RSS

Support The Changelog. Become a member!

TimeJump brings deep linking to HTML5 audio and video podcasts right

So neat! Thanks to Dave Rupert of Paravel, ShopTalk Show and ATX Web Show fame, you can now time jump, or deep link, to a particular time in HTML5 audio and video podcasts! Introducing TimeJump, deep links for podcasts davatron5000.github.com/TimeJump/— Dave Rupert (@davatron5000) April 3, 2013 For example, checkout 0.6.1 at 0h12m58s where Robby Russell [...]

Draggabilly helps make your HTML draggable right

Draggabilly, by @desandro, is a small (~10k) JavaScript library that does one thing well — make that shiz draggable. Installation is simple, just download and include the file. If, however, you are familiar with Bower: > bower install draggabilly Usage is simple too (from the README): var elem = document.querySelector(‘#draggable’); var draggie = new Draggabilly( [...]

intro.js makes implementing step-by-step user guides too easy right

When thinking about the user experience of a new screen or feature, have you ever wanted to implement a step-by-step guide that highlights certain areas of the screen and walks the guides the user through what they need to do? Well, intro.js from Afshin Mehrabani solves that problem — elegantly too. Usage is as easy [...]

Analyze and compare images in the browser with Resemble.js right

Resemble.js, by James Cryer is a small (~11kb) JavaScript library that helps you analyze and compare images in the browser. The only ‘requirements’ are the HTML5 File API (for parsing data) and the HTML5 Canvas (for rendering diffs). You can analyze a single image: var api = resemble(fileData).onComplete(function(data){ return data; /* { red: 255, green: [...]

Nginx gains support for WebSockets right

I saw this commit land a few days ago, and now it’s out in a release. nginx 1.3.13 has support for proxying WebSockets requests. What does that mean? Well, let’s look at the commit that introduced the change: This allows to proxy WebSockets? by using configuration like this: location /chat/ { proxy_pass ​http://backend; proxy_http_version 1.1; [...]

Holder.js – Client Side Image Placeholders right

Holder, by Ivan Malopinsky, is a very small image placeholder service that renders everything on the client side. Using it couldn’t be easier: // This will render a 200×300 image <img src=”holder.js/200×300″ /> // To prevent console errors, use data-src <img data-src=”holder.js/200×300″ /> There is also support for three themes, industrial, gray, and social. <img [...]

Visibility.js – a wrapper for the Page Visibility API right

Most modern browsers have support for the Page Visibility API. According to the MDN, the only two that don’t currently support it are Safari and Opera. Basically, this API allows you to know when a webpage is visible and in focus. With tabbed browsing, this can be a very useful feature, as web pages lose [...]

KineticJS – HTML5 Canvas Drawing Made Easy right

Eric Rowell, a front end engineer at Yahoo! created KineticJS – an incredibly powerful JavaScript library. Straight from the KineticJS website: You can draw things on the stage and then add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations and transitions In other [...]

Spin.js – CSS3 Spinning activity indicator right

Felix Gnass created a handy JavaScript utility that makes it very easy to add a “spinner” to your website. The project is very small (~2k), has no dependencies, uses CSS for styling/animations and has fallbacks for older browsers. After including the JavaScript library: var target = document.getElementById(“spinner-wrapper”); var spinner = new Spinner({lines: 12, color: “#fff”}).spin(target); [...]

HTML5-Clear: A replica of the Clear iPhone UI in HTML5 and CSS3 right

If we’re fans of anything, we’re fans of experiments that get open sourced. As a followup to our native coverage of Clear’s UI with JTGestureBasedTableViewDemo, you might enjoy this experiment by Evan You to replicate the UI of Clear in HTML5 and CSS3. HTML5 Clear is a replica of the awesome Clear iphone app (UI [...]

Episode 0.7.0 – Foundation and other Zurb goodies

Wynn caught up with Jonathan and Matt from Zurb to talk about Foundation, their HTML5 front end scaffold and many projects from the Zurb playground. Items mentioned in the show: Jonathan Smiley – Design lead at Zurb Matt Kelly is a developer at Zurb The Zurb playground showcases many Zurb’s front end experiments. Zurb foundation [...]

Episode 0.6.7 – HTML5 Boilerplate, Modernizr, and more with Paul Irish

Adam and Wynn caught up with Paul Irish of Google’s Chrome developer relations team to talk about HTML5, JavaScript, CSS3, polyfills, and more. Items mentioned in the show: Paul Irish – Chrome dev relations guy at Google. Dion Almaer – Host of Function Source, all around JavaScript, frontend expert. “HTML5 is a jewel that we [...]

capt: Command line tool for creating Backbone.js apps right

If you set out to use Backbone.js for a client-centric application, one thing you might miss coming from a server-side MVC framework is some basic file structure, dependency managment, and generator support. To solve this problem Ben Nolan has created Capt. Capt is aimed at developers building single page, stand alone applications as well as [...]

Episode 0.5.3 – Formalize and News Roundup Design Edition with Nathan Smith

Episode 0.5.3 – Formalize and News Roundup Design Edition with Nathan Smith Adam and Wynn were joined by Nathan Smith, creator of 960.gs to talk about his new project Formalize and the latest news on The Changelog. Download MP3 Items mentioned in the show: Nathan Smith, front end dev, speaker, and author 960 Grid System [...]

reveal: jQuery modal for HTML5 and data attributes right

The Zurb team has long pushed the envelope of CSS3. Now they’ve released a simple plugin for jQuery that uses HTML5 data attributes to wire up links to modal dialogs. To use, you’ll need jQuery, the plugin, and the base CSS: <link rel=”stylesheet” href=”reveal.css”> <script src=”jquery.min.js” type=”text/javascript”></script> <script src=”jquery.reveal.js” type=”text/javascript”></script> To create a dialog, just [...]

rapt: Platform game in HTML5, Canvas, and jQuery right

Ask ten people to define HTML5 and you’d probably get a dozen definitions. For Evan Wallace, Justin Ardini, and Kayle Gishen, it means gaming. The trio has released Robots Are People, Too (R.A.P.T), a platform game built using HTML5’s <canvas> API and jQuery. RAPT offers multiplayer gameplay and a level editor so you can extend [...]

node-o3-canvas: HTML5 Canvas API for NodeJS right

This isn’t the first time we’ve featured the work of our friends over at Ajax.org. In the past we mentioned o3 and Cloud9 and even had them on the podcast, see episode 0.1.6. Their project, node-o3-canvas, is an HTML5 Canvas implementation for NodeJS based on LibAGG and Freetype. It’s implemented using their previously mentioned O3 [...]

waterunderice: Resumable, asynchronous file uploads using WebSockets and HTML5 right

As browser support for HTML5 grows, web developers are finding new options for tasks formerly only possible with browser plugins. Flash has long been the go-to method for large file uploads, however the new HTML5 File API promises a more native solution, allowing files to be read and chunked up on the client using JavaScript. Taking [...]

Watch Wednesday

Quick hitting list of projects to check out on GitHub: pauldowman / gitmodel Git Model is an ActiveModel-compatible NoSQL store based on git. Not ready for primetime but very interesting. assaf / vanity Vanity is declarative A/B testing for Rails. sidelab / tile5 Tile5 is a nifty multi-provider mobile-optimized mapping framework for building mapping or [...]

h5Validate: HTML5 Form Validation for jQuery right

h5Validate is a jQuery plugin that understands HTML5 forms and knows how to validate them, even in browsers that don’t yet support HTML5. In browsers that do support HTML5, h5Validate adds some much-needed features, such as the ability to customize the user interface when an input fails validation. For demo and usage, see the h5Validate [...]

rack-modernizr: Ruby Rack middleware for Modernizr on the server right

A couple of weeks ago we covered modernizr-server, a nifty PHP project that lets you tap into the power Modernizr on the server. Modernizr, of course, is the JavaScript feature detection library that allows you to check browser support for HTML5 and other advanced features. Inspired by modernizr-server, Marshall Yount brings Modernizr to your Ruby [...]