#515 — November 20, 2020
JavaScript Weekly
TypeScript 4.1 Released — The ever popular ‘JavaScript with types’ takes more steps forward with template literal types, key remapping in mapped types, recursive conditional types, and support for React 17’s jsx and jsxs factory functions. If you’re a Create React App user though, don’t rush to upgrade just yet as a few issues have been noted.
Daniel Rosenwasser (Microsoft)
A Tale of Going from JavaScript to WebAssembly — A developer of a ‘ultra resolution’ storytelling platform tells the tale of upgrading their Web client’s performance by moving from a pure JavaScript approach to one turbocharged with WebAssembly. There’s a lot to learn here.
Marcel Duin
Monitor Frontend Performance With User-Centric Metrics — Traditional metrics like page load aren’t enough to guarantee that you're providing a solid user experience. Learn to track interactivity metrics like "firstInteraction" so you can build for better impact, and keep users coming back.
New Relic sponsor
Prettier 2.2 Released — The popular opinionated code formatter gains TypeScript 4.1 support, comes as ES modules so you can use it directly within the browser, and supports two new JavaScript parsers: espress and meriyah.
Sosuke Suzuki
Electron 11 Released with Experimental Apple Silicon Support — The popular cross platform desktop app environment upgrades its dependencies across the board (hi Chromium 87!) and begins to take steps into the Darwin arm64 world.
GitHub / OpenJS Foundation
⚡️ Quick bytes:
- Chrome 87 has changed how background tabs use resources and JavaScript timer wakeups will now be throttled to once per minute.
- Firefox 83, released this week, brings significant JS performance improvements through an updated approach to JIT compilation.
- An interesting Twitter thread telling the story of how so many tools and moving parts can make debugging seemingly straightforward issues seem like advanced plumbing.
- Smashing Magazine has a new TypeScript book out and they always make great stuff.
- It's more Frontend Focus territory but Tailwind CSS 2.0 is out.
- Jordan Harband is stepping down as editor of the JS spec once ES2020 is final early next year.
📚 Tutorials, Opinions and Stories
The Case for Weak Dependencies in JS — If you’re using ES modules and want to check if one is present before using it in some optional way, what do you do? Lea explains why this would be useful and shares some ideas with how it could be implemented.
Lea Verou
The Most Accurate Way to Schedule a Function in the Browser — A detailed analysis of three JavaScript timeout strategies and how they perform in thousands of web contexts. A bit of a micro-optimization for sure, but it’s interesting to dig into the weeds like this.
Benoit Ruiz
10 React Security Best Practices — A checklist to help you and your team find and fix security issues in your React applications.
Snyk sponsor
Importing React Through the Ages — Kent looks at the wide variety of ways you can import React now and why he prefers a specific one.
Kent C. Dodds
Creating WebGL Effects with CurtainsJS — A way to add neat WebGL effects to <image> and <video> elements of an already "completed" web page.
Zach Saucier
What’s New In Vue 3? — Vue 3 has already been out for two months, but if you’ve not tried it out or just want to see some practical examples of its changes, this is for you.
Timi Omoyeni
A Super Simple Start to Firebase Functions — I find Google’s cloud services hard to navigate at the best of times so this sort of introduction is always much welcomed.
Kent C Dodds
Introduction to Fullstack, Type-Safe GraphQL — This tutorial teaches you how to build from scratch an entirely type-safe, fullstack web app, using GraphQL with a database attached.
Prisma sponsor
The Difference Between Event Handlers and addEventListener — Let’s say you have a button element. You can assign a function to button.onclick to catch click events or use button.addEventListener("click", ...) – how do they differ?
Twan Mulder beginner
Integrating Cobol(!) with JavaScript — Run COBOL applications and modify them with JavaScript on GraalVM. Not likely to be something many of you will want or need to do, but it’s interesting!
Christoph Schobesberger
We Chose Ember in 2015 and It's Still A Good Decision in 2020
Tomek Nieżurawski
Building Modern Native Add-ons for Node in 2020
Wu, Schulhof, Schlight, Eady, Dawson, and Del Gobbo
🛠 Code & Tools
How Skypack Lets You Use npm Packages on CodePen — I’m a huge fan of CodePen for throwing together quick Web and JavaScript experiments, but loading dependencies has always been a bit old-school. No more. Skypack and ES6 imports now let you bring in whatever npm packages you need.
CodePen Blog
jose: Universal 'JSON Web Almost Everything' — Did you know there were so many "JSON Web" specs? JSON Web Signature, JSON Web Tokens, JSON Web Encryption, and more. This library aims to tackle most of them in both Node and browser. JWA, JWS, JWE, JWT, JWK and more are here.
Filip Skokan
Momoa JSON: A JSON Parser, Tokenizer, Traverser, and Printer — Useful for a more fine-grained approach to parsing JSON data that’s not covered by JSON.parse()
Nicholas C. Zakas
Building the Best Web Gallery, and Why the Heck It Was So Hard
Wix Engineering sponsor
A One Line Function to Generate a Unique String ID — For when a UUID is overkill.
Simon Høiberg
Harold: A CLI Tool That Compares Frontend Project Bundles in Size — This tool makes it easier to compare bundle sizes by taking snapshots that you can then review to manage how a project’s size is changing.
FunBox
💻 Jobs
Find a Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.
Vettery
🎵 A brief musical aside..
Hit play to start the beat and then jam along on the blues guitar to express yourself. This is a fantastic little CodePen demo (written in JavaScript, naturally) and should put a smile on your face 😁 Thanks to Greg Hovanesyan for this!