Web Tools Weekly
What a Tool!

Issue #239  (ES6 Default Params, Media, Frameworks, Build Tools)02/15/18

Advertisement (via Syndicate)
See How Users Experience Your Designs
Wondering how users are taking to that new redesign? FullStory removes all the guesswork by showing you every click, swipe, and scroll. Best of all, you can try it for free.

In my recent research into ES6 features added to the JavaScript language, I came across the ability to include default parameter values in function definitions. This allows you to ensure that any value not passed in as an argument to the function call will still have a default.

I was originally planning to include this as a quick tip here in the intro for this newsletter, as I often do with stuff I find, but as I continued to study it, I realized there's quite a bit more than just the simple feature itself, which looks like this:

function getInfo (name, year = 2018, color = 'blue') {
  // function body...


The feature has quite a few little good-to-know facts and gotchas, and a little bit of history in how it was commonly done in ES5 and earlier.

So I wrote a full-length article on the topic, which was published on CSS-Tricks a week ago: If this feature is new to you, or if you've only used it superficially, you might be surprised at some of the quirks and other tidbits related to how it works.

Now on to this week's tools!

Did you buy my previous JavaScript/DOM tips book? Here's the latest one...
70 JavaScript & DOM Tips for $5 (Volume 2)

Media Tools

Wondering how users are taking to that new redesign? FullStory removes all the guesswork by showing you every click, swipe, and scroll. Best of all, you can try it for free.   sponsored via Syndicate

Converts video frames to GIF animations using pngquant's features for efficient cross-frame palettes and temporal dithering. Produces animated GIFs that use thousands of colors per frame.

Music Markup Web Components
Provide some general markup for creating music instruments and visualizations using web components.

A React component for integrating Flowplayer into your React app. Passing props to the component will configure and embed the player into your app.

React component that uses SVG to create a collection of loaders which simulates the structure of the content that will be loaded, similar to Facebook cards loaders.

Lightweight HTML container element as a controller parent for one or more canvas elements.

Diagramming for teams. Real-time, collaborative, advanced SVG editor.

Placeholder image generator
Offline customizable placeholder image generator as a PWA.

A React front-end client that communicates with the Spotify API.

A WebVR animation tool.

Online user-friendly SVG animator to easily import, view, animate and export SVG format. No advanced coding skills required.

Front-end Frameworks

Material Design component library for Mithril and React. Can be used as general-purpose component library that includes dialogs, cards, notifications, lists, buttons, form elements, and more.

Now at version 1+. 1 KB JavaScript library for building front-end applications.

A simple and quick way to get you going with developing React applications with Redux and Sass.

Vali Admin
A free and modular admin dashboard template built with Bootstrap 4, Sass and Pug.

A small opinionated future-forward front-end framework.

A modest JavaScript framework for the HTML you already have.

The world's smallest responsive CSS framework (393 bytes gzipped and minified).

Weex UI
A rich-interaction, lightweight, high performance UI library.

A responsive micro-framework for the grid spec powered by CSS custom properties.

Do you like this newsletter? Here's an option to show your support...
Make a One-time Donation via PayPal.me/WebToolsWeekly

Build Tools, Task Runners, etc.

A simplified module bundler based on webpack 3+.

Now at version 3+. A blazing fast bundler/module loader that lets you measure your build time in milliseconds.

A small tool to put the version from your package.json into all resources in an HTML document.

Boilerplate to kickstart creating Gulp plugins.

The zero-configuration bundler for tiny modules, powered by Rollup (a next-generation ES6 module bundler).

Enter an npm module name or drop a package.json file to see its dependency graph, list of maintainers, and license.

Convert yarn.lock to package-lock.json and vice versa.

Blazing fast, zero configuration web application bundler.

Webpack Monitor
A tool for monitoring webpack optimization metrics through the development process.

A Tweet for Thought

This is a good reason to start a coding blog, even if it doesn't get much traffic.

Send Me Your Tools!

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...

If you're into podcasts, you might like Echo, described as "Goodreads, but for podcasts."

Thanks to all for subscribing and reading!

Keep tooling,