In an effort to help the Covid situation in India, our good friend and former React team core member Sunil Pai is offering 30 minute calls to whoever donates $100 to indiafightscorona.giveindia.org/.
Along with the call, if you donate, reply to this email and we’ll give you a shout-out in next week’s issue as well as match up to $1,000.
Google Gets Lit
This is the future. Your grandchildren will be smoking it.
I’m sure it’s just a coincidence that Google released a new web components library named Lit on the week of 4/20. But the 420-friendly release date is actually pretty fitting, since most of the tools that make up the library have now been re-named and re-packaged about as many times as the devil’s lettuce itself.
Here’s a quick timeline of how we got here:
-
2011 — The Chrome Team released Web Components. These web platform API’s gave us a way to create custom, reusable, & encapsulated HTML tags with plain vanilla JavaScript (they can integrate with other JS frameworks too). Web Components’ biggest selling point was (and still is) their interoperability — they work anywhere HTML does.
-
2015 — Google released v1.0 of Polymer, the OG library for building web apps with Web Components. The Polymer Project grew out of Google’s polyfilling efforts to make Web Components work in other browsers besides Chrome.
-
2017 — The Polymer team started listening to a bunch of Travis Scott (apparently) and released lit-html, a tiny library for making fast, expressive HTML templates in JavaScript.
-
2018 — Polymer doubled down on the confusing psuedo-rebrand by releasing SickoModeElement LitElement, a “boilerplate killing” web components base class that kinda sorta replaced a lot of the original Polymer library.
-
Last week — They finally ended the madness by combining lit-html and LitElement into Lit 2.0, with one unified npm package lit, one set of docs, a new Lit org on GitHub, and a new website — lit.dev (jealous). The original Polymer library was moved to LTM mode.
Lit 2.0 also introduced a new foundation for fast, streaming SSR and flexible client-side hydration, which allows it to integrate with frameworks like Next.js and various static site generators. Check out last week’s launch event for a breakdown of more new features.
The Bottom Line
Polymer/Lit has always been a go-to option for building shareable components & design systems. But with new-and-improved branding, increased functionality, and continued focus on performance, Lit 2.0 could become a popular tool for building full sites and apps too.
Either way, can’t wait for them to release the Litty-Lit-AF-NoCap-Fam-html library in six months.
Super Sweet Node.js 16
I hope Ryan Dahl bought his baby a Lexus to celebrate
The original JavaScript runtime blessed us with a major release last week, which means that Node.js 16 is now the “current” release line that gets all the fun new features, and Node 15 is officially tacky and gross.
Node 16 highlights:
-
Stable Timers Promises API — This provides an alternative set of timer functions that return Promise objects, which means there’s no need to use util.promisify() anymore
-
V8 upgraded to v9.0 — It still hasn’t been renamed to Daphne (inside joke, iykyk), but this V8 upgrade comes with cool stuff like new match indices for regex & faster super property access
-
Experimental implementation of Web Crypto API — A fun-and-flirty new JavaScript API for doing “basic cryptographic operations” like hashing, signature generation & verification, and encryption in web apps. We can’t wait to use it to issue some non-fungible Bytes tokens (NFBTs) when (if?) all the crypto assets decide to stop tanking 💩.
This release also comes with prebuilt Apple Silicon binaries and some additional stable APIs that you can read all about in the announcement post.
The Bottom Line
Node.js may have some abandonment issues ever since Ryan ran off with his hot new project, but it’s still “the runtime of the present” for most of us thanks to solid, consistent releases like this one.
What will building for the web look like in 5 years?
“Building for the web will look like writing specs or documentation. Robots are coming for our jobs, and we can help these overlords by communicating clearly about the experiences that we want to create.”
Eve Porcello will be giving a members-only talk this Thursday called “Designing Scalable Schemas with GraphQL”.
Cool Bits
-
WinBox.js is a lightweight, customizable HTML window manager for the web that looks pretty cool. The “LoseBox”, on the other hand, is what my 3rd-grade teacher would make me sit in when I couldn’t finish my times tables in under 5 minutes. Ms. Franklin really knew the power of old-fashioned public shame.
-
Stack Overflow wrote a blog post on how many people copy and paste from Stack Overflow, and it’s… a lot (1 out of every 4 visits). Thanks to everyone who enabled cookies to aid in the collection of this data.
-
Hyperscript is an experimental, open scripting language for the web. It’s also what you get when you give Aaron Sorkin a lot more adderall than usual.
-
Chris wrote a great guide to starting a TypeScript project in 2021. Follow it exactly, or it’s straight to the LoseBox for you.
-
James started a YouTube series on how professional design firms build high-end websites. The first video is almost two hours long, which seems excessive for teaching Step 1: Buy a Squarespace template (not sponsored but willing to be… 🤑). Step 2: Profit.
-
Varun wrote a cool article on noise being a powerful tool in creative coding. But sadly, he was not referring to blasting old school Slipknot directly into your brain with Bose headphones.
-
Ahmad Shadeed wrote an in-depth article on Container Queries, a new CSS feature that he’s super excited for. Same energy that every developer on Twitter had for last week’s Mortal Kombat movie release.
-
Josh Comeau wrote a great article on how he built his blog. After reading it and spending a lifetime mastering your craft while obsessing over every little detail of both design and online education, you too can become like Josh Comeau.
