Industry News

#​538 — May 14, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

Angular 12 Released — Angular is surely turning out to be one of Google’s most reliable projects and while v12 isn’t exactly a revolution, it’s a strong step down the full transition to Ivy, Angular’s next generation compilation and rendering pipeline.

Mark Techson

'Babel Is Used by Millions, So Why Are We Running Out of Money?' — If you spend much time on Twitter, you may have seen this story take off in a big way after the original creator of Babel (and now Rome) tweeted a (now deleted) thread questioning Babel's use of funds (there was tons of discussion about it on Hacker News, too). Regardless, Babel is a fundamental JavaScript project, its team does a lot of great work, and it's worth supporting — we've just donated.

Babel Core Team

How to Pay Down Tech Debt in JavaScript Apps — In today’s fast-paced development world, teams are under pressure to release quickly but that introduces more bugs and tech debt. Discover how leading web teams pay down tech debt to speed innovation and deliver stable apps to users. Watch the webinar.

Bugsnag sponsor

Deno 1.10 Released — A nice evolutionary bump for Deno this week with, I feel, the most interesting feature being Web Storage API support. Yes, it's localStorage and sessionStorage but server-side and working much like they do in the browser.. There are big improvements to the testing tools, too. And if you're still unsure about Deno, maybe Minna Niemi's practical 20-minute video will sell you on it.

The Deno Team

Announcing TypeScript 4.3 Release Candidate — I recently saw someone opine that frequent releases and improvements correlate to a project's long term success, and if that’s true, TypeScript is doing great 😄 There's a list of tweaks and improvements as long as a K-Mart receipt including import statement completions and template string type improvements.

Daniel Rosenwasser (Microsoft)

Quick Bits

• 
  Azure Static Web Apps, Azure's system for building and hosting statically generated sites, is now generally available.


• It's not exactly JavaScript, but WebAssembly Cloud is an interesting single page experiment for letting you play with WebAssembly directly in the browser using Rust.


• Google Docs is planning to switch from HTML-based rendering to Canvas-based rendering. It's an interesting development and has many worrying about the accessibility implications. Google offers a demo document if you want to see it in action.

Releases

Docusaurus 2 Beta — Elegant documentation site generator.

Cypress 7.3.0 — Popular testing system.

postcss-loader 4.3.0 — PostCSS loader for webpack.

react-bootstrap 1.6.0 — Bootstrap components for React.

📖 Articles, Opinions & Tutorials

Lessons on Writing JavaScript and React from ClojureScript — ClojureScript is essentially a Clojure (the Lisp dialect and functional language) to JavaScript compiler and going down the functional path often leads developers to various epiphanies. Ryan is keen to share his experience.

Ryan Jerue

Performance-Testing the Google I/O Site — Another solid performance review from Jake here, this time looking at how the Google I/O site fares on a 3G mobile connection. (Spoiler: It’s rather slow)

Jake Archibald

[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

Why JWT Should Not Be Your Default for Sessions — “My point in all this is not to discourage the use of JWT in general, but be deliberate and careful when you do. Be aware of both the security and functionality trade-offs and pitfalls.”

Evert Pot

Migrating From Parcel to Snowpack – A Build Tool Comparison

Ben Frain

Why I Finally Chose React Over Vue

Bill Wohlers

How to Use the Vibration API on Your Site

Bibek Kakati

mo.js 1: A Motion Graphics Toolbelt for the Web — We first linked to this six years ago but it only recently hit a 1.0 release. It offers a declarative API and gives you full control over animations. There are several tutorials on offer if you want to see how it works.

Oleg Solomka, Xavier Foucrier, Jonas Sandstedt

Elder.js: An 'SEO-First' Svelte-Based Framework — An opinionated static site generator designed for building SEO-friendly sites at scale. We featured this last year, but it’s under active development and has had another push lately. GitHub repo.

Elder.js Team

An Angular Data Grid That Makes Life Easy Does Exist. Give It a Try

Kendo UI for Angular sponsor

Prettier 2.3: The Opinionated Code Formatter — Not a huge release but a notable milestone is official support for formatting HTML templates written with Handlebars.

Georgii Dolzhykov

Spearmint: A Simpler Way to Test Your React App — “In short, this tool generates executable JavaScript test-code based on custom data input from the developer.”

spearmint.js team

Free Chat & Activity Feed APIs for Qualifying Teams — The Stream Maker Account provides qualifying teams with full and free access to Stream's Chat and Activity Feed APIs, making them accessible to side projects and new startups. No credit card is required.

Stream sponsor

Eva.js: A Front-End Game Engine for Creating Interactive Projects — Includes components that are ready to use out-of-the-box and it uses PixiJS for performant WebGL rendering. Try it in this live playground. GitHub repo.

EVA

htmr 1.0: HTML String to React Element Conversion Library

Fatih Kalifa

📷  Vision Camera 2.0: A Powerful Camera for React Native Apps

Cuvent Technologies UG

Vuetify 2.5: A Material Design Framework for Vue.js

Vuetify

⚛️ React developer? Check out the latest issue of React Status, our sibling newsletter about all things relating to React from tutorials and screencasts to news and releases. While we do include some React items in JavaScript Weekly, we save most of it for there.
Check out React Status today.

#​537 — May 7, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

How GitHub Uses and Works with Web Components — GitHub has long been a proponent of Web Components with over 17 open-source components available for all to use. Here’s their story of why they use them and how they build them.

Kristján Oddsson

zx: A Tool for Writing Better Shell Scripts — Tired of turning to bash, Python or Ruby to throw together a quick script? Stick with the JavaScript you know and love – this makes it easier with some handy functions for calling other programs, processing their output and results, changing directory, etc.

Google

Document Database. SQL Queries. In-Memory Speed — The No. 1 reason developers choose Couchbase? You can use your existing SQL skills to easily query and access JSON. That’s more power and flexibility with less training. Learn more.

Couchbase sponsor

AWS Introduces 'CloudFront Functions' — Think (very) short running JavaScript functions right within Amazon CloudFront designed to rewrite, redirect, or otherwise work with incoming requests.

Amazon Web Services

Bootstrap 5 Released — A big release for the popular CSS framework with numerous JavaScript changes under the hood too, such as no more jQuery(!) and an upgrade to Popper 2.

Mark Otto

Quick Bits

• 
  SpiderMonkey is Mozilla's long standing JavaScript engine as used in Firefox and other projects. It now has an all new homepage and.. drum roll.. a logo for the first time ever.








• Ben Beattie-Hood has released Modern TypeScript, an e-book aiming to raise money for the Australian Red Cross. This 18 minute video covers what's in the book.



• 
  V8 9.1 is on the way. It's one of the less feature packed releases but adds top level await by default (already the case in some users of V8, such as Blink), private brands check syntax by default, and some perf improvements.


• Up and coming toolchain Rome has formed a company, raised some money, hired folks.



• A look at what's new in RxJS 7, the reactive extensions for JavaScript.

Releases

node-dev 7.0 — Zero-conf Node.js reloading.

Mocha 8.4 — JavaScript test framework.

vue-test-utils 1.2.0 — Utilities for testing Vue components.

Gatsby 3.4 — React based app framework.

Node.js 16.1.0

📖 Articles, Opinions & Tutorials

Dependency Managers Don’t Manage Your Dependencies — Christoph Nakazawa has kicked off a new series on JavaScript infrastructure by putting the role of tools like npm, Yarn, or pnpm into context and explaining how you can begin to ‘take ownership’ of your dependencies.

Christoph Nakazawa

Hosting SQLite Databases on GitHub Pages (or Any Static File Host) — A clever bit of hacking around here. sql.js provides an SQLite client in the browser but the author wrote a virtual file system addition to fetch chunks of remotely hosted SQLite databases over HTTP. Some interesting potential here, I think.

Phiresky

▶  A Comparison of Five React Frameworks — In just 26-minutes, this video provides most of the information required to pick the right React framework from five top players in the space: CRA, Gatsby, Next.js, Blitz, and Redwood.

Leigh Halliday

Search Your Code. ALL of it, everywhere — Sourcegraph is the one tool to find & fix things across all your code. Any code host, any repo, any language. Try it now.

Sourcegraph sponsor

TypeScript Function Syntaxes — The syntax for various functions and function types in TypeScript with simple examples.

Kent C Dodds

Update URL Query Parameters As You Type in an Input Field — For when you want to change the current URL’s query parameters as you type in an input field (such as on a live search page).

Amit Merchant

Create a Satellite Tracker in 30 Lines of JavaScript — Unsurprisingly this is heavy on the dependencies, but neat.

Omar Shehata

▶  A Talk About the TC39 Decimal Proposal — From Web Engines Hackfest 2021.

Caio Lima

Cloning JavaScript Objects with Graph Theory

Andrea Simone Costa

Top Ten git Tips and Tricks

Julie Kent

How We Sped Up Chrome DevTools Stack Traces by 10x

Chrome Developers

Mantine: A New React Component Library — An MIT licensed, TypeScript-based collection of around 60 components and hooks with native dark theme support and a focus on usability and accessibility. Plenty of documentation and examples - we like it. Oh, and they work with Preact too.

Mantine Team

Pts: A Library for Visualization and Creative Coding — An impressive, lightweight and modular library, written in TypeScript and compiled to ES6. Plenty of demos to play around with. p5.js is a similar long standing tool in this space.

William Ngan

Limited-Time Sale: 25% off Wallaby.js and 50% off Quokka.js — Breakpoints and console.log is the past, real-time feedback without leaving your editor is the future.

Wallaby.js sponsor

Spotlight: A Lightbox Gallery Library — We first linked to this two years ago when it was new, now it’s more mature and boasts as being the ‘most easy to integrate’ lightbox gallery with no dependencies either. Demos here.

Nextapps GmbH

Useful Tools for Parsing and Annotating PDFs in Node — Nothing beats an article by someone who’s just had to do the thing being covered.

Jing Fan

Fx: A Command-Line JSON Processing Tool — If you’ve got some files full of JSON that you want to process, Fx will slice and dice it however you want, including using JavaScript one-liners to add a bit of logic to the process.

Anton Medvedev

Build, Deploy, and Update Applications Fast—All on the Cloud

OutSystems sponsor

Hammer: An esbuild-Powered Build Tool for HTML Applications — The idea is to a TypeScript-centric “ultra lightweight alternative to Parcel.”

Haydn Paterson

node-wasm-run: Run Arbitrary WASM/WASI Files on V8

Wasm3 Labs

Observable Plot: A Library for Exploratory Data Visualization — GitHub repo.

Observable

😂 A fun one.. or is it?

Think about what Math.min() and Math.max() might each return, then test it out.. or cheat and look at this tweet 😏

#​536 — April 30, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

Babel 7.14.0 Released — Here's what's new with everyone's favorite JavaScript compiler/transpiler:

• 
  Class fields and private methods enabled by default.


• 
  async do expression support (currently stage 1).


• 
  importInterop: node setting to produce dual modules (ESM and CommonJS).

Babel Team

▶  What's Next? The Future of Node.js — A 27-minute session by Red Hat and IBM’s Joe Sepi, Michael Dawson and Bethany Griggs on tracking what’s coming up in the Node world, Node’s future (though Beth reminds us “there is no roadmap”) and how you can get involved if you so wish.

NearForm

ButterCMS Melts into Your React App. #1 Rated Headless CMS — ButterCMS is the #1 rated Headless CMS for React. Enable your marketing team to manage content w/ our easy to use dashboard. Fast content API for modern apps. Secure. Scalable. Less Code. Try free today for 30 days.

ButterCMS sponsor

Redux 4.1 Released — It’s not a huge release for the popular state container but the bundle size is down almost 40% and error messages are improved. You may also be intrigued in the first 1.6.0 alpha of Redux Toolkit which integrates RTK Query, a data fetching and caching library built for Redux.

Mark Erikson

Quick Bits

• Slashdata, a UK based developer research firm, says JavaScript is the most popular programming language with an estimated 12.4 million developers. So.. as a JavaScript Weekly reader, you are in the 1.4% 😄
  


• 
  Vue 3 dropped IE 11 support, so is Preact and Angular too. Bye IE 11 - at 7½ years old, it's about time.


• It's still early days but the HTML Sanitizer API is a proposed API for sanitizing untrusted strings of HTML client side.


• Guy Bedford was on the ▶️ TC39er podcast, a show that interviews folks associated with TC39.

Releases

RxJS 7.0 — Reactive extensions for JavaScript.

Next.js 10.2 — The React framework.

Strapi 3.6 — Headless CMS, now with i18n.

Replay 3.0 — React video player component.

neo.mjs 2.0 — WebWorker-driven UI framework.

Chart.js 3.2 — HTML5 charting library.

📖 Articles, Opinions & Tutorials

The Lazy-Loading Property Pattern in JavaScript — Deferring computationally expensive operations until needed is (nearly) always a win. Plus, it’s always a pleasure to see one of the longest standing names in the JavaScript space blogging.

Nicholas C. Zakas

Building Portable Apps with Go(lang) and Next.js — It’s not often we get to see Go and JavaScript come together, but the idea here is that you can use Go’s new static embedding functionality to build a self-contained Go app that serves a Next-powered app all in one.

David Stotijn

How to Securely Implement OAuth in Vue.js- Up and Running in < 1 Hour — In this tutorial, you'll learn how to use an OAuth server (FusionAuth) to securely authenticate and authorize users.

FusionAuth sponsor

How to Use ECMAScript Modules in Node — Even the Node docs note that ES modules are the ‘official standard format’ for packaging and reusing JavaScript code, and with more developers switching from CommonJS to ESM, it’s time to look at what’s involved.

Dmitri Pavlutin

Using Asynchronous Web APIs from WebAssembly — Learn how to invoke asynchronous web APIs when compiling traditionally synchronous languages to WebAssembly.

Ingvar Stepanyan

A webpack Tutorial for Beginners: A Step-by-Step Guide — If you’ve tried other bundler options but haven’t looked into webpack (maybe because of the bigger learning curve), this introductory tutorial might be a good starting point.

Louis Lazaris

Techniques for Modeling Permissions as Types in Typescript — TypeScript makes it easy to eliminate potential sources of error. Here’s how a developer has been doing this with permissions checking.

Drew Colthorp

↑ And if you like this sort of thing, Really Advanced TypeScript Types from Rick Weber at Tableau might also be up your street. :-)

▶  Building a Realtime Chat App with React, Node.js, and Socket.io — The end result looks a lot like Facebook Messenger.

Lama Dev

From JavaScript to Paper: A Linocut Adventure — Few articles combine JavaScript with ‘murderous little knives’ but Monica delivers with this fun look at how she uses code to create art (which you can buy).

Monica Dinculescu

Observability Won’t Replace Monitoring (Because It Shouldn’t)

Lightstep sponsor

You Can Label a JavaScript if Statement — Labels are a longstanding JS feature that tend to be forgotten (for good reason) and even the author says “you can lead a very fulfilling career without ever knowing that this exists.” Nonetheless..

Alex Riviere

21 Best Practices for a Clean React Project — Specific techniques, each illustrated with a code snippet, all intended to improve the quality of your code.

Mohammad Faisal

Detecting Multiple Key Keyboard Shortcuts from JavaScript — There are libraries for doing this too, such as GitHub’s own hotkey.

Amit Merchant

Voice-Enabling an Angular App with Wake Words — Using the Web Speech API.

David Bartle

QuickSnippets: Categorized Code Snippets Sourced from Tweets — Nicely laid out, searchable, and categorized for easy filtering. Note that the snippets are generally in images, so not very accessible, but it’s a nice selection.

QuickSnippets

