Web Tools Weekly Issue #403 (Intl API, React, Jamstack, JS Utils)

Issue #403 (Intl API, React, Jamstack, JS Utils)04/08/21

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

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:

Stencil - Web component compiler for PWAs at version 2.5
Gatsby - Now at version 3+
Ghost - Now at version 4+

JavaScipt Utilities

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.

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.

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 all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris