#542 — June 11, 2021
JavaScript Weekly
Introducing Astro: Ship (Even) Less JavaScript — From the creator of Snowpack and Skypack comes a new ‘bring your own framework’ static site builder where the site is rendered to static HTML and only loads JavaScript as-needed using an “islands architecture” to allow partial hydration. It’s always fun to see these folks experimenting with how we approach problems. Keen to learn more? This 50 minute talk + live demo helps a lot.
Fred K. Schott
The Plan for React 18 — The React team has outlined some exciting things on the roadmap for React 18 (due in its final form in ‘several months’ time’):
Cassidy Williams has written an accessible ‘Now what?’ introduction.
The first alpha of React 18 is available – it’s not for production use.
A new Suspense-based server side rendering architecture.
A Transitions API for keeping an app responsive even during large updates.
The launch of a React 18 Working Group to enable invited members of the community to interact with the React team more directly through these public discussions.
The React Core Team
Learn to Build Scalable React Apps — Brian Holt covers the latest tools in the React ecosystem like TypeScript, TailwindCSS, Redux, Jest, and more in this new and updated video course!
Frontend Masters sponsor
Introducing Chrome’s New Memory Inspector — Landing in Chrome 91’s DevTools is the new memory inspector with which you can inspect your ArrayBuffer, TypedArray, DataView, and even WebAssembly Memory.
Kim-Anh Tran (Google)
Vue.js 3.1.0 (Pluto) Released — There’s now the migration build, a build of Vue 3 that offers Vue 2 compatible behavior to help with Vue 2 to 3 migrations. Cédric Exbrayat rounds up some other 3.1 additions here.
Vue.js Team
Quick Bits
There’s a new Visual Studio Code release — the JavaScript debugger now integrates with the Microsoft Edge DevTools to provide a DOM, style, and network inspector.
If you build extensions for Chrome, you’ll want to check out the new chrome.scripting API.
The Playwright project has introduced Playwright Test, a new test runner for parallel multi-browser tests. Playwright Trace Viewer can then let you explore recorded test traces later on.
Releases
use-sound 4.0 — React hook for sound effects.
Cypress 7.5.0 — Testing system.
Ghost 4.7.0 — Headless Node.js CMS / blogging system.
QUnit 2.16.0 — Easy JavaScript testing framework.
Plotly.js 2.0
💻 Jobs
Frontend Developer at MIT (Remote, Contract to Full-Time) — Are you a frontend developer with React and UX skills? Join our team at MIT building a new platform for the energy industry.
MIT Energy Initiative
JavaScript Engineer — Join our “kick ass” team. Our software team operates from 17 countries and we’re always looking for more exceptional engineers.
Sticker Mule
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
Implementing Private Fields for JavaScript — Although you might be using them already via Babel or TypeScript, private fields are a feature being added to JavaScript directly through the TC39 proposal process.
Matthew Gaudet
Creating a Serverless Function to Scrape Web Page Metadata — Metascraper is a Node.js package for scraping metadata from live web pages and this tutorial demonstrates its use via a Vercel hosted function.
Matteo Mazzarolo
[Free Download] Guide to Effective Feature Management — Learn feature management practices to accelerate release cycles and deploy every 6 hours, instead of every 6 weeks.
LaunchDarkly sponsor
▶ Exploring Deno Land 🦕 with Ryan Dahl — Ryan Dahl, the original creator of Node.js creator and now creator of the Deno runtime, went on the popular Changelog podcast to talk about how the success of Node changed his life and what led him to creating Deno.
The Changelog Podcast podcast
Managing Shared State in Vue 3 — Writing large-scale Vue applications can be a challenge. In this article, Shawn Wildermuth dives into the pros and cons of approaches like factories, shared objects, and using Vuex. He also explains what is coming in Vuex 5.0 that might change how we all use shared state in Vue 3.
Shawn Wildermuth
Rust from a JavaScript Perspective: A Tongue-in-Cheek Tour — “I am documenting – albeit in a bit funny way – some thoughts in my journey so far in Rust land, coming from the viewpoint of a hardcore JavaScript enthusiast.”
kapolos
Why Tracing Might Replace (Almost) All Logging
Lightstep sponsor
How To Build a Geocoding App with Vue.js and Mapbox
Prince Chukwudire
Ten Tips for Building More Accessible Angular Apps
Emma Twersky (Google)
Don’t Use Functions As Callbacks Unless They’re Designed for It
Jake Archibald
🛠 Code & Tools
Handsfree.JS: Bring Face, Hand or Pose Tracking to Your Frontend Apps — Track up to four hands at once (more than I’ve got, at least), 21 ‘landmarks’ for a single hand, or even faces and bodies in detail. I’m also digging the rather retro homepage. GitHub repo.
Oz Ramos
Mocha 9.0 Released: The Popular JavaScript Test Framework — Mocha has been a popular go-to test framework for both Node and the browser for years. 9.0 drops Node 10.x support and is going ‘ES modules first’ by using ESM import rather than CommonJS require to load test files by default.
Mocha
Flicking 4.0: A Carousel Component with 30M Daily Users — Naver, a South Korean portal and search engine, claims 30 million people use their carousel component every day. Works with Angular, React, Vue and Preact.
NAVER
[New] Free JavaScript Code Quality & Security Scanner – Real‑Time Scan — Like Grammarly for your code. Scan your JavaScript code for quality & security issues, and get fix advice in your IDE.
Snyk sponsor
FlexSearch.js 0.7.0: A Full Text Search Library with No Dependencies — Claims to outperform its competition while supporting features like multi-word matching and phonetic transformations. Happy in both the browser and Node.js.
Nextapps GmbH
PM2 5.0 Released: The Production Process Manager — PM2 is a popular process manager and load balancer for long running Node.js apps. 5.0 is a significant release adding a new local system monitoring feature for tracking metrics like CPU and memory use.
Alexandre Strzelewicz
Naive UI: A Vue 3 Component Library — I kinda respect it describes itself as “not too slow” and “kinda interesting”(!)
TuSimple
Andrey Sitnik
Angular Flex-Layout: A Sophisticated Layout API for Angular using Flexbox Media Queries
Angular
🎵 And one for fun..
RxJChess: A Chess Game Built on React, Redux and RxJS — You can play against the CPU or even find a friend. Plays pretty well. Once you’ve had enough of losing (or is that just me?) you can also check out the source.
Prashanth Selvam
Permanent link to this post here
