The Hidden Fundamentals of CSS

In this CSS Café talk, Josh W. Comeau digs into several Layout Modes and a few common misunderstandings about CSS (such as Stacking Contexts)

Also see the Understanding Layout Algorithms post Josh recently published.

Those HTML Attributes You Never Use

Over at Smashing Magazine, Louis Lazaris covers a few of the lesser known HTML attributes:

  • The enterkeyhint Attribute For Virtual Keyboards
  • The title Attribute On Stylesheets
  • The cite Attribute For The <blockquote> And <q> Elements
  • Attributes For Custom Ordered Lists
  • The download Attribute For The <a> Element
  • The decoding Attribute For The <img> Element
  • The loading Attribute For The <iframe> Element
  • The form Attribute For Form Fields
  • The cite And datetime Attributes For Deletions/Insertions
  • The label Attribute For The <optgroup> Element
  • The imagesizes And imagesrcset Attributes For Preloading Responsive Images

Those HTML Attributes You Never Use →

~

Related:

Create animated GIFs of your code with Recoded

Like Carbon or Ray, but the output is an animated GIF.

Beware though: the generated GIFs are HUUUUUGE. The embedded animation above originally was a 14MB GIF. Converted to an MP4, it’s only 163kB.

Recoded →
Recoded Source (GitHub) →

Via Joan Léon

CSS color-contrast() – Target Contrast Ratio Demo

Nice demo by Daniel Yuschick, showing how color-contrast() does its thing. Using the controls you can change the target contrast using a keyword or a custom value.

Good use of Custom Properties there as well!

👨‍🔬 To check this demo you’ll need Safari Technology Preview 122+ with the CSS color-contrast() Experimental Feature enabled.

Using FormData And Enhancing Forms With JavaScript

Jason Knights dissects a form that’s:

  1. not a form
  2. relies entirely on JS to handle the form submission

He then takes his own approach that uses an actual <form> that can be submitted, along with some extra JS sprinkled on top to prevent a full reload.

By using PROPER name="" in the markup and a proper form, all we need to hook is the form, prevent the submit, pull the FormData and send it.

Unlike Jason I wouldn’t resort to XHR, but go with fetch() instead, like so:

document.getElementById("form").addEventListener("submit", async (event) => {
  event.preventDefault();

  const form = event.currentTarget;

  const r = await fetch(form.action, {
    method: form.method,
    body: new FormData(form),
  });

  const json = await r.json();

  // do something with json
});

Using FormData And Enhancing Forms With JavaScript →
FormData – Web APIs | MDN →

💵 This linked article is stuck behind Medium's metered paywall, which may prevent you from reading it. Open the link in an incognito window to bypass Medium's ridiculous reading limit.

Olympe mono

Olympe is a monospace font revived from an Olympia typewriter. The first weight, regular, is based on the original weights of the font that was on this machine, and the light weight, close to hairline actually, has been designed from scratch, with a heavy punctuation, because who doesn’t like a bit of contrast?

When I was 12, I used to stop at my mum’s work every Friday after school to make my typing assignments. It had already forgotten, but by seeing Olympe mono I was reminded that it was on an Olympia typewriter indeed 🤩

Olympe mono →

Via CSS-Tricks

Interview with Senior JS Developer in 2022

I laughed so hard, I nearly peed myself 😅

Corset — Cascading Binding Sheets

Matthew Philips made something odd-looking: a JavaScript framework that lets you add DOM bindings using a CSS-like syntax.

Say your framework of choice generates this markup:

<div class="counter">
  <button
    type="button"
    class="increment">Increment</button>
  <button
    type="button"
    class="decrement"
    disabled>Decrement</button>

  <div
    class="result">
    Count: <strong class="count">0</strong>
  </div>
</div>

Using Corset, you can then add behavior as follows:

import sheet, { mount } from 'https://cdn.corset.dev/v1';

mount(document, class {
  count = 0;

  bind() {
    const { count } = this;

    return sheet`
      .counter {
        --count: ${count};
        --inc: ${() => this.count = count + 1};
        --dec: ${() => this.count = count - 1};
      }
      
      .count {
        text: var(--count);
      }
      
      .increment {
        event[click]: var(--inc);
      }
      
      .decrement {
        attr-toggle[disabled]: ${count === 0};
        event[click]: var(--dec);
      }
    `;
  }
});

If you’re getting flashbacks to Action Sheets or Behavioral Extensions, then that’s totally legit.

Here’s a working demo using the code posted above:

See the Pen
Counter example by Matthew Phillips (@matthewp)
on CodePen.

This Twitter thread by the author holds some good information and reasoning behind it all:

Corset — Cascading Binding Sheets →