Hello and welcome to This Week in JavaScript—a lovingly curated collection of links relating to what’s new and exciting in the world of JS. The complete list is tagged jsweekly. (Don’t forget to check out our weekly .Net roundup too!)
ES6 Goodness
The rapidly approaching ES6 express is gathering pace. This past week saw Airbnb publish their ES6 style guide, as well as the release of Babel 5.0 (a compiler that lets you write ES6 code today). Over on SitePoint we had a look at understanding class and inheritance in ES6, whilst ES6 writing machine Dr. Axel Rauschmayer examined both how to write client-side ES6 with webpack and how to use transpiled ES6 on Node.js. A new site called es6-features.org showcases the major ES6 features, as well as providing a brief example of each feature and comparing it to the ES5 equivalent. Finally, be sure to check out Addy Osmani’s extensive collection of ES6 tools.
Anti-static
Recently SitePoint author Ciara Burkett took a look at 6 Node.js static site generators. Brian Rinaldi then followed up with an in-depth look at Wintersmith (the first in a two part series). Wintersmith uses Jade as a templating engine—here’s a tutorial which covers how to install Jade and compile it into HTML. Not particularly new, but another templating language I discovered recently is icanhaz.js. Bringing things back on topic somewhat, here’s how to build custom React Native components from scratch and here’s Node’s core philosophy told through a tale of two jugglers.
Tools of the Trade
Here are 15 must-know Chrome DevTools tips and tricks. Do you know all of those? Please feel free to share your own tips and tricks in the comments. Moving on, Jake combines the concept and the advantages of Make with a Node.js environment. Here’s how you can use it in your projects. Here’s a look at the modern JavaScript developer’s toolbox (and what it should contain). Are you using Grunt? Wanna switch to Gulp? Here’s how. Here’s a handy Gulp task (are they even called that?) to check your CSS for unused classes. Finally, AngularJS-Boilerplate helps you kick start your new Angular project with SASS support and Gulp watch/build tasks.
Libraries
Github.js is an easy way to feature open source contributions on your website or portfolio. jQuery Progress Tracker is a small (2KB) jQuery plugin that creates a fixed progress indicator based on your content and allows linking between them (demo). jQuery Travelmap lets you pin your visited cities and countries on Google maps (demo). Responsible is a JavaScript library that gives mobile users a choice over which version of a site they’re shown (demo | video). Finally, lightcase.js is a smart and flexible Lightbox Plugin (demo).
Bonus tip for the week: not much to do with JavaScript, but useful nonetheless: here’s how safeguard site files by placing them above the web root.
I hope you’ve enjoyed working through these links. Before I leave you, might I remind you to check out SitePoint’s official JavaScript newsletter which you can subscribe to here: http://www.sitepoint.com/newsletter/
Please PM us if you have anything of interest for the next issue, and happy reading! - Paul and Jim.