Showcase your work with these HTML5 device mockups #

Want to show off how good your designs look on an iPhone, Nexus 7, or Microsoft Surface? Look no further than pixelsign’s html5-device-mockups

You can pick portrait or landscape, choose from two colors, and even trigger JavaScript events when the home button is clicked (for devices that have one).

See how nice The Changelog looks on a white, landscape, iPhone 5:

html5 device mockups

Here’s a demo page where you can see the device mockups in action.

Glyphr is a free, html5 based font editor #

Looks like the Glyphr team set out to lower the barrier to get in to font design.

Professional font design programs are very complex, and quite expensive. Glyphr is accessible, streamlined, and made for font design hobbyists… and it’s free!

At first glance, it appears that they’re off to a great start. Check out the sandbox if you want to play around with it.

Proposed Microformat for site’s source code, rel=“source” #

How awesome would it be to use rel="source" to link a document or project to it’s source code?

From Jeremy’s post:

We were talking about how it would be nice to have some machine-readable way of explicitly marking up those kind of links, whether they’re in the head of the document, or visible in the body. A rel attribute describes the relationship of the current document to the linked document. So I’ve proposed rel="source".

If you agree with Jeremy share his post and help spread the word.

annyang! lets your users control your site with voice commands #

annyang! is an awesome little JavaScript library by Tal Ater that adds voice commands to your site via webkitSpeechRecognition. Using annyang! is as easy as:

if (annyang) {
  // Let's define a command.
  var commands = {
    'show tps report': function() { $('#tpsreport').show(); }
  };

  // Initialize annyang with our commands
  annyang.init(commands);

  // Start listening.
  annyang.start();
}

You’ll definitely want to see this one in action, so make sure to visit the project’s homepage where there are multiple demos.

annyang! only works in browsers that support webkitSpeechRecognition, so it should be used as an enhancement to your site unless you have a very specific audience.

And if you’re wondering about the name… yes. It is in reference to the hilarious Arrested Development character by the same (phonetic) name. Tal took creative liberty with the spelling to make sure the name wasn’t too annoying for those who don’t get the reference.

I pleaded with Tal to match the official spelling, but he simply responded with further Arrested Development references. I think the guy might have a problem. ;)

Chart.js — Beautiful client side graphs to visualise your data using HTML5 canvas #

Chart.js

Sexy charts can really make a good data driven UI that much better. One thing that designers struggle with is creating sexy charts and graphs that their developer counterparts can actually implement without having to write it all from scratch.

Chart.js, from Nick Browne, makes it easy to visualize your data using HTML’s <canvas> tag and create great looking charts that are fully customizable. With 6 charts to choose from — you’re able to visualise your data with various animated charts that look great on retina displays too.

Check out the source and the docs to get up to speed. There’s a node port too.

TimeJump brings deep linking to HTML5 audio and video podcasts #

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!

For example, checkout 0.6.1 at 0h12m58s where Robby Russell talks about how he got started with zsh and weighs in on the bash vs. zsh debate.

How it works

Include the script at the bottom on your episode pages. It will auto-detect the t (time) parameter in your URL and attempt to fast-forward listeners to that timestamp. Dave notes that it “usually works.”

Supported URL formats include:

http://mypodca.st/ep/?t=1h23m45s <- preferred format
http://mypodca.st/ep/?t=1m23s
http://mypodca.st/ep/?t=1:23

Check out TimeJump’s homepage, and the source on GitHub to add it to your podcast! Dave, add us to the list my friend!!

Hull is to social apps, as WordPress is to CMS — a full stack social platform as a service #

I’ve had a draft in-queue for Hull for a few weeks now. I follow Victor Coulon, who happens to be a UI Engineer at Hull, on Dribbble and saw his shot last week showing off an app that showcases Github projects for an organization or a user. It’s built all in JavaScript, based on Aura JS, and now it’s open sourced.

If you haven’t checked out Hull yet, it’s a “zero-to-app in minutes” full-stack open platform that makes it easy for developers to build social apps with open and reusable components. Right now they’re in private beta, but you can register today and get on the list — they’re on-boarding new users regularly.

