Luis Steidle

Local-first and progressive web apps

Luis Steidle — Sun, 03 May 2026 00:00:00 GMT

When building apps or imagining software products I like to use and see in the world, I gravitate towards something close to what <a href="https://web.dev/learn/pwa/progressive-web-apps/" target="_blank" rel="noopener noreferrer">progressive web-apps</a> embody. An app that is mobile-first, but still usable in any web browser and on any device. An app that works offline, that you can "install" without having to search for it on a bespoke app store or marketplace or proprietary platform. Basically the "write once, use anywhere" concept taken to the maximum. Ever since I came across the principles around local-first software, my interest in progressive web-apps was renewed. It made me wonder: can apps just be like this by default, and also be useful for people who don't necessarily like to think about software or are interested in it at all, who just want stuff to work? Why is downloading a native app from the App Store a mainstream experience that almost every person understands, but "installing a PWA to your homescreen" doesn't carry that same level of intuitiveness?

People don't really care whether their app comes from the Apple App Store, or the Google Play Store or if it's a progressive web-app (or more generally what technologies something is built with in the first place). But it needs to feel right. I often find, web apps can feel absolutely "right", and even in popular native apps there is often a large amount of web tech being used in WebViews, without that necessarily being a friction point for the user.

However, I have never installed someone else's PWA, except the ones I built myself. I guess that says something. And I ask myself, is this really the answer, does anyone really need this? I guess it's a stretch to say PWAs are popular, but also how would one really know how much they are used in the wild?

I recently set out to become more familiar with the stack around the "local-first" paradigm. Trying to build something that feels like it can really fulfill all those ideals that I have around my understanding of "how apps should be". It's a website. It's built with web technologies. Yet, you can just "install" it on your device. Any device. It works offline. You don't need internet to use it. Your data stays on your device.

However: You do have the benefit of cloud magic, you can just keep on working on your laptop after editing something on the train on your phone. Users don't have to carry the mental load of files that live on their devices nor have to worry about keeping them in sync. It feels like this a very pragmatic compromise between two extremes: "I use files and dedicated software to work on these files, I manage backup and sync myself/with some other service" vs. "I do not know what a file is, my digital life lives in random apps from the app store"

You get the benefits of a seamless out-of-the-box UX, while still having control and access to your data. You do not have this central dependency on a third-party server which can completely shut off your workflow and access. It seems like the perfect middle ground.

I have built a very simple app to expose myself to this approach more. A habit tracker. It's simple enough, I am the kind of person who uses such apps daily (without overdoing it), because I like the structure it gives me. Feeling like this is the perfect use case and being motivated by the thought of replacing a 30€/year SaaS subscription I have to another app I set out.

The core sync stack I ended up with was the following:

<a href="https://tanstack.com/db" target="_blank" rel="noopener noreferrer"> TanstackDB </a>

<a href="https://electric-sql.com/" target="_blank" rel="noopener noreferrer"> ElectricSQL </a>

<a href="https://www.postgresql.org/" target="_blank" rel="noopener noreferrer"> Postgres </a>

TanstackDB was the piece I was missing to get started, because it made this whole topic of sync engines approachable. The mental model of a reactive client store that I built my browser app against, and that store by itself taking care of talking to the server really resonated with me.

Hosting ElectricSQL, wiring it up with TanstackDB and Postgres was more straightforward than I expected. This project was also at a real sweet spot for me in terms of using AI to build. I felt quite new and a bit out of the water with all the details of this stack, but had a solid understanding of the overall architecture I wanted to go for. My first eureka moment was opening the app on my laptop and phone side by side and realizing, if I mark the habit done on the laptop as done it is also immediately marked done on my phone.

However, without AI and the hard work put into these libraries, I realized I would have been stuck a lot longer. The complexity of this setup feels so much higher than the typical API request/server response model and there are so many more things that can break.

After this exploration I'm still wondering: Could/Should mainstream apps be like this? Just websites you download and "have" on your device. You log in with a passkey, and you're authenticated. You lose internet connection and you don't notice. I like the idea. Yet native platforms have a place, because they can offer experiences the web was just never built for.

Sometimes I feel the idea of (progressive) web apps is just doomed and no one really cares. After all, why would they? What makes a web app better actually, other than some personal ideals of how things should be? Something I am still unsure about. Their principles feel right, yet something seems to not catch people's interest. Whether that will change, who knows. For now, I will probably keep gravitating towards that.

Implementing dark mode with NextJS and TailwindCSS

Luis Steidle — Sun, 16 Apr 2023 00:00:00 GMT

In today's web, providing users with a pleasant browsing experience is essential. One popular way to achieve this is by adding a light/dark mode toggle to your website. In this blog post, I'll walk you through implementing this functionality using NextJS and TailwindCSS. We'll create a dropdown menu that allows users to choose between light, dark, and system modes.

Desired outcome

There are several ways to implement dark mode, but one of the best examples I've seen is how it's done on the TailwindCSS docs. Users can choose between light, dark, and system mode, meaning they either manually select dark or light and have their preference saved to localStorage, or they choose to respect the OS setting.

I think this approach is the best of both worlds, as users have the flexibility to select a specific mode for each website or tool they use. The desired functionality involves a dropdown with three settings and corresponding logos. When users manually select dark or light mode, a colored logo will indicate the chosen setting. By default, the system mode should be selected.

Tools for implementation

To implement this functionality, we will use the following tools:

TailwindCSS: A utility-first CSS framework for rapid UI development
NextJS: A React framework for server-rendered applications
next-themes: A plugin by Paco Coursey that provides the useTheme() hook

Steps for implementation

First make sure all dependencies are installed:

 pnpm install tailwindcss next next-themes

Wrap your application with the ThemeProvider component provided bynext-themes in your _app.tsx file:

import { ThemeProvider } from "next-themes";

function App({ Component, pageProps }) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default App;

The useTheme hook provides the current theme (theme) and a function to toggle the theme (setTheme). You can use these values to customize the appearance of your components based on the selected theme.

import { useTheme } from "next-themes";

function Component() {
  const { theme, setTheme } = useTheme();

  function toggleTheme() {
    setTheme(theme === "dark" ? "light" : "dark");
  }

  return (
    <div>
      <button onClick={toggleTheme}>Toggle theme</button>
      <p>Current theme: {theme}</p>
    </div>
  );
}

export default Component;

Example for implementation

This is a working example that recreates the functionality of the TailwindCSS docs. This example uses Radix UI for the dropdown menu.

import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import * as ToggleGroup from "@radix-ui/react-toggle-group";
import { IconDeviceLaptop, IconMoon, IconSun } from "@tabler/icons-react";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";

