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

Previously I discussed the usefulness of the Array.entries() method, which allows you to get an iterator object that holds the key/value pairs for an array. The same thing can be done using Object.entries(), should you require the key/value pairs of a particular object.

Conversely, when working with objects, you may want to get an iterable list of the keys (or property names alone), or just the values. So instead of finagling Object.entries() to strip out one or the other, there's Object.keys() and Object.values() that will do this easily:

Try it on CodePen

You pass the object into each one as the only argument and each method returns an array of the items, which is super-useful.

For Object.keys() the property names returned are for the object's own properties that are enumerable. This won't include inherited properties or properties whose name is a Symbol.

With both Object.keys() and Object.values(), the items are collected in the same order as they would be if you looped through them (but these don't access properties in the prototype chain).

Did you like this JavaScript tip? I've collected together tons of similar tips with 200+ CodePen demos in my JS/DOM E-Books Bundle.

Now on to this week's tools!
 

CSS and HTML Tools

Coolors
A color palette generator that lets you customize, save, share palettes via URL, and generate palettes from an uploaded image.
 
Whitespace Characters
Quickly copy and paste Unicode white space characters – and learn how and when to use them.

signature.email
A powerful visual drag and drop editor for email signatures, to help with consistent branding across teams.

Rosebox
An experimental CSS-in-JS library for React apps that focuses on modeling CSS in TypeScript in a way that leverages the capabilities of TypeScript's type system.

Perfect Edition
A lightweight, responsive web e-book template. Demo here.

PostCSS 100vh Fix
A PostCSS plugin to fix an iOS bug associated with 100vh.

Bar Chart Race Generator
Add a CSV file then generate a cool animated bar chart that progresses (or "races") over time. Useful for presentations or screencasts maybe.

Styled Wind
A magical implementation of Tailwind-like class names into styled-components.

How to Target Email Clients
A list of HTML and CSS hacks to target specific email clients when debugging HTML email code.

CSS Spice
A Chrome extension that helps you inspect, edit, and copy the CSS of a website with a single click.

broider
Interactive tool for making "9-patch" borders. You'll have to click to see; I can't explain it much more than that.
 

Text Editors, IDEs, etc.

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

snapcode
App that allows you to take a picture of handwritten code and execute it on Repl.it.

Snippet Shot
This is a nice tool for creating beautiful screenshots of code for presentations. Use a Gist URL or just paste your code, then customize the colors, gradient, language, font, etc.
 
Live Server
VS Code extension to launch a local development server with live reload for static and dynamic pages.

Waypoint
VS Code extension which aims to make navigating JavaScript code bases easier via search, filter, bookmarking, imports, and more.

Tailzilla
Online code editor for creating and customizing Tailwind CSS components and templates.

Inspireframe
Easily create website mockups with thousands of real website components.

SVG Viewer
An SVG viewer for VS Code with a zoom feature and ability to export as PNG.

Snipsnap
The ultimate snippets collection and VS Code extension that automatically exposes all available snippets for every library you are using in your project.

Geany
A powerful, feature-rich, stable, and lightweight programmer's text editor for Windows, Mac, and Linux available in 40 languages and support for 50+ code languages.

Code Time
An open source plugin for automatic programming metrics and time-tracking, right in your code editor (more than a dozen editors/IDEs supported).

React Tools

create-react-hook
CLI for creating reusable React hooks using Rollup and create-react-app.

ConanJS
Another solution for managing app state that also includes dependency injection.

particles-bg
React component for creating an animated particles background.

react-error-boundary
Simple reusable React error boundary component. Provides a reusable wrapper to wrap around your components, allowing you to gracefully handle any rendering errors in your components hierarchy.

Rows n' Columns
Excel-like data grid component for React, built for high performance rendering similar to Google Sheets.
 
React Guitar
A beautiful and flexible guitar component for React that allows you to customize tuning, number of frets, and more.

React Lazy Load Image Component
React Component to lazy load images and other components/elements. Supports IntersectionObserver and includes ability to track window scroll position to improve performance.

react-markdown-editor-lite
A lightweight React Markdown editor component.

React Query
Now at version 2+. Hooks for fetching, caching and updating asynchronous data in React.

Search UI
A JavaScript search framework for implementing world-class search experiences without reinventing the wheel, designed to work with React without any configuration.

EZ React Form Validator
Simple, easy-to-use form validator for React, using hooks.
 

A Tweet for Thought

Hopefully your boss isn't like this when answer a simple question.
 

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 hiring or looking to get hired as a front-end developer, you'll want to bookmark the Front End Interview Handbook.

Thanks to everyone for subscribing and reading!

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