Web Tools Weekly
What a Tool!

Issue #194  (Aliasing args, Frameworks, CMS's, Build Tools)04/06/17


Advertisement
See How Your Visitors Are Really Using Your Website
Hotjar is a new and easy way to truly understand your web and mobile site visitors. Find your hottest opportunities for growth today.
Check it out now
Adobe XD

Most JavaScript developers are using strict mode, a feature introduced in ES5 to opt in to a restricted variant of JavaScript. One of the changes in strict mode is the fact that the arguments object is no longer an alias for function parameters.

For example:

function myFunc (a, b) {
  arguments[0] = 30;
  return a + b;
}

// returns 33 in non-strict mode
console.log(myFunc(2,3));

Try on JS Bin

Notice that before returning the result I've redefined the first parameter in the arguments object. Before ES5, the return value in this example would be 33 instead of 5. You'll also notice in the demo that JS Bin provides a "bad assignment" warning on the line where this happens.

Here's the same code using strict mode inside the function:
 
function myFunc (a, b) {
  'use strict';
  arguments[0] = 30;
  console.logarguments[0] ); // 30
  return a + b;
}

// returns 5 in strict mode
console.logmyFunc(2,3) );

Try on JS Bin

Although I've still attempted to redefine the first parameter, the return value is what's expected. Notice that I'm still able to redefine the first element in the arguments object, it's just not mapped to the parameters anymore.

And note that the reverse was also true in non-strict mode. That is, you could redefine one of the parameters and this would again be aliased to the arguments object. But not in strict mode.

Now on to this week's tools!

Front-end Frameworks

Moon
A minimal, blazing fast user interface library.

Omi
Open and modern framework for building user interfaces. Scoped CSS, OO approach, ES5/ES6 options, and compatible with any templating engine.

Waffle Grid
An easy to use, customizable flexbox grid system.

SPAQ
A server and client setup to allow for rapid prototyping of Single Page Applications (SPAs).

Tent CSS
CSS/Sass-based foundation for starting a project. Uses BEM and provides only the most common basic modules needed for a project.

Glimmer
A fast and lightweight UI component library from the Ember.js team.

Propeller
A front-end responsive framework based on Google's Material Design Standards & Bootstrap.

ExpressJS, Socket.IO & AngularJS Boilerplate
A quickstart opinionated base for starting a new project.

Website Builders, CMS's, etc.

App Maker
A low-code application development tool by Google that lets your organization build and deploy custom apps easily and securely.

Prehave
Gives you a private website for your select community. Your side projects belong here.

Weebrix
The smartest and quickest way to create a real estate agency website.

DatoCMS
An API-based administrative area for your static websites. Use your favorite website generator, let your clients publish new content independently.

Glitch
The friendly community where you'll build the app of your dreams. With working example apps to remix, a code editor to modify them, instant hosting and deployment.

Odoo Studio
A zero-code development platform to build business apps in minutes.

Jekyll-Bootstrap
The quickest way to blog on GitHub Pages. Get a complete blog scaffold published and hosted on GitHub Pages in three minutes.

htmlight.com
Simple, free HTML hosting with custom URLs and file management.

Build Tools, Task Runners, etc.

tradeship
Statically analyzes your JavaScript code for identifiers that aren't defined and finds the appropriate dependencies to import. It also removes imports that aren't used.

Buck
A build system developed and used by Facebook. It encourages the creation of small, reusable modules and supports a variety of languages/platforms.

Electrode
Platform for building universal React/Node.js applications, focused on performance, component reusability, and simple deployment to multiple cloud providers.

webpack-chain
Use a chaining API to generate and simplify the modification of webpack 2 configurations.

webpack-blocks
Configure webpack using functional feature blocks.

unpkg
A fast, global content delivery network for everything on npm. Use it to quickly and easily load files using a simple URL.

Yeoman Generator
Rails-inspired generator system that provides scaffolding for your apps. Now at version 1.x.

StealJS
Futuristic JavaScript dependency loader and builder. Speeds up application load times. Works with ES6, CommonJS, AMD, CSS, Less and more.

A Tweet for Thought

Controversial screenshot from one of PPK's recent talks on front-end tools. Probably taken somewhat out of context, but an interesting discussion followed.
 

Suggestions / Corrections

Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
 

Before I Go...

I love this comic on The Adventures of Fallacy Man.
 


Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris