#543 — June 18, 2021
JavaScript Weekly
Benchmarking JavaScript Memory Usage — Historically, memory usage hasn’t been a heavily tracked thing in the JavaScript world, whether for a lack of tooling or motivation. This is changing, and new tools and APIs are turning up all the time. Here, Tim has done some analysis of what the top 10k Web sites are using in terms of memory and, perhaps controversially, how the choice of framework can affect things.
Tim Kadlec (WebPageTest)
Dr. Axel Explains Three ECMAScript Proposals — JavaScript’s inimitable doctor is blogging again and has examined the ‘error cause’ proposal (a way to let Error instances specify if they were caused by another error), JSON modules (a way to import data as if it were an ES module), and Accessible Object.prototype.hasOwnProperty() (a way to check if an object has an own/non-inherited property).
Dr. Axel Rauschmayer
Take Control of Your Core Web Vitals with Raygun — Don’t be a bystander when Core Web Vitals are released as a ranking factor by Google. In this in-depth walkthrough, our expert team follows a proven process to monitor and improve Core Web Vitals with Raygun, and give you the power to do the same.
Raygun sponsor
Next.js 11 Released — The popular React framework takes some more steps forward with improved performance, Webpack 5 support, an experimental way to make Create React App apps Next.js compatible, and Next.js Live, a preview of a way to build Next.js apps in the browser, collaboratively, with your team.
Next.js Team
💡 If you happen to use React a lot, be sure to check out our React newsletter too.
Quick Bits
Gleam is a type-safe language for the Erlang virtual machine and it can now compile to JavaScript which opens up some new interesting frontend possibilities.
GitHub’s CEO has noted that 4 billion packages are downloaded each day from the official npm registry.
Did you know you can use underscores to make numbers easier to read? For example: 1_000_000
The Angular project has updated its roadmap covering both in-progress improvements and future initiatives.
V8 has added support for import assertions.
Releases
NeutralinoJS 2.3.0 — Cross-platform desktop app dev framework.
SVG.js 3.1 — Easier manipulation of SVG from JS.
ws 7.5.0 — WebSocket client and server for Node.js.
Intro.js 4.1 — Easy user onboarding approach.
Tailwind CSS 2.2 — Popular CSS framework.
Deno 1.11 Released — A variety of enhancements in the latest release of the alternative server-side V8-powered JavaScript runtime:
The Deno project now supplies official Docker images.
You can now abort fetch requests in a Web-compatible way.
deno lint is now considered stable.
BroadcastChannel brings support for broadcasting messages amongst Web Workers.
Deno Core Team
💻 Jobs
JavaScript Developer @ Kinsta — Join our ownership-embracing team of JS developers in a relaxed environment where culture is as important as technical excellence.
Kinsta
JavaScript Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.
X-Team
Find Software Engineering Jobs with Hired — Take 5 minutes to build your free profile & start getting interviews for your next job. Companies on Hired are actively hiring right now.
Hired
📖 Articles, Opinions & Tutorials
▶ What You Need to Know About React 18 — Last week we featured the official plan for React 18 and the community has set to work chewing over what it all means. My favorite roundup is this one which tackles the big picture in the first five minutes but then goes into a little more depth if you want it.
Harry Wolff
When CSS Isn’t Enough: JavaScript Requirements For Accessible Components — Stephanie Eckles looks at how components such as tooltips, modals, tabs, carousels, and dropdown menus often require more than just CSS (even when ‘pure CSS’ solutions are technically possible), especially to ensure accessibility.
Smashing Magazine
Infrastructure as Code using JavaScript and Pulumi — Use the JavaScript language and ecosystem to manage and provision infrastructure across any cloud and a variety of workloads.
Pulumi sponsor
Examples of New Browser APIs to Detect JS Performance Problems in Production — Basic coverage of using performance.now(), the Long Task API (with PerformanceObserver), the Event Timing API, and the JavaScript Self-Profiling API.
Michael Shpilt
Embedding Vue.js Apps in Go(lang) — With Go 1.16’s embed, you can now include frontend assets directly in a Go binary, making a full-stack server deployment as simple as running a single executable file.
Trevor Taubitz
A Visual Guide to Node.js Streams — Streams aren’t conceptually too difficult to grasp but some visuals fit well and certainly help.
Deepal Jayasekara
Drawing Graphics with the CSS Paint API — A practical introduction to the CSS Paint API with hands-on code examples including particles, noise buttons and curvy dividers.
Georgi Nikolov
5 Reasons Not to Write Your JavaScript Data Grid from Scratch
Progress Kendo UI for Angular sponsor
How to Dynamically Import ECMAScript Modules
Dmitri Pavlutin
Why Using Object Spread (…) with reduce May Be A Bad Idea
Prateek Surana
Advanced TypeScript: A Generic Function to Merge Object Arrays
Chris Frewin
🛠 Code & Tools
MathJax 3.2.0: Beautiful Math Rendering in All Browsers — You’re smarter than me if you know what that formula represents, but it looks nice.. v3.2.0 dropped yesterday. GitHub repo.
MathJax
Viewer.js 1.10: A Flexible JavaScript Image Viewer — We first linked this almost five years ago, but it’s still kept updated. If you’ve got a group of images to show, this provides user controls to move between them, zoom (including with gestures), rotate, and such like. GitHub repo.
Chen Fengyuan
Breakpoints and console.log Is the Past, Time Travel Is the Future — 15x faster JavaScript debugging than with breakpoints and console.log.
Wallaby.js sponsor
Remote Repositories Extension for Visual Studio Code — If you use VS Code, this extension from GitHub itself offers a quicker way to open GitHub repos remotely direct from the editor.
Microsoft
Undici 4.0: An HTTP Client, Written from Scratch for Node — The goal of this project has been to replace Node’s core HTTP library with something faster, more scalable, and without the ‘fundamental design issues’ of the core API. v4 introduces redirect support, a faster WASM-powered parser, and a native mocking layer. GitHub repo.
Nagy, Collina, et al.
A One-Click Starter Project for Next.js 11 and Netlify
Cassidy Williams
rmodal.js: A Simple 1.2 KB Modal Dialog with No Dependencies
Iskren Slavov
🎵 And one for fun..
A Pathfinding Algorithm Visualizer — A fun tool for visualizing different pathfinding algorithms (essentially ways to find routes from one point to another). Here’s the source if you want to dig deeper, including the algorithms.
Joseph Prichard
Permanent link to this post here
