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 →

A Proposal For Type Syntax in JavaScript

A very interesting Stage-0 proposal is to bring optional and erasable type syntax to JavaScript.

💁‍♂️ Stage-0?

The Technical Committee which is concerned with the standardization of ECMAScript (i.e. TC39) has a 5 stage process in place, ranging from stage-0 to stage-4, by which it develops a new language feature.

Stage-0 is the Strawperson stage which collects all proposals without any acceptance criteria. It's intended to spark the discussion. It is only when a proposal reaches Stage 4 that it is ready to become part of the ECMAScript Specification.

The proposed syntax looks like this:

function add(a: number, b: number) {
    return a + b;
}

The type hints wouldn’t be used by JS itself though — so you won’t get a runtime error if you pass something other than a number into that function — but, instead, they’re meant for your IDE (or a tool) to read so that your IDE can give you hints about the argument types while you’re crafting your code.

The idea of this proposal is that JavaScript could carve out a set of syntax for types that engines would entirely ignore, but which tools like TypeScript, Flow, and others could use. This allows us to keep the things you love about TypeScript – its type-checking and editing experience – while removing the need for a build step in development.

You can compare it to typing some JSDoc above a function: they’re only useful for the IDE, not the JS runtime, and can keep you from writing bad code.

A Proposal For Type Syntax in JavaScript →
ECMAScript proposal: Types as Comments →

New WebKit Features in Safari 15.4

Yesterday, Safari 15.4 got released, and it contains a ton of good stuff that we’ve seen land in the Technology Previews before.

With over 70 additions to WebKit, Safari 15.4 is packed with new web technologies, updates, and fixes. We’ve assembled a huge release as part of our commitment to web developers, and the people who use the web. This is the first big WebKit release of 2022, and we’re just getting started.

Here’s a non-exhaustive list: Native Lazy Loading (for images), <dialog>, :has(), @​layer, new viewport units, :focus-visible, accent-color, trigonometric fns in calc(), text-decoration-skip-ink, BroadcastChannel (🔥), scroll-behavior, structuredClone(), Array#at(), Intl updates, …

It’s good to see Safari pick up the pace again, landing support for both new and some old features in this release. The support for CSS Containment Level 2, for example, opens up the road for Container Queries which should land later this year as it’s part of Interop 2022. I personally hope that the Safari team can continue on this elan.

New WebKit Features in Safari 15.4 →

Open Web Advocacy

OWA (Open Web Advocacy) is a group of software engineers from all over the world who have come together to advocate for the future of the open web by providing regulators, legislators and policy makers the intricate technical details that they need to understand the major anti-competitive issues in our industry and how to solve them.

Roughly translated: today, the OWA is fighting against the #AppleBrowserBan. The result is one huge PDF that bundles all arguments for you to review. It’s a very nuanced and reasonable document that resonates with my stance on it.

Open Web Advocacy →
“Bringing Competition to Walled Gardens” (PDF) →

Utopia – Elegantly scale type and space without breakpoints

In addition to my talk “Embrace the Platform” at UX Ghent, James Gilyead and Trys Mudford from Clearleft also joined the meetup with a talk on Utopia.

With Utopia you get to define the small- and large-screen layouts. All font sizes in between will be calculated by Utopia.

Utopia →
Meet Utopia: Designing And Building With Fluid Type And Space Scales →

Embrace the Platform (UX Ghent)

Last week I was invited to speak at the March 2022 UX Ghent meetup, a frontend-themed edition. I gave a talk called “Embrace the Platform”, which is all about Progressive Enhancement.

The slidedeck is up on slidr.io, and is also embedded below:

The slides themselves won’t tell you that much, though. To know the details, please go read my article “Embrace the Platform” over at CSS-Tricks upon which this presentation was based.

Thanks to the organizers for having me, and thanks to the attendees for coming to see me. I hope you all had fun attending this talk. I know I had making it (and whilst bringing it forward). Also: that was my first “Zoombombing” experience 😅

💁‍♂️ If you are a conference or meetup organiser, don’t hesitate to contact me to come speak at your event.

A meta Tweet

Check this tweet by Chris Johnson: it’s a tweet with a link whose preview image shows the actual number of retweets and likes for said tweet.

Cool!

In a later tweet, Chris shares how it’s done:

The image should update every five to ten minutes.

A meta Tweet →

Container queries, the next step towards a truly modular CSS

At JSWORLD Conference, Maarten van Hoof presented “Container queries, the next step towards a truly modular CSS”

Modular, componentized frameworks and libraries are more popular than ever, but currently screen size is the only dimensional constraint to which a web design can adapt to. In this talk, Maarten will explain what Container Queries are and show you how each component can adapt its design to the dimensions of its container. Join us on our journey towards a more modular CSS.

Eleventy plugin for static rendering of Lit components

The Lit team is pleased to announce an experimental preview release of @lit-labs/eleventy-plugin-lit, a new plugin for Eleventy that renders your Lit components as static HTML during your Eleventy build, and lets you hydrate them after your JavaScript loads.

This is pretty nice, as out comes Declarative Shadow DOM-compatible which Chromium-based browsers can render, while awaiting rehydration. The heavy lifting is done by @lit-labs/ssr, so you can most likely find package for frameworks other than 11ty out there.

Eleventy + Lit Announcement Post →
@lit-labs/eleventy-plugin-lit (GitHub) →