A lot of great tutorials and a ton of new libraries this week. Check out how to use pixi.js to create an infinite scroller game, Bootstrap 3 as a workflow tool, ExpressWorks to learn Node and Express, and npm-onupdate to keep your libraries up to date. There are a couple of great “opinion” type pieces too (something I think many people are often scared to post). Check out Christian Helmann talking about bad JavaScript practices, and Kirupa Chinnathambi explaining why static comps are no longer enough.
Tutorials
Dave DeHaan explains how he and his team created a dynamic, animated hero image using HTML canvas.
Creating an Animated Hero Image with Canvas
Christian Heilmann discusses some bad JavaScript practices that are unfortunately still being taught.
Perpetuating terrible JavaScript practices
Brian Gonzalez shows how to create a page transition similar to Medium’s using HTML, CSS and JavaScript.
Medium-Style Page Transition
Parker Bennett demonstrates how he created a layout with complex shapes and image backgrounds using CSS.
Well Rounded: Compound Shapes in CSS
Jeff Friesen augments JavaScript core objects, a practice some reject but he argues is worthwhile if done carefully.
Augmenting JavaScript Core Objects
Pedro Botelho shares an experiment for multi-item checkbox selection using a click and hold.
Multi-Item Selection
Paul Kinlan explains several methods for creating fullscreen mobile experiences in the browser.
Building an amazing fullscreen mobile experience
A good reference of when to use (and when not to use) certain CSS measurements.
Which CSS Measurements To Use When
Try this browser-based musical keyboard and then learn how it was built using Web Audio.
Musical Keyboard – JS Dynamic Audio Synth
Jens Loeffler explains important components required for online video experiences and maps them to HTML5 capabilities.
HTML5 Video Guide – All You Need to Know for 2014
Libraries and Frameworks
How to start creating a parallax scrolling endless runner game using HTML and JavaScript with Pixi.js by Chris Caleb.
Building a Parallax Scrolling Game with Pixi.js
See how Bootstrap 3 includes tools to help automate your web development workflow and speed up prototype development.
Using Bootstrap 3 as a Web Development Workflow Tool
Leo Horie gives his perspective on specific things that he thinks aren’t great in AngularJS.
Things that suck in AngularJS
Gabriel Cirtea shares an introduction to Sails.js, a JavaScript MVC framework resembling Ruby on Rails.
Introduction to Sails.js
Mike Cunsolo walks through how to get started with Grunt for common web developer tasks.
Get Up And Running With Grunt
Raymond Camden shares a demo of using the new Snap.svg library to create an interactive map of census data.
Snap.svg demo – Census Data
Andy Shora explains what you should be testing and when you should be writing tests for AngularJS.
Unit Testing Best Practices in AngularJS
New and Updated Libraries and Frameworks
Tiny Test JS is a port of the ColdFusion unit testing framework to JavaScript for testing modules by Ben Nadel.
Tiny Test JS – An Exploration Of Unit Testing In JavaScript
ExpressWorks by Azat Mardanov is a project available on npm that’ll walk you through the basics of using Node and Express.
ExpressWorks
Cloak is a library for multiplayer HTML5 games that handles client/server messaging, room/lobby management and more.
Building Multiplayer HTML5 Games with Cloak
formatter.js is a JavaScript library that helps format user input in web forms to match specified patterns.
formatter.js
Browser-sync watches files and informs connected browsers to reload (inject) the new CSS and works on all browsers.
Cross Browser CSS Injection
Alex MacCaw created a jQuery library to simplify animating transitions between DOM states.
Animating DOM transitions
Christophe Coenraets shares an example of Keypoint, a PhoneGap-based HTML slide decks micro-framework he built.
Keypoint: PhoneGap-Based HTML Slide Decks
PhysicsJS is a modular and extendable physics engine for JavaScript.
PhysicsJS – A modular, extendable, and easy-to-use physics engine for javascript
A new npm service that notifies you when specific Node.js packages are updates in the npm registry from Piotr Walczyszyn.
Stay up-to-date with Node.js packages using npm-onupdate service
Brackets Sprint 33 includes creating new rules in CSS Quick Edit, visual CSS timing function editor, and image preview from project tree.
Brackets Sprint 33 Build
Etc.
Web design has changed so that static comps no longer provide enough information for the modern web says Kirupa Chinnathambi.
Static Comps Are Simply Not Enough
A new extension that adds Apache config file support for Brackets from Terrence Ryan.
Apache Config file support for Brackets
Raymond Camden created a new Brackets extension that lints HTML.
HTMLHint extension for Brackets
Brian Rinaldi is the founder of Flippin’ Awesome. Brian works as the Developer Content Manager at Telerik (though this site is not affiliated with his employer) focused on ensuring that the Developer Relations team creates top notch content for the web development community. Previously, Brian focused on publishing HTML, CSS and JavaScript developer content for the Adobe Developer Connection at Adobe.
Brian has published in a variety of technical publications over the years, has presented at numerous conferences and events and has served as a technical editor on a number of books.
You can read Brian’s blog archive with 9+ years of content at remotesynthesis.com (he still posts, infrequently). You can find a full list of Brian’s past publications and presentations. Follow Brian on Twitter @remotesynth.