The JavaScript blog.


graphics style-guides d3

Lithium Labs Visualization Components, The Zen Approach

Posted on .

Lithium Labs Visualization Components

Sentiment Wave

Recently I've been looking for D3 libraries, and coincidentally Jack Herrington sent in Lithium Labs Visualization Components (GitHub: lithiumtech / li-visualizations, License: Apache 2.0, Bower: li-visualizations). This is a set of D3 visualisations, including Sentiment Wave, Reticule, and Elegant Waves.

It includes some examples written in CoffeeScript and an example application that you can try out locally with preloaded data.

The Zen Approach

The Zen Approach by Nijikokun is a JavaScript style guide. It's detailed and instructive, so it may work well as a beginner's guide if you're looking for documentation that will get existing programmers up to speed with modern JavaScript.


Judgement call, the slowest known method is [].join. If you are building something that requires high performance do not use [].join. It's not bad, it's just not performant. The two fastest methods of multiline are one-line strings (no breaks), and in second using the \ character (breaks), with + (concat) trailing slightly behind. I'll let hard data back me up on this. My personal preference is to use one line for performance (word-wrap exists people), and then [].join for non-performant things, like variables and such. Should the line require variables and need to be performant I will use + concat notation.

The author hints that it may become a book, series of talks, or an open source handout -- it's currently MIT licensed.


jquery mobile images on-page guidance style-guides

jQuery Roundup: Airbnb Style Guide, jPanelMenu, Crumble, imgLiquid

Posted on .

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

Airbnb JavaScript Style Guide

Airbnb JavaScript Style Guide is a pretty detailed JavaScript style guide that includes suggestions for jQuery. As a bonus, the Resources section includes links to other style guides (and DailyJS, thanks Airbnb!)

I've been using Google's Style Guide for a few projects, although I don't necessarily have a preference for any style guide. The code style used in examples on DailyJS came from trying to use horizontal space effectively (the blog has a fixed-width narrow design), but also by trying to make things explicit for beginners. Even these humble goals are subjective enough to cause endless arguments. The best advice I could give on the matter is to pick a style and be consistent.


jPanelMenu screenshot

jPanelMenu (GitHub: acolangelo / jPanelMenu) by Anthony Colangelo creates a navigation panel similar to those found in recent mobile applications. It can be configured to use selectors for the menu and an element that opens the menu:

var jPM = $.jPanelMenu({  
  menu: '#custom-menu-selector'
, trigger: '.custom-menu-trigger-selector'


This creates two div elements that contain the menu and the corresponding panel for the content.

jPanelMenu is well documented, and the documentation itself is built using the plugin so it doubles as a detailed example.


Crumble (GitHub: tommoor / crumble, License: MIT) by Tom Moor is an interactive tour built using grumble.js. Similar to the plugins mentioned by Oded Ben-David in Introduction to On-Page Guidance, Crumble shows help bubbles that draw attention to elements on a page.


imgLiquid (GitHub: karacas / imgLiquid, License: MIT/GPL) by Alejandro Emparan is a plugin for resizing images to fit a given container. It can try to fill a container or shrink the image instead, by using CSS:

$(selector).imgLiquid({ fill: true });

There's also a fadeInTime option that'll trigger a fadeTo animation.