#550 — August 6, 2021 |
JavaScript Weekly |
 |
| Kid Pix as a JavaScript App — Kid Pix was a drawing program for children released on the Mac in 1989 (here’s a full story about it, if you hadn’t heard of it before). Here’s a JavaScript reimplementation. It saves your work if you go away, and the source is pretty neat. JS Kid Pix |
| How To Build Resilient JavaScript UIs — An exploration of how graceful degradation, defensive coding, observability, and a healthy attitude towards failures puts you in a better position as a JavaScript developer. Callum Hart |
 We're Giving Away Free T-Shirts. Just Download FusionAuth — FusionAuth provides authentication, authorization, and user management for any app: deploy anywhere, integrate with anything, in minutes. It's always free for unlimited users (no CC required). Download and Install today and we'll send you a t-shirt. FusionAuth sponsor |
| Wikimedia Selects Vue.js As Its New Frontend Framework — This process began years ago (we even covered it at the time) but finally the folks behind Wikipedia have made an announcement concerning the future of their JavaScript oriented development and it’s a win for Vue.js. Wikimedia Foundation |
| QUICK BITS:
|
| RELEASES: Bootstrap 5.1.0 – Responsive site creation toolkit. |
|
📖 Articles, Opinions & Tutorials |
 |
| How MDN’s Autocomplete Search Works — Autocomplete search was recently added to the excellent MDN Web Docs. Here’s a look at how the feature was implemented. Peter Bengtsson (Mozilla) |
| How to Use Dmitri Pavlutin |
| Angular Data Grids Don’t Need to Be Hard. Check This One Out — Be ready for your next data grid project by learning about the one that has already been built for you. Kendo UI for Angular sponsor |
| 40+ Node.js Integration Test Best Practices — Component and integration tests are increasingly popular testing techniques for backends. This repository digs into a variety of quick-fire patterns and practices for creating good component tests. There’s also a demo app and examples using Jest, Mocha, Express, Fastify and Nest.js. Yoni Goldberg, Michael Solomon, and Daniel Gluskin |
| ▶ NestJS Explained in 100 Seconds — The high-level concepts of Nest, a framework for building scalable Node.js applications that offers more beyond what you might get with something like Express or Fastify alone, presented in around two minutes. Fireship |
 |
| Rendering Magical Marbles with Three.js — These sorts of 3D graphics tricks are a bit over my head, but it’s neat to see how they’re done. Matt Rossman |
| Optional Chaining: The Marius Schulz |
| Auth Without Complexity — Here is a much simpler way to build authentication and access control, with examples for React, Vue, Node.js & more. Userfront sponsor |
| How We Reduced Next.js Page Size by 3.5x and Achieved a 98 Lighthouse Score |
| How to Use |
| (Why and How to) Visit the Blank Page Between Cypress Tests |
| Automating Accessibility Testing with Storybook |
🛠 Code & Tools
 |
| Meyda: A JavaScript Audio Feature Extraction Library — The homepage has quite a visually striking demo. It supports both offline feature extraction as well as real-time feature extraction using the Web Audio API. Rawlinson, Segal, Fiala, Wray, et al. |
| txiki.js: A Small and Powerful JavaScript Runtime — Stands on the shoulders of QuickJS and libuv. Saúl Ibarra Corretgé |
| XRegExp 5.1: Extended JavaScript Regular Expressions — This is for you if you want to ‘spice up’ normal regular expressions beyond what browsers support natively – see the examples. Steven Levithan |
| Tesseract.js 2.1.5: Pure JavaScript OCR for 100+ Languages — A pure JavaScript port of the popular C++ Tesseract library commonly used for visual text recognition purposes. Tesseract Team |
| React Hot Toast 2.0 — React Hot Toast is a popular React on-page notifications system. Although the opportunity to customize the notifications in the new release chips away at the original ‘toast’ metaphor, there’s a lot of configurability in the new version that will prove valuable for many. It also has better accessability and a custom renderer. GitHub repo. Timo Lins |
| Why You Need Error Grouping - How to Minimize Noise, Pinpoint the Right Errors, and Debug Better Rollbar sponsorwhitepaper |
| React Joyride: Create Guided Tours in Your Apps — Uses react-floater to position and style floating ‘tour guide’ elements. Want a demo? Of course you do. Gil Barbara |
| AutoMapper 5.0: An Object-Object AutoMapper for TypeScript — GitHub repo. Chau Tran |
| ts-audio 0.6.0: Work with AudioContext More Easily — Here’s a demo. Evandro Leopoldino Gonçalves |