Best of JavaScript, HTML5 & CSS3 - Week of February 4, 2013
Posted on Feb 11, 2013
There was an enormous amount of content this week (so much so, that I had to be even pickier than normal). Specifically, there were a lot of new releases this week including PhoneGap 2.4, a CSS Regions polyfill, Appium, Conditionizr and more - all of which look very interesting. There were also a lot of articles covering testing with browser tools (you'll find these in the "etc" section below) plus tons more.
Tutorials
Michelangelo De Simone explains how the CSS Custom Filters spec is being implemented in WebKit.
A look into Custom Filters reference implementation
Raymond Camden looks at how to manipulate SVG with JavaScript based upon asynchronously loaded data.
Playing with SVG and JavaScript
Adam Coulombe shows how to build an interactive infographic using SVG and CSS animations.
Interactive Infographic with SVG and CSS Animations
Ana Tudor explores CSS gradients including the mathematics behind calculating them.
Dig deep into CSS gradients
There's a lot of detailed information on building complex, interactive 3D sites using HTML5 and CSS3 in the Find Your Way to Oz case study.
Case Study: Find Your Way to Oz
My latest article for Adobe Inspire magazine is a primer on responsive web design concepts.
Getting started with responsive web design
Tom Kenny shows how he created a 3D book animation with CSS transforms.
Create a 3D Book Animation with CSS
Louis Lazaris discusses best practices for using and not using descendent selectors in CSS.
When to Avoid the Descendant Selector
Dirk Luth posts a proof of concept for an approach to responsive web design that uses rems and font-size to scale the content for different screen sizes.
REMux: An Experimental Approach to Responsive Web Design
Libraries and Frameworks
Sociogram is a sample Backbone application created by Christophe Coenraets that uses the Facebook SDK and the Graph API.
Sociogram: A Sample Application Exploring the Facebook SDK and the Graph API
Rachel Nabors explains the differences Sass variables, extends and mixins.
When to use Sass mixins, extends and variables
Mihai Corlan just released a CSS Regions polyfill library and in this post he explains how to use it.
How to use the CSS Regions Polyfill
Part 11 of Alex Young's ongoing Backbone tutorial focuses on writing tests and mocks.
Backbone.js Tutorial: Spies, Stubs, and Mocks
Ian Oxley demonstrates how to replace multiple event handlers, and improve the performance of your application, using jQuery's event delegation.
Event Delegation with jQuery
Mobile
Shazron Abdullah details 11 new features and changes to Cordova 2.4.0 on iOS.
What's new in Cordova iOS 2.4.0
Raymond Camden explains how to use Ripple during PhoneGap development for in-browser emulation and testing.
Using Ripple for PhoneGap Development
Web Audio on iOS requires user activation. Paul Bakaus shares example code for unlocking web audio and checking if it is unlocked.
Web Audio on iOS
Raymond Camden shows how to use Parse and PhoneGap with device features for handling things like online/offline and location data.
Using Parse.com with PhoneGap – Part 2
Aurelio de Rosa begins a series building a sample mobile app using jQuery Mobile and Cordova that uses features like the Globalization and InAppBrowser API's.
Build a Currency Converter with jQuery Mobile and Cordova: Introduction
Part 2 of Aurelio de Rosa's tutorial series shows how to build the various pages for the app interface in HTML using jQuery Mobile.
Build a Currency Converter with jQuery Mobile and Cordova: Constructing The Interface
New and Updated Libraries and Frameworks
Mihai Corlan and Razvan Caliman released a CSS Regions polyfill that supports Safari Mobile, Safari, Android (latest version), Chrome, Firefox, and Opera.
Say hello to CSS Regions Polyfill
PhoneGap 2.4.0 has been released and includes the Cordova CLI tools.
PhoneGap 2.4.0 Released
Groundwork is a fully responsive HTML, CSS and Javascript toolkit with a fluid grid system built with Sass and Compass.
Groundwork CSS
fs is a file system abstraction for the browser but based upon Node's fs module API.
fs
IDBWrapper, by Jens Arps, is a JavaScript library that wraps the IndexedDB API to make it easier to work with.
IDBWrapper: A Cross Browser IndexedDB Wrapper for Offline Web Apps
The Conditionizr JavaScript utility detects browser and pixel ratio allowing you to serve conditional JS and CSS files.
Conditionizr: the conditional free legacy, retina, script and style loader
Appium is an open source test automation tool for use with native and hybrid mobile applications.
Appium: Mobile App Automation, Made Awesome.
jui_datagrid is another rich datagrid jQuery plugin with a lot of nice features and easily styled.
pontikis.net
Florian Boesch has released a new library for creating high performance heatmaps using JavaScript and WebGL.
High Performance JS heatmaps
Anvil.js is a convention over configuration build system built on NodeJS. Jonathan Creamer shows how to get started.
Getting started with anvil.js
Etc.
Jonathan Diehl shows off some very cool experimental live development within Brackets.
Live Development with Brackets (experimental)
Bem Jones-Bey shows how to dig into WebKit's C++ code for handling layout rendering and modify it to see how it works.
A Visual Method for Understanding WebKit Layout
The latest release of Adobe Edge Inspect adds improvements to accessibility support.
Adobe Edge Inspect adds accessibility support
Rey Bango shows how to use browser and 3rd party tools to inspect network traffic for issues like latency and blocking.
Using Web Debugging Proxies
Umar Hansa continues his tutorial series on Chrome Dev Tools by covering the Source and Timeline panels in detail.
Chrome Dev Tools: JavaScript and Performance
Rey Bango explains how Microsoft is easing Internet Explorer testing by providing new VMs for new and legacy versions.
Making Internet Explorer Testing Easier with new IE VMs
Check out the February issue of Appliness featuring an interview of AngularJS creator Misko Hevery.
February issue with Misko Hevery
Check out all of January's HTML, CSS, JavaScript and Mobile Content on the ADC
ADC Web Standards Monthly - January 2013
Comments
There are currently no comments for this entry...be the first!