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

Web Tools Weekly
WEB VERSION
What a Tool!

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

let myObj = {
  a: 1,
  b: 'Data',
  c: false
};

console.log(Object.keys(myObj)); // ["a", "b", "c"] console.log(Object.values(myObj)); // [1, "Data", false]

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

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

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.
 
Rows n' Columns

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

Older messages

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

Web Tools #367 - Front-end Frameworks, Testing Tools, Uncats

Thursday, July 30, 2020

Web Tools Weekly WEB VERSION Issue #367 • July 30, 2020 In case you missed it, a couple of new String methods have been added in ES2017 and ES2019 and they all have pretty decent browser support. The

Web Tools #366 - Fetch API, CSS Tools, React, CMS's

Thursday, July 23, 2020

Web Tools Weekly WEB VERSION Issue #366 • July 23, 2020 Advertisement Breakpoints and `console.log` is the Past, Time Travel is the Future Wallaby.js is a developer productivity tool that runs your

Web Tools #365 - File API, Media Tools, JSON, Git/CLI

Friday, July 17, 2020

Web Tools Weekly WEB VERSION Issue #365 • July 16, 2020 Advertisement The Most Powerful CI/CD Tool Automate your development process quickly, safely, and at scale. Sign Up CircleCI I'm sure you

Web Tools #364 - Testing Tools, Text Editors/IDEs, Uncategorizables

Thursday, July 9, 2020

Web Tools Weekly WEB VERSION Issue #364 • July 9, 2020 Advertisement The Most Powerful CI/CD Tool Automate your development process quickly, safely, and at scale. Sign Up CircleCI In addition to this

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