Vue.js 3.1 released

#​542 — June 11, 2021

Unsubscribe  |  Read on the Web

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

📖 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

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

Nanostores: A 152 Byte State Manager for React/Preact/Vue/Svelte with Many Atomic Tree-Shakable Stores
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