Best of JavaScript, HTML & CSS – Week of October 7, 2013



A lot of news this week including some significant releases such as Backbone 1.1.0 and the initial release of the Ghost blogging platform written with Node.js and Express. Of course, if you’ve come to learn, we’ve got a ton of tutorials as well.


Array.prototype.reduce can be used to search for a particular element in an array in JavaScript as Ariya Hidayat explains.
Searching using Array.prototype.reduce

Shankar Cabus shows how to simulate a conical gradient using CSS3 only.
Conical Gradients in CSS

Cory House explains how the JavaScript configuration object pattern let’s you load configuration data from server while still keeping client side code clean.
JavaScript Configuration Object Pattern

Vittorio Zaccaria shares a simple visual model using Petri nets that is designed to help understand promises in JavaScript.
A Simple Visual Model for Promises

Webkit Nightly and Chrome Canary now supports CSS masks using an image as an alpha mask or a luminance mask.
CSS luminance masking now available in Chrome Canary and Webkit Nightly

Some best practices for using JavaScript source maps from Patrick Mueller.
sourcemap best practices

Kerry Butters offers a good introduction to CSS Regions.
A Beginner’s Guide to CSS Regions

As Paul Irish explains, Flexbox isn’t slow but old Flexbox is slower than new Flexbox.
Flexbox layout isn’t slow

Dr. Axel Rauschmayer explains why prototype-less objects make better maps in JavaScript.
The dict pattern: objects without prototypes are better maps

Libraries and Frameworks

Ryan Anklam shows how Ember Components let you access to the power of the emerging web components spec for creating reusable widgets.
Ember Components – Reusable Building Blocks For Your Application

Zing Design offers a feature comparison of Bootstrap 3 and Foundation 4.
Bootstrap 3 vs. Foundation 4 feature lineup

Addy Osmani shows how you can build web applications using web components by combining Yeoman with its Polymer generator.
Building Web Apps With Yeoman And Polymer

Alex Carpenter shows examples of how to abstract your CSS styles for better reuse.
Basic CSS Abstraction


PhoneGap doesn’t support click the status bar to scroll to top on iOS out of the box but Andrew Trice created a native plugin to add it.
Status Tap/Scroll To Top in PhoneGap Apps on iOS

New and Updated Libraries and Frameworks

Backbone.js version 1.1.0 has been released.

Ghost is a new blogging platform (and service) built with Node.js and Express.
Ghost: A Blogging Platform

frak is a JavaScript library that transforms collections of strings into regular expressions that match them.

grunt-newer allows you to configure Grunt tasks to run with only those files modified since the last successful run.

Harp is a Node-based static web server that also serves Jade, Markdown, EJS, Less, Stylus, and CoffeeScript without configuration.

Ideal Forms is a framework for making responsive HTML forms and version 3 adds more modularity, extensions and more.

Brackets 31 has an improved API for better linting integration and Raymond Camden explains how this impacts writing extensions.
New Linting API

RulersGuides.js is a Javascript library which enables Photoshop-like rulers and guides interface on a web page.
RulersGuides.js demo

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.

Cabin is a simple and extensible static site generator powered by Grunt.


Joan Lafferty steps through how to try out CSS Regions, a draft CSS specification for flowing content, using the Edge Reflow responsive design tool.
Playing with CSS Regions in Edge Reflow

Full Screen Mario is an HTML5 remake of the original Super Mario Bros with the source available on GitHub.
Full Screen Mario

1, 'include' => $prevPost->ID ); $prevPost = get_posts($args); foreach ($prevPost as $post) { setup_postdata($post); ?>

1, 'include' => $nextPost->ID ); $nextPost = get_posts($args); foreach ($nextPost as $post) { setup_postdata($post); ?>


Leave a Comment