Best of JavaScript, HTML & CSS – Week of October 14, 2013

by Brian Rinaldi on October 21, 2013

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

This week check out the details on Ghost and how to get started, the beta preview of caniuse.com with new features, a great discussion on some of the ways flat UI’s fail and much more.

Tutorials

See how to generate vertex data for CSS transformed elements and use the data to shade elements using a light source from Keith Clark.
Calculating element vertex data from CSS transforms

Kirupa Chinnathambi shows how to create rounded image links with an animated hover effect using HTML and CSS.
Rounded Image Links with a Sweet Hover Effect

There are a handful of options for making an HTML5 game adjust to fit the screen and Andrzej Mazur details them.
Screen size management in mobile HTML5 games

Ariya Hidayat explains how to avoid iterating loops in sorting by using sorting networks and the JavaScript Arrays.
Sorting Networks using Higher-Order Functions of JavaScript Array

Colt McAnlis walks through the parts of his text compression checklist for web developers.
Text Compression for Web Developers

There’s no such thing as float:down in CSS but Chris Coyier explains ways it can be achieved and the limitations.
Arranging Elements from Top to Bottom instead of Left to Right (float: down?)

Some really slick checkbox and radio buttons animations that use SVG by Mary Lou.
Animated Checkboxes and Radio Buttons with SVG

Mathias Bynens explains issues with Unicode in JavaScript, provides solutions and explains how ES6 will improve the situation.
JavaScript has a Unicode problem

Jessica Enders describes the ways in which flat UI design is failing in forms and how to correct it.
Flat UI and Forms

Andrew Colclough shares a style-guide for modular SASS development using SMACSS and BEM.
Objects in Space

Lea Verou explains how to create a variety of slanted tab styles using just CSS.
Slanted tabs with CSS 3D transforms

Thierry Koblentz says that separation of concerns has led to bad CSS practices and explains how an “atomic cascading style sheets” pattern can solve this.
Challenging CSS Best Practices

Libraries and Frameworks

Learn what’s going on under the covers in Ghost, how to get started and how to customize it to suit your needs from Eric Terpstra.
Ghost – Just a Blogging Platform

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

Daishi Kato explores ES6 generator performance in Node and finds performance only equals a hand-written equivalent.
DailyJS: ES6 Generator Performance in V8

A quick demo on using the TogetherJS collaboration library by Mozilla from David Walsh.
Using TogetherJS

Johnny Simpson shares a single page layout concept using the FullPaged jQuery Plugin with UI animations.
FullPaged: A Single Paged Layout jQuery Plugin with UI Animations

Meteor is accused of poor performance but Arunoda Susiripala shares performance tips to make it production ready.
Essential Meteor Performance Tips

Mobile

Peter Traeg explains how hybrid mobile apps can take advantage of both web technologies and native code.
Best Of Both Worlds: Mixing HTML5 And Native Code

A guide from Will Vaughn on how he used AngularJS, Phonegap, and angular-seed to build his first mobile app.
AngularJS, Phonegap, and angular-seed. Let’s Go!

Shazron Abdullah details Cordova iOS and iOS 7 support including UIWebView properties and core plugin support.
Cordova iOS and iOS 7 Support

New and Updated Libraries and Frameworks

Brackets Sprint 32 includes updates to Live Development, Quick Edit and performance improvements.
Brackets Sprint 32 Build

Odometer is a Javascript and CSS library for smoothly transitioning numbers.
Odometer

AngularJS 1.2 includes a rewritten ngAnimate jQuery 1.10.x support and a variety of bug fixes and improvements.
AngularJS 1.2

Etc.

The new beta peview of caniuse.com features geographical usage data and new support tables.
Preview the new caniuse.com features