Best of JavaScript, HTML & CSS – Week of June 3, 2013
The modern web is always changing, and this article is more than two years old.
This was a jam-packed week of content with some notable themes on debugging performance issues and AngularJS tutorials. I’ll get to the links in a moment, but I wanted to note the new “venue” for this post. I’ve been writing this weekly update of what I think are the best tutorials, libraries and other posts during the prior week for about a year and a half on my personal blog, However, with the recent launch of this site, it seemed to only make sense to transition this update here. Look for these posts each week on Monday morning and catch up on anything you may have missed from the prior week.
Tutorials
Pavlo Pidlypenskyi experiments with lazy-loading images with pure CSS.
Loading Images on Demand with Pure CSS
Emily Lewis posts part 1 in a series covering new selectors in CSS3, starting with structural pseudo-classes.
All You Need To Know About CSS3 Selectors, #1: Structural Pseudo-Classes
Donovan Hutchinson creates the coolest stuff using just CSS. In Portal CSS he recreates the initial training scene in 3D.
Portal CSS
Jake Archibald deep dives into script loading, discussing the complexities of doing this in a non-blocking manner.
Deep dive into the murky waters of script loading
Chris Coyier demonstrates some use cases for calc() in CSS rather than letting your preprocessor do the math.
A Couple of Use Cases for Calc()
James Long explains how JavaScript Generators, which just landed in V8, can keep you from callback hell.
A Study on Solving Callbacks with JavaScript Generators
Justin Gitlin explains how the Roll It game was built using WebGL, canvas and websockets.
Creating Roll It
Joshua Clanton explains how using duck typing in JavaScript can help you avoid unneeded conditional logic.
Using Duck Typing to Avoid Conditionals in JavaScript
Robert Nyman discusses the proposed Proximity API for detecting how close a device is to another physical object. Currently only on Firefox OS and FF for Android.
The Proximity API
David Walsh explains some common places you can avoid repeated operations in JavaScript.
JavaScript: Avoiding Repeated Work
Patrick Kunka shows how you can use text-align Justify to align any block element, not just text, and how this can be useful for responsive web design.
Text-align: Justify and RWD
Raymond Camden shows how you can filter results from IndexDB using a date range.
IndexedDB and Date Example
Dr. Axel Rauschmayer shows how to trigger events without jQuery.
Triggering events in vanilla JavaScript
Addy Osmani explains how to test the frame rate on scrolling of your web application to avoid “jank.”
Gone In 60 Frames Per Second: A Pinterest Paint Performance Case Study
John Allsopp shows how he built a browser-based security application using the DeviceMotion API, WebRTC and canvas.
Build a motion activated security camera, with WebRTC, canvas and Device Orientation
Libraries and Frameworks
See how you can use Two.js with SVG exported from Illustrator to draw and animate using JavaScript.
Drawing and Animating with Two.js and Illustrator
Pete Hunt explains why build React when there are many JavaScript MVC frameworks and why you might want to use it.
Why did we build React?
Gabriel Manricks walks through how to create a multi-page site using JavaScript and the Meteor framework.
Creating a Multi-Page Site with Meteor
John Munsch shows how you can use AngularJS to modify variable content in an SVG.
AngularJS and SVG
Alex Young continues his AngularJS tutorial series by looking at handling form validation.
AngularJS: Form Validation
Pamela Fox explains the process her team took to identify and fix performance issues in their Backbone application.
Improving Backbone App Performance
Mobile
Christophe Coenraets converts his sample Backbone mobile app to use Topcoat CSS library for its UI layer.
Sample Mobile / PhoneGap Application with Backbone.js and Topcoat
Christophe Coenraets posts a sample PhoneGap application for iOS built with Backbone.js and the Ratchet UI toolkit.
Sample Mobile / PhoneGap Application with Backbone.js and Ratchet
New and Updated Libraries and Frameworks
Seriously.js is a real-time, Node-based video effects compositor for the web built with HTML5, Javascript and WebGL.
Seriously.js
Geo for Bootstrap is a Geocities theme for Twitter Bootstrap by Divshot. The web the way it was intended to be seen!
Geo for Bootstrap, a Timeless Theme by Divshot
Coquette is a microframework for JavaScript games with collision detection, keyboard input, canvas rendering and more.
Coquette
Node GH is a set of GitHub command line tools built on NodeJS.
Node GH – All the power of GitHub in your terminal
Etc.
The June Issue of Appliness is out and features an interview with Ryan Stewart and plenty of other great content.
June Issue with Ryan Stewart!
May’s HTML, CSS, JavaScript and Mobile Content on Flippin’ Awesome.
Flippin’ Awesome Monthly Newsletter
