#645 — June 29, 2023
JavaScript Weekly
A Massive Bug at the Heart of the npm Ecosystem — “This is a doozy,” says the author, who used to work on the npm CLI team. We don’t want to spoil his story too much, but in short, package manifests and actual package contents don’t necessarily match up and this can be manipulated by bad actors and even trip up auditing tools.
Darcy Clarke
Useful DevTools Tips and Tricks — Having worked on both Firefox and Edge’s devtools, Patrick knows his stuff (and shares over 100 tips on his DevTools Tips site). Here, he shares his top 15.
Patrick Brosset (Microsoft)
Secure Application PII with a Simple API Call — Secure your app effortlessly. Shield sensitive data with minimal code using the Redact API. Use one API to redact PII, PHI, financial info, and profanity. Prioritize user safety and ensure a seamless experience. Keep it simple; keep it secure.
Pangea sponsor
▶ The Cost of JavaScript in 2023 — Esteemed Googler and Web performance expert Addy Osmani always brings a full, holistic view of problems and solutions to his talks, and this is no exception. He talks about the various ways JS apps are delivered and rendered, the constraints of the hardware involved, and techniques you can use to keep things running smoothly.
Addy Osmani
💡 I know many readers dislike videos, but no word of a lie, this is a mini masterclass in numerous modern JS and webperf topics and worth saving for later.
Introducing the MDN Playground — The popular Web dev docs site has branched out into the world of code sandboxes. The MDN Playground provides a space to prototype frontend ideas and expand live samples in the MDN docs into an interactive experience (such as those here).
Mozilla
⚡️ IN BRIEF:
Ecma International has approved the ECMAScript 2023 spec (as well a standard for 1 terabyte holographic disks – neat).
/r/javascript is one of Reddit’s biggest subreddits with over 2 million followers, but it went read-only in protest of recent Reddit policies. They’re now discussing whether it should come back – it’s not looking likely.
TypeScript educator Matt Pocock 🐦 says the conversation has moved on from “Should we adopt TypeScript?” to “How do we best use it?”
RELEASES:
Ember.js 5.0 – A framework that pre-dates React, is used all over the place, but that barely anyone seems to talk about (and they should).
styled-components 6.0 – Popular CSS styling approach for React components. There’s a migration guide for upgraders.
Remix 1.18.0 – The full stack framework gains big perf improvements and stabilizes its HMR/HDR-ready “new dev server” (explained).
esbuild 0.18.10 – It’s had several noteworthy enhancements in the past week so we’re linking to the page covering them all.
📒 Articles & Tutorials
Don’t Write Console Logs Yourself Ever Again — We all use console.log and we’ll probably use it forever, but Amit says we can save time by using the Turbo Console Log extension for VS Code to at least insert the console.log statements for us..
Amit Merchant
An Introduction to Parser Combinators — Parsing is rarely exciting, but Varun has done a fantastic job of making an engaging tutorial for a dry, yet extremely useful, topic. This is the bare basics, but I hope we can encourage him to finish the series 🙂
Varun Ramesh
Too Much Tech Debt in Your node_modules? UpgradeJS.com Can Help 🚀 — Our senior staff specializes in tech debt: @JSUpgrade will take your app from outdated/vulnerable to modern/secure.
UpgradeJS․com | JS Services sponsor
An Update on Next.js’s App Router Approach — The ‘app router’ in Next.js 13+ offers a new approach for structuring Next apps and is recommended for all new ones going forward (it became stable in Next.js 13.4 last month). This post provides a welcome update on how the project sees the feature evolving and how the team is continuing to integrate and collaborate with React generally.
Delba de Oliveira and Lee Robinson (Vercel)
▶ React Server Components from Scratch: The Video — Dan Abramov recently released an introduction to RSCs built around reimplementing them from scratch. He asked on Twitter if anyone could record the post in video form and Jesse stepped up with a little ‘dramatic reading’ for added effect.
Jesse Pence
Why Doesn’t TypeScript Properly Type Object.keys? — This provoked an extensive discussion on Hacker News.
Alex Harri
Making Tiled Maps with Unity and JavaScript — If you want to create your own Google Maps-esque, Web-rendered tiled maps, Leaflet is a great option, but how do you produce custom map tiles? Using the Unity game engine is certainly one of the more creative ways..
Alan Zucconi
🛠 Code & Tools
Chalk.ist: Create Attractive Images of Source Code — Turn your source code into beautiful images using a variety of themes and customizations. (Be sure to note accessibility requirements or issues around using such images.)
Kasper Mikiewicz
Radash 11: A Functional, Modern, Typed Utility Library — There’s a live playground where you can try these out, and all 70+ utilities are described with examples in the docs. Underscore/Lodash vibes!
Ray Epps
Simple Statistics: Statistical Methods in Readable JS — A lot of the functions are quite simple, but the API is easily understood and covers areas like averages, deviations, correlation, and randomness.
Tom MacWright
Shiki: A Syntax Highlighter That Uses VS Code Themes — Supports over 100 languages and you can specify a VS Code theme in the settings to get the look you want. Works in both Node.js and even on static sites (via a CDN build) and you can see some examples here.
Shiki
Typist: Tiptap-Based Rich Text Editor Component — An unashamedly opinionated yet simple text editor control. You can try the examples in the sidebar. It’s suited for basic rich text situations like writing comments or messages and also has a single-line mode.
Doist
typescript-eslint – Enables ESLint & Prettier to support TypeScript.
Tween.js 21.0
↳ JS/TS animation engine. (Examples.)
psd 0.4
↳ No dependency PSD/Photoshop parser. (Demo.)
DOCX 8.1
↳ Generate and modify Word/.docx files.
NodeBB 3.2 – Node.js forum software.
💻 Jobs
Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.
Hired
🧑💻 Got a job listing to share? Here’s how.
😮 Coding in 140 characters
Wow 👏 – what some people can achieve in a mere 140 characters of JS is amazing. There are a lot of fantastic experiments over at Dwitter.