Best of JavaScript, HTML & CSS – Week of November 4, 2013

by Brian Rinaldi on November 11, 2013

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

This week features a ton of great tutorials and articles. Some highlights include Toby Ho’s opinion piece on how JavaScript library authors need to work on creating more modular and smaller libraries. Also, the Simpson’s drawn using pure HTML and CSS. Or check out Sara Soueidan showing how to create non-rectangular layouts using CSS shapes. Plus, AngularJS 1.2, tons more tutorials and a number of interesting new libraries.

Tutorials

Toby Ho says that authors can do better towards making their JavaScript libraries smaller and more modular.
Towards a More Modular Future for JavaScript Libraries

Nicolas Bevacqua introduces a JavaScript event emitter pattern he calls Obey and Report that plays nicely with AngularJS.
Obey and Report – A JavaScript Event Emitter Pattern

The Simpsons characters recreated using just HTML and CSS.
The Simpsons in CSS

A great introduction to creating print-like layouts with non-rectangular shapes using CSS Shapes by Sara Soueidan.
Creating Non-Rectangular Layouts with CSS Shapes

Dale Schouten shares ten things ECMAScript-6 that you try right now, at least on Firefox Aurora.
10 Ecmascript-6 tricks you can perform right now

Paul Lewis and Paul Irish look at how to make animations perform well in the browser, avoiding expensive layout or paints.
High Performance Animations

IIFEs are very familiar in JavaScript today, but Axel Rauschmayer details the less familiar immediately invoked constructors and object literals.
Immediately invoked constructors and object literals

Sara Soueidan explores several techniques for creating a dimmed overlay with CSS, and the pros and cons of each.
CSS Overlay Techniques

Chris Coyier offers a solution for making tabs work better when translated to small screens.
Transformer Tabs

Some really nice animated icons created with SVG and the new Snap.svg library by Mary Lou.
Animated SVG Icons with Snap.svg

CJ Gammon details how to create responsive layouts using the new CSS Regions specification.
Killer Responsive Layouts With CSS Regions

Lea Verou shows how to recreate the Google apps style loading animation in CSS and HTML.
Flexible Google-style loader with CSS

Libraries and Frameworks

Learn some of the basics of Express.js from Azat Mardanov.
Express.js Fundamentals

AngularJS 1.2.0 includes remastered animations/transitions, better error reporting, promise A+ compliance and more.
AngularJS: AngularJS 1.2.0: timely-delivery

Julien Knebel posts a thorough introduction to Ember.js for newcomers to the framework.
An In-Depth Introduction To Ember.js

Azat Mardanov walks through building a sample Express.js and Mongoose application.
Express.js and Mongoose Example: Building HackHall

Mobile

Raymond Camden explains a simple use case for Grunt to watch and automatically build your PhoneGap/Cordova project.
Using Grunt to automatically build your PhoneGap/Cordova projects

Christophe Coenraets shares a version of his Employee Directory sample mobile application built with AngularJS.
Sample Mobile Application with AngularJS

See how to create a responsive off-canvas navigation using Bootstrap 3 by Burke Holland.
Creating A RWD Off-Canvas Layout With Bootstrap 3

My latest article for Adobe Inspire shows how one company leveraged their web design expertise to build apps with PhoneGap.
Web designers become app developers with PhoneGap

New and Updated Libraries and Frameworks

hoquet is a JavaScript templating library based on Clojure’s Hiccup.
hoquet

Purescript is a strongly typed compile-to-JavaScript language with extensible records and type-safe blocks.
Purescript

stickUp is a jQuery Plugin for creating navigation menus that are pinned to the top of the page, even during scroll.
stickUp

grasp is a Node-based command-line utility to search and replace JavaScript code based on structure rather than text.
grasp – JavaScript structural search and replace

The Ripple emulator has been relaunched as an Apache project and Raymond Camden explains how it has changed.
Ripple is Reborn!

ESLint v0.1.0 is a new JavaScript code quality tool with most JSHint rules, the ability to load new rules and more.
Now available: ESLint v0.1.0

Riot.js is a less than 1kb Model-View-Presenter JavaScript framework with a template engine, router, event library and more.
Riot.js — The 1kb client-side MVP framework

Etc.

Check out October’s top HTML, CSS, JavaScript Content on the Flippin’ Awesome.
October’s HTML, CSS, JavaScript Content on the Flippin’ Awesome

The November issue of Appliness includes an interview with Middleman Creator, Thomas Reynolds and tons of tutorials.
November issue with Thomas Reynolds, creator of Middleman is available!

Learn about the many changes over the past year to the Brackets open source code editor from Raymond Camden.
Deeper In the Brackets Editor

One comment

  1. Geoff says:

    I think you should add mimosa.io to the list of new and awesome tools. It really helps streamline your workflow if using pre-compilers.

Leave a Reply

Your email address will not be published. Required fields are marked *