Scribbletune 4.0: Use Strings and Arrays to Create Rhythms and Musical Patterns — Then export your creations as MIDI files.

Scribbletune

Book a Demo. Ship Fast. Rest Easy. LaunchDarkly — Testing in production? It's scary until it's not. Control your code. Ship fast. Reduce risk. Reclaim your life.

LaunchDarkly sponsor

js-tokens 7.0: A Tiny JavaScript Tokenizer — A regex powered ‘almost spec-compliant’ JS tokenizer.

Simon Lydell

Slide Element: Async Functions for Hiding and Showing Elements — GitHub repo.

Alex MacArthur

Compodoc: The Missing Documentation Tool for Your Angular App

Vincent Ogloblinsky

#​535 — April 23, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

Starting a TypeScript Project in 2021 — A practical no-fluff guide to getting a TypeScript project started including (optionally) esbuild for bundling, linting, testing with Jest, publishing an npm package, and more.

Chris Hager

Node.js 16 Released — 16 immediately replaces 15.x as the 'current' release line with 16 due to become a LTS release in October 2021 (whereupon it will be codenamed 'Gallium'.) v16 now includes V8 9.0, has fat binaries for Apple silicon users, npm 7.10.0, Atomics.waitAsync, and more.

Bethany Griggs

ButterCMS Melts into Your React App. #1 Rated Headless CMS — ButterCMS is the #1 rated Headless CMS for React. Enable your marketing team to update website content w/ our easy to use dashboard. Fast content API for modern apps. Secure. Scalable. Less Code. Try free today for 30 days.

