Web Tools Weekly
What a Tool!

Issue #238  (Comma Operator, CSS/HTML, JS Utils, React)02/08/18

Advertisement (via Syndicate)
Fast, Reliable Hosting for WordPress and Drupal Sites
Get Pantheon’s fast, reliable website hosting with HTTPS and global CDN included with every plan. Dev and test are always free, pay when you go live.
Learn More

The comma in JavaScript is commonly used in a number of contexts:

  • Function parameters and arguments: (param1, param2)
  • Array elements: [1, 2, 3]
  • Object property/value pairs: obj = { one: 1, two: 2 }
  • Multiple variables: var one=1, two=2, three=3

But technically the comma can also be used as an operator, just as +, =, *, and so forth. The comma operator is usually put in a category all by itself, rather than falling under assignment operators or something similar.

As an operator, the comma allows the execution of more than one expression in a single statement. The last item in a statement with multiple comma-separated expressions will always be the one returned.

Take note of the logs for the following example:
function myFunc () {
  return i=1, j=2, k=3;

console.log(myFunc()); // 3

let num = (3, 4, 5, 6);
console.log(num); // 6

Try on JS Bin

The myFunc() function returns 3 because that's the value of the right-most expression in the line using the comma operators. The other items are also evaluated but don't return anything so they're rendered somewhat useless in that context.

In the second example, the num variable is assigned the return value of the expression in the parentheses. Again, only the last item is returned, so the return value is 6.

Similarly, the following looks confusing at first, but makes sense when you understand how the comma operator works:
a = (b = 3, c = 4);

console.log(a); // 4 (right-most expression)
console.log(b); // 3
console.log(c); // 4

Try on JS Bin

Outside of the ability to separate multiple variables in a single line, probably the most practical use of the comma operator is in a for loop that has multiple  loop variables:
for (let i=0j=10; i < j; i++, j--) {
  console.log(i, j);

Try on JS Bin

Along with a little extra info on MDN's article, that should be enough to help you understand how the comma works as an operator.

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)

CSS and HTML Tools

Fast, reliable hosting for WordPress and Drupal sites with HTTPS and global CDN included with every plan.   sponsored via Syndicate

A generic framework aiming for a fully functional polyfill for CSS variables.

PostCSS Easing Gradients
PostCSS plugin to create smooth linear-gradients that approximate easing functions.

Animation library for the strong of heart, and weak of mind.

Nice React Layout
Set of React components to create complex flexbox-based layouts without knowing what flexbox is.

CSS Grid Editor
Online tool that lets you use simple keyboard commands to build a grid layout and output the corresponding CSS Grid Layout code.

A small function that allows you to manage class names.

Complete set of Instagram filters in pure CSS.

Click to copy special characters to your clipboard.

Converts CSS modules into React/Preact components.

Hexi-Flexi Grid
SCSS component, built on the CSS Grid layout, that creates a hexagonal lattice. The mixin includes a number of customizable settings to control the size, layout, and look of the hex grid.

Lets you write HTML templates with JavaScript template literals, and efficiently render and re-render those templates to the DOM.

JavaScript Utilities

Easily offload your store management to a Web Worker.

Move an async function into its own thread. A simplified single-function version of Workerize (which lets you run a module in a Web Worker).

Provides a handy and composable way to validate/transform JavaScript variables.

A tiny (344 bytes) wrapper around WebSocket that will automatically reconnect if the connection is lost.

Useful, modern JavaScript solution to add share links from your website to social networks or mobile messengers. Easy to install and configure.

A tiny (~2kb minified+gzipped), fast, unopinionated handler for updating JavaScript objects and arrays immutably.

A simple yet powerful data validator for Node.js and browsers that makes it simple to write async validations on nested data sets.

A JavaScript library that allows ad blockers to work but prevents users from manually blocking ads.

A 350-byte diff function returning a patch object, allowing you to perform time traveling to an object or an array using your own merge functions with ease.

A productive and extensible WYSIWYG editor that allows the user to toggle between regular and Markdown mode.

IndexedDB Promised
A tiny library that mirrors IndexedDB, but replaces the weird IDBRequest objects with promises, plus a couple of other small changes.

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

React Tools

A functional transaction based state management library. Updating React can be expensive. Updates to state only happen when the developer deems it necessary.

State that goes without saying.

Universal React Query Library. A GraphQL client, exposed as a set of React components.

Redux Knife Manager
A lightweight library for easily managing, encapsulating, and generating Redux entities such as action, reducer, selector, and so on.

Customizable markdown component that takes GitHub-flavored Markdown and makes native JSX without dangerous hacks. Also supports React-like libraries.

React PopPop
A responsive, mobile-friendly, and multi-direction modal window component for React.

React Form
Extensive and efficient solution for creating basic to complex forms in React. Manipulate values; set errors, warnings, and successes; customize your inputs, perform asynchronous validation, and more.

A React component for measuring and annotating images.

A dead simple way to add complex translations in a React project.

React Primer
A React prototyping tool. Generate your React project component hierarchy.

A Tweet for Thought

Wendy's throwing shade at McDonald's. Doesn't get much better than that. But kudos to McD's for rolling with it and not deleting the original tweet.

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

I think everyone should read and consider signing the AMP letter.

Thanks to all for subscribing and reading!

Keep tooling,