#510 — October 16, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

webpack 5 Released — webpack is arguably the most popular bundler right now and this is the first major release in over two years. We get big improvements to caching (and therefore performance), reduced bundle sizes with better tree shaking, and a variety of breaking changes to prepare for the future (automatic Node polyfills are gone, for one).

webpack

• Tania Rascia has a fantastic How to Set Up webpack 5 from Scratch tutorial to get you up and running ASAP. She also has a useful webpack boilerplate project.
  

npm 7.0 Released — With millions of users, resulting in 75 billion package downloads per month, npm has undoubtedly been a huge success and npm 7 is now here (and will also come with Node.js 15.0 next week). Key features include workspaces, installation of peer dependencies, and support for yarn.lock.

Myles Borins

Monitor Frontend Performance With User-Centric Metrics — Page load time isn't enough to guarantee you're providing a solid user experience; your users care about perceived performance. Learn to track interactivity metrics like `firstInteraction` so you can build for impact. Your users will thank you.

New Relic sponsor

Rust Meets the Web - A Clash of Programming Paradigms? — There’s a lot to enjoy here about how Rust is taking steps into the browser via WebAssembly and how its approaches ‘clash’ with the Web and JS ways of doing things: “JavaScript was not built in one day. And just like JavaScript evolved to fit the browser, Rust will need to grow, too. I am optimistic that we, the communities of Rust and JavaScript, will come up with great solutions.”

Jakob Meier

Babel 7.12.0 Released with TypeScript 4.1 Beta Support and More — It’s a minor version but Babel is such a part of the fabric of the JavaScript ecosystem that any new features can have a big impact. 7.12 adds support for webpack 5, template literal types, class static blocks, and more.

Nicolò Ribaudo

💻 Jobs

Senior Software Engineer, Front-End (Fully Remote/UK) — We're looking for exceptional engineers to join our remote dev team and help us revolutionise dental practices the world over.

Dentally

Front End JavaScript Product Engineer (Remote within Australia) — JavaScript Product Developer - Build exceptional next-gen products using THE latest technology. $120-140k + Super + Equity + Benefits.

Find Your Next 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

📚 Tutorials, Opinions and Stories

Create TypeScript Declarations from JavaScript and JSDoc — Even if you don’t write your code in TypeScript you can still generate .d.ts files to provide more information to developer tools.

Nicholas C. Zakas

▶  Microsoft's Node.js for Beginners Series — If you or someone you know needs to step onto the Node.js train or just revise what you already know, this up to date series of brief screencasts from Microsoft could fit the bill.

Microsoft

Don't Copy Paste Into A Shell – Here's Why — As well as being merely good advice, this demo shows how the Clipboard API can be used to maliciously change what users copy and paste from a page. (Luckily some terminals – such as Windows Terminal – can mitigate the problem.)

Brian Tracy

Build an Authenticated JAMstack App with Next.js, Airtable, Tailwind CSS, and Auth0 — A detailed guide to building a Jamstack application with authentication features using Next.js. Be sure to check out the accompanying video tutorial series. (Via our Jamstack newsletter)

James Quick

Passwordless Authentication with Next.js, Prisma, and Next-Auth — How to add passwordless authentication to a Next.js app, so users can log in with GitHub or a Slack-styled magic link.

Prisma sponsor

▶  Setting Up Automatic Deployment with GitHub Actions — A 40-minute screencast that goes through setting up a GitHub Actions powered flow for deploying an app.

Anson the Developer

Testing Non-Exported Functions — To test an exported function, just import it. But what about non-exported functions?

Samantha Ming

A Webpack 5 Headache — Node’s most prolific module creator reflects on the issues webpack 5 raises for Node module maintainers after its decision to remove automatic Node API polyfills.

Sindre Sorhus

How to Make a First Contribution to an Open Source Project — If you’re looking to break into making open source contributions but the process seems a bit intimidating, this handy Twitter thread should provide some reassurance.

Simon Høiberg on Twitter

TypeScript: Stop Using `any`, There's a Type For That

Applying React Component Patterns in Ember.js

▶  7 Ways Angular Components Can Share Data

🔧 Code & Tools

Detect GPU: Determine What Tier of Graphics Performance Users Have — Imagine user agent capability detection but for the GPU. This returns information about the user’s graphics capabilities including a simple 0-3 score as to the level of rendering power available which you could use to turn on/off extraneous visual effects. Demo here.

Tim van Scherpenzeel

Wallaby.js: 15x Faster JavaScript/Jest Testing and Debugging — Forget about breakpoints and `console.log`, test stories and time travel debugging is the future.

Wallaby.js sponsor

essentia.js: Music and Audio Signal Analysis and Processing — Targeting both real-time and offline use cases, essentia.js is powered by the eponymous C++ library via WebAssembly.

essentia.js

Day.js: A 2KB Immutable Date Library Alternative to Moment.js — A minimalist library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API.

iamkun

VueTailwind: Responsive HTML Components Made with Vue and Tailwind — Many of the components are “coming soon” but there’s enough here to poke around. Each component gives you a mobile and desktop view and some are CSS-only.

Saleh Mir

Human Interval: Human Readable Time Distance Parser — Rather than turn times into English (e.g. ‘two minutes’), this does the opposite.

Agenda

Introducing Repluggable: Solving The Dependency Model Challenge with Micro Frontends & Contracts

Wix Engineering sponsor

dragmove.js: A Tiny Library to Make DOM Elements Draggable — Comes in at just 500 bytes with no dependencies and touch support. Demo here.

Kailash Nadh

Bueno: A Tiny, Composable Validation Library in TypeScript — Aims to improve on other form validation libraries and can also be used as a lightweight API validation library.

Philip Nilsson

vue-speedometer: Speedometer-Style Gauges for Vue

Arun Kumar

Reveal.js 4.1: An HTML Presentation Framework — The 4.1.0 release notes.

Hakim El Hattab

ReactGrid: Add Spreadsheet-Like Behavior to a React App

Silevis Software