Web Tools #457 - Front-end Frameworks, SVG, React Native

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #457 • April 21, 2022

Advertisement
Retool is the Fast Way to Build an Interface for any Database
Custom dashboards, admin panels, CRUD apps—build any internal tool faster in Retool. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.

Get Started For Free Today
Retool

A few years back, the ECMAScript spec added a much-needed new feature to the RegExp object: The dotAll property along with the corresponding "s" flag. This feature is now supported in all modern browsers.

The dotAll property indicates whether or not the "s" flag is used when the dot character is used in a regular expression. Previously, when using a dot in a regular expression, the regular expression would non-intuitively exclude the certain characters, like newline characters \r and \n.

Here's some code to demonstrate:

// without dotAll
console.log(/a.z/.test('a\nz')); // false
console.log(/a.z/.test('a\rz')); // false
console.log(/a.z/.test('a\u2029z')); // false

// with dotAll
console.log(/a.z/s.test('a\nz')); // true
console.log(/a.z/s.test('a\rz')); // true
console.log(/a.z/s.test('a\u2029z')); // true

The use of dotAll is indicated by the "s" flag that's included in the second set of RegExp examples.

Here are a few more examples, this time using the RegExp() constructor, then the dotAll property itself is used to check for the existence of the "s" flag:

// Using the RegExp constructor
let myRegExp = new RegExp(/a.z/, 's'),
    myRegExp2 = new RegExp(/a.z/);

console.log(myRegExp.test('a\u2028z')); // true
console.log(myRegExp2.test('a\u2029z')); // false

// Checking for the existence of the "s" flag
console.log(myRegExp.dotAll); // true
console.log(myRegExp2.dotAll); // false

You can try out all the above examples using this CodePen demo. With the "s" flag in use, as the above examples indicate, these regular expressions can now match:

  • U+000A Line Feed ("\n")
  • U+000D Carriage Return ("\r")
  • U+2028 Line Separator
  • U+2029 Paragraph Separator
This would otherwise not be possible with just the dot character without the "s" flag. And as a nice bonus, as MDN points out, to match characters with code points higher than U+10000, the "u" (unicode) flag should be used. Using both flags allows the dot to match any Unicode character.
 

Now on to this week's tools!
 

 

Front-end Frameworks

Retool is the Fast Way to Build an Interface for any Database
Custom dashboards, admin panels, CRUD apps—build any internal tool faster in Retool. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time. sponsored  

Circuit UI
A React components library designed to be easy to use for developers, based on the design system of SumUp, a finance/payments startup.

Next.js Blog Template
A customizable blog starter built with Next.js v12, Tailwind v3.0, with built-in MDX support and a nice modern design with dark and light themes.

Mdash
Billed as "a new kind of UI library" that's 100% standards-based and has a small footprint, no dependencies, and no build-step.

React Storefront
A PWA for React-based e-commerce websites and apps, built on Next.js and includes a number of features helpful for e-commerce apps.

React Storefront

Static Starter
A starter template with that includes a number of technologies out-of-the-box including Sass, Vite, SEO and perf optimization, and more.

Hugo Theme Stack
A card-style Hugo theme designed for bloggers, with responsive images support, dark mode, local search, no jQuery, multi-language support, and more.

Nextacular
An open-source starter kit built with modern full-stack technologies to quickly launch SaaS apps with auth, database integration, billing/subscriptions via Stripe, and more.

electron-webpack-boilerplate
A minimal Electron boilerplate built with React, TypeScript, Webpack 5, Babel 7, and with Jest unit testing.

GraphCommerce
An open-source headless storefront replacement for Magento 2 (PWA), that delivers a faster, better user experience and is fully customizable via React and Next.js.

Desma
A design system manager where you can create, preview and host all your designs in one single place.

On the Release Radar:

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

CSS Weekly Newsletter
Stay up-to-date with the latest trends in CSS by getting only relevant and valuable articles and tutorials directly into your inbox. Join more than 30,000 developers and designers and sign up today.   sponsored 

Grainients
2000+ high resolution, "grainy" gradients in PNG format. Email is required for the download, which is 7GB in size! (I signed up to test it out)

spotify-mini
A Simple Spotify client for Node.js, exposing a few useful methods.

Chalk.ist
Online tool with various settings to create customized attractive images of source code snippets you can share on social media.

wirebeats
Copyright-free music tracks you can use in YouTube videos, podcasts, etc. There doesn't seem to be a way to download the files, but you can play the directly via Spotify, Apple Music, and Amazon Music.

react-photo-view
A React component that provides a zoomable view of photos in a photo gallery.

Paint
A web implementation of MacPaint, an Apple-based drawing tool that was popular in the 1980s. Powered by tldraw and lets you export drawings as PNG, JPG, SVG, or JSON.
 
