Web Tools Weekly Issue #406 (Regex Sticky, CSS/HTML, Media, Library Tools)

Issue #406 (Regex Sticky, CSS/HTML, Media, Library Tools)04/29/21

Way back in ES6, a new regular expression flag was added to the ECMAScript specification called the "sticky" flag, represented with a 'y' in the syntax.

This flag is used in conjunction with the lastIndex property of a regular expression instance. This property is an old ECMAScript feature. To understand the sticky flag, let's first consider what lastIndex does.

The lastIndex property more or less keeps track of where a global regex search left off. The following code shows how you can read the lastIndex property during a global regex search, and how it factors into the search:

let myRegex = /wood/g;

      let myString = 'How much wood could a woodchuck chuck';

      // 0 (where the search starts)

      console.log(myRegex.lastIndex);

      // true (matched the regex)

      console.log(myRegex.test(myString));

      // 13 (where the search left off after first match)

      console.log(myRegex.lastIndex);

      // true (matched again after lastIndex)

      console.log(myRegex.test(myString));

The comments explain what's happening but you can try it live in this CodePen. As you can see, lastIndex indicates where to start searching for the next possible match.

That brings us to the "sticky" flag. This new flag tells the search to only take place starting exactly where the lastIndex property is set. Here's an example which includes a line where I define lastIndex:

let myRegex = /huck/y;

      let myString = 'How much wood could a woodchuck chuck';

      // Set the lastIndex

      myRegex.lastIndex = 27;

      // true (found at defined lastIndex)

      console.log(myRegex.test(myString));

      // 31 (where search left off after the find)

      console.log(myRegex.lastIndex);

      // false (not found at index 31)

      console.log(myRegex.test(myString));

Try it on CodePen

That's more or less sticky in a nutshell but if you want a more practical discussion of how it can be used, this article might help.

Now on to this week's tools!

CSS and HTML Tools

The Secret to a Healthy Lifestyle
Noom is the world's leading behavior change company, disrupting the weight loss and healthcare industries. By combining the power of artificial intelligence, mobile tech, and psychology with the empathy of over 1,000 personal coaches, Noom helps people to change their long-term habits and achieve sustainable weight loss. sponsored

SVG Color Matrix Mixer
This generates CSS filter values using the feColorMatrix syntax from SVG, which can be dropped into your CSS using the url() value with an ID.

Uncut
An open source typeface catalogue with a focus on contemporary type.

rececss
A minimalistic, fully customizable CSS utilities generator that produces something along the lines of Tailwind, with some apparent advantages over using Tailwind.

colorpalettes.earth
Color palettes for inspiration on new projects where the palettes are sourced from the colors found in images from nature.

Alternative Tweet Embeds
Embed tweets without compromising your users' privacy and your site's performance.

builtin-elements
A lightweight custom elements-like primitive. No polyfill needed and has the same mechanism as regular Custom Elements plus IE11 support with transpilation.

Fontshare
A free fonts service launched by the Indian Type Foundry that has a growing collection of professional grade fonts that are 100% free for personal and commercial use.

vanilla-extract
Zero-runtime CSS-in-TypeScript. Write your styles in TypeScript (or JavaScript) with locally scoped class names and CSS variables, then generate static CSS files at build time.

github-elements
GitHub's collection of Web Components, currently with 17 open source custom elements.

tailwindcss-logical
A CSS Logical Properties and Values plugin for Tailwind CSS.

Frontend Toolkit
A whole slew of tools for recurring front-end tasks. Color conversion, image and SVG optimization, JSON formatting, and lots more.

Reseter.css
A futuristic alternative to Normalize.css and CSS resets. Includes a chart so you can compare to other resets.

Media Tools (SVG, Charts, etc.)

2 x Senior Frontend Engineers (React, 100% Remote)
We’re looking for two experienced individuals that have a solid understanding of React and want to help design, implement and launch major user-facing features. Close.com is 100% globally distributed team of ~45 high-performing, happy people that are dedicated to building a product our customers love. sponsored

Skribbl
A growing collection of free, unique, hand-drawn illustrations, categorized.

Globs Designer
SVG glob editor that gives you fine-grained control over the nodes on the globs.

Twipix
Convert tweets to beautiful images in PNG, JPEG, or SVG format. Lets you edit various aspects of the Tweet including some of the metadata, size, and background gradient.

js-image-carver
A content-aware image resizer and object remover. This is pretty neat, but you'll have to check the demo to see what exactly it does as it's hard to explain briefly.

react-lazy-svg
An easy and bundler agnostic way to use a sprite-sheet for your SVGs.

React Financial Charts
A fork of an older unmaintained charting library for React with a focus on finance-based charts and graphs.

CCY Icons
A set of 330+ meticulously combed currency icons (fiat and crypto) in SVG format, easy to customize to your color needs.

JParticles
A concise, lightweight, and efficient Canvas library for building particle effects with JavaScript. The "snow" demo is pretty cool!

SVG Waves
Create, customize, and download a "wave" shape that you can copy as SVG or CSS + DataURI.

SculptGL
A multi-featured tool for editing WebGL also available as a standalone version you can use locally.

Supercons
An open source set of about 200 simple and minimal icons for React.

JS Library Tools and Plugins

2 x Senior Frontend Engineers (React, 100% Remote)
We’re looking for two experienced individuals that have a solid understanding of React and want to help design, implement and launch major user-facing features. Close.com is 100% globally distributed team of ~45 high-performing, happy people that are dedicated to building a product our customers love. sponsored

Formula
A library for Svelte with features for creating zero-configuration reactive forms and fully data-driven applications.

Lumberjack
A versatile Angular logging library, specifically designed to be extended and customized.

DataTables
A jQuery plugin (what are those?) to add advanced interaction controls
to your HTML tables.

Ember Table
An add-on for Ember to support large data sets and table features that can handle over 100,000 rows without rendering or performance issues.

Svelte DND Action
A feature-complete implementation of drag and drop for Svelte that supports almost every imaginable drag-and-drop use-case, any input device, and is fully accessible.

ScrollTrigger
Scroll-driven animations for the GSAP animation library that can animate anything – DOM, CSS, SVG, WebGL, Canvas, etc.

ngneat host toast
A multi-featured, accessible toast notification library for Angular with an easy to use API.

svelte-grid
A draggable and resizable grid layout with responsive breakpoints, for Svelte.

React Elm Component
Embed an Elm app within a React component. I have no idea if this is even remotely useful, but it's definitely unique.

Accessible jQuery Plugins
A set of jQuery plugins that have accessibility as a primary feature.

NG Bootstrap
Angular powered Bootstrap widgets built from the ground up using only Bootstrap 4 CSS and no other JavaScript dependencies.

A Tweet for Thought

Apps are immoral, confirmed.

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

Vault of VHS is a Tumblr "dedicated to the design of retail VHS packaging", in case you want to turn back the clock. SLP forever!

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris