Web Tools #374 - CSS Tools, JSON, DBs, Uncats

Web Tools Weekly
WEB VERSION
What a Tool!

Issue #374 • September 17, 2020

Previously I've discussed a number of different tips around object and array destructuring in ES6, which make code much easier to read and maintain. Another good suggestion I recently came across has to do with using more than two parameters in a function definition.

It's generally been recommended for more maintainable code to avoid more than a few parameters per function. Of course, this isn't always practical. So it's been suggested that three or more arguments be condensed into a single object:

function doSomething (config) {
  console.log(config);
}

doSomething({
 
pages: 3,
  posts: 10,
  editable: true,
  format: 'markdown',
  archive: false
});

This is fine and its been used forever, but the one slight problem is that you can't tell from the function head exactly what's expected – even if you know it's a config object.

How much nicer to use object destructuring to do the same thing while keeping the clarity of the object visible in both the function call and function definition:

function doSomething ({ pages, posts, editable, format, archive }) {
  // do whatever with any value...
}

Try it on CodePen

This time, instead of the ambiguous 'config' object that could be any number of prop/value pairs, I can clearly see what options the function expects without having to examine the code or read any code comments or documentation.

And as a bonus, consider the pre-destructuring example. A linter will tell you if the function uses the object itself, but it won't tell you if all the properties are used (which is what you really want to know). On the other hand, the linter will inform you if all the destructured values are used.

ESLint Errors when destructuring object

This is much cleaner and very easy to read and your linting tool will give you a little help on it too.

You can get 190+ JavaScript tips and demos in my E-Books Bundle.

Now on to this week's tools!

CSS and HTML Tools

Hey Meta
Generate and edit common meta tags for your website including social meta tags for Twitter and Facebook cards, and more.

Stitches
A CSS-in-JS library. Near-zero runtime, server-side rendering, multi-variant support, and a best-in-class developer experience.

Capsize
Online tool and guide to make the sizing and layout of text as predictable as every other element on the screen. Produces code in JS, CSS-in-JS, and CSS.

EazyCSS
A pay-for browser extension that lets you live-edit a page's design or content, similar to DevTools.

Color Palette Generator
A simple tool to generate and random color palettes.

MoreToggles.css
A pure CSS library of dozens of nice looking and stylish toggles.
 
MoreToggles.css

colors.lol
Overly descriptive color palettes. A fun way to discover interesting color combinations.

Good Email Code
A small library (with description) of best practices HTML email components including a template, preheader, container, columns, button, and more.

CSS Color Extractor
A free online color tool allowing you to check what colors are used in a CSS file, and how many times they have been used. Just paste a URL to a CSS file.

CSS2JS
Online tool to convert CSS property/value pairs to and from a JS object and JSX props.

Airform.io
Functional HTML forms service for use with React, Angular, Vue, and more.
 
Recommended Reading for Developers:

JSON, Databases, etc.

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

XML Viewer
A simple tool for quick XML exploration that can group-collapse nodes, click-to-copy xpaths, and extract values from nodes.

Kubernetes YAML Generator
Online tool to produce and edit a YAML file for configuring Kubernetes deploys.

Firetable
A spreadsheet-like UI for Firestore (the NoSQL document database).

immudb
A lightweight, high-speed immutable database for systems and applications. Open source and easy to integrate into any existing application.

RxDB
Now at version 9+. A NoSQL-database for JavaScript applications, including hybrid apps, Electron apps, PWAs, and Node.
 
RxDB

xmlbuilder2
A wrapper for Node.js that adds chainable functions to make it easier to create and work with XML documents.

JSON Schema Store
An API that includes schemas for all commonly known JSON file formats.

GraphQL Query Generator
A library that generates randomized GraphQL queries from a given GraphQL schema.

genql
Type safe GraphQL query builder. Write GraphQL queries with type validation and auto completion.

Dropbase
A service to turn offline files (Excel, JSON, CSV, Google Sheets) into live databases, instantly.

Cloud Local Storage
Serverless storage exposed via a familiar API. Simply call getItem & setItem, passing a name and a value and your data is stored forever.
 

The Uncategorizables

ConvertAPI
Convert Word, Excel, PowerPoint, HTML, PDF and Image formats with a powerful file conversion Rest API.

Trove
Web scraping and automation API. Zero-setup web scraping with fast proxies, headless browsers, and the infrastructure to scale.

YabTab
API that enables you to extract high-quality tabular data from any website, (e.g. product listing pages, course catalogues, job postings, etc).

umami
A simple, easy to use, self-hosted web analytics solution to provide a friendlier, privacy-focused alternative to Google Analytics and a free alternative to paid solutions.

pdf-wrench
PDF merging tool. Combine multiple PDF pages and images into one PDF document, and nothing is uploaded to their server.

