Over a million developers have joined DZone.

Best of JavaScript, HTML & CSS - Week of May 13, 2013

DZone 's Guide to

Best of JavaScript, HTML & CSS - Week of May 13, 2013

· Web Dev Zone ·
Free Resource

A busy week of tutorials this week, with the majority focusing on straight HTML, CSS and JavaScript (i.e. no frameworks). This week was also Google I/O where they announced a new web/UI framework called Polymer that is currently available as a pre-alpha. Also, please be sure to check out the three new articles on Flippin' Awesome this week covering topics in CSS, LESS, Sass and JavaScript.


Eric Feminella explains how to use the method chaining pattern to both simplify your API and make it more fluent.
Fluent APIs and Method Chaining

Chris Coyier shows how to create a cool slider with sliding backgrounds effect similar to the Yahoo Weather App for iOS in HTML, CSS and JavaScript.
Slider with Sliding Backgrounds

Christian Heilmann responds to the CSS Tricks “image swivel” demo, giving it his "vanilla web diet" treatment.
Giving “image swivel” the vanilla web diet treatment

Gary Sieling shows how to do full-text indexing with client-side JavaScript, based upon PDF.js and using Lunr.
Building A Full-Text Index In Javascript

David Walsh shows how to fix an issue where by buttons in Firefox are a few pixels larger than in other browsers.
Firefox Button Height Fix

Alex Young explains a technique to "rotate" the subject of a photo by hiding/showing multiple stacked photographs.
Photo Swivel

Mary Lou shares an experimental morphing devices slideshow using CSS Transitions for showing responsive web design screenshots.
Morphing Devices

David Walsh explains how to use CSS counters for incrementing and in generated content.
CSS Counters

Dr. Axel Rauschmayer continues his series on JavaScript quirks, focusing on the scope of variables and hoisting.
JavaScript quirk 6: the scope of variables

Alex Walker shows how he built the functionng Pong game demo in just HTML and CSS.
CSS3 Pong: Insane things to do with CSS #17

Stephen Burgess shares a cool experiment creating dynamic bezel lines with HTML canvas and JavaScript.
Dynamic Bezel Lines Experiment

Alessandro Vendruscolo explains how to use CSS animations to detect, in JavaScript, when a media query is triggered.
Media Query Change Detection in JavaScript Through CSS Animations

Raymond Camden continues his JavaScript design patterns series with a practical example of the revealing module pattern.
JavaScript Design Patterns - The Revealing Module Pattern

David Walsh shows that it is possible to have multiple background CSS animations but with caveats.
Multiple Background CSS Animations

Alan Stearns posts an example demonstrating how CSS Regions allow you to define where content flows.
Define flow areas directly with CSS Regions

Cody Lindley created this thorough reference for using regular expressions in JavaScript. Definite bookmark material.
JavaScript Regular Expression Enlightenment

Alan Greenblatt shows the technique he used to create a soft blur effect using CSS Filters.
Creating a Soft Blur Effect with CSS Filters

Libraries and Frameworks

Mária Jur?ovi?ová shares many useful, and lesser known, tips and tricks for LESS CSS.
LESS Tips and Tricks

Jaime Quiroz shares the code and techniques he used to create a 3D CSS animated box with Sass and Compass.
Create a 3D CSS Animated Box with Sass

Renaun Erickson shows how he built a 3D sample using three.js by compiling ActionScript via the Randori.js project.
Code Three.js in ActionScript with Randori Compiler

Alex Young continues his AngularJS tutorial series. In this edition he explains how to write tests and mock data.
AngularJS: Tests

Krasimir Tsonev walks through building a real-time web chat application using ExpressJS and Socket.io.
Real Time Chat With NodeJS, Socket.io and ExpressJS


Andrew Trice shows you how to build your PhoneGap apps using the newly released Android Studio.
PhoneGap & Android Studio

Joseph Labrecque posts how to use JSON to save more complex objects in local storage.
PhoneGap: Saving Arrays in Local Storage

New and Updated Libraries and Frameworks

At Google I/O, Google announced a new web UI framework called Polymer that includes core platform features and a web application framework.
Polymer Project

Bookshelf is a promise based ORM for Node.js that extends the Model & Collection foundations of Backbone.js.
Bookshelf.js - Javascript ORM with some Backbone

Stampit lets you create JavaScript objects from reusable, composable behaviors. Version 0.2. was just released.
Stampit 0.2 Released

Codeblock.js turns example code into editable, runnable code blocks that visitors can poke at and play with.


Lee Brimelow shows off a responsive design plugin he's building for Brackets that looks really impressive.
Responsive Design Tool for Brackets

GitHub ArchiveRoom lets you explore GitHub archive data in 3D in the browser. Not hugely useful but cool.
GitHub ArchiveRoom - Explore your GitHub archive data in 3D!


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}