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 →

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 →

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 →