Omatsuri
A slew of everyday-use web tools including a CSS triangle generator, SVG compressor, Data URI generator, curved page dividers, and more.
 
Omatsuri

SpeechText.AI
Powerful artificial intelligence software for speech to text conversion and audio transcription.

Nerd Fonts
Iconic font aggregator, collection, and patcher: 3,600+ glyph/icons, 40+ patched fonts.

The Tech Memo
A tech news feed available via email, Twitter, Instagram, and Facebook Messenger.

JetBrains Mono
An open source monospace coding typeface for developers.

QuickLens
Now at version 2+. Mac app that lets you zoom into pixels, sample colors, measure angles and distances, take snapshots, and more.

Nativefier
Now at version 10+. Make any web page into a desktop application.
 

A Tweet for Thought

Dr. Emily Anhalt has 12 tips for working through Impostor Syndrome.

Dr. Emily Anhalt Tweet on Impostor Syndrome
 

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

If you're building stuff, then you might want to check out WIP, which I assume stands for "Work In Progress". It's a community of makers publicly sharing their progress, getting feedback, and learning from each other.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
PayPal.me/WebToolsWeekly

Older messages

Web Tools #373 - Media Tools, JS Libs, Vue Tools

Thursday, September 10, 2020

Web Tools Weekly WEB VERSION Issue #373 • September 10, 2020 The Google Developers team recently posted a new article in their web.dev resource that's worth checking out: Use advanced typography

Web Tools #371 - Frontend Frameworks, JS Utilities, Build Tools

Thursday, August 27, 2020

Web Tools Weekly WEB VERSION Issue #371 • August 27, 2020 JavaScript's Date object is quite a monster when you take a look at all the methods available on it for manipulating and dealing with dates

Web Tools #370 - Media Tools, Testing/Debugging, Uncats

Thursday, August 20, 2020

Web Tools Weekly WEB VERSION Issue #370 • August 20, 2020 This past week I came across a YouTube video by someone named Aaron Jack called 21 LIFE CHANGING JavaScript tricks that you'll definitely

Web Tools #369 - CSS Tools, VS Code, React Tools

Thursday, August 13, 2020

Web Tools Weekly WEB VERSION Issue #369 • August 13, 2020 Previously I discussed the usefulness of the Array.entries() method, which allows you to get an iterator object that holds the key/value pairs

Web Tools #368 - JS Utilities, SVG Tools, Git/CLI

Thursday, August 6, 2020

Web Tools Weekly WEB VERSION Issue #368 • August 6, 2020 ES6 introduced the somewhat overlooked .entries() method for Array, Map, and Object. The concept for this method is the same for all three, but

You Might Also Like

Import AI 399: 1,000 samples to make a reasoning model; DeepSeek proliferation; Apple's self-driving car simulator

Friday, February 14, 2025

What came before the golem? ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Defining Your Paranoia Level: Navigating Change Without the Overkill

Friday, February 14, 2025

We've all been there: trying to learn something new, only to find our old habits holding us back. We discussed today how our gut feelings about solving problems can sometimes be our own worst enemy

5 ways AI can help with taxes 🪄

Friday, February 14, 2025

Remotely control an iPhone; 💸 50+ early Presidents' Day deals -- ZDNET ZDNET Tech Today - US February 10, 2025 5 ways AI can help you with your taxes (and what not to use it for) 5 ways AI can help

Recurring Automations + Secret Updates

Friday, February 14, 2025

Smarter automations, better templates, and hidden updates to explore 👀 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The First Provable AI-Proof Game: Introducing Butterfly Wings 4

Friday, February 14, 2025

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? undefined The Market Today #01 Instagram (Meta) 714.52 -0.32%

GCP Newsletter #437

Friday, February 14, 2025

Welcome to issue #437 February 10th, 2025 News BigQuery Cloud Marketplace Official Blog Partners BigQuery datasets now available on Google Cloud Marketplace - Google Cloud Marketplace now offers

Charted | The 1%'s Share of U.S. Wealth Over Time (1989-2024) 💰

Friday, February 14, 2025

Discover how the share of US wealth held by the top 1% has evolved from 1989 to 2024 in this infographic. View Online | Subscribe | Download Our App Download our app to see thousands of new charts from

The Great Social Media Diaspora & Tapestry is here

Friday, February 14, 2025

Apple introduces new app called 'Apple Invites', The Iconfactory launches Tapestry, beyond the traditional portfolio, and more in this week's issue of Creativerly. Creativerly The Great

Daily Coding Problem: Problem #1689 [Medium]

Friday, February 14, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given a linked list, sort it in O(n log n) time and constant space. For example,

📧 Stop Conflating CQRS and MediatR

Friday, February 14, 2025

​ Stop Conflating CQRS and MediatR Read on: m​y website / Read time: 4 minutes The .NET Weekly is brought to you by: Step right up to the Generative AI Use Cases Repository! See how MongoDB powers your