Best of JavaScript, HTML & CSS – Week of June 10, 2013
This was an insanely busy week with tons of tutorials and even a lot of newly released libraries. There’s a lot here to digest, but it is well worth it. Lately, if I am noticing any trends, it is more posts covering ES6 and how to use some of the upcoming features now, and Meteor, which seems to have garnered more tutorials and posts lately. Enjoy.
Tutorials
Joe Zimmerman shows how you can use the future of JavaScript today by transpiling from ES6 to ES5 or using JS supersets.
The Future of JavaScript…Now!
Nicolas Bevacqua explores how to create common JavaScript library functionality using just the Native DOM API.
Uncovering the Native DOM API
Donovan Hutchinson shows how he recreated the iOS7 banner from WWDC using HTML and CSS.
Recreating the iOS7 Banner with HTML and CSS
Will Vaughn walks through the why and the how of rolling your own Yeoman generators.
Roll Your Own Yeoman Generators
Parker Bennett explores different approaches to handling fluid and responsive images.
Crop Top – CSS-Tricks
Johnny Simpson makes a 3D book that can be rotated and opened using mostly CSS with some JavaScript.
Making an Awesome Interactive 3D Book With CSS3 Transforms
Dr. Axel Rauschmayer shows how to use ECMAScript 6 proxies to automatically bind methods that are extracted from an object.
ECMAScript 6: automatically binding extracted methods
John McCutchan and Loreena Lee cover memory management in JavaScript and V8 and how to debug memory usage issues.
Effectively managing memory at Gmail scale
Mary Lou shares some nice looking modern button styles using CSS transitions.
Creative Button Styles
Chris Coyier recreates hover boxes with icons that expand horizontally then vertically, filling the parent box.
Pizza Time Hovers
Stuart Memo shows how to get started using the Web Audio API by recreating the classic Stylophone.
Web Audio Stylophone
Christian Heilmann uses PNG transparency, canvas and some JavaScript to create irregular shaped rollover images.
Irregular shape rollovers with Canvas and PNG
Tiffany Brown goes into great detail on how to ue CSS 3D transforms.
Understanding 3D Transforms
Libraries and Frameworks
Raymond Camden shares some code samples and details on his JavaScript Cookbook Node project.
More on my JavaScript Cookbook Node project
Alex Young continues his AngularJS tutorial series by discussing iterators and filters.
AngularJS: Iterators and Filters
Pamela Fox details the Backbone stack at Coursera.
Our Backbone Stack
Simon Bailey shows how to speed up development of AngularJS applications using Yeoman, Grunt and Bower.
Automating AngularJS With Yeoman, Grunt & Bower
Pamela Fox looks at whether there is a DRYer way to reference DOM from within her JavaScript/Backbone application.
Referencing DOM from JS: there must be a DRYer, safer way
Sacha Greif shares how he built a full app in under an hour using Meteor.
Building An App In 45 Minutes With Meteor
Gabriel Manricks explains working with data in Sails.js, a framework for Node that mimics the MVC pattern of Rails.
Working With Data in Sails.js
Chritian Heilmann explains how to use the HTML5 canvas to image mask using the canvasmask.js script.
Image Masking with HTML5 Canvas
Mobile
Holly Schinsky shares her personal workflow for building PhoneGap apps for iOS. Weblog
My Development Workflow for PhoneGap iOS Apps
Johnny Simpson shows how to build a slide-in/slide-out menu designed for mobile.
Designing ‘Swipe to Open’ Mobile Menus and Best Practices
Shazron Abdullah details the changes in Cordova iOS 2.8.0. Blog
What’s new in Cordova iOS 2.8.0
Christophe Coenraets created a new PhoneGap plugin for working with the the Dropbox Sync API.
PhoneGap Plugin for the Dropbox Sync API
Holly Schinsky shares a sample mobile app to help developers get started with PhoneGap and AngularJS.
Quick Start Guide to PhoneGap+AngularJS
Andrew Trice explores connecting a pressure sensitive bluetooth stylus with a PhoneGap application.
PhoneGap Exploration – Realtime Hardware Communication
New and Updated Libraries and Frameworks
Classy.js is a tiny framework for writing inheritance in JavaScript.
Classy.js
The Brackets Sprint 26 Build has new features and upgrades the editor to jQuery 2.0.1, LESS 1.3.3 and Bootstrap 2.3.1
Brackets Sprint 26 Build
Evilscan is a command line ip/ports scanner built with NodeJS.
evilscan
picnicc allows you to create custom builds of your favorite JavaScript libraries with only the functions you need.
picnicc
Hitch is a small JavaScript library that provides an extension model for CSS allowing use of some proposed features.
Hitch – A resource to add some expressive power to CSS for developers
jQuery Time Autocomplete is a time picker dropdown that works similarly to Google Calendar’s time picker.
Better time drop downs for ranges: jQuery Time Autocomplete
The "When Can I Use" web widget is designed to allow authors to easily add browser support info to their blog posts.
The "When Can I Use" Web Widget
Easystar.js is a pathfinding API for JavaScript which will find a path through tiles on a grid.
Easystar
HTML Inspector is a code quality tool written in JavaScript that runs in the browser.
Introducing HTML Inspector
Etc.
Active Theory discuss how they built the Racer Chrome experiment from Google I/O.
Case Study: Building Racer
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)