Profile picture of Michael Großklaus

Michael Großklaus

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

GitHub
github.com/mgrsskls
Mastodon
indieweb.social/@mgrsskls
RSS
/feed.xml

Built with Eleventy & hosted on Netlify.

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

  1. Today I learned: Modals are not dialogs

    Date:

    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

  2. Gradient border

    Date:
    Tags:

    Without rounded corners:

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

    With rounded corners:

    border: solid 0.25rem transparent;
    background:
    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.

  3. Minimal social markup

    Date:
    Tags:
    <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">
  4. Numbers with same width

    Date:

    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.

  5. Animation principles

    Date:

    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
  6. Minimal favicon markup

    Date:
    <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" }
    ]
    }
  7. CSS Grid tiles

    Date:
    Tags:

    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.