function ThemeDropdown() {
  const [mounted, setMounted] = useState(false);
  const { theme, resolvedTheme, setTheme } = useTheme();

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return null;
  }
  return (
    <>
      <DropdownMenu.Root>
        <DropdownMenu.Trigger>
          {resolvedTheme === "light" && theme === "light" ? (
            <IconSun size={30} className="text-blue-400" />
          ) : resolvedTheme === "light" ? (
            <IconSun size={30} />
          ) : resolvedTheme === "dark" && theme === "dark" ? (
            <IconMoon size={30} className="text-blue-300" />
          ) : resolvedTheme === "dark" ? (
            <IconMoon size={30} />
          ) : (
            <IconDeviceLaptop size={30} />
          )}
        </DropdownMenu.Trigger>

        <DropdownMenu.Portal>
          <DropdownMenu.Content>
            <DropdownMenu.Label />
            <DropdownMenu.Item />

            <ToggleGroup.Root
              type="single"
              orientation="vertical"
              value={theme}
              aria-label="Dark/Light/System Mode Selection"
              className="flex flex-col items-start w-full gap-1 pt-1 m-2 border-2 rounded-md"
            >
              <ToggleGroup.Item
                value="light"
                onClick={() => setTheme("light")}
                className={`flex items-center w-full gap-1 px-1 py-1 mx-0 hover:bg-hover-light dark:hover:bg-hover-dark ${
                  theme === "light" ? "font-bold" : "font-normal"
                }`}
              >
                <IconSun size={30} />
                <span>Light</span>
              </ToggleGroup.Item>

              <ToggleGroup.Item
                value="dark"
                onClick={() => setTheme("dark")}
                className={`flex items-center w-full gap-1 px-1 py-1 mx-0 hover:bg-hover-light dark:hover:bg-hover-dark ${
                  theme === "dark" ? "font-bold" : "font-normal"
                }`}
              >
                <IconMoon size={30} />
                <span>Dark</span>
              </ToggleGroup.Item>

              <ToggleGroup.Item
                value="system"
                onClick={() => setTheme("system")}
                className={`flex items-center w-full gap-1 px-1 py-1 mx-0 hover:bg-hover-light dark:hover:bg-hover-dark ${
                  theme === "system" ? "font-bold" : "font-normal"
                }`}
              >
                <IconDeviceLaptop size={30} />
                <span>System</span>
              </ToggleGroup.Item>
            </ToggleGroup.Root>
          </DropdownMenu.Content>
        </DropdownMenu.Portal>
      </DropdownMenu.Root>
    </>
  );
}

export default ThemeDropdown;

The resolvedTheme variable is used to check the currently selected theme(light/dark/system). By default, the system mode is selected, and the logo associated with it is displayed. When users manually choose between dark or light mode, the corresponding logo will indicate the selected setting.

Conclusion

In this tutorial, we have explored how to implement a light/dark mode toggle using NextJS and TailwindCSS. By giving users the flexibility to choose between light, dark, and system modes, we can enhance the user experience by catering to their individual preferences.

Introduction to Penpot - an open-source design tool

Luis Steidle — Wed, 06 Jul 2022 00:00:00 GMT

import { Image } from "astro:assets"; import screenshot01 from "@/assets/screenshot-penpot-01.png"; import screenshot02 from "@/assets/screenshot-penpot-02.png";

In the past year I have been using Penpot quite a bit and I want to give a short introduction to this design tool which is pretty good in my opinion. I think for most developers and designers it provides a really solid set of features, while being completely cross-platform, free and open-source.

Alternative to Figma

So far Penpot is one of the best alternatives to Figma I have found. It provides most functionality from Figma and has a very clean interface, while also supporting real-time collaboration. One thing which I really like is that you are not only limited to drafts like in the Figma free version. The overall structure within Penpot where you can create as many projects and drafts as you want independent of a team feels intuitive and just makes sense for me. If multiple people want to work on a shared workspace they can create a new "Penpot" (or Team) and then have access to the same projects and drafts there. Custom fonts can be uploaded which I really like and users are not limited to only static designs. It's also possible to create interactive prototypes.

Open source, Open standards, Self-hosting

Another very positive thing about Penpot is that it's entirely free, open-source and can be self-hosted. It works with SVG under the hood and promises compatibility with most vector-based tools and open standards. The github repository provides an easy overview on how to get started.

Community libraries

There is already a good selection of design libraries available. The Penpot design system itself is available as a shared library, as well as popular design frameworks like Ant or Material Design. Several wireframing or whiteboarding kits are available too. Anyone can submit a new library so there is hopefully more to come.

Still in beta

Currently Penpot is still in beta, but the product is definitely usable and there is a promising roadmap ahead. There seems to be steady development happening and the progress is very transparent.

A changelog can be found at https://penpot.app/dev-diaries.html

There is also a community forum that launched recently https://community.penpot.app

Overall it's a really solid tool and I'm excited to see how the project will evolve further.