Dither

I love dithers, but I always found it hard to create one.

Developers needed to implement custom WebGL shaders to achieve the desired effect.

For me, it always felt unsettling – like it is too much tech debt in a way.

So while flying to SF I had 11 hours of time to think about a solution.

In the end, I started with what I thought was the simplest solution: custom SVG filters.

But even that was not good. If I'd publish a package with custom SVG filters, I can't allow people to use it as a standalone tailwind plugin. Instead, people would have had to import a custom component containing the SVG filter, or I'd have to store the SVG filter as a URI object in the source CSS. This however didn't work for Safari browsers.

A few months I didn't think about it and left the project still, as I was busy with other pojects.

Then, I needed the dither effect again, so I decided to try another rewrite approach.

This time I used ChatGPT. I had endless conversations going back and forth how we could accomplish these things:

• Create a simple dither effect via Tailwind utilities
• Allow all browsers to accurately display the effect
• Don't depend on any external libraries
• Don't depend on JS
• Make it as easy as possible to use

Interestingly, after a lot of discussion, ChatGPT came up with a proper solution, combining blur, contrast, brightness, and greyscale effects with a background image of the bayer dither grid.

This allowed all browsers to process the image and overlay it with whatever is inside the element with the class name "dither".

So I tested it with some people from X, they gave me feedback, and I released at the end of the week. Pretty simple, but happy I was able to solve this little problem for myself (and hopefully others).

You can find the dither effect here: Dither Plugin

Try it out for yoursefl! :)

Reimagining i18n for developers

One file format that is interoperable between multiple apps, built on git's core principles.

inlang enables developers to easily setup and use one file format for their translations. In contrast to other translation tools which use databases, inlang is fully file-based and agnostic – making it significantly easier to integrate into any tech stack.

Marketplace

My focus at inlang was building the marketplace and mini-apps for easier project management.

{
  …,
  "properties": {
    …,
    "icon": {
      "type": "string",
      "format": "uri",
      "description": "Icon URL."
    },
    "gallery": {
      "type": "array",
      "items": {
        "type": "string",
        "format": "uri"
      },
      "description": "Image URLs for gallery display."
    },
    "displayName": {
      "type": "object",
      "description": "Localized display names.",
      "additionalProperties": { "type": "string" }
    },
  …    
}

We transformed inlang.com from a simple landing page into a comprehensive marketplace with manifests that defined product metadata, integrating everything into one central hub.

I refactored the markdown parsing system to remark/rehype and introduced custom lit web components that work across all frameworks, giving users the simplicity of markdown with interactive components.

Installation wizard

To simplify onboarding, I built a platform where users can open their inlang files and install products with just a few clicks.

By early 2023, inlang's repository had accumulated over 9,000 commits, reached more than 850 stars, and attracted nearly 50 contributors. Given my sole design background, I was able to get a lot of hands-on Javascript and Typescript experience.