---
title: "Gatsby 4 released"
publication: "JavaScript Weekly"
issue: 561
published_at: "2021-10-22"
canonical_url: "https://javascriptweekly.com/issues/561"
---

Plus Node v17, a PDF Vuer, and a Nintendo 64 emulator. |        

#​561 — October 22, 2021 

[Unsubscribe](https://javascriptweekly.com/leave/*|UID|*)|[Read on the Web](https://javascriptweekly.com/issues/561)   

JavaScript Weekly 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/i9q2rrki9vfthgrleh5o.jpg)](https://www.gatsbyjs.com/blog/whats-new-in-gatsby-4/)  

[What’s New in the Now Fully Released Gatsby 4](https://www.gatsbyjs.com/blog/whats-new-in-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](https://nodejs.org/en/blog/release/v17.0.0/) — 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   [![\](https://copm.s3.amazonaws.com/87371a37.png)](https://www.courier.com/gmail?utm_campaign=newsletters&utm_source=javascript-weekly&utm_medium=gmail) 

[No DKIM, No SPF, No WTF. Transactional Emails Sent via Gmail](https://www.courier.com/gmail?utm_campaign=newsletters&utm_source=javascript-weekly&utm_medium=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](https://github.com/trekhleb/javascript-algorithms) — 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](https://beta.reactjs.org/) gives a first look at a new approach for the official React docs. Check out the [Quick Start tutorial](https://beta.reactjs.org/learn) page to really see it in action.
- Chrome 95 has been released this week and [here's what's new for developers.](https://developer.chrome.com/blog/new-in-chrome-95/)
- On the latest episode of his bite size Q&A podcast, Kent C Dodds talks about [▶️ why he uses XState](https://kentcdodds.com/calls/01/29/why-x-state) (the [state machine library](https://xstate.js.org/)) on his site.
- ⚛️ If you're a React developer, make sure you're also on our [React Status newsletter](https://react.statuscode.com/) as that's where we put the lion's share of React items we find each week :-)
- [Playwright 1.16](https://github.com/microsoft/playwright/releases/tag/v1.16.0) – the Node library to automate browsers – has been released including a new [API testing feature.](https://playwright.dev/docs/next/api/class-apirequestcontext/)
- The Angular team has published [an RFC for an architectural shift within the framework](https://github.com/angular/angular/discussions/43784) with the goal to make Angular simpler to use, and more modular.   

**RELEASES:** 

[Neutralinojs 3.0](https://github.com/neutralinojs/neutralinojs/releases/tag/v3.0.0) – X-platform app dev framework. Lighter than Electron.
 [React Bootstrap 2.0](https://github.com/react-bootstrap/react-bootstrap) – Bootstrap components built with React.
 [Commander.js 8.3.0](https://github.com/tj/commander.js/releases/tag/v8.3.0) – CLI niceties for Node.js.
 [noVNC 1.3.0](https://github.com/novnc/noVNC) – JS and HTML-based VNC client for browsers.
 [React Native Testing Library 8.0](https://github.com/callstack/react-native-testing-library)
 [Node-RED 2.1.1](https://github.com/node-red/node-red) – Low-code JS dev environment.    

💻 Jobs  

[[EU\] JavaScript Developer, Preferably with React Knowledge](https://jobs.smartrecruiters.com/lmgroup/743999721557406-javascript-developer) — New hires get a "buddy" who will guide you through the company, code and the process. Newest technologies, development possibilities and satisfaction :) 
LastMinute.com   

[JavaScript Developer at X-Team (Remote)](https://x-team.com/remote-javascript-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=cooperpress-js&utm_content=js) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more. 
X-Team   

[Find JavaScript Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-javascriptweekly%29&utm_content=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. 
Hired    

📖 Tutorials, Opinions & Stories 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/hp7aee1vpgeonor0pakk.jpg)](https://www.youtube.com/watch?v=PBrEq9Wd6_U)  

▶[Implementing a 'Candy Crush' Game with React](https://www.youtube.com/watch?v=PBrEq9Wd6_U) — 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](https://www.taniarascia.com/understanding-map-and-set-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](https://www.influxdata.com/blog/getting-started-with-javascript-and-influxdb-2-0/?utm_source=vendor&utm_medium=referral&utm_campaign=2021-10-22_spnsr-nl_javascript-and-influxdb_global&utm_content=javascriptweekly) — Monitor your JavaScript application performance and create beautiful web-based visualizations with InfluxDB. 

InfluxData sponsor   

[How to Cancel an HTTP Request in Node.js](https://simonplend.com/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](https://www.sitepoint.com/create-linear-gauge-chart-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](https://www.youtube.com/watch?v=ARNN_zmrwcw) — Congratulations to James for just earning his 100K YouTube Play button. 

James Q Quick   

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,e_tint/r6aokri6vzclaq2yks4k.jpg)](https://markodenic.com/use-console-log-like-a-pro/)  

[Use `console.log()` Like a Pro](https://markodenic.com/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](https://shortcut.com/?utm_source=cooperJSWeekly&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=kanbanbrief) 

Shortcut (formerly Clubhouse.io) sponsor   

[Six Tips To Make Your Pull Requests Easier to Review](https://www.chakshunyu.com/blog/6-concrete-tips-that-will-make-your-react-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](https://spacejelly.dev/posts/how-to-create-css-custom-properties-that-dynamically-update-with-react-javascript/) 
Colby Fayock   

[Building an API with Gatsby Functions](https://www.smashingmagazine.com/2021/10/building-api-gatsby-functions/) 
Paul Scanlon  

🛠 Code & Tools 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/a7zrqmwh7x63bmidzkjc.jpg)](https://github.com/KilledByAPixel/LittleJS)  

[LittleJS: A Tiny 2D JavaScript Game Engine with Fast WebGL Rendering](https://github.com/KilledByAPixel/LittleJS) — 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](https://github.com/alexreardon/memoize-one/releases/tag/v6.0.0) — 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](https://chord-symbol.netlify.app/) — 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.](https://github.com/no-chris/chord-symbol) 

Christophe Noël   

[Tried. Tested. Trusted. Studio 3T - Power Tools for MongoDB](https://studio3t.com/download?utm_source=newsletter&utm_medium=jsweekly&utm_campaign=oct22) — 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](https://github.com/vsls-contrib/gistpad) — 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.](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs) 

VS Live Share Contrib   

[JavaScript Obfuscator: A Way to 'Scramble' JS Code](https://github.com/javascript-obfuscator/javascript-obfuscator) — 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](https://obfuscator.io/) if you want to have a go. 

Timofey Kachalov, Tiago Serafim, et al.   

[OpenSilver 1.0: A Modern, Plugin-Free Reimplementation of Silverlight](https://www.opensilver.net/) — 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](https://github.com/arkokoley/pdfvuer) 
Gaurav Koley   

[Hyperactiv 0.9: A Super Tiny Reactive Library](https://github.com/elbywan/hyperactiv) 
Julien Elbaz   

[Dust.js 3.0: Asynchronous JS Templating for Browser and Server](https://github.com/linkedin/dustjs) 
LinkedIn   

[reveal-md: Create Reveal.js Presentations from Markdown Files](https://github.com/webpro/reveal-md) 
Lars Kappert   

[Cacheables: Simple In-Memory Cache with Automatic Invalidation and Elegant Syntax](https://github.com/grischaerbe/cacheables) 
Grischa Erbe  

🤓 And one for fun.. 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/lmad9vxo0hdprh43atyi.jpg)](https://tixy.land/)  

[(t,i,x,y) => 'creative code golfing'](https://tixy.land/) — 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         

Published by [Cooperpress](https://cooperpress.com/) and edited by [Peter Cooper](https://twitter.com/peterc) 

'JavaScript' is a trademark of Oracle Corporation in the US
We are not endorsed by or affiliated with Oracle. 

[Change your email address](https://javascriptweekly.com/edit_subscription/*|UID|*) or [stop getting this newsletter](https://javascriptweekly.com/leave/*|UID|*). 

© Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom