Tuesday, August 21, 2012

Best of JavaScript, HTML5 & CSS3 - Week of August 13, 2012

Best of JavaScript, HTML5 & CSS3 - Week of August 13, 2012:
This was such a crazy busy week of posts that I barely had time to catch up. As usual there were a lot of general JavaScript, HTML and CSS tutorials as well as a handful of framework specific ones and quite a few new and updated libraries released. However, I wanted to point out the poorly named "etc." section below as it has a lot of really good items this week. The reason it is named "etc." is due to a) these items don't easily fit into the prior categories and b) I sometimes lack creativity - it is not a reflection of the quality of the articles listed there. Hopefully my regular readers haven't been missing out on some great articles because of my lack of creativity in section headings.
Tutorials
Dr. Axel Rauschmayer explains that element IDs are global variables and how they are defined in the standard and work in Firefox.

DOM: element IDs are global variables
A really impressive looking triple panel image slider using CSS 3D Transforms and CSS transitions by Mary Lou.

Triple Panel Image Slider
Chris Coyier walks through his approach to building grids in HTML and CSS.

Don't Overthink It Grids
A great overview of JavaScript events by Christian Heilmann that even covers how to use events for CSS transitions and animations.

JavaScript Events And Responding To The User
A good demo with code of simple, but cool, image hover effects using CSS filters.

Simple hover effects with CSS(webkit) filters
The spec for CSS Flexbox is still changing and only works in experimental browsers like Chrome Canary, but Ben Frain gives a good overview of how it is designed to work.

Website Design: Understanding the CSS3 Flexbox (Flexible Box Layout Module)
Mihai Corlan recreates a scrolling, infinite timeline chart originally built with Flex in HTML and shares how he did it and lessons learned (as well as the code).

Infinite timeline scrolling chart with HTML/CSS/JS
David Walsh shows how to create a pure CSS tooltip.
CSS Tooltips

Frameworks and Libraries
Ben Nadel shows how to use Underscore's template() method to render HTML partials.

Using Underscore.js Templates To Render HTML Partials
This intro to CSS 3D transforms by David DeSandro looks great and very comprehensive.

Intro to CSS 3D transforms
A great look at new features in the "boring bits of CSS" (i.e. the selectors, units and functions) by Peter Gasston.

Learning to Love the Boring Bits of CSS
Dr. Axel Rauschmayer takes a closer look at _.extend method of Underscore.js and how to best copy properties in JavaScript.

A closer look at _.extend and copying properties
Joe Zim walks through a sub-view rendering implementation for Backbone.js created by Ian Storm Taylor.

Backbone.js (Sub)View Rendering Trick
A thorough beginner's guide to Node.js by Maciej Sopy?o.

Node.js for Beginners
Mobile
Andrew Trice created a PhoneGap native extension to allow you to use an "Open With" in iOS apps.

"Open With" in iOS PhoneGap Apps
If you're interested in PhoneGap, you need to check out Christophe Coenraets PhoneGap API Explorer app.

New PhoneGap API Explorer available on the App Store
Raymond Camden shows how to use the PhoneGap ChildBrowser plugin by updating his RSS Reader sample application.

PhoneGap RSS Reader - Part 5
New and Updated Frameworks and Libraries
Normalize.css is a customisable CSS file that makes browsers render all elements more consistently.

Normalize.css: Make browsers render all elements more consistently.
Sass 3.2 includes placeholder selectors, variable arguments in mixins and functions as well as a number of other new features and improvements.

Sass 3.2.0 Released
Whammy, by Kevin Kwok, is a real-time, client-side WebM video encoder library.

Whammy: A Real Time Javascript WebM Encoder
Peerbind is a library that adds an event listener to an element and then shares the triggered events with all visitors in the peerse, which by default contains visitors of the same page.

Peerbind
Self is another JavaScript class library supporting inheritence, constuctors, mixins, static properties and more, this time inspired by Python.

Self
Scott Jehl posts that Filament Group has open sources their responsive carousel component.

Responsive Carousel Project: Now Open Source
Colin Ihrig has released a new JavaScript utility library called helper.js that supports DOM manipulation, ajax and feature detection.

Introducing the helper.js Library
Etc.
Hans Muller explains his revised algorithm for determining where to start layout within complex CSS exclusion shapes.

Revised Algorithm for Finding the First Layout Location Within a Polygonal CSS Exclusion Shape
The Brackets Sprint 12 Build includes code hinting support for HTML attributes and a new desktop shell.

Brackets Sprint 12 Build
See how Adobe Brackets was built using web standards technologies such as HTML, CSS and JavaScript by David Deraedt.

An Overview of Brackets' Code Architecture
Ryan Stewart explains how to get up and running with the new Brackets shell on Mac.

Building and Using the New Brackets Shell on Mac
The Adobe Proto app is an awesome web app or mobile app wireframing tool and it just got a bunch of cool new features.

Adobe's Proto wireframing tool gets new features
Summary of an event that TimesOpen hosted about HTML5, Apps and JavaScript which featured Adobe's Terry Ryan and others.

HTML5, Apps and JavaScript Wrap-Up
Paul Irish and Divya Manian share a great list of developers that they admire but you may not yet know.
Developers We Admire.

DIGITAL JUICE

No comments:

Post a Comment

Thank's!