Web Tools #403 - React Tools, JS Utilities, Jamstack

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #403 • April 8, 2021

Advertisement
Cloudways
A managed cloud hosting platform for digital agencies, developers, and e-commerce businesses offering simplicity, great performance, expert 24/7 support, and powerful team collaboration features.
Start Your Free Trial Today
Cloudways

I recently stumbled across an ECMAScript feature that I had not previously heard of and maybe it's something new to you: The Intl API. That link is to the spec, but you'll probably do better researching it on MDN, which has a bunch of articles on the various features of this API.

I found this interesting because normally large-scale APIs like this fall under WHATWG or W3C as "Web APIs" or "HTML5" –  but this one is ECMAScript. MDN explains the purpose of it, which you can pretty much figure out by the name:

The Intl object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting. The Intl object provides access to several constructors as well as functionality common to the internationalization constructors and other language sensitive functions.

Here's a sample of things you can do with this API:

  • Language-sensitive formatting for lists, numbers, dates, and times
  • Plural-sensitive formatting and language-specific rules for plurals
  • Locale identification and negotiation
The MDN article covering the ListFormat constructor has the following code that demonstrates list formatting:
 
const vehicles = ['Motorcycle', 'Bus', 'Car'];
const formatter = new Intl.ListFormat('en', {
  style: 'long', type: 'conjunction'
});

console.log(formatter.format(vehicles));
// expected output: "Motorcycle, Bus, and Car"

const formatter2 = new Intl.ListFormat('de', {
 
style: 'short', type: 'disjunction'
});

console.log(formatter2.format(vehicles));
// expected output: "Motorcycle, Bus oder Car"

const formatter3 = new Intl.ListFormat('en', {
  style: 'narrow', type: 'unit'
});

console.log(formatter3.format(vehicles));
// expected output: "Motorcycle Bus Car"

You can try it in this CodePen or on the playground on the MDN page.

These are some nice features that might come in handy should you require built-in internationalization that doesn't rely on an extra dependency. And the good news is, browser support for most of the API is pretty good with only a few modern browsers missing a couple of features.
 

Now on to this week's tools!

React Tools

Cloudways
A managed cloud hosting platform for digital agencies, developers, and e-commerce businesses offering simplicity, great performance, expert 24/7 support, and powerful team collaboration features.   sponsored 

SimpleR State
A simple app state management library for React with a minimalist API and full TypeScript support.

react-gsap
Lets you use the GreenSock Animation Platform (GSAP) in React in a fully declarative way. by abstracting away the direct use of the GSAP Tween and Timeline functions.

React-Daterange-Picker
A lightweight and flexible date picker for React that lets the user pick a range of dates rather than a single date.

React Indiana Drag Scroll
Best name and demo for a tool. This implements scrolling when the user drags with the mouse.

React Indiana Drag Scroll

React Upload Box
A minimal file upload component for React that shows a neat progress bar and has play/pause and uses styled-components.

React Anime
A super easy animation library for React built on top of anime.js.

ractive-player
A library for making interactive videos in React. For example an interactive coding demo or interactive graph.

react-tagcloud
Simple and extensible tag/word cloud React component.

Fixed-Data-Table-2
a React component for building and presenting data in a flexible, powerful way, forked from the unmaintained Facebook project of the same name.

ka-table
A customizable, extendable, lightweight, and free React table component with sorting, filtering, grouping, virtualization, editing, and more.

Figma to React
Convert Figma designs to React code (React Native and Next.js).

Jamstack, CMS's, etc.

Master Gatsby
Learn to build websites with Gatsby, React.js, and friends. Wes Bos's newest course features 52 HD videos to get you up to speed with one of the most powerful frameworks on the scene.  promoted

microsite
A fast, opinionated static-site generator built on top of Snowpack. It outputs extremely minimal client-side code using automatic partial hydration.

meli
An open source platform for deploying static sites and front-end applications.

