Best of JavaScript, HTML & CSS – Week of September 16, 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
