Best of JavaScript, HTML & CSS – Week of August 26, 2013

by Brian Rinaldi on September 3, 2013

The modern web is always changing, and this article is more than two years old.

This past week featured a lot of tutorials, with at least a couple focused on best practices in writing CSS which seems to be a hot topic. Significant project updates include Ember 1.0 and ChocolateChip-UI 3.0. Some important new projects include Theseus and parallax.js.

Tutorials

Alan Greenblatt enhances his responsive content with CSS regions demo with a polyfill to make it cross-browser.
Cross-Browser Responsive Content with CSS Regions

Eric Bidelman explains how the custom elements that falls under Web Components helps you avoid HTML that is div soup.
Custom Elements: Defining new elements in HTML

Mary Lou shares some ideas around a variety of transitions for revealing off-canvas navigations.
Transitions for Off-Canvas Navigations

Pankaj Parashar shows how to use and style the HTML5 progress element cross-browser with fallbacks.
The HTML5 progress Element

Nick Pettit shows how to use CSS for realistic shading for 3D shading on objects with few faces with box-shadows.
3D Shading with Box-Shadows

Philip Tellis examines DNS, IPv6 and the new W3C specification for the NavigationTiming API.
Analyzing Network Characteristics Using JavaScript And The DOM, Part 2

Zoltan Horvath shares some examples of how you can combine CSS Shapes and CSS Regions.
HTML Alchemy – Combining CSS Shapes with CSS Regions

Krasimir Tsonev explains a solution for animating pseudo elements using the inherit value.
The power of inherit or how to animate pseudo elements

Joshua Clanton offers a good Introduction to IIFEs for JavaScript learners.
An Introduction to IIFEs – Immediately Invoked Function Expressions

Dr. Axel Rauschmayer explains JavaScript’s type system, whether it is static or dynamic and coercion.
JavaScript’s type system

Kirupa Chinnathambi shows how to create lists that can be filtered by category using HTML, CSS and JavaScript.
Filtering Items In A List

See Also:  Is your team ready for resource management software?

Ryan Morr shares tips for writing CSS using abstract, themed and character classes.
Leveraging the Most Out of CSS Classes

Dudley Storey shows how to use hover effects to create an element of surprise in your pages and increase user engagement.
Designing For Emotion With Hover Effects

David Walsh explains how writing CSS has changed over the years and some of the best principles and workflows he’s learned during his journey.
Starting to Write CSS

Robert Sedovšek shows how to use some of the lesser known pseudo selectors in CSS.
With a Little Help from Pseudo-Selectors

Libraries and Frameworks

Nicolas Bevacqua says your web application can benefit by doing things the “Angular Way” and shares tips on how to take advantage of AngularJS.
The Angular Way

Azat Mardanov compares Node.js and PHP in terms of a number of criteria including syntax, ecosystem, frameworks and more.
Node.js vs. PHP

Jonathan Fielding reviews several front end code generators that give you a head start on HTML, CSS and JavaScript projects.
Getting a Head Start with Front End Generators

Holly Schinsky runs down the updates and new components in the latest release of the Topcoat UI framework.
Totally Rad Topcoat!

Johnny Simpson shares his new flip book jQuery plugin that uses CSS 3D transforms to create the slide transitions.
CSS Flip Book jQuery Plugin

The latest screencast from Codeship shows how to do continuous deployment for Node.js applications.
Continuous Deployment for node.js applications

Addy Osmani shows how to use grunt-responsive-images to generate images at different resolutions to use with srcset.
Generate multi-resolution images for srcset with Grunt

See Also:  Why you should limit JavaScript — and how to do it

Raymond Camden shares a Node experiment that introspects the subdomain and uses the Bing Search API to find pictures of kittens.
Another Node Experiment: AndKittens

New and Updated Libraries and Frameworks

Ember.js 1.0 is officially released and this post goes over all the developments.
Ember 1.0 Released

Version 3.0 of ChocolateChip-UI was rewritten from the ground up to be lighter and faster and supports the new iOS7 look.
Announcing ChocolateChip 3.0

parallax.js reacts to the orientation of your device, offsetting layers depending on their depth within a scene.
parallax.js

Minified.js is a client-side JavaScript library with features comparable to jQuery and MooTools but less than 4kb.
Minified.js – A Truly Lightweight JavaScript Library

Intention.js is a tool for responsive design developed at Dow Jones that manipulates the DOM via HTML attributes.
intention.js

Theseus is a JavaScript debugger for Brackets that can debug JavaScript running in Chrome and NodeJS.
Theseus JavaScript Debugger for Chrome and NodeJS

Hopscotch is a framework to make it easy for developers to add product tours to their pages.
Hopscotch

Wu.js is a library for lazy, functional programming in Javascript that works in the browser and with CommonJS.
wu.js

Etc.

Vincent Hardy explains some of the reasons why developers choose to contribute to open source projects.
Why Do Developers Contribute to Open Source Projects?

Raymond Camden walks through some tips for using the new Theseus JavaScript debugger with Brackets.
Some tips for using Brackets and Theseus

An update to Dreamweaver CC has a brand new rendering engine with the same performance and HTML5 support as Chrome.
Dreamweaver gets Live Highlights, a new rendering engine, & more