The New Wave of JavaScript

Welcome to #122.

Congrats to Janackeh for winning last week’s Airpods Max!

This issue we’ll be giving away a Durgod Taurus K320 TKL Mechanical Keyboard. As you probably know by now, we’re big fans of early 2000’s hip hop. The first person to send us the specific early 2000’s hip hop song we’re thinking of wins. Here’s a clue – the artist who sings this song originally went by Kris Kringle.

This week, we’ve got HTML Emmy’s, Age of Empires II cheat codes for your JavaScript, and a badly damaged pituitary gland. Let’s unpack.

---

Move Qwik and break things

You can always tell something is cool-and-edgy when it intentionally misspells its own name – Boyz II Men, Linkin Park, Froot Loops.

And now there’s Qwik — an HTML-first framework that just released its first beta, and claims to offer the “fastest possible page load times, regardless of the complexity of your website.”

We’re usually a little dubious of the “blazingest” claims, but the team behind Qwik has definitely earned the benefit of the doubt: Miško Hevery (creator of AngularJS), Manu Almeida (co-creator of Gin and Stencil), and Adam Bradley (co-creator of Ionic and Stencil) are basically the Webvengers.

Like React, Qwik is component based. But unlike React (and every other current-gen framework), Qwik renders your site’s UI in a totally unique way that doesn’t require hydration at all. (Bobby Boucher from Waterboy is in shambles.)

Why not hydrate? Because hydration is pure overhead that duplicates work and slows down your app, especially as you add more JavaScript (and we all know you’ll be adding more JavaScript).

So instead, Qwik introduced Resumability — a new rendering paradigm that allows fully interactive sites to load with a tiny amount of JavaScript, then pick up from where the server left off. As your users interact with your site, the relevant parts of it load on-demand.

This “precision lazy-loading” is possible because Qwik apps are fully serialized as HTML. So with server-side rendering, the whole app can be shipped to the browser as just HTML, where it will “resume” loading where it left off — without needing to execute any JavaScript.

Hypothetically, this could mean that Qwik is a real-life version of an Age of Empires II cheat code: you can add as much JavaScript as you want to your site, and still get a perfect Lighthouse score (you don’t even have to type in “cheese steak jimmy’s” to activate it).

Bottom Line: Qwik feels like one of the most promising new JavaScript frameworks yet, because 1) it’s solving the performance problem in a way that works with most developers’ existing skills and preferences, and 2) it’s built by a team that knows how to scale OSS UI frameworks. Stay tuned.

---

Courier gave my team so much time for activities

Newton’s 3rd law of motion clearly states that, “building app notifications always takes 5x longer than you think.”

And that might be understating it now that we have so many different platforms to worry about (email, SMS, web and mobile push, Slack, and tons more).

That’s what makes Courier so amazing. They give you complete notification infrastructure with one API that you can set up in an afternoon.

That API integrates with over 50 notification channels, and it handles everything — templating, routing, automations, even logging and analytics. It’s your PM’s *wildest* dream come true.

Courier is used by Fortune 500 companies and startups like Lattice and LaunchDarkly to save an average of 480 engineering hours a year. That’s a lot more time for hide and go seek Fridays team building.

The best part? Courier lets you send your first 10,000 notifications of every month for free (no credit card required).

Check it out. 👈

---

Have a job you want to fill?

---

const newsletter = "Bytes"
const tagline = "Your weekly dose of JavaScript"

[newsletter, tagline].forEach((el) => console.log(el))

---

1. Last week’s Qwik release also introduced a new meta-framework called Qwik City, which gives you all the good stuff you need to spin up a Qwik site: directory based routing, data fetching, bundle optimization, pre-fetching, streaming, and more. I assume it’s named after Miško’s favorite unincorporated community in Western Missouri.

2. This Retool page gives lots of cool examples of how you can build really robust dashboards, database GUI’s, and admin panels — in an afternoon. I honestly have no idea how anyone built internal apps like this back in the Pre-Retool Days. [sponsored]

3. Steven Wittens wrote an article titled Get in Zoomer, We’re Saving React. No shot Zoomers are using, or want to save React if we’re being honest.

4. SQLite and Chrome are working on replacing webSQL with a WASM build of SQLite. At this point I’m fairly certain Google is using the GPT-3 prompt “create a popular hacker news post” to guide their roadmap.

5. Doug Parker wrote an article about Streamable HTML Fragments that’s definitely a contender to win next year’s Emmy for “Most in-depth article about a fairly esoteric HTML concept.” (They keep expanding these categories.)

6. The New Wave of JavaScript Frameworks will help you figure out what those d*mn Zoomers are using now days.

7. James Stanley created Nightdrive — a JavaScript simulation of driving on the freeway at night that is (thankfully) a lot more relaxing than actually driving on the freeway at night.

8. The Preact team wrote an in-depth post about How Preact Signals brings significant performance updates to the foundations of the reactive system. Now if only they could create something to bring significant improvements to my endocrine system. (My pituitary gland has been through a lot — don’t ask.)

---

const newsletter = "Bytes"
const tagline = "Your weekly dose of JavaScript"

[newsletter, tagline].forEach((el) => console.log(el))

You might be surprised to learn that this code doesn’t execute. If you try, you’ll get an error – Uncaught ReferenceError: tagline is not defined. But clearly it is, right? Wrongo.

This is the very rare scenario where not using semicolons can bite you. Because we have a string followed by no semicolon followed by an opening array bracket, JavaScript interprets our code like this, as if we’re trying to access elements from the string.

"Your weekly dose of JavaScript"[newsletter, tagline].forEach();

This, of course, throws an error because tagline isn’t defined. To fix this, add a + sign before the array.

const newsletter = "Bytes"
const tagline = "Your weekly dose of JavaScript"

+[newsletter, tagline].forEach((el) => console.log(el))

That’s mostly a joke, but it does work…

Instead, just use semicolons.

const newsletter = "Bytes";
const tagline = "Your weekly dose of JavaScript";

[newsletter, tagline].forEach((el) => console.log(el));