Lots of great stuff this week. Despite its age, SVG appears to be hot – this week’s update features three great posts all focused on SVG (and there’s been many more in recent weeks). Also, check out an extremely comprehensive overview of PhoneGap mapping solutions and a great look at using CSS shapes and CSS Regions together. Plus, lots of new, interesting libraries. Enjoy.
Tutorials
Ryan Morr explores what makes Null and Undefined unusual data types in JavaScript.
Exploring the Abyss of Null and Undefined in JavaScript
The this scope in JavaScript can be confusing, but Nicolas Bevacqua details how it works and how to work with it.
Demystifying this in JavaScript
Sara Soueidan shows how combining CSS Regions with CSS Shapes creates a better, print-like reading experience.
Using CSS Regions With CSS Shapes For A Better Reading Experience
A thought-provoking post by David Walsh on the 5 “best practice” rules you should stop using.
5 Best Practice Mentalities to Get Over
Brian Suda discusses how to get started using SVG in HTML and how to use a technique from Vox Media to animate them.
Animating Vectors with SVG
Mike Fortress shows how Sprout used animated SVGs with custom easing and timing to significantly reduce page size.
Animated SVGs: Custom easing and timing
Create tabs by using a repeated shape template in SVG from Chris Coyier.
SVG Tabs (Using an SVG Shape as Template)
In part 3 of his series on JavaScript Kinetic Scrolling, Ariya Hidayat shows how to build the “snap to grid” feature.
JavaScript Kinetic Scrolling: Part 3
A look at the different behavior of input.select() across different browsers by Louis Lazaris.
input.select() — What’s the Correct Behaviour?
A great post by Tero Parviainen on building your own AngularJS from the ground up starting with scopes and digest.
Make Your Own AngularJS, Part 1: Scopes And Digest
Juriy Zaytsev shows a nice variety of canvas drawing techniques including a number of different types of strokes.
Exploring canvas drawing techniques
Tyler Sticka walks through how to build a Chrome Extension by showing how he built the Colorpeek extension.
Colorpeek, Part 2: Building Your First Chrome Extension
Libraries and Frameworks
Andrew Burgess takes a closer look at Node’s Event Module and it’s EventEmitter class.
Using Node’s Event Module
Toby Ho walks through how to use Esprima to detect accidentally leaked global variables in a program.
Fun with Esprima and Static Analysis
Mobile
Rob Lauer compares 5 different mapping solutions for PhoneGap apps for ease of implementation, functionality and performance.
Mobile-Friendly Mapping for PhoneGap Apps
Build a quiz manager mobile application using jQuery Mobile by Raymond Camden.
Building a Quiz Manager for jQuery Mobile
New and Updated Libraries and Frameworks
Infect.js is a simple, dependency-free JavaScript dependency injection framework supporting RequireJS, AMD and Node.
infect.js
phantomas is a PhantomJS-based web performance metrics collector and monitoring tool.
PhantomJS based, modular web performance metrics generator
Zoomerang let’s you add the ability to zoom on almost any element on your page.
zoomerang
OriDomi by Dan Motzenbecker lets you fold DOM elements like paper.
OriDomi – origami for the web
LargeLocalStorage is a large capacity, up to several GB when authorized by the user, key-value store in the browser.
LargeLocalStorage
TOMODOkorz lets you make cross-origin requests to any domain and can remove cross-origin restrictions from your site.
TOMODOkorz
TinyCore.js is a tiny JavaScript modular architecture library.
tinycore
generator-threejs is a Yeoman generator for three.js experiments.
generator-threejs
Etc.
Paul Irish shows off new tools in Chrome DevTools for Mobile including screencast, port forwarding and emulation.
Chrome DevTools for Mobile: Screencast and Emulation
HTML5 UP! by AJ offers a number of free, responsive and customizable site templates.
HTML5 UP! Responsive HTML5 and CSS3 Site Templates
Tom Ashworth shares some ideas of ways to improve your JavaScript skills.
JavaScript: Taking Off the Training Wheels
If you’ve read his articles, you know that Nicolas Bevacqua writes great stuff. His first book on JavaScript Application Design – A Build First is now available. Get it.
Get Between the Covers of Build First
Andrew Trice shows how you can use a combination of PhotoShop and Edge Animate to create a cool parallax effect on mobile devices.
Photorealistic 3D Parallax Effects in HTML or Adobe DPS with Adobe Photoshop and Adobe Edge Animate
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.