ButterCMS sponsor

Web Performance Recipes with Puppeteer — A highly useful, no-nonsense set of examples of using Puppeteer from Node to calculate and extract numerous forms of Web performance stats (e.g. first paint and first contentful paint), as well as emulate slow networks and CPUs.

Addy Osmani

Quick Bits

• 
  Firefox 88, released this week, adds support for JavaScript embedded in PDF forms. (I'm keen to see an article about this..)


• There's a new curated list of JavaScript tooling not written in JavaScript. Think esbuild and swc, etc.



• Curious how many people copy and paste code from Stack Overflow answers? Now we know.
  



• 📖 The GraphQL Guide is a new book by John Resig (yes, he of jQuery fame) and Loren Sands-Ramshaw.

Releases

Grunt 1.4 — Task runner.

Strapi 3.6.0 — Headless Node.js CMS.

eslint-plugin-unicorn — Sindre Sorhus's 'awesome ESLint rules.'

Grid.js 4.0 — Agnostic table control.

Ember 3.26 — The battle-tested framework.

📖 Articles, Opinions & Tutorials

How Josh Comeau Builds His Blog — He might not like this description but I think Josh has become a bit of a superstar in the frontend space recently with things like his guide to CSS transitions, styled-components best practices and JavaScript operator guide. Here he gives a fantastic look behind the scenes of how his blog works and all the technologies brought together.

Josh W Comeau

Solving a Mystery Behavior of parseInt() — parseInt(0.0000005) returns 5 because.. of course it does 😆 Dmitri digs into this quirk and poses a question of his own for you to think about.

Dmitri Pavlutin

Breakpoints and console.log Is the Past, Time Travel Is the Future — 15x faster JavaScript debugging than with breakpoints and console.log.

Wallaby.js sponsor

How to Convert HTML to an Image with Puppeteer from Node — Could be useful for auto generating images for use on social media, say.

Ryan Glover

Debugging JavaScript Efficiently with Chrome DevTools — An introductory tutorial for anyone getting tired of all the console.logs.

Victoria Lo

Five Key Lessons React Tutorials Don't Teach — The author enumerates and explains the important concepts which he feels receive short shrift from many React tutorials.

Reed Barger

Book a Demo. Ship Fast. Rest Easy. LaunchDarkly

LaunchDarkly sponsor

How to Streamline Angular Reactivity — How to observe RxJS streams and keep the reactivity intact in your components and directives with ng-observe.

Levent Arman Özak

A Complete Guide To Incremental Static Regeneration (ISR) with Next.js

Lee Robinson

Styled Components Best Practices for React Developers

Robin Wieruch

Voice-Enabling an Angular App with Wake Words — Using the Web Speech API..

David Bartle

Sucrase: A Super-Fast Babel Alternative — It’s not exactly a Babel replacement as it covers a subset of what Babel does, but this is yet another ‘fast JS tool not written in JS’ that boasts being 20x faster than Babel at compiling Jest. We first mentioned it three years ago but it’s come a long way since then. GitHub repo.

Sucrase Contributors

Prisma ORM Toolkit Now 'Ready For Production' — Prisma is already a pretty popular ORM approach so this may be surprising news, but after two years of development they’re keen to show off everything Prisma can do and where the project is headed.

Nikolas Burk

Pulumi Infrastructure as Code: Any Cloud, Familiar Languages — Provision cloud infrastructure using JavaScript and use constructs you already know - code completion, for loops, and more.

Pulumi sponsor

WinBox: An HTML5 'Window Manager' for the Web — Very thoroughly documented and works pretty well, but feels a bit like Web-based UI experiments of 10+ years ago..? Interesting though and some nice demos to play with here. GitHub repo.

WinBox

Volta 1.0.4: The JavaScript Tool Installer and Launcher — 1.0.4 will automatically fetch the native Apple silicon version of Node for versions where it is available (Node 16+).

Volta Contributors

Inkline: A Customizable Vue.js UI/UX Library — Includes 50+ components designed for mobile-first apps with out-of-the-box accessibility support via WAI-ARIA.

Alex Grozav

js-image-carver: Content-Aware Image Resizer and Object Remover — A fun demo on this one. GitHub repo.

Oleksii Trekhleb

Compodoc: The Missing Documentation Tool for Your Angular App

Vincent Ogloblinsky