Best of JavaScript, HTML & CSS – 2013
The modern web is always changing, and this article is more than two years old.
So much happened over the past year, it is hard to keep track. We got major rewrites of popular libraries including jQuery 2.0, PhoneGap 3.0, Grunt 0.4, Backbone 1.0, Ember 1.0, Foundation 5, Bootstrap 3 and more. We were introduced to new (or newish) libraries and tools like Yeoman, Pixi.js, Polymer, React, Ractive.js, Node-Webkit, Harp and more. We got a new(ish) browser engine in Blink and tons of new API’s and features became available across all the different browser engines. Perhaps most importantly, we were introduced to a new site called Flippin’ Awesome. Ok, so maybe I overstate the last one just a little.
Here’s a look back at some highlights from 2013 including new releases and articles that have stood the test of time (sure, it’s not much time, but things move fast).
January
A really impressive set of lessons being updated weekly on learning advanced HTML and CSS by Shay Howe.
An Advanced Guide to HTML & CSS
Brandon Satrom demonstrates how to use the speech input and Web Speech API’s to capture and respond to voice input.
Using voice to drive the web: Web Speech API
Christian Heilmann shares five tips for making your HTML5 apps perform better across all platforms.
Five things you can do to make HTML5 perform better
Roundarch Isobar has published their entire front-end code standards and best practices. A really useful reference.
Front-end Code Standards & Best Practices
February
Grunt version 0.4 was released and includes major changes including no built-in tasks, a new Grunt CLI tool and new, more powerful Gruntfiles.
Tearing Grunt Apart
Dr. Axel Rauschmayer goes through the spec for asm.js in great detail.
asm.js: closing the gap between JavaScript and native
March
Pixi.js is a 2D library that works across mobile and desktop devices and you to leverage hardware acceleration without prior knowledge of webGL.
Pixi.js has landed!
There’ve been many JavaScript prototype tutorials in the past, but Sebastian Porto’s plain English guide to prototypes is definitely worth the read.
A plain english guide to JavaScript prototypes
Great advice from Andrew Trice on the performance and UX considerations that can lead to a successful PhoneGap app.
Performance & UX Considerations For Successful PhoneGap Apps
Jeremy Ashkenas announces that Backbone 1.0 is official. He discusses its history and what to expect beyond 1.0.
Backbone 1.0
A nice article by Carrie Cousins explaining the different between Em and Rem and their place in responsive web design.
What’s the Deal With Em and Rem?
Eric Bidelman shares his thoughts on Chrome’s new rendering engine called Blink.
Blink. Chrome’s new rendering engine
April
Sara Soueidan shows how you can recreate the type of animations and visualizations on Windows 8’s home screen using HTML, CSS and JavaScript.
Creating Windows-8-like 3D animations with CSS3 and jQuery
Remy Sharp discusses the evolution of his use of jQuery and when and where it is most useful or beneficial to rely on it.
I know jQuery. Now what?
The new jQuery is smaller, lighter and faster but in exchange leaves behind support for IE 6, 7 and 8.
jQuery 2.0 Released
Donovan Hutchinson shows how to recreate the title animation from Zelda: A Link to the Past using just HTML and CSS.
Zelda: A Link to the CSS
Kyle Simpson describes misconceptions about JavaScript’s prototype and how he believes “inheritance” is not a helpful label for describing how JavaScript works.
JS Objects: Inherited a Mess
A good introduction to package managers for front-end developers including NPM and Bower by Cody Lindley.
Package Managers: An Introductory Guide For The Uninitiated Front-End Developer
Burke Holland tells you the 5 things you should stop doing with jQuery. Are you doing them?
5 Things You Should Stop Doing With jQuery
May
Excellent and thorough walkthrough of RequireJS fundamentals by Burke Holland.
RequireJS Fundamentals
Some really great advice from Peter Cooper on how to promote your libraries and code projects.
How to Spread The Word About Your Code
At Google I/O, Google announced a new web UI framework called Polymer that includes core platform features and a web application framework.
Polymer Project
Good article by James Padolsey on “cargo-culting” in JavaScript, which is essentially copying the practices of others without understanding them.
Cargo-Culting in JavaScript
Donovan Hutchinson recreates the first Portal training scene in just CSS.
Portal CSS
React is a JavaScript library from Facebook and Instagram for building user interfaces.
React
June
Nicolas Bevacqua explores how to create common JavaScript library functionality using just the Native DOM API.
Uncovering the Native DOM API
Nicholas Zakas discusses why he believes eval(), while easily misused, is potentially useful and not dangerous.
eval() isn’t evil, just misunderstood
Brian Birtles explains the Web Animations spec, what it includes and why it is necessary.
Introducing Web Animations
July
John Allsopp defends the use of the ID attribute in HTML and, to some degree, using ID selectors in CSS.
In defense of the humble id attribute
A great article by Hugo Giraudel on troubleshooting some very common and frustrating CSS issues.
Troubleshooting CSS
PhoneGap 3.0 includes a new plugin architecture, better tools, more platforms and new API’s.
Adobe PhoneGap 3.0 Released
Nice post by John Hann on tools for building maintainable JavaScript apps, events and AOP, rather than forcing OOP.
OOP is Not Your Hammer
Bower 1.0 is a total rewrite designed to be much faster with a clear architecture, along with a host of new features.
bower
Ractive.js offers features like data binding, efficient DOM updates and event handling with a short learning curve.
Ractive.js – next-generation DOM manipulation
You can write native apps in HTML and Javascript with node-webkit, an app runtime based on Chromium and NodeJS.
node-webkit
August
Mathew Carella shares tips for writing better and more efficient CSS.
Writing Better CSS
Sara Soueidan posts an article on building a circular navigation using CSS transforms with a cool interactive demo.
Building a Circular Navigation with CSS Transforms
A nice Javascript best practices guide from Thinkful.
Javascript Best Practices Part 1
Rich Harris explains how reactive programming can make your JavaScript code more efficient and how Ractive.js expressions work.
Ractive.js Expressions and the New Wave of Reactive Programming
Yeoman 1.0 is officially released and this post discusses what’s new and what’s next.
Release the Kraken! – Announcing Yeoman 1.0
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
Ember.js 1.0 is officially released and this post goes over all the developments.
Ember 1.0 Released
September
Burke Holland walks through new features and changes in Bootstrap 3 related to how it approaches responsive design.
Break The Wrist And Walk Away: Responsive Design And Bootstrap 3
Ben Farrell shows how to create your own Grunt custom tasks to automate complex workflows, for example extracting audio from video.
Automating Complex Workflows with Grunt Custom Tasks
Maximiliano Firtman discusses the new APIs and abilities in Safari on iOS using HTML5 and the problems you’ll need to deal with.
Safari on iOS 7 and HTML5: problems, changes and new APIs
Sean Voisen explains reactive programming concepts, how they’re beneficial and how they’re implemented in JavaScript using Bacon.js.
Functional Reactive Programming in JavaScript
October
Louis Lazaris covers some pure JavaScript features that you can use today and that you might not have ever considered before.
Thinking Inside The Box With Vanilla JavaScript
Kerry Butters offers a good introduction to CSS Regions.
A Beginner’s Guide to CSS Regions
Ghost is a new blogging platform (and service) built with Node.js and Express.
Ghost: A Blogging Platform
Harp is a Node-based static web server that also serves Jade, Markdown, EJS, Less, Stylus, and CoffeeScript without configuration.
harp
Get the details on what improved in TypeScript 0.9 and whether you should consider trying it out from Nicholas Wolverson.
TypeScript 0.9 – What’s Improved
Christian Heilmann discusses some bad JavaScript practices that are unfortunately still being taught.
Perpetuating terrible JavaScript practices
November
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
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
Rob Dodson shares a solid guide to the various pieces of the Web Components spec.
A Guide to Web Components
Zurb has released version 5 of it’s front-end, responsive framework.
Foundation
Great overview by Vox Product on how they created line drawings for Polygon’s console reviews using SVG animations.
Polygon feature design: SVG animations for fun and profit
Gavin Lazar Suntop explains how to establish JavaScript coding standards for your team and then verify them automatically using Grunt.
Eliminating Code Smell with Grunt
December
Sara Soueidan shows how combining CSS Regions with CSS Shapes creates a better, print-like reading experience.
Using CSS Regions With CSS Shapes For A Better Reading Experience
A thought-provoking post by David Walsh on the 5 “best practice” rules you should stop using.
5 Best Practice Mentalities to Get Over
How to convert your dynamic site to static but keep important dynamic elements like comments, calendars and more by Raymond Camden.
Moving to Static and Keeping Your Toys
Ever thought about writing your own programming language or DSL? Hyperglot, built on Node, is designed for just that.
Hyperglot – A Language Experimentation Platform
Myth is a CSS post-processor, allowing you to write CSS without worrying about slow browser support.
Myth
