Tag Archives: tool

quicktype — Convert JSON into gorgeous, typesafe code in any language.

Generate models and serializers from JSON, schema, and GraphQL for working with data quickly & safely in any programming language.

Just paste in some JSON object, choose your output language, and voila!

quicktype — Convert JSON into gorgeous, typesafe code in any language →

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 →

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 →

Remotion – Create videos programmatically in React

Remotion is a suite of libraries building a fundament for creating videos programmatically using React.

  • Leverage web technologies: Use all of CSS, Canvas, SVG, WebGL, etc.
  • Leverage programming: Use variables, functions, APIs, math and algorithms to create new effects
  • Leverage React: Reusable components, Powerful composition, Fast Refresh, Package ecosystem

Also comes with a handy player that allows you to scrub through the timeline. And yes, that demo video above is made with Remotion … #eatyourowndogfood

Here’s another example created with Remotion:

Neat! The code behind those videos is pretty dazzling though! 😵

Remotion – Create videos programmatically in React →
Remotion Source (GitHub) →

Easily see the JavaScript Keyboard Event KeyCodes with keycode.info

Handy helper tool by Wes Bos: simply press any key and see the results for KeyboardEvent.which, KeyboardEvent.key,KeyboardEvent.code, etc.

As a user with an AZERTY keyboard layout I often have a broken experience on sites that respond to first row of keys, e.g. QWERTY. As those sites respond to KeyboardEvent.key — which differs from layout to layout — I cannot simply use the first row, but have to reach for the Q and W keys on the second and third row.

To properly implement key presses independent of the keyboard layout, it’s recommended to use e.keyCode as that will yield the same keyCode. As per MDN:

The KeyboardEvent.code property represents a physical key on the keyboard (as opposed to the character generated by pressing the key). In other words, this property returns a value that isn’t altered by keyboard layout or the state of the modifier keys.

For example: pressing A on AZERTY will yield KeyQ. Pressing Q on QWERTY will also yield KeyQ as they’re the same physical key.

JavaScript Event KeyCodes →

Unclack for macOS: Automatically mute your microphone while you type

Unclack is the small but mighty Mac utility that mutes your microphone while you type. No more getting called out for clacking your way through a Zoom meeting on your clicky keyboard!

Heh, clever.

Unclack for macOS →

Related: I’m a happy user of Krisp, which uses AI to automatically filter out background noises (and typing, albeit only tested while using an external keyboard)

Preview, Edit and Generate Meta Tags with MetaTags.io

Speaking of meta tags in the previous post, the Meta Tags tool has been sitting in my bookmarks for quite a while now:

With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!

Drop in an image, type some text, and you’ll get the resulting meta tags come out. Example Output:

<!-- Primary Meta Tags -->
<title>Meta Tags — Preview, Edit and Generate</title>
<meta name="title" content="Meta Tags — Preview, Edit and Generate">
<meta name="description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://metatags.io/">
<meta property="og:title" content="Meta Tags — Preview, Edit and Generate">
<meta property="og:description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<meta property="og:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://metatags.io/">
<meta property="twitter:title" content="Meta Tags — Preview, Edit and Generate">
<meta property="twitter:description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<meta property="twitter:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">

Meta Tags →