Issue #238 (Comma Operator, CSS/HTML, JS Utils, React)02/08/18
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=0, j=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!
|
CSS and HTML Tools
Pantheon
Fast, reliable hosting for WordPress and Drupal sites with HTTPS and global CDN included with every plan. sponsored via Syndicate
Rawss
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.
Obnoxious.css
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.
as-cn
A small function that allows you to manage class names.
Instagram.css
Complete set of Instagram filters in pure CSS.
CopyChar
Click to copy special characters to your clipboard.
decss
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.
lit-html
Lets you write HTML templates with JavaScript template literals, and efficiently render and re-render those templates to the DOM.
|
JavaScript Utilities
Stockroom
Easily offload your store management to a Web Worker.
Greenlet
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).
skema
Provides a handy and composable way to validate/transform JavaScript variables.
Sockette
A tiny (344 bytes) wrapper around WebSocket that will automatically reconnect if the connection is lost.
goodshare.js
Useful, modern JavaScript solution to add share links from your website to social networks or mobile messengers. Easy to install and configure.
unchanged
A tiny (~2kb minified+gzipped), fast, unopinionated handler for updating JavaScript objects and arrays immutably.
Indicative
A simple yet powerful data validator for Node.js and browsers that makes it simple to write async validations on nested data sets.
Adfy
A JavaScript library that allows ad blockers to work but prevents users from manually blocking ads.
T(a)rdis
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.
TOAST UI Editor
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.
|
React Tools
Sunfish
A functional transaction based state management library. Updating React can be expensive. Updates to state only happen when the developer deems it necessary.
Unstated
State that goes without saying.
urql
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.
markdown-to-jsx
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.
react-measurements
A React component for measuring and annotating images.
react-translated
A dead simple way to add complex translations in a React project.
React Primer
A React prototyping tool. Generate your React project component hierarchy.
|
|
