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

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 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.   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 Copyright © 2020 Web Tools Weekly, All rights reserved. Curious about this email? Well, at some point you subscribed, likely at webtoolsweekly.com Web Tools Weekly 5576 Yonge Street PO Box 10044 North York, ON M2N 5S0 Canada Add us to your address book unsubscribe from this list update subscription preferences Privacy Policy