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

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:

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:

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.

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

• JavaScript the Definitive Guide (7th Edition)
• Vue.js in Action
• The Pragmatic Programmer (2nd Edition)

---

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

 

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