Profile picture of Michael GroßklausMichael Großklaus

RSS
Color scheme

Collecting some frontend related notes, thoughts, bookmarks and tips.

  1. There is a storage event that gets fired when the local storage for a site is updated:

    // Listen for local storage changes on our theme key. This lets
    // one tab to be notified if the theme is changed in another,
    // and update itself accordingly.
    window.addEventListener("storage", (e) => {
        if (e.key == LOCAL_STORAGE_KEY_THEME) {
            setThemeFromLocalStorageOrMediaPreference()
        }
    })
  2. There are different indicators to define how multiline strings in YAML files behave.

    Block style indicators describe how line breaks behave: With a | (literal style) they are kept as a line break. With a > (folded style) they are converted to a space.

    Block chomping indicators describe how line breaks at the end of the string behave: + keeps all of them, - removes them. Without an indicator, one line break will be added to end of the string.

  3. In this post I want to give a short example why there is in my opinion a better way than using a Mobile First approach when writing CSS. Please note that for simplification I will refer to viewports as well as media queries, but the same concept also applies to anything that can be controlled by media and container queries. […]

  4. Implementing a light and dark theme based on the user's OS settings has become quite popular. But often users just want their OS to be dark, while they prefer reading a website with a light background, for example. It is therefore considered good practice to offer a theme toggle, that allows the user to change the theme of the website regardless of their OS theme. […]

  5. I have a lot of private notes regarding all kinds of topics: web development, my hobbies, finances, things to buy, work-related tasks, and so on. These notes are probably the most important things I have digitally (besides thousands of pictures) and up until recently they were stored in a PostgreSQL database. This had always been a compromise though. What I actually wanted was to store them in Markdown files on my computer. […]

  6. There is a change event that can be used to listen to media query changes:

    const mediaQuery = window.matchMedia("…");
    
    mediaQuery.addEventListener("change", (e) => {});