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).
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
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.
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!
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.
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
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
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
Excellent and thorough walkthrough of RequireJS fundamentals by Burke Holland.
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.
Donovan Hutchinson recreates the first Portal training scene in just CSS.
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
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.
PhoneGap 3.0 includes a new plugin architecture, better tools, more platforms and new API’s.
Adobe PhoneGap 3.0 Released
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.
Ractive.js offers features like data binding, efficient DOM updates and event handling with a short learning curve.
Ractive.js – next-generation DOM manipulation
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
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
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
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.
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
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.
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
Eliminating Code Smell with Grunt
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.
Modern Web Newsletter
Subscribe to receive the Modern Web tutorials, sent out every second Wednesday.