Quarkly
A design tool for creating websites and web apps. Helps you create websites as quickly as a website builder but as beautifully as a graphic editor.

Explosiv
A JSX-powered static site generator for Node.js that's a fork of a similar project called Dhow.

Zola
A fast static site generator in a single binary with everything built-in.

Web3Forms
Contact forms for static websites. Receive form submissions via email without any server or back-end code. Free plan includes unlimited forms and 250 submissions.

Web3Forms

Paper
A simple, clean, flexible theme for Hugo, the popular static site generator.

Clerk
Simple and beautiful user management. Add sign up, sign in, and profile management to your application in minutes. Optimized for the Jamstack. Up to 100 monthly active users for the free plan.

11ty Rocks!
A collection of starters, projects, plugins, and resources for Eleventy, the popular static site generator.

Release Radar:

Media Tools (SVG, Images, Video, etc.)

State Designer
A state management library for JavaScript and TypeScript that treats state as a design problem.

Shepherd
A JavaScript library for guiding users through your app that uses Popper.js, to render dialogs for each tour "step".

Parvus
An accessible, open-source image lightbox with no dependencies.

Copenhagen Editor
A free, lightweight and hackable open source embeddable code editor for web apps.

Cheetah Grid
A fast open-source data table that can handle all sorts of data types and claims to be able to show a million rows of data without performance problems.

jsep
A tiny JavaScript expression parser to parse and convert expressions into an abstract syntax tree.

wordwrapjs
Word wrapping for JavaScript with word wrapping with a force-break option,
wrapping of hyphenated words, and multilingual word wrap.

Tagify
Transforms an input field or a textarea into a tags component, in an easy, customizable way, with great performance and small code footprint.
 
Tagify

Perfect Freehand
A utility to allow users to draw perfect pressure-sensitive freehand strokes. The demo is pretty impressive!

DenoDash
A utility library, similar to Underscore and Lodash, but written Typescript-first and designed for use in Deno.

Accessible Autocomplete
An autocomplete component, built to be accessible, usable, and compatible with most browser and devices.

router
An Express-like router that works in Node.js, browser, and Deno.
 

A Tweet for Thought

This is neat! A colorized and speed adjusted video of a snowball fight in Lyon, France in 1896.

A Tweet for Thought
 

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

Lately I've been using daily.dev as my new tab page in my browser. Pretty cool way to find useful articles and tools in various developer categories.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  Patreon / GitHub Sponsors  E-Books

Older messages

Web Tools #402 - CSS Tools, VS Code, Media, SVG

Thursday, April 1, 2021

Web Tools Weekly WEB VERSION Issue #402 • April 1, 2021 Advertisement Set Up, Manage & Secure Apple Devices in Minutes Jamf Now is a device management solution for your team's Apple devices at

Web Tools #401 - App History API, React Tools, Bundlers, Uncats

Thursday, March 25, 2021

Web Tools Weekly WEB VERSION Issue #401 • March 25, 2021 Advertisement Set Up, Manage & Secure Apple Devices in Minutes Jamf Now is a device management solution for your team's Apple devices at

Web Tools #400 - CSS Tools, Testing, JS Utilities

Thursday, March 18, 2021

Web Tools Weekly WEB VERSION Issue #400 • March 18, 2021 Advertisement Set Up, Manage & Secure Apple Devices in Minutes Jamf Now is a device management solution for your team's Apple devices at

Web Tools #399 - JS Libraries, SVG Tools, Git/CLI

Saturday, March 13, 2021

Web Tools Weekly WEB VERSION Issue #394 • February 4, 2021 The following intro is a paid product review for Cloudways, a managed cloud hosting platform for digital agencies, developers, and e-commerce

Web Tools #398 - Frameworks, Mobile Tools, GraphQL/DB

Thursday, March 4, 2021

Web Tools Weekly WEB VERSION Issue #398 • March 4, 2021 Advertisement Fix Vulnerabilities in Your App with a Pull Request Is your app affected by the 2028 new open source vulnerabilities discovered

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