Best of JavaScript, HTML & CSS – Week of September 16, 2013

by Brian Rinaldi on September 23, 2013

The modern web is always changing, and this article is more than two years old.

This was a very, very busy week. Unsurprisingly, we had a ton of mobile focused tutorials and articles with the release of iOS 7. However, there were a long list of new projects as well and lots of tutorials – with Node being an extremely popular topic lately. I know there’s a lot here, but it’s worth it. Enjoy!

Tutorials

Mary Lou shares interesting and creative loading indicators using CSS transitions, animations and 3D transforms.
Creative Loading Effects

Zach Saucier details how to control CSS animations and transitions using JavaScript.
Controlling CSS Animations and Transitions with JavaScript

Colt McAnlis details the types of image compression available for the web, the trade-offs and best practices.
Image Compression for Web Developers

Johnny Simpson shows how to use an HTML video element as a full-screen background.
Quick Tips: Using Videos as Backgrounds

Raymond Camden explains what the HTML Details/Summary tags do and how they can be used.
Playing with the Details/Summary Tag

Libraries and Frameworks

Joe Wegner shows how to use Simple API, a npm project that makes it easy to scaffold API’s in Node.js.
Easy API Scaffolding with Simple-API and Node.js

Ben Farrell shows how to create your own Grunt custom tasks to automate complex workflows, for example extracting audio from video.
Automating Complex Workflows with Grunt Custom Tasks

Marek Brodziak explains how he built RainyDay.js, a library creating a realistic looking rain effect on HTML canvas.
Creating a Realistic Rain Effect with Canvas and JavaScript

Jeremy Osborne posts a series of 10 videos with accompanying article text for getting started with Node.js.
Node.js: A Jumpstart for Devs

Renaun Erickson shows how Adobe Generator and Node.js can be used to live update textures in a Three.js application.
Live three.js Texture Updating with Photoshop CC

JD Graffam explains how FlowType.JS handles responsive web typography and how it was built.
Introducing Responsive Web Typography With FlowType.JS

Dr. Axel Rauschmayer details what is in the current spec for the ECMAScript Internationalization API and what’s coming.
The ECMAScript Internationalization API

Mobile

Holly Schinsky updates her tutorial demonstrating how to write a custom plugin for Android for PhoneGap 3.0.
How to Write a PhoneGap 3.0 Plugin for Android

Christophe Coenraets overs the things you need to know about using PhoneGap and Cordova with iOS 7.
PhoneGap and Cordova with iOS 7

iOS 7 Safari includes CSS regions, clip paths, canvas path objects and canvas blend modes via Divya Manian.
iOS 7 Safari & New Web Platform Features

Maximiliano Firtman discusses the new APIs and abilities in Safari on iOS using HTML5 and the problems you’ll need to deal with.
Safari on iOS 7 and HTML5: problems, changes and new APIs

Christophe Coenraets shares both secured and unsecured approaches to uploading pictures from a PhoneGap App to Amazon S3.
How to Upload Pictures from a PhoneGap App to Amazon S3

iOS7 Safari now supports the web speech API and Peter Gasston shows you how you can use it.
Speech Synthesis: Web Speech API, part one

New and Updated Libraries and Frameworks

OJ is a JavaScript templating library with Backbone support that uses objects to create and live edit HTML pages.
OJ – Unified Templating

RedScript is a JavaScript experiment with more native modules support, easier inheritence and a Ruby style syntax.
RedScript

svg.js is a JavaScript library for manipulating and animating SVG.
svg.js – A lightweight JavaScript library for manipulating and animating svg

Phaser is a HTML5 mobile game framework for desktop and mobile that supports JavaScript and TypeScript.
phaser – HTML5 game framework

Bedecked is a Node.js command line tool that turns Markdown files into HTML presentations you can share from Dropbox.
bedecked

Topdoc is a CSS comment structure and documentation-generating tool available vi the command line or as a grunt task.
Generating Documentation for CSS Components

Vex is a dialog library that is very configurable, easily styleable and under 7kb.
vex

persistState is a jQuery Ui widget that saves the state of inputs in localStorage, restoring on the next visit.
ow.persistState Demo

Responsive Elements is a JavaScript library that allows any element to adapt and respond to the area it occupies.
Responsive Elements – Helps you build better responsive websites

he is an HTML entity encoder/decoder in JavaScript usable in the browser, via the Node command line and more.
he

Fireshell is an opinionated framework with a quick front-end boilerplate and workflow.
Fireshell

TogetherJS is a free, open source Javascript library by Mozilla that adds collaboration features and tools to your website.
TogetherJS

Etc.

Monica Wilkinson discusses how Crushpath built a Google Glass app including some of the tools and some of the challenges.
How Crushpath built a Google Glass integration in under 2 weeks

In the latest episode of the Topic Undefined podcast, Raymond Camden and I discuss CSS, JavaSript best practices and more.
Topic Undefined – Episode 5

Latest Edge Code preview includes all the goodness of Brackets Sprint 30 plus enhanced Kuler integration and more.
New Edge Code Preview Released

Leave a Reply

Your email address will not be published. Required fields are marked *