Profile picture of Michael GroßklausMichael Großklaus

Color scheme

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

  1. 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.

  2. 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. […]

  3. 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. […]

  4. 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. […]

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

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