Michael Großklaus

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

• all
• accessibility
• animations
• css
• favicons
• grid
• html
• internationalisation
• javascript
• performance
• print
• svg
• typography
• ux
• yaml

1. Mon Mar 01 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

   • html

   enterkeyhint attribute

   The enterkeyhint content attribute is an attribute that specifies what action label (or icon) to present for the enter key on virtual keyboards.

   Values:

   • enter
   • done
   • go
   • next
   • previous
   • search
   • send
2. Mon Mar 01 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

   • animations

   Animation principles

   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
3. Sun Feb 28 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

   • internationalisation
   • css

   Language-specific quotation marks

   blockquote::before {
     content: open-quote;
   }
   
   blockquote::after {
     content: close-quote;
   }

4. Tue Feb 16 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

   • css
   • print

   Print in landscape

   @media print {
     @page {
       size: landscape;
     }
   }

   At the time of the tweet, it worked in blink only.

5. Mon Feb 08 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

   • accessibility

   Accessibility checklist

   https://www.magentaa11y.com/web/ lets you create a comprehensive testing guide for all elements on your page.

6. Fri Dec 25 2020 00:00:00 GMT+0000 (Coordinated Universal Time)

   • html
   • favicons

   Minimal favicon markup

   <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. Tue Dec 22 2020 00:00:00 GMT+0000 (Coordinated Universal Time)

   • grid
   • css

   CSS Grid tiles

   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.

8. Tue Dec 15 2020 00:00:00 GMT+0000 (Coordinated Universal Time)

   • accessibility
   • css

   Utility class for hiding elements visually

   Hiding elements visually, but keeping them for screen readers:

   .u-hiddenVisually {
     position: absolute;
     width: 1px;
     height: 1px;
     margin: -1px;
     border: 0;
     padding: 0;
     white-space: nowrap;
     clip-path: inset(100%);
     clip: rect(0 0 0 0);
     overflow: hidden;
   }

   My by far most used utility class.

9. Tue Dec 15 2020 00:00:00 GMT+0000 (Coordinated Universal Time)

   • svg
   • css

   URL encoder for SVG

   If you want to use an inline SVG in a CSS file: https://yoksel.github.io/url-encoder/

10. Tue Dec 15 2020 00:00:00 GMT+0000 (Coordinated Universal Time)

    • typography
    • css

    System fonts

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif;

    or

    font: 1rem/1.2 BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif;

    The shorthand version cannot start with -apple-system!