Doing frontend things at factorial.io and created miyagi.dev.

Built with Eleventy & hosted on Netlify.

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

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

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

    const mediaQuery = window.matchMedia("…");

    mediaQuery.addEventListener("change", (e) => {

  3. Modals are not another noun for dialogs, but an adjective describing certain types of dialogs:

    Basically, when a modal component is open, it is the only thing that is not inert. Only the modal content can be interacted rest with, the rest of the page or application is made inert. Inert content is content that users cannot interact with. It is only really there visually, but you cannot Tab to it, click it, scroll it or access the content via assistive technologies.

    Hidde de Vries

  4. Without rounded corners:

    border: solid 0.25rem;
    border-image: linear-gradient(to bottom right, darkmagenta, aquamarine);

    With rounded corners:

    border: solid 0.25rem transparent;
    linear-gradient(white, white) padding-box,
    linear-gradient(to bottom right, darkmagenta, aquamarine) border-box;

    Drawback: You need to set a solid color as background, so it cannot be transparent.

  5. <meta name=twitter:card content=summary_large_image>
    <meta property=og:title content="This is a test title">
    <meta property="og:description" name="description" content="This is a test description.">
    <meta property="og:image" content="https://hell.meiert.org/core/png/test.png">
  6. With the following CSS we can make sure that numbers are all rendered using the same width (similar to monospaced fonts):

    font-variant-numeric: tabular-nums;

    This can be helpful for example for tables or when displaying prices below each other.

  7. The following principles are valid for all kinds of animations:

    • Appearing: ease-out, longer animation
    • Disappearing: ease-in, shorter animation
    • Moving: ease-in-out
    • Long distance / big screen: longer animation
    • Short distance / small screen: shorter animation

    When fading in list items, that means multiple items:

    • overlapping, not one after, not at the same time
    • vertical: top to bottom
    • grid: top left to bottom right
  8. <link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
    <link rel="manifest" href="/manifest.webmanifest">
    // manifest.webmanifest
    "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  9. I can never remember this snippet:

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));

    This will create equally sized columns, where 20rem is the minimum width of the columns. When they would become smaller than this, the last entry in a row moves to the next row.

    We use min(100%, 20rem) to avoid overflow when the container is smaller than 20rem.

  10. I was recently working on the relaunch of my website and wanted to include the open source font Inter. Unfortunately, even the woff2 versions of each different font style were at least 100kb large. As I wanted to use three font styles, this was, of course, way too much.

  11. Probably the most popular way of organizing your components is Atomic Design which was introduced by Brad Frost. I recently talked to a client of mine who said that they were succesfully using this methodology in all their projects and that it works really well for them. We had a short discussion about it as I was using it for a little bit as well, but was realizing pretty quickly that it would just not work for me. One reason for that is the following example: let's say you have two atoms; a button and an icon. If a button could also have an icon included, you would include an atom in another atom. While you could of course do that, it simply feels wrong to me (there are also no atoms in atoms in the nature, are there?).
    That is just one example for why I came up with my own way of organizing my components.