Issue #239 (ES6 Default Params, Media, Frameworks, Build Tools)02/15/18
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...
}
getInfo('Honda');
|
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!
|
Media Tools
FullStory
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
gifski
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.
react-flow-player
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-content-loader
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.
canvas-area
Lightweight HTML container element as a controller parent for one or more canvas elements.
Vecta
Diagramming for teams. Real-time, collaborative, advanced SVG editor.
Placeholder image generator
Offline customizable placeholder image generator as a PWA.
React-Spotify
A React front-end client that communicates with the Spotify API.
Norman
A WebVR animation tool.
SVGator
Online user-friendly SVG animator to easily import, view, animate and export SVG format. No advanced coding skills required.
|
Front-end Frameworks
Polythene
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.
Hyperapp
Now at version 1+. 1 KB JavaScript library for building front-end applications.
React-Redux-Sass-Starter
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.
rilti.js
A small opinionated future-forward front-end framework.
Stimulus
A modest JavaScript framework for the HTML you already have.
lit
The world's smallest responsive CSS framework (393 bytes gzipped and minified).
Weex UI
A rich-interaction, lightweight, high performance UI library.
Iota
A responsive micro-framework for the grid spec powered by CSS custom properties.
|
Build Tools, Task Runners, etc.
Simplepack
A simplified module bundler based on webpack 3+.
FuseBox
Now at version 3+. A blazing fast bundler/module loader that lets you measure your build time in milliseconds.
put-version
A small tool to put the version from your package.json into all resources in an HTML document.
gulp-plugin-boilerplate
Boilerplate to kickstart creating Gulp plugins.
Microbundle
The zero-configuration bundler for tiny modules, powered by Rollup (a next-generation ES6 module bundler).
NPMGraph
Enter an npm module name or drop a package.json file to see its dependency graph, list of maintainers, and license.
synp
Convert yarn.lock to package-lock.json and vice versa.
Parcel
Blazing fast, zero configuration web application bundler.
Webpack Monitor
A tool for monitoring webpack optimization metrics through the development process.
|
|
