Tag Archives: tool

SVGcode: a PWA to convert raster images to SVG vector graphics

Thomas Steiner has released a tool named SVGcode. It’s a PWA to convert raster images to SVG vector graphics.

SVGcode is a Progressive Web App that lets you convert raster images like JPG, PNG, GIF, WebP, AVIF, etc. to vector graphics in SVG format. It uses the File System Access API, the Async Clipboard API, the File Handling API, and Window Controls Overlay customization.

Under the hood sits potrace — a tool for transforming bitmaps into vector graphics — which was translated to WebAssembly.

SVGcode →
SVGcode Source (GitHub) →

💡 If you want to dig deeper, you can find a writeup on Thomas’s blog and on web.dev

redact.photo – Free and Private Image Redaction in the Browser

Wonderful little tool by Rik Schennink to redact photos straight in the browser.

The redacted parts can’t be reversed, as the pixels get randomly shifted before they are blurred.

The tool itself is powered by Pintura, a powerful JavaScript Image Editor that Rik has been working on.

redact.photo →
Pintura →

htmlq – Command-line HTML Processor

Similar to how jq allows you to extract content from JSON files on the CLI, htmlq allows you extract content from HTML files.

Like jq, but for HTML. Uses CSS selectors to extract bits of content from HTML files.

You can pass in a local HTML file, but also pipe it to cURL requests.

For example, to get the links to all last articles on the homepage of bram.us, you can perform this request:

$ curl -X GET https://www.bram.us/ | htmlq "main h2 a" -a href

https​://www.bram.us/2021/09/03/next-js-apollo-server-side-rendering-ssr/
https​://www.bram.us/2021/09/03/multiple-accounts-and-git/
https​://www.bram.us/2021/09/03/random-paint-effects-with-houdini/
https​://www.bram.us/2021/09/02/crafting-organic-patterns-with-voronoi-tessellations/
https​://www.bram.us/2021/09/01/pick-colors-from-websites-with-the-eyedropper-api/
https​://www.bram.us/2021/09/01/the-universe-is-hostile-to-computers/
https​://www.bram.us/2021/08/27/morse-code-translator-html-css/
https​://www.bram.us/2021/08/27/vector-raster-why-not-both/
https​://www.bram.us/2021/08/27/key-data-structures-and-their-roles-in-renderingng/
https​://www.bram.us/2021/08/27/css-shapes-editor-extension-for-chrome-devtools/

Using main h2 a we extract the link elements that we need, and with the -a flag we can opt to only return the specified href attribute from those selected elements.

Installation possible via Brew:

brew install htmlq

htmlq — Like jq, but for HTML →

Convert a JavaScript Style Object to CSS Custom Properties with this Little Helper Tool

In a Next.js-based project I’m working I noticed this theme.js file which contains a JavaScript object that holds design tokens, defining what colors to use and such. As we are only using these values in CSS (via Styled Components) we decided on migrating away from it, and replace it with CSS Custom Properties. For this, I created a little helper tool.

The theme.js contents looked something like this (simplified):

const theme = {
    borderRadius: '15px',
    cardSpacing: {
        horizontal: '20px',
        vertical: '85px',
    },
    colors: {
        primaryBackground: '#FAFAF2',
        primaryButton: '#FFFFFF',
        primaryCard: '#FFFFFF',

        accent: '#2ea7a4',
        text: '#2f2f2f',
        textSecondary: '#707070',
        placeholder: '##959595',

        title: '#000',
        subTitle: 'rgba(255, 255, 244, 0.5)',
    },
};

export default theme;

Converted to Custom Properties, I want this:

--border-radius: 15px;
--card-spacing-horizontal: 20px;
--card-spacing-vertical: 85px;
--colors-primary-background: #FAFAF2;
--colors-primary-button: #FFFFFF;
--colors-primary-card: #FFFFFF;
--colors-accent: #2ea7a4;
--colors-text: #2f2f2f;
--colors-text-secondary: #707070;
--colors-placeholder: ##959595;
--colors-title: #000;
--colors-sub-title: rgba(255, 255, 244, 0.5);

~

To translate entries such as theme.colors.primaryCard to --colors-primary-card I decided to create a little helper tool. It automatically adds the required -- prefix, adjusts all camelCase occurrences to kebab-case, and plays nice with nested objects and (simple) arrays.

Perhaps this tool might also be of good use to you 🙂

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

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 →