Web Tools Weekly Issue #363 (Object.assign(), CSS/HTML, Media, JS Utils)

Issue #363 (Object.assign(), CSS/HTML, Media, JS Utils)07/02/20

Managing Complexity in Adopting Microservices
July 8 @ 10 AM PT | 5 PM UTC
Join Rollbar, Optimizely, Postman, and DeployHub for an enlightening panel discussion around the evolution of microservices and best practices for managing a microservices architecture.
Register here

If you have multiple objects in JavaScript and you want to merge them together, keeping what's in common, then the Object.assign() method is going to come in handy.

Here are three example objects that I'll use to demonstrate:

const obj1 = { a: 1, b: 2, c:3, d:4 };

      const obj2 = { b: 5, c: 6, e:7, f:8 };

      const obj3 = { f: 9, g: 10, h:11, i:12 };

The object key/value pairs are named using the letters of the English alphabet. But you'll notice there's some overlap in the letters. If I want to merge these objects while holding on to the most recent version of any particular key's value, I can use Object.assign():

const newObj = Object.assign(obj1, obj2, obj3);

      // Show the modified target object

      console.log(obj1);

      // Show what's returned (same as target)

      console.log(newObj);

Try it on CodePen

As you can see, Object.assign() is pretty simple to use. The first argument is the object that you want to receive the sum of the key/value pairs (i.e. the "target" object). The remainder of the arguments (one or more) constitute the ones you want to assign to the target when combined.

Things to keep in mind when using Object.assign():

The target object receives all enumerable own properties from the source objects
Later properties overwrite previous ones (as shown in the example code where "b" is overwritten, among others)
The "order" is defined by the order in which you put the parameters in the method call. The example CodePen also shows an alternate arrangement for the assignment (i.e. obj1, obj3, obj2), which provides a slightly different output

MDN's article has more info and some more complex examples, but that's Object.assign() in a nutshell.

Now on to this week's tools!

CSS and HTML Tools

Stitches
Yet another CSS-in-JS solution, this one favouring atomic CSS.

Sorted CSS Colors
Drag the slider to view sorted named CSS colors in a way that shows related colors together.

Animate.css
The godfather of all the drop-in CSS animation libraries is now at version 4 and brings some breaking changes (it's CSS, how much can it break?).

Twin
Use Tailwind classes within CSS-in-JS libraries.

Knopf.css
A modern, modular, and extensible CSS button system designed for both rapid prototyping and production-ready applications.

Entity Pro
A glyph and emoji finder for Mac that uses smart search.

Swach
A robust color management tool for Mac, Windows, and Linux that includes a picker, palettes, contrast checker, and a neat "color harmonies" generator.

Gradihunt
Just another CSS gradient gallery for inspiration and the ability to 'favourite' gradients.

new.css
A classless CSS framework to write modern websites using only HTML.

classnames-components
A CSS class component wrapper to speed up styling React components.

flat-html
An alternative to templating and generating complicated HTML. Seems to be more of a novelty rather than anything practical.

Media Tools (SVG, Video, Images, etc.)

Textures.js
A JavaScript library for creating SVG patterns for data visualization.

Image Extractor
Enter a URL to extract all images from any public website.

nanogallery2
Now at version 3. A modern photo/video gallery and lightbox solution that's responsive and customizable.

Universal AR SDK for JavaScript
Build immersive Augmented Reality in the platform of your choice (this is the JS version, other platforms also supported).

HiFiC
High-fidelity generative image compression for a state-of-the-art generative lossy compression system.

Responsive Video Poster
JavaScript plugin that uses a standard image tag as the video poster so you can use standard responsive image techniques to load only the most appropriate image.

Tree
An online tree-like utility for generating ASCII folder structure diagrams.

Chart
Create charts with random, tabular, or JSON data inside Sketch, Figma, or Adobe XD.

Artify
An easy to use web-based design editor packed with 2 million icons, 3,000 Illustrations, 3,000 mockups and thousands of elements and assets like patterns, photos, abstract shapes, and more.

Deakins
Small and simple 2D viewport/camera management for Canvas

Artvee
Browse and download high-resolution, public domain artworks, which you can use for any purpose (commercial or non-commercial).

Blobs
Generate random blobs varying in complexity, downloadable as SVG (image or code) or Flutter code.

JavaScript Utilities

Tech Productivity
A brief weekly newsletter for tech professionals. Features articles, tips, and tools for improved productivity. promoted

emoji-picker-element
A lightweight emoji picker component for the modern web.

Rando.js
The easiest way to do randomness in JavaScript (e.g. picking a random int/float between two numbers).

dotago.js
Silly syntactic sugar for creating relative dates and time durations with JavaScript.

DFlex
Multiple utilities to manipulate the DOM, including a generator, DOM store, and a draggable utility.

tragopan
Minimal dependency-free pan/zoom library. Uses native browser scrolling as its implementation for panning (left/right/up/down), and transform/scale for zooming (in/out).

secret-blob
Tiny module for easy encryption of buffers.

Selecto.js
A component that allows you to select elements in the drag area using mouse or touch.

RoughNotation
A small JavaScript library to create and animate annotations on a web page. Uses RoughJS to create a hand-drawn look and feel and elements can be annotated in a number of different styles.

ac-colors
A reactive JavaScript color library that can freely convert between many color formats, as well as handle random color generation and contrast ratio calculation.

monetize.js
An Event-driven library that serves as a wrapper and simulator for Web Monetization API.

mande
Simple, light, and easy to use wrapper around the Fetch API.

PluralJS
A micro library to produce any singular noun into plural. Takes into consideration uncountable nouns (like "wildlife") and irregularities (like adding -es to some words e.g. "dingoes").

A Tweet for Thought

Here's a plot chart demonstrating 'effectiveness' vs. 'how often it's used' for various debugging techniques (by Forrest Brazeal).

Send Me Your Tools!

Made something? Send links via Direct Message on 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...

TitleRun is a game you can play in your browser's title bar.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris