Issue #237 (ES6 Objects, Uncats, JS Libs, Testing)02/01/18
There have been improvements in ES6 in how we can write object literal syntax that make things a little more succinct and less redundant. Here are two of those changes.
First, when plugging local variables into values for object literal properties, we would normally do something like this in ES5:
|
var one = 1,
two = 2;
var myObject = {
one: one,
two: two
};
|
View on JS Bin
This isn't the worst thing in the world, but there is some redundancy there, repeating the variable names. In ES6, you can do the following as a shortcut:
|
const one = 1,
two = 2;
const myObject = {
one,
two
};
|
View on JS Bin
In this case, the property name alone is a shortcut for the usual property: value syntax, saving a few keystrokes and making the whole thing a little cleaner. When the JavaScript engine sees a property in an object literal without a value following it, it will look for the same name in a local variable in the containing scope and assign that value to it. If you try the same syntax in an ES5 environment in a non-supporting browser, you'll get an error.
Another similar improvement is when including a function (that is, a method) in an object literal. In ES5 you would do this:
|
var myObject = {
one: 'one',
two: 'two',
three: function () {
// do something...
}
};
|
View on JS Bin
But now you have the option to remove the colon and function keyword in favor of something called concise method syntax:
|
const myObject = {
one: 'one',
two: 'two',
three() {
// do something...
}
};
|
View on JS Bin
Again, if you try this in an ES5 environment, you'll get an error indicating that the JavaScript engine is looking for a colon in the object literal property/value pair.
In both these instances you can still use the old syntax, which you might end up doing out of habit. But if you prefer shorter, cleaner code, you can start to incorporate these into your code if you haven't done so already.
Now on to this week's tools!
|
The Uncategorizables
Pantheon
Fast, reliable hosting for WordPress and Drupal sites with HTTPS and global CDN included with every plan. sponsored via Syndicate
Manta
Flexible invoicing desktop app for Mac with beautiful and customizable templates.
Docusaurus
Easy to maintain open source documentation websites.
EmailOctopus
Email marketing for less, via Amazon SES.
Bootsketch
Bootstrap components for Sketch so you can focus on shipping products instead of renaming layer groups.
Uploadcare
File uploads, processing, storage, and delivery for web and mobile apps.
Daily
Free, super easy video calls, on your own custom URL.
Tracy
Convert your monochrome sketches, drawings, or hand lettering to SVG.
SketchCleaner
Sketch plugin that helps you get your design files as clean as a whistle.
Plant
Version control for designers. Mac app and plugin for Sketch.
Akaunting
Online accounting software. From invoicing to expense tracking to accounting, includes all the tools you need to manage your money online, for free.
|
JavaScript Libraries and Frameworks
boardgame.io
State management and more for turn based games.
Hyperactiv
A super tiny reactive library. Observes object mutations and computes functions depending on those changes.
Nerv
A blazing fast React alternative, compatible with IE8 and React 16.
Frint
Modular JavaScript framework for building scalable and reactive applications.
Sapper
Military-grade progressive web apps, powered by Svelte.
NectarJS
JavaScript compiler as a service that compiles JavaScript and Node apps to any platform.
Joy.js
A toolkit for building interfaces that allow the user to program and customize the design. Hard to explain but check out the demos and docs for info.
AWS Amplify
A declarative library for application development using Cloud services with JavaScript.
|
Testing and Debugging Tools
DEVision
Track your application's state changes at run-time and export test scripts.
headless-devtools
Lets you perform Chrome DevTools actions from code by leveraging Headless Chrome+Puppeteer.
React Performance Devtool
A browser developer tool extension to inspect performance of React components.
Truffle
A development environment, testing framework and asset pipeline for Ethereum, aiming to make life as an Ethereum developer easier.
Burnside
Test your entire app, end to end, in pure JavaScript.
Progressive Web App Feature Detector
Online testing page for PWA-related features in your current browser.
A11y Command-line Tools
Web accessibility audits powered by the Chrome Accessibility Developer Tools.
Puppeteer
Headless Chrome Node API.
Koa11y
Windows, Mac, or Linux desktop app that allows you to automatically detect accessibility issues on web pages.
Website Speed Test
Page speed test that focuses on how to improve speed via image optimization techniques.
|
A Tweet for Thought
Here's a thread begun by Quincy Larson about success in starting a developer career in your 30s or later.
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...
RemoteLeads allows you to receive freelance front-end job leads in your inbox regularly.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
