Issue #457 (RegExp dotAll, Frameworks, Media, Mobile)04/21/22
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.
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.
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.
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!
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 all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