Paint

Placy
A placeholder image generator that uses data URIs for the code, which seems nicer because the placeholders will still work if the service goes down.

canvas-confetti
JavaScript package for custom on-demand confetti explosions on a web page.

QOI
An image format called "Quite OK Image" that provides fast, lossless compression.

Doodle Icons
400+ handcrafted icons with a hand-drawn look, under a CC0 license, with no attribution required.

Wave.js
Audio visualizer library for JavaScript to create dynamic animations that respond to an audio file or audio stream.
 

React Native and Mobile Tools

CSS Weekly Newsletter
Stay up-to-date with the latest trends in CSS by getting only relevant and valuable articles and tutorials directly into your inbox. Join more than 30,000 developers and designers and sign up today.   sponsored 

react-native-fs
Native file system access for React Native.

datetimepicker
Date and time picker component for cross-platform React Native apps on iOS, Android, and Windows.

Conveyer
Adds drag gestures to native scroll with easing features such as bounce, elasticity, and back, so you can create smooth scrolling animations.
 
Conveyer

React Native Awesome Gallery
Performant, native-like, and customizable photo gallery implementation for React Native.

React Native Modalfy
An improvement on React Native's Modal component with ability to stack multiple modals and have full control over animations and transitions.

react-native-element-dropdown
A React Native drop-down component that's easy to customize for both iOS and Android.

React Native Mask Input
A simple and effective text Input with mask for React Native. Nothing fancy, just a JavaScript function that allows you to use custom masks easily.

react-native-oss-license
CLI tool generates license lists of npm libraries for React Native.

react-native-image-colors
React Native module that lets you fetch prominent colors from an image.

react-native-flash-message
A React Native module for highly-customizable flashbars, top notifications, or alerts (with iPhone X, XR, XS and XS Max "notch" support).

react-native-actions-sheet
A cross platform 'action sheet' component (slides up from bottom) with a flexible API, native performance, and no dependencies.

React Native Socials
React Native component to embed posts from popular social networks into a mobile app.

Commercial Tools and Classifieds

These are affiliate links, paid classifieds, and curated commercial apps (i.e. not free, not open source, limited free plan, etc).

Maool  – A simple email editor for marketers and business owners.

Bluegenie – A managed back end, to create and deploy from the browser.

Recommended Reading – Books for front-end web developers. ad 

Moos.app – Design tool that turns static designs into animated experiences.

Bytes – A JavaScript newsletter that's informative and entertaining. ad 

Peergos – A private space to store and arrange files, first 200MB free.

Ship Saas – A multi-featured Next.js and Supabase SaaS boilerplate.
 

A Tweet for Thought

This tweet is apparently quoting from Clifford Stoll, writing in Newsweek in 1995 where he got pretty much everything wrong about the internet. Stoll wrote a great book in 1989 called The Cuckoo's Egg about computer espionage, so I'm surprised he was this wrong back then!

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

If you like the MacPaint app I linked to above, you'll also enjoy HyperCard Simulator, another web implementation of an old Apple technology from the late 1980s/1990s.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  Patreon  /  GitHub Sponsors  E-Books  /  $5 Tip  /  $1 Tip

Older messages

Web Tools #455 - CSS/HTML, JSON, Databases, Vue

Thursday, April 7, 2022

Web Tools Weekly WEB VERSION Issue #455 • April 7, 2022 Advertisement Retool is the Fast Way to Build an Interface for any Database Custom dashboards, admin panels, CRUD apps—build any internal tool

Web Tools #454 - Array.at, React, Git/CLI, Uncats

Thursday, March 31, 2022

Web Tools Weekly WEB VERSION Issue #454 • March 31, 2022 Advertisement Mojeek: A Crawler-Index Search Engine Most alternative search engines just source results from Google or Bing, not Mojeek! We have

Web Tools #453 - IE11 to Edge, JS Utilities, SVG, React Native

Thursday, March 24, 2022

Web Tools Weekly WEB VERSION Issue #453 • March 24, 2022 Advertisement Choosing the Best WYSIWYG Editor for Styling Tables Tables are perfect for representing data and information in an organized way,

Web Tools #452 - JS One-liners, VS Code, Testing, Uncats

Thursday, March 17, 2022

Web Tools Weekly WEB VERSION Issue #452 • March 17, 2022 Advertisement The All-in-One Modern Data Platform You Need Get everything you need to combine, organize, and transform your data for analysis,

Web Tools #451 - CSS Tools, Databases, JSON, SVG

Thursday, March 10, 2022

Web Tools Weekly WEB VERSION Issue #451 • March 10, 2022 Advertisement Choosing the Best WYSIWYG Editor for Styling Tables Tables are perfect for representing data and information in an organized way,

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