Tag Archives: link

Automatically Generate Regular Expressions from User Input with grex

grex is a library as well as a command-line utility that is meant to simplify the often complicated and tedious task of creating regular expressions. It does so by automatically generating a single regular expression from user-provided test cases. The resulting expression is guaranteed to match the test cases which it was generated from.

As Stefan shows: simply type in some terms into grex that you want to match and the RegExp comes out … 🤯

Also available as a Rust library.

use grex::RegExpBuilder;

let regexp = RegExpBuilder::from(&["a", "aa", "aaa"]).build();
assert_eq!(regexp, "^a(?:aa?)?$");

grex — a command-line tool and library for generating regular expressions from user-provided test cases →

Highlight columns in HTML tables with <colgroup>

Interesting find by Manuel Matuzovic:

The other day I looked up colgroup on MDN […] the demo at the beginning of the page caught my attention. The author adds a class to the col element, which does nothing with the col element itself, at least not visually, because the element doesn’t get rendered on the page, but it applies the styles from the class to all the cells in the column.

Like so:


See the Pen
Highlight columns in HTML tables with `<colgroup>` by Bramus (@bramus)
on CodePen.

Manuel also shares how to highlight a column upon clicking the table header.

Highlighting columns in HTML tables →

HSL: a color format for humans

Over at the Cloud Four blog, Paul Hebert digs into HSL colors

Colors on the web are confusing — but they don’t have to be! The HSL format makes it easy for humans and computers to work with color.

Included are some nice CodePen-hosted Color Pickers, such as this one:

See the Pen HSLA Color Picker using Custom Props by Paul Hebert (@phebert) on CodePen.

HSL: a color format for humans →

☝️ Remember that nowadays you can drop the Functional Color Notation (e.g. hsla(180, 50%, 50%, 100%)) and use the Space-Separated Color Notation (e.g. hsla(180 50% 50% / 100%)) instead. It’s supported in all major browsers.

Easily write Twitter threads with ThreadStart

Whenever I write a Twitter Thread I carefully lay out my planned tweets in advance in a text editor. After manually adjusting my sentences to have tweetable parts, I tweet them out one by one.

Quite a cumbersome work, where ThreadStart can do the heavy lifting for me instead:

Creating a Twitter thread without guidance is hard. ThreadStart makes it easy for people to create great content on Twitter. We’ll help you craft a killer set of tweets!

Let’s test it out soon!

ThreadStart →

Too Many SVGs Clogging Up Your Markup? Try use

Good reminder by Georgi Nikoloff to have one (visually hidden) SVG that contains several layers, which you can then include further down in your code.

SVG has a <defs> tag that lets us declare something like our graph footer just once and then simply reference it — using <use> — from anywhere on the page to render it as many times as we want.

That way you end up with less DOM nodes, less bytes transferred, and less memory consumed.

Too Many SVGs Clogging Up Your Markup? Try use →

Manage your DNS from GitHub with DNSControl

In this post Sven Luijten uses DNSControl from within GitHub Actions to manage DNS:

What if you could edit a JavaScript file with your desired DNS configuration, submit a pull request on GitHub, see a preview of the changes you are about to make, and when you merge it, have those changes be applied completely automatically?

The main action behind it is koenrh/dnscontrol-action:

# .github/workflows/push.yml
name: Push DNS changes

on:
  push:
    branches:
      - main

jobs:
  push:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Push DNS changes
        uses: koenrh/dnscontrol-action@v3
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
        with:
          args: push

The action also supports more arguments — as covered in Sven’s post — for checking and previewing.

Manage your DNS from GitHub with DNSControl →

Debugging Layout Shifts

Over at web.dev, Katie Hempenius learns us how to identify and fix layout shifts using the Layout Instability API and the DevTools.

What I take away from this is that you can easily spot them using DevTools: In the Rendering Panel you can enable an option to highlight areas of Layout Shift:

To enable Layout Shift Regions in DevTools, go to Settings → More Tools → Rendering → Layout Shift Regions then refresh the page that you wish to debug. Areas of layout shift will be briefly highlighted in purple.

Debugging layout shifts →