#​561 — October 22, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

What’s New in the Now Fully Released Gatsby 4 — Gatsby is a popular React-based open-source framework and v4 introduces new content rendering methods (such as Deferred Static Generation), React 18 future proofing, new build and deployment architecture, new CMS APIs, and more.

Jeff James (Gatsby)

Node v17 (Current) Released — Just six months after its release, Node v16 prepares to become an 'active LTS' release to be maintained until 2024, with v17 now taking up the role as the cutting edge release that gets all the new features first. It includes OpenSSL 3.0, V8 9.5, npm 8.1.0, and more.

Bethany Nicolle Griggs and the Node.js Team

No DKIM, No SPF, No WTF. Transactional Emails Sent via Gmail — Transactional email providers lack certain features that leave us with more work than when we started. Save time with our API, routing rules, and template designer. Start sending for free in seconds. Get $5,000 in credits towards your enterprise plan.

Courier sponsor

Over 100 Algorithms and Data Structures Demonstrated in JS — Examples of many common algorithms (e.g. bit manipulation, Pascal’s triangle, Hamming distance) and data structures (e.g. linked lists, tries, graphs) with explanations. Available in other languages too like Chinese, Korean, French, and Spanish.

Oleksii Trekhleb et al.

QUICK BITS:

• 
  

  beta.reactjs.org gives a first look at a new approach for the official React docs. Check out the Quick Start tutorial page to really see it in action.

  
  


• 
  

  Chrome 95 has been released this week and here's what's new for developers.

  
  


• 
  

  On the latest episode of his bite size Q&A podcast, Kent C Dodds talks about ▶️ why he uses XState (the state machine library) on his site.

  
  


• 
  

  ⚛️ If you're a React developer, make sure you're also on our React Status newsletter as that's where we put the lion's share of React items we find each week :-)

  
  


• 
  

  Playwright 1.16 – the Node library to automate browsers – has been released including a new API testing feature.

  
  


• 
  

  The Angular team has published an RFC for an architectural shift within the framework with the goal to make Angular simpler to use, and more modular.

  
  

RELEASES:

Neutralinojs 3.0 – X-platform app dev framework. Lighter than Electron.

React Bootstrap 2.0 – Bootstrap components built with React.

Commander.js 8.3.0 – CLI niceties for Node.js.

noVNC 1.3.0 – JS and HTML-based VNC client for browsers.

React Native Testing Library 8.0

Node-RED 2.1.1 – Low-code JS dev environment.

📖 Tutorials, Opinions & Stories

▶  Implementing a 'Candy Crush' Game with React — The latest of Ania’s no-nonsense all-about-the-code screencasts walking through the creation of a simple puzzle game.

Ania Kubów

Understanding Map and Set in JavaScript — Goes over the Map and Set objects, what makes them similar or different to Objects and Arrays, the properties and methods available to them, and examples of some practical uses.

Tania Rascia

Get Started with JavaScript and InfluxDB 2.0 — Monitor your JavaScript application performance and create beautiful web-based visualizations with InfluxDB.

InfluxData sponsor

How to Cancel an HTTP Request in Node.js — The Abort API allows you to cancel asynchronous tasks such as in-flight HTTP requests and here’s how to use it in the latest Node.js version.

Simon Plenderleith

How to Create a Linear Gauge Chart in JavaScript — A way to visualize progress, perhaps - as used here to show off COVID vaccination rates.

Shachee Swadia

▶  How to Create a PWA With Next.js in 10 Minutes — Congratulations to James for just earning his 100K YouTube Play button.

James Q Quick

Use console.log() Like a Pro — Always nice to have a reminder of the various console methods for debugging.

Marko Denic

Shortcut Puts the Agile in Agile and the “Can” in Kanban

Shortcut (formerly Clubhouse.io) sponsor

Six Tips To Make Your Pull Requests Easier to Review — Looking to have your pull request rise above the background noise for an active repo?

Chak Shun Yu

How to Create CSS Custom Properties That Dynamically Update with React and JS

Colby Fayock

Building an API with Gatsby Functions

Paul Scanlon

🛠 Code & Tools