From Widgets, widgets, widgets:

To ensure the best possible platform, we’re building upon the hottest technologies, and we’re open sourcing the client code.

Hull takes inspiration on frameworks such as angular.js and batman.js to provide a very simple set of data attributes, that allows you to instantiate, configure and hook-up widgets together only by declaring them in HTML.

Register for Hull, check out the source to their app showing of their GitHub open source, or read the post covering how you can build your own Twitter-like open source page.

Draggabilly helps make your HTML draggable #

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( elem, {
  // options...
});

A few options are available: containment: #container will contain the element and handle: .handle lets you specify an element to use for interaction. Standard drag and drop events are available: dragStart, dragMove and dragEnd. While dragging, the element will have a .is-dragging class, so you can style it to your heart’s content!

View a demo or view the source on GitHub.

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

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 as adding data-intro and data-step to your HTML elements — for example:

<h1 data-intro='This is step one.' data-step='1'>The Changelog</h1>

Check out the readme to for install and usage details.

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

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: 255, blue: 255, brightness: 255 } */
});

or compare two images:

resemble(file).compareTo(file2).onComplete(function(){
  return data;
  /* { misMatchPercentage : 100, isSameDimensions: true, getImageDataUrl: function(){} } */
});

View a demo or the source on GitHub.

KievII Host is like a Digital Audio Workstation for KievII audio plugins using HTML5’s Web Audio API #

KievII Host is a pretty neat project by Cristiano Belloni that pushes the boundaries of HTML5’s Web Audio API and uses HTML5’s “very cutting-edge Web Audio Input feature” allowing low-latency access to live audio from a microphone or other audio input on OS X. Sorry Windows and Linux, but stability for WAI is only OS X at the moment.

KievII Host

KievII Host is a host application for KievII audio plugins. Cristiano describes it as a highly experimental KievII plugin host, and via email said “I just shipped v 0.1.1, which features plugin window resizing and I’ll be adding new plugins to the plugin repo over the next few days. I’ll also be including my Morningstar Synth project, which The Changelog featured a year back.”

KievII Host loads the KievII plugins dynamically from the Github repository, using the GitHub API and require.js.

From the KievII Host homepage:

KievII Host is my take on a web application which can dynamically load, execute and interconnect independent audio plugins, just like Digital Audio Workstations do with VST and/or AU plugins.

One of the goals of the project is to define an open standard for web audio plugins, and maintain an open repository of said plugins, which developers can contribute to freely.

If you’re interesting in helping Christiano and dabbling in some sick JavaScript and HTML5’s Web Audio API read the overview on how to develop a KievII plugin. The K2H plugin spec is under active development and open to change as well as suggestions. File an issue to share your thoughts and ideas.

Here are a few links to checkout:

tmTheme-Editor is a color scheme editor for SublimeText, Textmate (and other text editors) #

What started as “a personal experiment” for Allen Bargi to use new HTML5 file APIs in Chrome and Angular.js, tmTheme-Editor is a visual theme editor that allows you to edit tmtheme files easier and faster than any desktop counterparts.

TmTheme-Editor-Twilight

From the readme:

NOTE: Only works in Google Chrome at the moment since the HTML5 APIs used are not available in other browsers yet.

HTML5 APIs used:

  • Blob constructing
  • FileReader API
  • FileWriter API
  • Filesystem API
  • File saver API
  • Drag and Drop API

Check out the source to take a peek behind the curtain and try out the visual theme editor to try out the tmTheme editor for yourself.

Make sure you view the gallery of themes available too – click the Gallery button in the top left of the editor.

Nginx gains support for WebSockets #

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;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

}

A nice example, right there! Before you could do this, you needed to do some kind of extra tricks, like using varnish in front of nginx and having varnish proxy the requests straight to your back end servers. Super awkward.

You can grab a copy of nginx 1.3.13 on their download page.

Discuss on Hacker News.

Holder.js – Client Side Image Placeholders #

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 200x300 image
<img src="holder.js/200x300" />

// To prevent console errors, use data-src
<img data-src="holder.js/200x300" />

There is also support for three themes, industrial, gray, and social.

<img data-src="holder.js/200x300/industrial" />

If you want to create your own theme (so your images will not stick out like a sore thumb), you can add them with the three properties: background, foreground, and size. background/foreground are self explanatory, and size is the minimum font size for the theme.

Holder.add_theme("thechangelog", { background: "#f0f0f0", foreground: "#303030", size: 12});

If you add the theme before your images are added to the DOM, you can use the theme like any of the other themes. However, if you add the theme after your images have already been rendered, you would need to call run().

Holder.add_theme("thechangelog", { background: "#f0f0f0", foreground: "#303030", size: 12}).run();

There are some other features, from custom text to custom domains, that you can checkout by viewing the source at GitHub.

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

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 visibility often.

However, the API is fairly low level and requires some vendor prefixes, which is always a great reason to write a wrapper for syntactic sugar. Enter Visibility.js, a wrapper for the API written by Andrey Sitnik. Using it is simple:

var minute = 60 * 1000;
Visibility.every(minute, 5 * minute, function(){
  // Do something every minute for 5 minutes when page is visible.
});

You can check if the Visibility API is available:

if ( Visibility.isSupported() ) {
  // We have support!
}

You also have access to the Visibility API events:

Visibility.onVisible(function(){
  // We are now visible!
});

Visibility.change(function(e, state){
  // e is the original event
  // state is the visibility state name [visible, hidden, prerender]
});

KineticJS – HTML5 Canvas Drawing Made Easy #

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 words, KineticJS leverages the HTML5 Canvas API and gives you an easy-to-use interface for drawing. The six things that sets KineticJS apart (according to Eric):

  • Speed (stress test)
  • Event Handling (click, dblclick, touchstart, tap, etc)
  • User Defined Layers (similar to Photoshop layers)
  • Event Driven Architecture (attr change events, draw events, etc)
  • Transitions (16 different transition types)
  • Very Robust Text Support

KineticJS is growing very fast, and Eric believes it has a good chance of becoming a standard canvas framework for graphical applications in the future. Coming down the pipeline is support for the Filter object. Adding standard filters (blurs, glows, grayscales, etc) will be very easy, and can be applied to any Kinetic node (stage, layers, groups, or shapes).

Contributions are welcome, as long as they follow the style guidelines and don’t break the tests. If you want to get involved, head on over to the GitHub repository.

You can also go to the project homepage for more information, examples, documentation and more. If you are interested in how you might use the library with the HTML5 Canvas API, you can visit Eric’s website html5canvastutorials.com.

Spin.js – CSS3 Spinning activity indicator #

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);

Voila! You now have a spinner inside of the element you specified as your target. It is highly customizable (number of lines, color, thickness, radius, speed, trail, etc). If you want to use it with jQuery, they have an example showing you how.

Head on over to GitHub to browse the source, or view the example page with customizable sliders.

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

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

HTML5 Clear is a replica of the awesome Clear iphone app (UI only) featuring the innovative gesture controls and the look and feel in HTML5 using CSS3 transitions.

While Evan might not have been able to get 100% of the details right, it comes pretty close and there’s certainly something to learn from the codebase.

Source on GitHubDemoVideo

Reverie – A versatile HTML5 responsive WordPress framework based on ZURB’s Foundation #

Whoa, that’s a mouthful, but very exciting.

Reverie Screenshot

For those of you who have embraced jekyll, Octopress (the WordPress alternative for hackers) or NestaCMS – Reverie may not be for you. But there are still tons MILLIONS of sites/blogs running on WordPress.

As of today’s date (02/10/2012) there are 71,176,074 WordPress sites in the world and WordPress.com hosts about half.

Let’s summarize:

Zhen has licensed the Reverie Framework under an MIT License, the same as Foundation and encourages developers and designers to keep the footer information (“powered by Reverie Framework”) to help spread the word, though it’s optional.

Source on GitHubHomepage

#70: 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 […]