Scooby Snack bribes for the TC39 Gang

Issue #83.January 17, 2022.2 Minute read.
Bytes

This week, we’ve got a new way to make static sites, Scooby Snack bribes for the TC39 Gang, and the Great Western Schism of 1378 — Web Dev Edition. Welcome to #83.

p90x meme

The only way to get the lean, sculpted site that you want is to BRING IT.

Eleventy wants you to stop using so much JavaScript

Eleventy just released v1 of its simpler static site generator — and by “simpler” they mean “way less freaking JavaScript.”

Quick Review: Eleventy came onto the scene in early 2018 as a JavaScript alternative to Jekyll (missed opportunity to name it “Mr Hyde” tbh). It got a lot of hype because of how it helped you quickly spin up a static site (like Gatsby and other JavaScript SSG’s), but shipped zero client-side JS by default (very much unlike Gatsby and other JavaScript SSG’s).

But when the web needed it most, it vanished.

Ok not really, but it seemed like we were hearing less and less about Eleventy until v1.0 came out last week (4 years after its initial release). Websites haven’t exactly used less JavaScript since 2018, so let’s dive a little deeper into what makes Eleventy unique:

  • Not a framework — It uses JavaScript in Node.js to transform templates into content, but it ships zero client-side JavaScript unless you add a custom <script> tag yourself. This will almost always give it a performance edge over traditional JS frameworks, but of course there are lots of tradeoffs to consider.

  • BYO-Templating-Engine — Like Tony “P90X” Horton, Eleventy is surprisingly flexible. It supports HTML, Markdown, Liquid, Nunjucks, Handlebars, and a lot more templating engines. You can even mix and match them if you’re slightly sadistic into that sort of thing (we won’t judge).

  • Works great with data — Lots of folks really like how you can easily use front matter and external data files to inject content into templates.

Bottom Line: “But how is this different than Astro?” Well, I can think of about 7 million differences off the top of my head.

But besides that, the TLDR is that Astro uses an Islands Architecture approach to give you on-demand JavaScript components if/when you need them. You get more functionality and flexibility, but will probably be required to use a little more JavaScript. 💫Tradeoffs.✨

Retool meme

The choice is yours, my friend [sponsored]

Retool makes it 10x faster to build internal tools

I’ve been telling you about how great Retool is for a while now.

It’s the easiest way to build internal tools at your job… blah blah blah. We all know that.

But here’s the thing: you don’t build a toaster from scratch every time you want to eat some crispy bread. It’s 2022 — someone already built that for you.

So instead of hacking together some ugly dashboard yourself, trying using Retool’s super-easy building blocks — they’ve got tables, lists, charts, wizards, and more. Plus, you can connect it to any database or API you want in about 10 minutes.

And if you want to get extra spicy, you can add your own custom JavaScript to quickly build some pretty robust stuff.

👉 Check it out.

p90x meme

The TC39 Gang is off to solve the mystery of the… RegExp Match Indices?

What’s new, ES2022?

Nothing particularly groundbreaking is coming to JavaScript this year (shocker), but there are four new features worth keeping your eye on — if for no other reason than to get that warm-and-fuzzy feeling of unearned superiority over your co-workers. As usual, we’ve got you covered on that front.

The first announcement in ES2022 is that EcmaScript is raising an $8M seed round to “help us build better primitives for the web”. Next, the features.

Class Fields — This makes it possible to declare class properties and methods right on the class, without having to use the constructor. React class component devs are laughing, since they’ve been using this feature for years with Babel. But it’s nice to have it built right into JavaScript itself.

// Before
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: props.initialCount };
    this.increment = this.increment.bind(this);
  }
  increment() {
    this.setState({ count: this.state.count + 1 });
  }
}

// ES2022
class MyComponent extends React.Component {
  state = { count: this.props.initialCount };
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }
}

This proposal also includes private class fields, denoted with a # prefix, which can only be accessed inside the class instance. #cantTouchThis

RegExp Match Indices — Matching a RegExp to a string with .exec will already tell you where the match starts, but more advanced RegExps include capture groups, which make matches within the match, Russian Doll style. This proposal invents a new flag ”d” which you can put at the end of the RegExp to get the start and end indices of the capture groups.

const regex = /a+(?<Z>z)?/d;
const text = "xaaaz";
const match = regex.exec(text);
match.indices[0][0] === 1;
match.indices[0][1] === 5;

Top-level await — Until now, you could only use the await keyword in an async function. With this feature, you can use await at the top-level of a program,. This is especially handy when writing scripts to perform asynchronous operations, instead of using an IIFE.

// Before
(async () => {
  const result = await doAsync();
})()

// ES2022
const result = await doAsync();

.at() — Python devs can finally stop making fun of us! (But no guaranteees we’ll stop making fun of them.) The .at() method on arrays lets us get the value at a specific index, including negative indices. And that’s the magic — a negative index returns a value from the end of the array. This makes it much easier to grab the last item of an array.

// Before
const last = arr[arr.length - 1];

// ES2022
const last = arr.at(-1);

Bottom Line: These are all great, but the real question is — how many Scooby Snacks will it take to bribe the Committee to finally add Pattern Matching to the spec? (That wasn’t intended to be a drug reference, but at this point I’ll get them whatever they want.)

Jobs

Hims & Hers | Senior Frontend Engineer | Remote

Hims & Hers is a public telemedicine company founded in 2017. We are looking for senior engineers experienced with React, React-Native, TypeScript, and/or GraphQL to help build a beautiful and frustration-free consumer healthcare experience. We are all remote and growing fast!

Cool Bits

  1. We’re back with another video this week. This time, it’s about React Elements vs React Components. Sounds exciting? Well it’s not, but it’s good to know anyway.

  2. Storybook lets you Pinpoint visual bugs automatically. Chromatic runs visual tests, publishes component docs and gathers UI feedback in one shared workspace. That helps you ship UIs with less manual work. Learn more » [sponsored]

  3. Speaking of Chromatic, Varun (an engineer there) wrote a great tutorial on Three ways to create 3D particle effects. If he really wanted to increase his clicks, he would’ve added “#2 will shock you!” to the title, but I guess we can’t all afford to pay $5,000 to take the official Buzzfeed School of Journalism course on LinkedIn.

  4. A new team of Faker.js maintainers has taken control of the project (and its funding) and labeled itself as the “official library.” I didn’t pay that much attention in AP European History, but I’m pretty sure this is exactly how The Great Western Schism of 1378 started. It was either that or Game of Thrones.

  5. Devon Govett (the creator of Parcel) just released Parcel CSS — a CSS parser, transformer, and minifier written in Rust.

  6. tsup lets you bundle your TypeScript library with no config, thanks to esbuild. Someone should create a drinking game for every time we mention a new JavaScript/TypeScript library that uses Rust or esbuild. Although, society does seem to frown upon getting black-out drunk every Monday.

  7. A bunch of big tech execs just met with the U.S. White House staff to discuss the log4j vulnerability and other security issues associated with open source software. First item on the agenda: explaining what “open source” means and also what “software” does. Also can’t wait until they discover how NPM works.

  8. Jeremy Kahn created Shifty.js — which he calls “the fastest JavaScript animation engine on the web.” That reminded me of how I need to finish working on my side project, Grifty.js — a proprietary machine learning tool I built for analyzing a tech influencer’s online presence and giving them a GriftScore™️ from 0 (not grifty at all) to 100 (that Tech Lead guy on YouTube). Sadly, I have to reset the upper boundary every time he releases a new video.