LittleJS: A Tiny 2D JavaScript Game Engine with Fast WebGL Rendering — No dependencies and it claims to render 10,000+ objects at 60fps.

Frank Force

memoize-one 6.0: A Memoization Library with a Simple Approach — A memoization library that takes the curious approach of only remembering the last invocation and arguments, returning the cached value if the next call matches. This saves on complex caching arrangements while speeding up many scenarios.

Alex Reardon

ChordSymbol: Musical Chord Parser and Renderer — Claims to be able to “handle whatever chord syntax” you throw at it and it can generate all the notes to be displayed elsewhere. GitHub repo.

Christophe Noël

Tried. Tested. Trusted. Studio 3T - Power Tools for MongoDB — Intuitive IntelliShell. Generate JavaScript from queries. Reshape data with Reschema. Try Studio 3T free for 30 days.

Studio 3T sponsor

GistPad: VS Code Extension for Managing Code Snippets in GitHub Gists — Allows you to manage GitHub Gists entirely within VS Code. Open, create, delete, fork, star, and clone gists, then go straight to editing. VS Marketplace link.

VS Live Share Contrib

JavaScript Obfuscator: A Way to 'Scramble' JS Code — Transforms your code into a functionally equivalent representation that’s harder to understand or modify. Many folks find this sort of fiddling to be of low value given it can be reversed to some extent, but there’s a Web interface if you want to have a go.

Timofey Kachalov, Tiago Serafim, et al.

OpenSilver 1.0: A Modern, Plugin-Free Reimplementation of Silverlight — This is a replacement for Microsoft’s lonnnng deprecated Silverlight technology, but as of this 1.0 release boasts being “powerful enough to run complex line-of-business applications of all sizes.” It’s open-source and runs in current browsers via WebAssembly.

Userware

Pdfvuer: A PDF Viewer for Vue, Powered by Mozilla's PDF.js

Gaurav Koley

Hyperactiv 0.9: A Super Tiny Reactive Library

Julien Elbaz

Dust.js 3.0: Asynchronous JS Templating for Browser and Server

LinkedIn

reveal-md: Create Reveal.js Presentations from Markdown Files

Lars Kappert

Cacheables: Simple In-Memory Cache with Automatic Invalidation and Elegant Syntax

Grischa Erbe

🤓 And one for fun..

(t,i,x,y) => 'creative code golfing' — Tixy is a neat little creative coding environment where you're given a simple 16x16 grid of dots and you can manipulate them via small slices of JavaScript. Math.random() is a fun one to chuck in.

Martin Kleppe

#​560 — October 15, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

Parcel v2 Released — Parcel, a fast zero-config webapp build tool, first came out in 2017 (issue 364!) and took the JavaScript world by storm. v2 is a full rewrite that takes the same principles from v1 but extends them to fit projects of ‘any size and complexity’ by way of tree shaking by default, an all new plugin-based system, bundling via ES modules, automatic code splitting, image asset optimization, and, naturally, more.

Parcel Team

The Remix Project Gets $3M in Seed Funding — The folks behind React Training and React Router have been working on a full-stack JavaScript framework called Remix which, till now, has only been available to paying supporters (who speak very highly of it). This funding round opens up a lot of new possibilities including the imminent open sourcing of the framework – good news for all of us.

Michael Jackson and Ryan Florence

ButterCMS Melts into Your JavaScript App. Try the #1 Headless CMS — ButterCMS is your content backend. Enable your marketing team to update website + app content without bothering you. Try the #1 rated Headless CMS for JavaScript today. Free for 30 days.

ButterCMS sponsor

QUICK BITS:

• 
  

  The latest branch of the V8 JavaScript Engine, V8 9.6, has been created. Very little headline news for this one, with support for using external references from JavaScript within WebAssembly modules being the only noted feature.

  
  


• 
  

  Node 16.11.1, 14.18.1, and 12.22.7 have been released to fix two HTTP request smuggling vulnerabilities.

  
  


• 
  

  On Twitter, people shared what things they've stopped doing in JavaScript as they've become more experienced.

  
  


• 
  

  Serverless, Inc. has opened up the public preview of Serverless Cloud, a serverless platform aimed specifically at JavaScript developers (for now).

  
  

ESLint v8.0.0 Released — ESLint is a popular pluggable and configurable linter tool for maintaining JavaScript code quality. v8.0 brings it up to ES2022 standards. If you’re upgrading from an older version, a migration guide is available.

ESLint Team

RELEASES:

deck.gl 8.6 – WebGL2-powered, large-scale data visualization.

crypto-hash 2.0 – Browser and server side hashing module.

React Static 7.6.0 – Progressive static site generator for React.

Jasmine 3.10 – Testing framework.

npm 8.1.0

📖 Tutorials, Opinions & Stories

How AWS Halved the Publish Size of Its AWS SDK for JavaScript Packages — AWS made some huge improvements in the package size of their modular JavaScript packages, mostly by cleaning up obvious things like comments, source maps, and unnecessary TypeScript sources.

Trivikram Kamat (AWS)

How to Win at CORS — Jake, a developer advocate at Google, outlines all he knows about Cross-Origin Resource Sharing (CORS) in an effort to help make sense of things. There’s a demo/playground here to help illustrate things.

Jake Archibald

Detect Injection Vulnerabilities in Your AWS Lambdas: SonarQube 9.1 — Protect the critical business logic in your JavaScript AWS Lambdas with taint analysis in our new release. Start free.

SonarQube sponsor

33 Concepts Every JavaScript Developer Should Know — A curated collection of links to tutorials on 33 different areas of JavaScript it’s worth understanding well, including: types, closures, equality, scope, and different JavaScript engines. We’ve linked this before, but it continues to get updated.

Leonardo Maldonado

Board Gaming in Figma (with JavaScript) — We’re not Figma users ourselves, but the cloud based design tool seems to be incredibly popular nowadays. Can it be used as the mechanism by which to play a table top game? Apparently so!

Dave Geddes

Is Deno Still a Thing? A Look at the Status of the 'Node Killer' — Not a particularly deep piece, but if you’ve not kept up with Deno it’s a quick catch up.

Fernando Doglio

Build a Mobile-Responsive Telehealth Pager App Using Stream’s Chat API

Stream sponsor

Composable CSS Animation in Vue with AnimXYZ — AnimXYZ is a composable CSS animation toolkit.

Ejiro Asiuwhu

Three TypeScript Tricks I Wish I Knew When I Learned TypeScript

Tim Raderschad

How to Export Sass Variables to JavaScript with Next.js

Colby Fayock

🛠 Code & Tools

Introducing Nuxt 3 Beta — Tthe key aspect of Nuxt 3 (a popular framework for Vue users) is its new server engine that allows it to deploy just about anywhere, including serverless deployment similar to Next.js (wherein SSR pages deploy as serverless functions). It also supports Vue 3 and Vite. Want to learn more, watch Ben Hong’s livestream recording.

Nuxt Team

Sapling: VS Code Extension for Traversing Your React Component Hierarchy — Sapling adds an interactive dependency tree to the VS Code sidebar complete with available props for each component and easy navigation to the related files.

Team Sapling

Tired of Writing Application Caching? — Scale data-driven apps globally without the time and complexity of writing application caching.

PolyScale.ai sponsor

jest-extended 1.0: Additional Matchers for Jest Users — If you’re using Jest for testing, this project introduces a variety of more specific matchers for various situations, particularly around type and format checking.

Jest Community

Ruby2JS 4.2.0: A Ruby to JavaScript Transpiler — A transpiler aimed at keeping the resulting code looking ‘hand crafted’ rather than merely transpiled. There’s a live demo if you want to see it in action.

Sam Ruby and Jared White

Swiper: A Modern Mobile Touch Slider — Complete with hardware accelerated transitions and native-like behavior.

Vladimir Kharlampidi

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

webpack Boilerplate 3.0: A Sensible Webpack 5 Boilerplate

Tania Rascia

🤓 And one for fun..

DOOM Rendered via Checkboxes — Is it possible to play DOOM in your Web browser using nothing but checkboxes for rendering? Yes! I mean, it’s not going to be your first choice, but it’s fun to see it done, and here’s the source.

Andrew Healey

#​559 — October 8, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

How Kent C Dodds Built a Modern Website in 2021 — Kent is well known in the JavaScript space from Testing JavaScript, Epic React and his popular webdev podcast, and he’s just completed a big effort to rebuild his entire Web presence using React, Remix, XState, Prisma, Express.js, and numerous other JavaScript tools and technologies. This is a good look at how it’s come together.

Kent C Dodds

🎧 The new season of Kent's podcast is worth checking out as it features informative interviews with folks like Josh Comeau, Tracy Lee, and Michael Jackson.

Web Streams Everywhere (and Fetch for Node.js) — A look at how most JavaScript platforms (including browsers) now have at least partial support for creating, composing, and consuming streams of data in a stream-like fashion, as well as how Node’s streams implementation differs and can interop with the modern Web Streams API approach.

Ollie Williams

ButterCMS Melts into Your JavaScript App. Try the #1 Headless CMS — ButterCMS is your content backend. Enable your marketing team to update website + app content without bothering you. Try the #1 rated Headless CMS for JavaScript today. Free for 30 days.

ButterCMS sponsor

When a WeakMap() Actually Came in Handy — The creator of slide-element, an element animation library, explains a situation where he found the often misunderstood WeakMap type came in handy.

Alex MacArthur

Announcing TypeScript 4.5 Beta — The next TypeScript release is shaping up to be a good one with ES module support in Node (plus CommonJS interop), the Awaited type, --module es2022, and tail-recursion elimination on conditional types all highlight fetaures.

Daniel Rosenwasser

jQuery Maintainers Continue Modernization Initiative; Deprecate jQuery Mobile — Given its age and remaining importance on the Web, it’s always great to see updates from the jQuery team. jQuery UI 1.13.0 has been released, but the big news is jQuery Mobile is deprecated as of yesterday, and jQuery UI is now in maintenance only mode.

jQuery Foundation

QUICK BITS:

• 
  

  New month, new VS Code release. Less JS goodies than usual, but you now get IntelliSense across untitled files in a project, improved folding of JSX tags, and initial TypeScript 4.5 support.

  
  


• 
  

  It wasn't just your connection, the npm repository had an outage yesterday.

  
  


• 
  

  GitHub's Lee Reilly highlights 13 terrific entries to the js13kGames competition over on the GitHub blog. All with source to look at too. It's amazing what people have managed to achieve here.

  
  


• 
  

  This year's State of CSS survey is now open.

  
  

RELEASES:

jQuery UI 1.13.0 – Long time, no see.

Billboard.js 3.2 – Powerful D3 powered chart library.

Trash 8.0 – X-platform move files to the trash from Node.

React Native 0.66

npm 8.0

📖 Tutorials, Opinions & Stories

Safe DOM Manipulation (in the Future) with the Sanitizer API — The new Sanitizer API (edited by developers from both Google and Mozilla) aims to build a robust processor for arbitrary strings to be safely inserted into a page. Something to look forward to.

Jack J (Google)

Replacing jQuery with Vanilla ES6 — The author found it took more work than he expected. You Might Not Need jQuery is another useful resource in this regard.

Aaron T. Grogg

Reserve Your Spot at JetBrains JavaScript Day 2021 — Join our free event to catch up on the latest trends and broaden your knowledge on the present and future of JavaScript.

JetBrains sponsor

▶  Discussing Svelte with Rich Harris — Another week, another Rich Harris interview :-) This time the Svelte creator talks about Svelte’s position in the overall framework landscape and how other frameworks appear to be becoming more ‘Svelte-like’. A good catch up.

PodRocket Podcast podcast

Writing Clean JavaScript Tests with the BASIC Principles — An introduction to applying five key principles to shorten, clean, and simplify JavaScript and Node.js-based test suites.

Yoni Goldberg

Getting Started with the Rollup.js JS Bundler — Built around a series of easy to understand examples.

Craig Buckler

Free Workshop - Getting Started with IoT and InfluxDB — Discover how to use InfluxDB to develop a JavaScript-enabled, time-series-based application for IoT sensors.

InfluxData sponsor

▶  How to Code a Side Scroller Game in 59 Seconds — What you can get into 59-seconds is rather limited, but it’s a good attempt.

Zizyo

A Guide to CSS Debugging — A look at a few categories that bugs often fit into, how to evaluate the situation, and techniques that help prevent such bugs.

Stephanie Eckles

The Options for 'Password Revealing' Inputs

Chris Coyier

How to Quickly Populate a New JavaScript Array

Elijah Manor

🛠 Code & Tools

VanillaTreeViewer: Minimalist File Browser for Display Multiple Files — Such as complex multi-file code snippets, say.

Abhishek Chandrasekhar

Xterm.js: A Terminal/Shell Component for the Front End — It’s used in lots of projects like VS Code, cPanel and Azure Cloud Shell.

xterm.js team

Immutable JS 4.0: Immutable Persistent Data Collections — The purpose of Immutable is to make it easier to get started working with immutable data structures in JavaScript by providing common structures like lists, stacks, maps, and sets out of the box.

Immutable.js

Build Internal Tools in Minutes with Retool, Where Visual Programming Meets the Power of Real Code

Retool sponsor

kill-port: Kill the Process Running on a Given Port — For example, you could use npx kill-port 3000 to kill a local process listening on port 3000. For Unix and macOS it’s basically running lsof and kill behind the scenes, but it also supports Windows.

Tiaan

mijin: A Library of Tailwind UI Components for Vue and Nuxt.js — View the components and the docs here. No dependencies and includes built-in support for dark and light modes.

Léonard Lecouey

BesoGo: A JavaScript-Powered 'Go' Board Editor — Go as in the board game.

Ye Wang

TiddlyWiki: Self-Contained JavaScript Wiki for Browser or Node

Jeremy Ruston

github-code-font-changer: A Chrome Extension to Change and Customize the Default GitHub Code Viewer Font

El Amrani Chakir

Arcsecond: A Zero Dependency Parser Combinator Library Inspired by Haskell's Parsec

Francis Stokes

fast-png: PNG Image Decoder and Encoder Written Entirely in JavaScript

Michaël Zasso

#​558 — October 1, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

A 'Self-Parking Car' in 500 Lines of Code — This is a fun one! Given a basic environment made up of virtual cars, can you train a genetic algorithm to have the cars park themselves? Yes. Here’s a live demo.

Oleksii Trekhleb

Bangle.js 2: The Open JavaScript Powered Smart Watch — I’m not a fan of linking to Kickstarters, but the creator of the Bangle watch – for which you can develop apps in JavaScript – delivered last time with v1 (Gordon Williams of Espruino fame, BTW), so maybe version 2 will appeal to you as it looks like a strong step forward. Conor O’Neill has written more about his impressions of the project and related work so far.

Kickstarter

⭐️ Professional JavaScript Learning Path — From JavaScript foundations, all the way to Hardcore Functional JavaScript, find out how far you can go with your JavaScript abilities in this comprehensive learning path.

Frontend Masters sponsor

JSXGraph: Dynamic Mathematics Rendering with JS — A cross browser library for Web-based interactive geometry, function plotting, charting, and data visualization. There’s a lot of examples, all complete with code. GitHub repo.

JSXGraph team

7GUIs in JavaScript — A JavaScript variation of a GUI programming experiment where multiple apps are developed in multiple environments to compare the diversity of approaches. This is more interesting than it sounds, but shows off how frameworks like Vue or React help make more complex apps easier to maintain.

Brad Woods

QUICK BITS:

• 
  

  The (unofficial, though by now de facto) JavaScript / JS logo is 10 years old! It was officially unveiled at JSConf EU 2011.

  
  


• 
  

  Mike Sherov notes on Twitter that while jQuery eventually peaked in usage in 2020, it's still going strong and we owe the project a debt of gratitude.

  
  


• 
  

  The latest Safari Technology Preview has enabled support for SharedArrayBuffer.

  
  


• 
  

  The developer of Colorette, a terminal text coloring library, claimed his code had been improperly copied and rebranded into another library called nanocolors – this led to a huge Hacker News discussion, an interesting Babel PR to replace chalk with nanocolors and Sindre Sorhus creating yoctocolors which boasts being even faster than nanocolors(!) 😅

  
  

RELEASES:

react-pdf 5.4.0 – React component to display PDFs.

Axios 0.22.0 – Long standing HTTP request library.

ckeditor 30.0 – Rich text editor framework.

Compressor.js 1.1 – In-browser image compression.

Handsontable 10.0 – Data grid component.

Node v14.18.0 (LTS)

eslint 8.0 RC0

📖 Tutorials, Opinions & Stories

Let’s Dive Into Cypress For End-to-End Testing — The author tries to look for a fun and effective workflow to end-to-end testing with Cypress.

Ramona Schwering

My Top Vue.js Interview Questions — “A list of Vue.js interview questions that I would ask candidates”.

Michael Hoffmann

Sorting JavaScript Arrays by Nested Properties — Imagine you have an array of objects and you need to sort the data, but the items you need to sort are not all top-level properties...

Elijah Manor

How To Build an Interactive Dashboard — Learn how to build a sleek dashboard using the TileLayout. See all you can do with this deceptively simple component.

Progress KendoReact sponsor

Comparing Methods for Appending and Inserting with JavaScript — To the current page’s DOM, in particular.

Eric Markfield

Three New Next.js Features and How to Use Them — AWS Amplify recently added support for incremental static regeneration (ISR) as well as optional catch-all routes and image optimization. This guide walks you through how to use it all.

Ali Spittel

Faster React Apps with Memoization — You have a sluggish React web app on your hands. How do you fix it? Nick looks at resolving a problem with excessive re-rendering here.

Nick Lanam

Explore JavaScript Dependencies with Lighthouse Treemap — Discover all JavaScript downloaded and used/unused for a site in a handy data visualization with Lighthouse Treemap.

Sia Karamalegos

All-Star Lineup Announced for Cloud Engineering Summit - Save Your Seat — Hear from industry leaders and practitioners from Amazon, Google, Microsoft, Snowflake, Netflix, Docker, Twilio, and more.

Pulumi sponsor

▶  Single Page Application vs Multi Page Application with Rich Harris — A chat with the creator of Svelte.

Web Rush podcast

A JavaScript Developer’s Guide to Browser Cookies

Prateek Surana

How to Implement Search Functionality in a Nuxt App with Algolia InstantSearch

Miracle Onyemna

🛠 Code & Tools

PptxGenJS: Create PowerPoint Presentations with JavaScript — A huge amount of effort appears to have been put into this project with tutorials and demos aplenty. If you need to semi-automate creating slidedecks, it’s well worth a look. GitHub repo.

Brent Ely

melonJS 9.1.0: A Lightweight JavaScript and HTML5 Game Engine — It’s ten years old but still seeing releases. Here’s a look at how to build a platformer or a typing game with it.

melonJS Team

Threads.js 1.7: Web Workers Meet Worker Threads — A library that provides an abstraction over both Web Workers and worker threads (as implemented in Node) to keep code consistent across Node, browser, and Electron. GitHub repo.

Andy Wermke

Deliver Cleaner and Safer JavaScript Code - Right in Your IDE

SonarLint sponsor

DOCX 7.1: A Declarative API to Generate .docx Files — .docx files are perhaps more commonly known as modern Microsoft Word documents. This library works on both Node and the browser and there’s a live CodePen demo here, plus a folder of code examples. — GitHub repo.

Dolan

construct-js: A Library for Creating Byte Level Data Structures — If you ever need to get down to the level of manipulating bits and bytes to build things, you might find this example of creating a .zip file directly in Node compelling.

Frank Stokes

RacketScript: An Experimental Racket to JS Compiler — Racket is a Scheme/Lisp inspired language. You can give it a try in this online playground.

RacketScript

actions/github-script: Write Workflows Scripting the GitHub API in JavaScript

GitHub Actions

linq.js 4.0: A LINQ Implementation for JavaScript

Mihai Ciuraru