Best of JavaScript, HTML & CSS – 2013

Best_2013_Header

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

2 Comments

  1. Pingback: Best of JavaScript, HTML & CSS – 2013 | Flippin’ Awesome | CFMeta

*

*

Top