Issue #244 (Array Destruct Swap, Productivity, JS Libs, Media)03/22/18
Continuing the theme of ES6 destructuring, here's a quick tip that allows you to use array destructuring to swap the values of two variables.
Before ES6, to do this you'd normally have to incorporate a temporary variable, something like the following:
|
let one = 'Dogs',
two = 'Alligators',
temp;
temp = one;
one = two;
two = temp;
console.log(one); // "Alligators"
console.log(two); // "Dogs"
|
Try it on JS Bin
That code is fine. It's not difficult to understand and it does the job. But with array destructuring, look how much cleaner the same swap can be done:
|
let one = 'Dogs',
two = 'Alligators';
[ one, two ] = [ two, one ];
console.log(one); // "Alligators"
console.log(two); // "Dogs"
|
Try it on JS Bin
The third line above uses an array destructuring assignment. The main difference here from the previous tip on array destructuring is the fact that the right side of that line is using an array literal. And of course, the left side is the array destructuring pattern where the variables that will absorb the array are named.
I could have used different variable names on the left side of the equal sign (e.g. [ three, four ]), but that would defeat the purpose of the swap I want to achieve. Also, I'd have to ensure that I initialized the variables properly with let or const. The right side, however, has to be an object to be destructured, so I'm simply dropping the variables into it to build the array literal.
As mentioned, either technique is fine, but the ES6 method is just a little bit cleaner.
Now on to this week's tools!
|
Productivity Tools
DragDropr – Universal Visual Content Builder
DragDropr, the only CMS-independent "What-You-See-Is-What-You-REALLY-Get" drag & drop page builder. sponsored
Legal Leaf
Chrome extension that uses AI to read and summarize terms and conditions for you, in plain english, right in your browser.
Fastr
Chrome extension that makes pages load faster, based on turbolinks.js.
Href Tools
Online web tools to get your work done faster. Includes code compressors, CSV to JSON, image to text, image compression, and more.
Memex
Chrome, Firefox, or Vivaldi extension to help you instantly find websites again without bookmarking. Simply search what you remember about them.
Hyperlogs
The most comprehensive app that helps you easily manage all your projects and teams' timesheets without clutter and complexity.
FollowUp
Chrome extension. A lightweight productivity suite for email that keeps your conversations and tasks from slipping through the cracks. Set timed reminders that arrive at the top of your inbox when you need them.
Sieve
The easiest way to start and manage your freelance business. They streamline the whole process and help you with every tool you need in one place.
Manuscript
Provides all you need to make great software, including project management, issue tracking, and support, fused with just enough process to help you deliver.
FlowMapp
Online tool for creating interactive sitemaps for web development and planning better UX.
Initab
New tab Chrome extension that offers a solution to continually having too many tabs open. Also offers tools for a quick view of GitHub Issues, Stack Overflow, and more.
Kozmos
Free, simple, and private bookmarking for everyone.
|
|
Recommended Reading (Affiliate Links via Amazon)
|
JavaScript Libraries and Frameworks
jq-superlight
A super lightweight library that simulates some basic features of jQuery. Supports IE10+.
Radi.js
A tiny (3kB minified & gzipped) JavaScript framework that doesn't use any kind of diffing algorithm nor virtual DOM, which makes it really fast.
DoneJS
Now at version 2+. An open source JavaScript framework that makes it easy to build high performance, real-time web and mobile applications.
Bulb
A reactive programming library for JavaScript that provides a simple API for writing event-based programs in a declarative style.
CaffeineScript
A beautiful, fun language designed to maximize your JavaScript productivity.
Ember.js
The popular web application framework is now at version 3+.
SurveyJS
Open-Source JavaScript survey library. Also offers a visual survey builder and a service for data storage and analysis.
Just Animate
A robust JavaScript animation library that plugs nicely into the Web Animations API.
Phaser
Now at version 3+. A fast, fun, and free open source HTML5 game framework.
Grumbler
A template for writing distributable JavaScript libraries.
|
Media Tools
Optimage
Advanced image optimization tool. Reduce weight of images but not quality. Deliver images faster. Save on bandwidth and storage.
Ballpoint
Online vector graphics editor, still in active development.
Leaflet TrueSize
A plugin for easily comparing sizes of geographical shapes.
EasyPZ.js
Make any web visualization interactive via pan and zoom, for mobile and desktop, using just one line of code.
Konva
Now at version 1+. HTML5 2D canvas library for desktop and mobile applications.
Heroicons UI
A set of 104 free premium SVG icons.
svg-grabber
Chrome extension to quickly preview and get all SVG assets from a website.
D3 Discovery
A search engine for D3.js plugins.
Kapwing
A modern editor for videos, GIFs, and images. Includes a meme maker, resizer, subtitle maker, filters, and more.
Blotter.js
A JavaScript API for drawing unconventional text effects on the web.
SVG Backgrounds
Customizable SVG patterns and background designs for websites and blogs.
|
|
