Issue #512  (Obj.fromEntries(), CSS/HTML, Build Tools, React)05/11/23

Another modern ECMAScript method that has good modern browser support across the board is the Object.fromEntries() method, which is similar to the Array.from() method that you are more likely to be familiar with.

Object.fromEntries() allows you to create an object from an array of key-value pairs. It takes an array of entries, where each entry is an array itself containing two elements: the key and the corresponding value.

Below is a simple example to illustrate how the method works:

In this example, I have an array called myEntries that has three key-value pairs. When I pass this array to Object.fromEntries(), it transforms it into an object based on the values the array contains. The resulting userProfile object is shown in the comment at the bottom of the code snippet above.

The above example uses multiple nested arrays, which is a good format for use with Object.fromEntries(). The method automatically picks up the arrays as key/value pairs to drop into the resulting object.

You can also use a combination of Object.fromEntries(), and Array.map() to convert a single array of objects to a single useful object. For example:

In this example, I have an array of objects called data, and I want to create a new object where the keys are the "rank" values of each object, and the values are the "name" values. The resulting newData object is again shown in the comment at the bottom of the snippet.

Some final notes about this method:

• If a nested array or object has more than two values, only the first two are used for the key/value pair, the rest are ignored.
• If non-string values are used, they're automatically converted to strings since the resulting object expects only strings.
• The array passed into the method must be iterable

CSS and HTML Tools

FancySymbol
A categorized resource to copy/paste special characters, text symbols, foreign language symbols, and lots more.

CSS HD Gradients
An interactive tool to build "HD gradients" that are built using modern color formats like Oklab, LCH, HSL, sRGB, etc.

Tailwind Variants
A first-class variant API for Tailwind that features slots, responsive variants, components composition, type safety via TypeScript, no style conflicts, and is framework agnostic.

Shaper
A generative design tool for UI Interfaces, that allows you to visually fiddle with typography, spacing, vertical rhythm, and so on, after which you can copy and paste the design tokens as CSS variables.

Why 1+ Million People Are Addicted to this Business Newsletter
There’s a reason our friends at The Daily Upside are the fastest growing finance newsletter in the country. See why 750k+ readers trust their expert team for crisp, easy-to-read market insights — free, always.    SPONSORED  

Squircle CSS Houdini
A tiny CSS Houdini module that allow you to add a "squircle" shape (i.e. a square with custom rounded corners) to HTML elements.

wc-wysiwyg
A web component that lets you add a full-featur3ed WYSIWYG editor to a page, featuring multilingual support and compatible with all major frameworks.

tailwindcss-icons
A Tailwind plugin that allows you to use any icon from Iconify (150,000+ icons) in your Tailwind CSS projects.

µhtml
A ~2.5K subset to lighterhtml (a virtual DOM library) to build a declarative and reactive UI via template literal tags.

Tailwind Animations
A repository of complex animations built with Tailwind CSS so you can add ready-to-use animation components to your projects.

Chroma AI
An AI-based gradient generator that creates gradients according to keywords or phrases, matching the gradient to the 'theme' of your keywords or phrase.

 

Build Tools, Bundlers, etc.

Buck2
A large-scale Rust-based build tool from the team at Meta that's a successor to their older Java-based tool.

rollup-plugin-pure
A Rollup plugin to automatically add /* #__PURE__ */ annotations before definition functions.

nypm
A unified package manager for Node.js with support for npm, Yarn, and pnpm out-of-the-box with a unified API.

Bite-sized Math and CS Lessons to Sharpen Your Analytical Thinking
For professionals and lifelong learners alike, Brilliant is one of the best ways to learn. The deets: Bite-sized interactive lessons make it easy to level up in everything from math and data science to AI and beyond. Join 10+ million people building skills every day.    SPONSORED 

Rspack
A fast Rust-based web bundler that has superior Hot Module Replacement performance, is compatible with Webpack, and has out-of-the-box support for TypeScript, JSX, CSS, CSS Modules, Sass, and more.

xc
A simple, convenient, Markdown-based task runner, similar to Make or npm run, that aims to be more discoverable and approachable.

create-t3-turbo
Like create-react-app but for building mobile apps with the T3 stack along with Expo and React Native.

micro-ts
A micro-minimalist template to create TypeScript packages with `microbundle`.

npm-only-allow
A plugin that lets you force a specific package manager to be used on a project by means of `preinstall` script in your project's package.json.

Jampack
A post-processing tool that takes the output of your Static Site Generator (SSG) and optimizes it for best user experience and best Core Web Vitals scores.

remix-vite
Serve Remix apps locally using Vite, able to be used with a custom Remix server.

On the Release Radar:

• Node.js –  The JS runtime is now at version 20+
• moonrepo – Dev toolkit for codebases now at version 1+
• Madge – Visual graph for module dependencies, now at version 6+
• Astro – Framework and build tool now at version 2+

React Tools

next-sitemap
A sitemap generator for Next.js that generates sitemap(s) and robots.txt for all static, pre-rendered, dynamic, or server-side pages.

GX
A lightweight and powerful React state management system like Redux that helps you to manage your state globally inside your React, Next.js, and React Native applications.

Bite-sized Math and CS Lessons to Sharpen Your Analytical Thinking
For professionals and lifelong learners alike, Brilliant is one of the best ways to learn. The deets: Bite-sized interactive lessons make it easy to level up in everything from math and data science to AI and beyond. Join 10+ million people building skills every day.   SPONSORED 

react-remove-scroll
A React component that removes and disables scroll in a "React" way, mouse and touch friendly, and supports react-portals.

Editable
An extensible rich text editor framework for React that focuses on stability, controllability, and performance.

Yet Another React Lightbox
A modern React lightbox component that's performant, easy to use, customizable, and extendable.

react-use-exceljs
A thin wrapper around ExcelJS (for manipulating spreadsheet data) for React that uses FileSaver.js to generate Excel files.

Sonner
An opinionated toast component for React that's customizable, but styled by default, and comes with a swipe-to-dismiss animation.

react-math-keyboard
A customizable math keyboard component for React that lets the user input mathematical expressions (in LaTeX) and raw text in a customizable, pretty,  and mobile-friendly keyboard.

React Multivalue Text Input
A text input component for React that maintains and displays a collection of entered values as an array of strings, similar to adding "tags" to a text field.

nodl
A framework for adding computational node graphs (i.e. like flow charts) to web pages in React or vanilla JavaScript.

Commercial Apps and Classifieds

A Tweet for Thought

A Tweet from 2020 (which feels like a decade ago!) that we can all likely relate to.
   

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

Afraid you're getting too much done? Try the Productivity Blocker. It's a Chrome extension that blocks useful work-related websites like Dropbox, Google Drive, Slack, and so on. In all honesty, it might be the kind of extension you'd want to enable at certain hours (e.g. after 5pm) while working from home!

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris