#522 — January 22, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

The JavaScript 'Rising Stars' of 2020— Fingers crossed this is our final ‘look back’ at 2020, but the ‘Best of JS Rising Stars’ roundup comes out at the start of each year and shows off the fastest growing JavaScript tools and projects over the past year based on GitHub stars (which, yes, is by no means a definitive metric). Stand out projects include Deno, Playwright, esbuild, and Rome, all of which we expect to see great things of in 2021.

Michael Rambeau and Benjamin Blackwood

EStimator.dev: The Modern JavaScript Savings Calculator— Enter a URL and this tool will tell you how much faster the site could be if the code was switched over (or compiled) to modern JavaScript. Read about it here.

Google Chrome Labs

Spreadsheet Viewer: Render XLSX Files In the Browser— Spreadsheet Viewer is a client-side component that allows users to preview XLSX file without the need of opening it in an external app. It is mobile-friendly, and supports all major frameworks such as React, Angular, and Vue. Check out the live demo.

Handsontable sponsor

JerryScript: A Ultra-Lightweight JS Engine for the Internet of Things— If you’ve got a constrained environment (e.g. a microcontroller, a watch, or the like) with only kilobytes of RAM to hand, this is the sort of thing you might want to try. It’s ES 5.1 compliant and, as of this week, supports realms, BigInt, class fields, flatMap, and more.

JerryScript

How I Build JavaScript Apps in 2021— A freelance developer shares his development approach from avoiding build processes and transpiling, to testing and re-using his own work.

Tim Daubenschütz

Quick Bits

• The Node.js team have opened up their 2021 user survey and want you to take it. Don't forget to name drop us in question 59 😄
• Dr. Axel Rauschmayer is working on a ES2021 edition of his JavaScript for Impatient Programmers book and you can stay up to date on it via this list.
• GitHub has made it easier to rename existing branches in repos– such as if you want to change master to main.
• A look at Google's progress on migrating Puppeteer to TypeScript.
• The ▶️ latest episode of the TC39er podcast features Ujjwal Sharma, a compiler hacker and Node.js and V8 contributor.

📖 Articles, Opinion & Tutorials

Some Language-Agnostic Guidelines on Naming Variables— JavaScript is used although the basic principles can be applied to most languages.

Artem Zakharchenko

13 JavaScript One-Liners That’ll Make You Look Like a Pro— I think the title oversells it a little, but nonetheless, you might pick up a tip or two from these well presented examples.

Twan Mulder

Running Rust in WebAssembly in a Pool of Concurrent Web Workers in JavaScript— “I would like to share a little experiment I did for no other reason than to show I could.” Fantastic. This sort of thing is only going to become more popular, too. This will be WebAssembly’s decade.

Alessandro Genova

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

Capturing Hacker News Mentions with Node and MongoDB— If you don’t want to read the ‘orange site’ (as it’s often called) but you’d like to know if something gets mentioned there, here’s one option.

Nic Raboy

Async Loops and Why They Fail— Mixing loops with async calls in JavaScript can produce unexpected results. First in a four part series.

Federico Kereki

▶  10 JavaScript Clean Code Examples— Thoughts on ten examples of approaches worth considering if you’re trying to keep your code clean. It’s based on this article by Ibeh Ubachukwu.

Adrian Twarog

Creating Comic Book Speech Bubbles with SVG and JavaScript— Can comic-style speech bubbles be rendered in both an accessible and visually authentic manner? Yes, with a little work.

Paul Spencer

Drawing 2D Metaballs with WebGL2— An in-depth tutorial on how to code 2D visuals using WebGL2 (the newest version of WebGL and supported by most browsers save for Safari. (Hands if you misread this as 'meatballs' at first.. 🤚)

Georgi Nikolov

Learn to Do File Uploads from the Client-Side Without Managing Storage

ImageKit.io sponsor

▶  Tips For Your Next JavaScript Interview— A handful of useful suggestions in an eight-minute video.

Chris Power

Using Dexie.js to Write Slick IndexedDB Code
Andy Haskell

Sortable 1.13.0: Create and Reorder Lists with Drag-and-Drop— Supporting all modern browsers and touch devices, this library handles list-to-list dragging with auto scrolling, CSS animations, multi-drag support, and more. Lots of demos on the homepage. GitHub repo.

SortableJS

Forgo: A Tiny UI Runtime for Modern Web Apps— This is a small library that lets you build apps using JSX, similar to React. But unlike React, the syntax carries over from DOM APIs and JS so it’s easy to learn.

forgojs

Boa v0.11: An Experimental JS Lexer, Parser and Compiler— Written in Rust and led by a TC39 member, Boa aims for full spec compliance. Why would you use this? Maybe you’re interested in the current trend of writing JavaScript tooling in Rust or Go and would like an embeddable JavaScript implementation there..

Jason Williams

Scout APM - Leading Edge Performance Monitoring Starting at $39/Month— Streamline troubleshooting with real-time alerts & tracing logic that ties issues to source code. Try free for 14 days.

Scout APM sponsor

jsPDF 2.3: Client-Side PDF Generation for Everyone— There’s a live, interactive demo here.

James Hall

Focus Rings: A Centralized System for Displaying and Stylizing Focus Indicators— From the Discord team, a React-based solution to render clean and consistent focus ring indicators for keyboard navigation.

Discord

JZZ 1.2.0: A MIDI Library for Node and the Browser— Brings the Web MIDI API to Node so you can send, receive and play MIDI messages from both Node and the browser on Linux, macOS and Windows.

Jazz Soft

@vueuse/sound: A Vue Composable for Playing Sound Effects— A Vue version of the useSound React hook.

Yaël Guilloux

eslint-plugin-vue 7.5.0: Official ESLint Plugin for Vue.js
Vue.js Team

💻 Jobs

Software Engineer, Full-Stack (Fully Remote/US)— Supply chain accounts for ~10% of Global GDP. Join our small team to change how organizations work across the global supply chain.

Isometric Technologies

Find a Job Through Hired— Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

Hired

✅ A Neat Looking Extension

CodeCopy: A Browser Extension That Adds 'Copy to Clipboard' Buttons on Every Code Block— Works with GitHub (including gists), MDN, Stack Overflow (and other Stack Exchange sites), Medium, CSS Tricks, and more.

Zeno Rocha

#523 — January 29, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

TOAST UI Chart 4.0 Released— A MIT licensed chart library equally suited for vanilla JavaScript, Vue or React use cases. It’s responsive, easy to theme, and now dependency free meaning it clocks in at just 67KB gzipped. It now supports live updating of charts across several chart types too. Want demos? Here’s lots of demos and the GitHub repo.

NHN Corp

undefined vs. null Revisited— Most languages include a concept of a ‘non-value’ (often called null or nil) but JavaScript has two in the form of undefined and null. Dr. Axel analyzes their differences and where and why they’re used.

Dr. Axel Rauschmayer

Combining React, GraphQL, NoSQL and Serverless— Connect your React frontend to an automatically generated GraphQL data access API for your NoSQL DBaaS in < 5 minutes. Yep, that’s Apache Cassandra on DataStax Astra: the proven, globally distributed, highly available cloud database. Try our serverless beta. | No credit card, free to 5GB.

DataStax Astra sponsor

Deno 1.7 Released— Node’s younger cousin comes boasting new features and improvements. A big update is that deno compile (which lets you compile complete JavaScript apps to a single executable) is more efficient with support for cross compilation and ~60% reduced compiled size. → Via our Deno newsletter.

Bartek Iwańczuk and Luca Casonato

Cypress vs Selenium vs Playwright vs Puppeteer Speed Comparison— If you’ve got some browser automation to do, particularly around testing, you now have quite a few options, but how do they compare in terms of speed? Spoiler: Playwright comes out of it looking good.

Giovanni Rago (Checkly)

10 Bad TypeScript Habits to Break This Year— Unsurprisingly, given the title, this is very opinionated.

Daniel Bartholomae

Quick Bits

• A quick round up of features coming to ES2021– we'll be doing a bigger feature on this soon.
• WebRTC is now a W3C and IETF standard.
• A month-by-month look back at what happened in 2020 with the Deno project.
• Node 15.7.0 has been released.
• JavaScript benchmark results on the latest Android phones are embarrassing compared to iOS devices, says the creator of Ruby on Rails.

💻 Jobs

JavaScript Developer at X-Team (Remote)— Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Find Your Next Job Through Hired— Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

Hired

📖 Articles, Opinion & Tutorials

A Walkthrough of Migrating MaxRozen.com from Gatsby to Next.js— There’s no shortage of “how to use Next.js” or “how to use Gatsby” articles but moving between them is both trickier and less commonly seen.

Max Rozen

Get Started with Modding Factorio using TypeScript— Factorio is a popular factory building game (beware, I’m told it can be a huge timesuck) and it can be modded using Lua. Luckily, you can compile TypeScript to Lua so there are some neat modding opportunities for us. factorio-type-kit helps make it possible.

Christopher Dieringer

Creating Custom RxJS Operators— RxJS is a key part of Angular (though it can be used separately to it too) and it provides a powerful way to work with data using pipelines and operators. So what if you want to create an operator of your own..?

Tane Piper

An Introduction to the Rollup.js Bundler— Rollup is a popular ES module oriented module bundler.

Craig Buckler

A Big List of HTTP Static Server One-Liners— Want to spin up a quick HTTP server locally? There’s a lot of ways to do it and this list is updated on occasion.

William Bowers

The Ultimate Guide to Cardinality for Observability

Lightstep sponsor

Rendering Colorful Twisted Spheres with Three.js— Learn how to deform and color spheres to create an interesting animation with Three.js.

Mario Carrillo

Getting Started with Netlify Functions for Angular— A guide to the first steps of adding serverless functions to an Angular application using Netlify Functions (which itself is built on top of AWS Lambda).

Tara Z. Manicsic (Netlify)

Using fetch with TypeScript
Kent C Dodds

Building a Range Slider with SVGs in Angular
Marcus Revaj

RunJS: A JavaScript 'Scratchpad' Desktop Tool— Write and run JavaScript (or TypeScript!) instantly whether to learn, test, create screencasts or explanatory tweets, or just fiddling around generally. Available for macOS, Windows, and Linux. It’s seen a few releases since we first mentioned it over a year ago.

Luke Haas

react-editor-js: Unofficial Editor.js Component for React— editor.js is a block-based content editor and this makes it easier to use with React. Check out the CodeSandbox demo.

Jungwoo An

Fast and Reliable Feature Management for the Modern Enterprise— Built for Engineering Teams. Easy Implementation. Designed for Enterprise Scale. Try LaunchDarkly for free today.

LaunchDarkly sponsor

Source Map Visualization: Upload and View JavaScript/CSS Source Map Data— You can upload your own source map file or load the example file to see how this works.

Evan Wallace

CKEditor 5 v25.0.0 Released— A very long-standing GPL-licensed (with commercial option) WYSIWYG HTML editor control (demos here) has introduced annotations (for collaborative editing) and improved formatting of large text blocks.

Bartek Biedrzycki and Anna Tomanek

vue-easytable 2.0: A Flexible Vue 2.x Table Component— The site has plenty of examples and it’s easy to get going.v2.0 is a complete rewrite from v1.0. GitHub repo.

vue table 组件

Cheval 2.0: 'Copy to The Clipboard' using JavaScript Without Writing JS— If you want to keep things really simple but offer a “copy to the clipboard” feature on your pages, this takes care of the whole thing once you’ve added some classes to a couple of HTML elements.

Ryan McQuen

post-me: Communicate with Web Workers and Other Windows— A promise-based API for an app and its child workers or windows to expose methods and custom events to each other.

Alessandro Genova

Scout APM - Leading Edge Performance Monitoring Starting at $39/Month— Streamline troubleshooting with real-time alerts & tracing logic that ties issues to source code. Try free for 14 days.

Scout APM sponsor

vue-content-loader 2.0: SVG-based 'Loading Placeholder' Component— A Vue port of Julian Ćwirko’s react-content-loader which is also updated.

Kevin Hazy

#524 — February 5, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

Making GitHub’s New Homepage Fast and Performant— If you’re not logged in, GitHub’s new homepage is essentially a laundry list of GitHub’s features (with screenshots, videos, etc.) coupled with a live updating 3D globe of GitHub activity. This is a lot for a browser to handle at once, so they’ve had to do a lot of work to keep it fast.

Tobias Ahlin (GitHub)

Don't Use Functions As Callbacks Unless They're Designed for It— A clever and nuanced point here. Callbacks can introduce added hidden complexity that can cause seemingly innocent code to break so it pays to be careful.

Jake Archibald

Fast, Reliable Feature Management for the Modern Enterprise— LaunchDarkly is a feature management platform that empowers teams to safely deliver & control software through feature flags. By separating code deployments from feature releases, we enable you to deploy faster, reduce risk, and iterate continuously.

LaunchDarkly sponsor

npm 7 Now Generally Available— It’s been in beta for some time but npm 7 is now ready for the big time. The new features and changes (which are mostly minor) were covered in last year’s presenting npm 7.0.0 post but include workspaces, automatically installing peer dependencies and an improved package lock file format.

Brian Douglas

The V8 v8.9 Branch— The latest branch of the V8 JavaScript engine has been created and will be in beta until Chrome 89’s eventual release. It’s a relatively small update, but top-level await comes to browser use cases and function calls with mismatched argument sizes will get a lot faster.

Ingvar Stepanyan

Quick Bits

• Homebrew 3.0 is out with Apple Silicon support.
• There's a new VS Code release which lets you debug Node.js worker threads and also adds conditional exception breakpoints to the JS debugger.
• AWS Amplify has added support for Vue 3.
• If you happen to have the 'Clubhouse' social audio app and you're quick enough, several well known JavaScript developers are getting together for a 'JavaScript Friday' chat at 10am PT (6pm GMT) today. More info here.

💻 Jobs

Full-Stack Web Engineer— As part of adidas, we engage millions of users each day - through our apps and on the web. Join our Web Team and support the maintenance of our website and tools to provide the best user experience.

Runtastic

JavaScript Developer at X-Team (Remote)— Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Find a Job Through Hired— Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

Hired

📖 Articles, Opinion & Tutorials

▶  Using Vue 3 with Electron to Build a Desktop App— A tightly edited 10-minute screencast that shows off the key parts in making a local file explorer with Vue and Electron without plodding through every single line of code.

Coding with Justin

How JavaScript Can Now Be Executed in Oracle Database— As of version 21c, released last month, Oracle Database can now execute JavaScript, powered by GraalVM. This post digs into the technicalities of how it works.

Alina Yurenko (Oracle)

Access your Database from React Server Components with Ease— Query data from MySQL, PostgreSQL DBs in React Server Components with Prisma, a better ORM for JavaScript & TypeScript.

Prisma sponsor

Dynamic Static Typing in TypeScript— A look at some of TypeScript’s more advanced features including union types, conditional types, template literal types, and generics.

Stefan Baumgartner

▶  Discussing Next Gen Bundlers with Jason Miller and Fred Schott— A podcast chat with the maintainers of Snowpack and WMR about bundling and how ES Modules change the game for modern JavaScript development. Educational!

The ShopTalk Show podcast

▶  What Is Gatsby.js, and Why Is It a Big Deal?— If you’re interested in Gatsby, this is a good interview with Gatsby engineer Max Stoiber.

Prismic

Buildkite Helps You Deliver Software Quickly and Securely at Any Scale

Buildkite sponsor

Using the Web Serial API with RxJS for Two-Way Reactive Communication with Serial Hardware
Tane Piper

Lazy Loading Routes in Vue with webpack Dynamic Comments
Jorge Baumann

HTML Form Validation in Cypress
Gleb Bahmutov

Building Server-Side Rendering for React Apps on AWS Lambda
Roman Boiko

Vuex 4.0 Released: State Management Mechanism for Vue 3 Apps— Vuex now supports Vue 3 in its new 4.0 incarnation. Here’s the full 4.0 release notes.

Vuex Community

autoComplete.js 8.3: A Simple Pure Vanilla Auto Completion Library— Vanilla JavaScript, no dependencies, and there’s a live demo here.

Tarek Raafat

eslint-config-auto: Automatically Configure ESLint Based on Project Dependencies— “Having got fed up of maintaining eslint configs on a range of projects, I’ve put together a meta config that inspects the dependencies listed package.json and then automatically configures itself with the most appropriate plugins..”

David J. Bradshaw

Wallaby’s Test Profiler Helped Us Make Jest Tests Run 5x Faster— Wallaby’s Test Profiler allows you to quickly record a test’s CPU usage profile to analyze its runtime performance.

Wallaby.js sponsor

redaxios: The Axios API, as an 800 Byte Fetch Wrapper— If you love the Axios API but want it using the Fetch API behind the scenes..

Jason Miller

v8go: Execute JavaScript from Go(lang)— Lets you create V8 contexts and run code eval-style. If you happen to be a Go developer, check out our Go newsletter too :-)

Roger Chapman

Five React Native Libraries You Might Have Missed— Some useful React Native libraries to be sure to check out for your next mobile app project.

Fabian Lee

react-ultimate-resume: Your 21st Century Resume— This is novel: a library which enables you to create an online resume to help you stand out from the crowd. Built by developers for developers with an eye on what tech recruiters allegedly want.

WeLoveDevs

#525 — February 12, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

▶  JavaScript's Creator Brendan Eich Shares The Full Story of JavaScript— Lex Fridman is an AI researcher who’s becoming well known for high quality interviews with some of the greatest minds of our time and here he talks with Brendan Eich about his coding history, JavaScript’s full origin story, the browser wars, and Brave.

Lex Fridman

Marko 5: eBay's UI Library Grows Up— If you’ve used eBay, you’ve used Marko. It’s eBay’s open-source JavaScript UI framework and is celebrating its ninth birthday with a new major version. There’s a lot to like, but it’s obviously not React or Angular. Project homepage.

Ryan Carniato

Locate Front-End Issues Like JavaScript or Network Errors Instantly— Get proactively alerted on any client-side issues such as JavaScript and network errors, optimize the load time of your front-end resources, and detect any UI issues that affect critical user journeys. Try it free with Datadog Synthetics.

Datadog sponsor

Remotion: Create Videos and Motion Graphics with React— I'm no fan of video editing, but what if rather than creating videos in apps like Final Cut or AfterEffects we could just program them.. Here's a fantastic 90-second trailer showing off the idea, but Alex Anderson has also put together an 18-minute screencast showing off exactly how to make a video production of your own. v1.1 just dropped. GitHub repo.

Jonny Burger

Mass Function Overloading: Why and How?— Lea is rewriting Bliss to use ES modules and is pondering the implications for her API’s design.

Lea Verou

Quick Bits

• The first release candidate of TypeScript 4.2 is out.
• React has now passed the 10 million downloads per day mark.
• Ajv is a JSON schema validator and an OpenJS Foundation project. Here's a huge update on what's going on with it.

💻 Jobs

JavaScript Developer at X-Team (Remote)— Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Find Your Next Job Through Hired— Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

Hired

📖 Articles, Opinion & Tutorials

Sharing Data Between CSS and JavaScript with Custom Properties— How to use JavaScript to give CSS things it can’t access. For example, CSS can’t read pointer coordinates, but JavaScript can.

Christian Heilmann

Generators in JavaScript and How to Use Them— Not played around with generators (as introduced in ES6) yet? This is a pretty good walkthrough.

Karim Elghamry

Faster CI/CD for All Your Software Projects Using Buildkite— See how Shopify kept build times under 5 minutes while they scaled from 300 to 1800 engineers.

Buildkite sponsor

How to Generate a Presigned URL in Modular AWS SDK for JavaScript— A very common use case for S3 is to have client side apps directly download or upload assets to/from it (e.g. photos, videos, large uploads). The way to give users privileged access to S3 objects or buckets without giving them full-on AWS credentials is to use signed URLs, as demonstrated here.

Allan Zheng

Seven Interview Questions on JavaScript Closures— You might want to revise A Simple Explanation of JavaScript Closures before you take these on ;-)

Dmitri Pavlutin

Accessing Hardware Devices on the Web: A Roundup of APIs— Chrome tends to have more unique APIs for hardware access so take care if cross browser compatibility is necessary, but there are a lot of options nonetheless from the Gamepad API or getUserMedia to the Generic Sensor API or Web NFC.

François Beaufort

How Ruby on Rails' Creator is Taking on JavaScript Frameworks with Hotwire— David Heinemeier Hansson holds strong views about Web development and JavaScript-heavy front-end frameworks isn't a part of his approach.

Richard MacManus

Build Interactive Messaging with Stream, MML, Node, & React

Stream sponsor

▶  Syntax.fm Covers Deno— The popular Syntax.fm Web development podcast turns its attention to Deno (the TypeScript-oriented, safety first, server side JavaScript runtime) with a thorough tour of its capabilities and potential.

Syntax Podcast podcast

Clean Code Through Reactive Programming in Angular with RxJS
Paul Clavier

Getting Started with Apache Kafka in Node.js
Valeri Karpov

WebdriverIO v7 Released— WebdriverIO is a popular browser and mobile automation testing framework for Node. v7 brings it over to TypeScript, improves its Google Lighthouse integration, and improves compiler tool integration. There’s even a brief video about the release.

Christian Bromann

GoldenLayout: A Multi-Window Layout Manager for Webapps— This project went open source five years ago (we covered it in issue 279!) but with this week’s 2.0 release has been rewritten in TypeScript, reworked (bye jQuery!), and now only supports modern browsers. Want some demos?

Wolfram Hempel

Ember Table 3.0: Powerful Table Control for Ember Apps— Another older library that’s been brought up to modern standards (though it has dropped Ember versions under 2.8). Always great to see this happening. GitHub repo.

Addepar

Managing Your Tasks Shouldn't Be a Task— "Clubhouse is like a fast and delightful version of Jira, a more purposeful version of Trello." - Current User.

Clubhouse.io sponsor

Mineflayer 3.0: Let's Build Minecraft Bots in JavaScript— Want to have some gaming fun but not ready to put down the code? There’s even a tutorial aimed at non-coders if you want to let the kids have a go. GitHub repo.

Andrew Kelley

run-parallel 1.2: Run an Array of Functions in Parallel— Run an array of functions in parallel.

Feross Aboukhadijeh

#526 — February 19, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

Announcing Vite 2.0— Vite is a build tool aimed at giving you a faster development experience by providing a dev server with hot module replacement support, and Rollup- and esbuild-powered bundling and building.

Evan You

V8's Super Fast super Property Access— The first of two articles this week about how the V8 team are somehow making the already fast V8 JavaScript engine even faster for us. Using super, till now, was an unoptimized and slightly costly operation but now it’s almost on par with accessing normal properties.

Marja Hölttä (V8)

Frontity: Bringing React to WordPress— Frontity Framework connects with WordPress seamlessly so you can focus on building your React front-end, without worrying about tooling and configuration. Its ease of use and extensibility make it a favorite when working with headless WordPress.

Frontity sponsor

An Interview with Ryan Dahl, the Creator of Node.js and Deno— Ryan created Node.js 11 years ago and in recent years has moved on to Deno where he’s attempting a new take at the same idea. This interview touches on Deno’s challenges and Ryan’s love of Rust and Vim.

Evrone

V8's Route to Faster JavaScript Method Calls— This gets very technical and fast, but it’s yet more of a look behind what the V8 team is up to. This work improves the performance of your Node and browser-facing code alike.

Victor Gomes

Opal 1.1: A Ruby to JavaScript Compiler— An interesting way to take Ruby code to the frontend by simply translating it into JavaScript. It’s been around for years but 1.1.0 is the first significant release in some time.

Adam Beynon and Contributors

Quick Bits

• NASA used Three.js to render a real-time simulation of this week's NASA rover landing on Mars 🚀
• The date-fns documentation site lets you play with the library in the browser console in a cute way and here's the code that makes it work.
• One of the Angular core team has written about how Angular strongly encourages best practices and the next natural step is for Angular 12 to enable 'strict mode' by default.
• Node.js has some security releases coming out next week– one of the security issues involved is of 'critical' severity. We will share these in next week's issue of Node Weekly.
• esbuild now supports Apple's M1 chip natively and is even faster.
• The Colyseus open source Node-powered multiplayer game engine has been 'acquired' by Lucid Sight, a developer of popular licensed mobile games.

💻 Jobs

Senior/Lead React Developer (Remote)— Join our talented team - thinking big, building world-class restaurant and guest experience management products.

Eat App

Senior Web Developer (Node/ReactJS) - Remote— Millions get inspired and plan adventures with our apps. To help us make komoot.com the place to go to plan outdoor adventures, we’re looking for a one of a kind Web Developer to join our team.

Komoot

Find Your Next Job Through Hired— Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

Hired

📖 Articles, Opinion & Tutorials

How to 'Listify' a JavaScript Array— There’s a little more to making a human readable list from an array in JavaScript than you might think. There’s a bonus TypeScript version too.

Kent C Dodds

Avoiding npm Substitution Attacks— Recently there have been some high profile examples of supply chain attacks, such as where fake or eponymous packages are published, but you can reduce your attack surface by taking precautions and managing dependencies.

Isaac Z. Schlueter

Introducing SPOTcon 2021! Get Your Free Early Bird Ticket Today— Scout APM's digital event on performance and observability. Register before 2/28 and we'll donate $5 to OSS when you attend.

Scout APM sponsor

Learn Snowpack: A High-Performance Frontend Build Tool— We’ve mentioned Snowpack a lot in the past year but it’s nice to see a third party introduction and tutorial.

Jack Franklin

How to Publish an Angular, React, Svelte, or Vue App with Azure Static Web Apps— A multi-step tutorial on deploying a modern JavaScript app to Azure Static Web Apps, Azure’s platform for building and deploying static apps from a GitHub repository.

John Papa (Microsoft)

Serverless TypeScript: A Complete Setup for AWS SAM Lambdas— A workflow for creating TypeScript-based AWS Lambda functions with AWS SAM that support testing, debugging, etc. and using shared layers to package dependencies.

Andrey Novikov and Sergey Alexandrovich

The Ultimate Guide to Cardinality for Observability

Lightstep sponsor

How to Use WebSockets With Your Vue.js Projects— Not a tutorial but two blobs of code to show you how a basic Vue.js frontend and a Node backend can communicate with WebSockets.

Mastering JS

Web Frameworks: Why You Don't Always Need Them
Richard MacManus

How to Create a Shrinking Header on Scroll without JavaScript
Håvard Brynjulfsen

a11y-dialog: Accessible, Lightweight Dialog Windows— It can lean on the native dialog element, if you like, has WAI-ARIA support, and there’s a demo here. I like it.

Hugo “Kitty” Giraudel

Metascraper: A Library to Scrape Metadata from Web Content— It uses things like Open Graph annotations, JSON+LD, and HTML metadata to get you things like author, title, description, and even an image related to the URLs of your choice.

Microlink

fullPage.js: Create Fullscreen Scrolling Sites— Available in Vue, React, and Angular flavors too. (GPL 3.0 licensed.) GitHub repo.

Álvaro Trigo

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

Neutralino 1.8: Portable, Lightweight Desktop App Framework— Think something like Electron but rather than including a Chromium distribution with every app, it uses the platform’s built-in Web view component. Due to this, Neutralino boasts low memory use and small distribution size for apps. GitHub repo.

Codezri

ExcellentExport.js: Export Table Data to Excel or CSV— If your app/page has some data in HTML tables and you’d like to export it to CSV or XLSX without any server involvement, this could help.

Jordi Burgos

OrgChart: A jQuery Plugin for Rendering Org Charts— It’s not often we get to link to jQuery plugins anymore(!) but this is one that’s kept up to date. There are Vue, Angular, and React versions too but less frequently updated. Examples of output.

Xuebin Dong

fast-check: Property Based Testing for JavaScript and TypeScript

Nicolas Dubien

disableautofill.js: Disable Form Auto-Fill and Auto-Complete Functions— You need to be very careful about where you use things like this due to effect on assistive tools.

Terry Lin

SVGJAR: An Easy Way to Add SVG Images to Ember Apps

Ivan Votti

#527 — February 26, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

JavaScript Performance Beyond Bundle Size— Nolan ponders why ‘bundle size’ is such a common thing to focus on when it comes to JavaScript performance and shares a collection of useful tools to study it further, if you wish, before moving on to more significant concerns ‘beyond the bundle.’ A really good read. Alex Russell reminds us to test on real mobile hardware too.

Nolan Lawson

The Definitive Guide to Streams— One of those posts that will bring you up to speed on a not often discussed area of JavaScript but which is really useful to understand! The Streams API allows you to programmatically read, write, and transform streams of data in a flexible way.

Thomas Steiner

A Friendly Introduction to Functional Programming with JavaScript by Anjana Vakil— Learn what Functional Programming (FP) is and how it differs from other programming styles (such as OO and imperative), and use key concepts of functional to improve your everyday coding.

Frontend Masters sponsor

TypeScript 4.2 Released— The extension (a superset, if you will) of JavaScript that adds static types and type-checking takes another step forward. 4.2 improves how type aliases are handled, adds leading/middle rest elements to tuple types, and more. The release notes are super thorough, as always.

Daniel Rosenwasser (Microsoft)

10 Years of Open-Source Visualization with D3.js— The creator of D3.js (the popular data visualization library) reflects on ten years since D3 1.0 was released with what he’s learnt from both developing D3 and leading a prominent project for so long. Congratulations, Mike!

Mike Bostock

Quick Bits

• There are releases of all supported Node.js branches to fix a critical security issue (an HTTP2 resource exhaustion DoS vulnerability).
• free-for.dev is a curated list of 'free tiers' and services available to developers.
• A quick look at Ember's forthcoming template imports support. Looks nice.
• Storybook now has official Vue.js 3 support.

💻 Jobs

Hiring Remote Mid-Level / Senior Full Stack Engineer in North America— Must have heavy JS/React experience at a senior/expert level. Need to be able to work on web apps and JS client libraries.

Ardan Labs

JavaScript Engineer— Join our "kick ass" team. Our software team operates from 17 countries and we're always looking for more exceptional engineers.

Sticker Mule

Find Your Next Job Through Hired— Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

Hired

📖 Articles, Opinion & Tutorials

Recreating Real-World Terrain with React, Three.js and WebGL Shaders— A fun Flight Simulator-inspired write-up of creating your own real-world textured 3D rendering for the Web.

Rishabh Karnad

Looks Good To Me: Making Code Reviews Better for Remote-First Teams— A developer from the BBC News team shares some of what they’ve learnt about code review that has improved their internal engineering culture.

James Donohue (BBC)

Best Practices for Building Better Angular Forms— Learn best practices for creating high-quality, accessible, and SEO-friendly Angular Forms. Read the guide on our blog.

Progress Kendo UI sponsor

Building a Serverless Multi-Player Game That Scales— A look at Simple Trivia Service, a game built to show off how to create a multiplayer game using AWS's various serverless services. There's also code available and it uses Vue.js for the front end with Node in the back.

Tim Bruce (AWS)

How to Create React Components with TypeScript— Aimed at developers with mild fears about the process.

Felix Gerschau

Building a Real-Time Webapp with Node and Socket.io— Want to create an app that does real-time data synchronization across multiple machines without introducing a third-party service like Pusher or Firebase? This is the first in a three part series but cuts to the heart of the matter.

Norbert Kovacs and Ferenc Hámori

The Definitive Guide to Feature Management

LaunchDarkly sponsor

Why JavaScript Developers Should Prefer Axios over Fetch— An interesting and perhaps initially counterintuitive thought.

Sabesan Sathananthan

How to Use Vue.js Environment Modes with a Node.js Mock Data Layer
Dave Berning

Building a Roadmap Voting App with Serverless Redis and Next.js
Noah Fischer

Thoughts on Porting Koan’s 150,000-line JavaScript Codebase to TypeScript
RJ Zaworski

Simple-Keyboard: A Virtual Keyboard for JavaScript Projects— Customizable, responsive and lightweight. Compatible with vanilla JS, React, Angular, Vue and more. Love the homepage on this one.

Francisco Hodge

Serverless UI: A Command-Line Tool for Deploying Serverless Functions to AWS— If you’d like to deploy functions in a simple, Netlify-style fashion with the Lambda and API Gateway setup handled for you, check this out. It uses AWS CDK under the hood and is a bit more ‘zero-config’ than something like Serverless Framework, say.

Jake Partusch

Tagger: A Zero Dependency, Vanilla JavaScript Tagging Library— Try a demo here.

Jakub T. Jankiewicz

Kotlin-First Android Chat SDK with New UI Components— Stream’s open-source SDK can cover all your messaging needs (including channels, threads, reactions, and more). Try our Android tutorial to see why we power feeds and chat for over a billion users.

Stream sponsor

React Drawer: A Sliding Drawer Component— Documentation is quite sparse, but there’s a handy Storybook collection of examples and with over 500k downloads a week it clearly has some draw… 😆

Alipay

Vue3 Icon Picker: An Beautiful Icon Picker Component for Vue— Try a demo here. The example is using Font Awesome and this is ported from a Vanilla JS version.

Hasin Hayder

Tippy.js 6.3: Highly Customizable Tooltip and Popover Library— Accessible, easy to theme, fast on low-end devices, and TypeScript ready. Also a great example of a good project site/homepage. GitHub repo.

atomiks

element-resize-detector: Optimized Cross-Browser Resize Listener for Elements
Lucas Wiener

#528 — March 5, 2021

Unsubscribe  |  Read on the Web

😆 If this were an episode of Friends, it would be called something like "The One With All The Big Releases"— enjoy!
__
Peter Cooper, editor

JavaScript Weekly

jQuery 3.6.0 Released— I’m always delighted to share jQuery news for a few reasons. First, it’s one of the best JavaScript nostalgia trips we still have. Second, jQuery is still so heavily used whether in CMSes or even by developers who simply continue to appreciate it. The updates are minor here, but we’re promised a jQuery 4.0 is on the way.

Timmy Willison

V8 (and Chrome) to Get Faster Release Cycle— Google Chrome is speeding up its release cycle from six weeks to four weeks (so get ready for Chrome 100 this time next year!) and the V8 team are stepping up to match it.

Ingvar Stepanyan

Get Your Free SPOTcon 2021 Tickets Today— Join hundreds of developers on March 26, 2021 for Scout APM's inaugural digital conference on performance, observability & transforming the future of web application development. The SPOTcon 2021 speaker lineup and agenda are now available.

SPOTcon by Scout APM sponsor

Gatsby 3.0 Released— Gatsby is a React-based open source framework with performance, scalability and security built-in. v3.0 promises an 80% speed improvement to the local development experience. They've also introduced Gatsby Hosting.

Hashim Warren (Gatsby)

Electron 12.0.0 Released— Despite some compelling alternatives like Neutralino and Tauri, Electron remains the big cheese in the ‘build desktop apps with JavaScript’ game. v12 updates from Node 12 to 14 (hello V8 8.9!) and to Chromium 89.

OpenJS Foundation and contributors

Quick Bits

• The latest version of VS Code has been released with stable Apple Silicon builds, TypeScript 4.2.2, and a 'quick fix' feature for adding missing function declarations.
• Vue Mastery have opened up free access to their Vue 3 + TypeScript course till March 9 (next Tuesday).
• RedMonk is a top developer analyst firm and their latest programming language rankings report is fantastic news for JavaScript (which is the #1 language) and TypeScript (now at 8th).
• Deno 1.8 has landed with experimental support for WebGPU, making doing GPU-based computation from JavaScript even easier.

💻 Jobs

Full Time Front-end Software Engineer (Remote)— Experienced with React? Write fast, performant code? If so, join us on our journey to help companies better measure, analyze and share their data.

Metabase

JavaScript Developer at X-Team (Remote)— Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Find Your Next Job Through Hired— Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

Hired

📖 Articles, Opinion & Tutorials

▶  How to Build a Space Invaders Clone in JavaScript— Ania set herself a fun challenge to try and code up Space Invaders as quickly as possible while explaining what she’s doing at the same time. It's fun to follow her thought process.

Ania Kubów

Building a Discord Bot Using Discord.js— Node is ideal for building chat bots and here’s a complete walkthrough of using the Discord.js library to do this on the Discord chat system to create a joke posting bot.

Subha Chanda

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

Serving Dynamic Meta Tags to Bots and Crawlers using Firebase and Cloudflare Workers— With it being so suited to low latency, on the fly processing of live HTTP requests, Cloudflare Workers lets you do rather different things to most other serverless platforms. This isn’t the most efficient example but is a neat idea nonetheless.

Richard Cooke

CSS-in-JS Support in DevTools— Google’s take on managing your CSS with JavaScript using the facilities available with their DevTools.

Alex Rudenko

The Complete Guide to Angular Security— Goes through the OWASP top 10 security threats and relates them to Angular development.

Christian Lüdemann

How an Anti-TypeScript “JavaScript Developer” Became a Fan— The on-going increase in TypeScript’s popularity makes opinion pieces like this all the more interesting to me, despite being reasonably shallow.

Chirag Swadia

Build a Video Chat Service with JavaScript, WebRTC, and Okta

Okta sponsor

The Darker Side of JS: Three Features You Never Want to Use— None of these will surprise long standing JavaScript developers (especially The Best Parts readers).

Fernando Doglio

'I've Used The pipe() Function 2,560 Times and I Can Tell You It's Good'

Ivan Novikov

Shepherd: Guide Your Users Through a Tour of Your App— I love how the homepage for this project shows off the actual feature it provides. This isn’t a brand new project but continues to get frequent updates.

Ship Shape

OrbitDB: Peer to Peer Databases for the Decentralized Web— A serverless, distributed, peer-to-peer database that uses IPFS for storage and automatically syncs across peers. It’s limited to Node and browser use cases for now and here’s an introductory guide.

OrbitDB Community

Enhance Front-end Performance by Rapidly Resolving JavaScript Errors

Datadog Synthetics sponsor

Swiper: A Modern Mobile Touch Slider— Complete with hardware accelerated transitions and native-like behavior. There are integrations with React, Svelte, Vue.js and Angular, too.

Vladimir Kharlampidi

web-minecraft: A Minecraft Client Written in JavaScript— I haven’t had time to test this for myself yet, alas, but this sounds like quite the project.

Michał Jażdżyk

#529 — March 12, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

What Is The Meaning of this!?— Figuring out what this refers to in different contexts is one of the most perennially discussed topics in the JavaScript world, so it’s always good to see a confident developer take on explaining it. Dr. Axel has his take on the matter too.

Jack Archibald

The Final ECMAScript 2021 Feature Set— Dr. Axel always keeps tabs on the new features coming to future versions of ECMAScript and he’s just updated his ES2021 page now that the first candidate spec has been released (below). It’s a lot easier to digest than the spec itself as it links to the proposals behind the key changes ;-)

Dr. Axel Rauschmayer

Node.js Garbage Collection: Heap Statistics Magic Dashboard— Garbage collection can have a big impact on the performance of your app. With AppSignal, you'll discover performance issues before your customers experience them. Heap Statistics Magic dashboard will help you spot & fix memory leaks with ease.

AppSignal sponsor

📄  The ECMAScript® 2021 Language Specification— This is one of those things it’s almost obligatory for us to cover but that maybe 30 of you will read in full? If you have a clear weekend coming up, enjoy the now essentially complete (except for Ecma approving it in June) ECMAScript 2021 spec that will form the basis of future JavaScript implementations.

ECMA

Hybrids 5.0: Create Web Components from Plain Objects and Functions— A mature library for building web components in a declarative and functional way. This CodeSandbox example is a nice way to see how it works – feels very elegant to me.

Dominik Lubański

Quick Bits

• esbuild 0.9, the high performance bundler and minifier, has been released with support for package.json's new exports field and a few backwards incompatible changes.
• Some updates from the 81st meeting of TC39. Module fragments and Temporal (now at stage 3) feel like two things we'll be hearing more about in future.
• Storybook has added experimental support for Webpack 5.
• We do a bad job of communicating this, but if you're into Node or React, bear in mind we put most of those links in Node Weekly and React Status— our sister newsletters :-)

📖 Articles, Opinion & Tutorials

Going Beyond console.log() to Level Up Your Debugging Skills— Christian Heilmann highlights some some powerful features of browser devtools to upgrade the way we develop.

Christian Heilmann

Creating a 'Table of Contents' Sidebar with IntersectionObserver— I love when long pages (particularly docs) use this sort of mechanism for navigation.

Ben Frain and Chris Coyier

Why a Serverless Data API Might Be Your Next Database

DataStax Astra sponsor

A Guide to (Ethical) Scraping of Sites with Node and Puppeteer— For simple tasks, a basic HTTP client is enough, but for dynamic sites a headless browser is often needed and Puppeteer (or Playwright!) is ideal.

Andreas Altheimer

Through The Pipeline: An Exploration of Frontend Bundlers— A developer compares Parcel, Rollup, and esbuild for his reasonably modest requirements.

Andrew Walpole

You Don't Know The classNames Library— Always love it when a developer thinks there’s a library or tool you should know about and so blogs to show it off.

Arek Nawo

Get Your Free SPOTcon 2021 Tickets Today— Join us March 26 for Scout APM's digital event on performance & observability. Speaker lineup and agenda now available.

SPOTcon by Scout APM sponsor

▶  Lightweight Server-Side Rendering with Fastify and Preact— A developer shows off his new project. Look at those Lighthouse scores :-)

Sebastien Ringrose

Modeling UI States in a React Form Component Using a Finite State Machine

Xiaoyun Yang

Svelte NodeGUI: Build Cross Platform Apps with Node and Svelte— We first featured NodeGUI, a Qt5 based native cross-platform framework, back in 2019. It has since spawned React and Vue-powered variants and now one for Svelte. GitHub repo.

Jamie Birch, Atul R, et al.

ConclureJS: Cancellation and Testability for your Async Flows— A small zero dependency generator runner. The idea is you can convert promises to generators and this helps fill in some of the functional gaps. Interesting idea.

Dmitry Maevsky

Wallaby.js, the World's #1 In-Editor Test Runner— Used at 10,000+ companies all around the world. 15x faster JavaScript debugging than with breakpoints and console.log. Free to try.

Wallaby.js sponsor

Taro: A Lightweight 3D Game Engine for the Web— Built around Three.js and cannon-es (a physics engine), Taro makes it easier to quickly build a basic 3D game or visual demo with JavaScript.

Cloud9c

react-big-calendar: A GCal-Style Calendar Component— Inspired by FullCalendar this component provides all of the calendaring functionality you’ll likely need. See for yourself using their demo.

Jason Quense

Svelte Formula: A Zero-Config Reactive Forms Library for Svelte— Create reactive forms in Svelte with easy using only HTML properties to configure validations.

Tane Piper

Math.js 9.3: An Extensive Math Library for Node and Browser— Work with complex numbers, fractions, units, matrices, symbolic computation, etc.

Jos de Jong

💻 Jobs

JavaScript Developer at X-Team (Remote)— Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Senior JavaScript Developer (Fullstack)— We’re looking for a senior full-stack developer to help us build a high performance, high accuracy online fraud prevention service.

FingerprintJS

Find Your Next Job Through Hired— Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

Hired

🎲 Can you beat JavaScript at chess?

The Kilobyte's Gambit is a The Queen's Gambit (it's a Netflix show) inspired chess game whose core engine is crammed into a mere 1024 bytes. It's beyond my paygrade to figure out how that's even possible, but it beat me, at least. Good luck!

#530 — March 19, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

Rethinking JavaScript's Ternary Operator— ternary ? "yes" : "no"… A lot of developers regard the ternary operator “with suspicion”, says James. Does its brevity help or hinder readability? Is it something you can “trust”? James also looks at a future possible alternative coming to the language.

James Sinclair

Comparing Svelte and React— After spending an extended period of time working with both, the author identifies his preference based on first hand observations supported with real-world examples.

Jack Franklin

Learn Dynamic Image Resizing Without Using an Image Processing Server— Forget manual resizing, Learn a new way to manipulate images with ImageKit.io; Resize & adapt images to fit the page layout by changing just the URL parameters. Learn Face crop, watermarking, text overlay, network-based optimization & more.

ImageKit.io sponsor

Ember.js in 2021 – A Beacon of Productivity?— Ember is almost ten years old and many of its users swear by its opinionated "batteries included" approach. Here the author makes the case for Ember in 2021 and explains why he considers the framework a beacon of productivity in the middle of a "roaring sea of complexity."

Marco Otte-Witte

V8 Release v9.0— The next major version of the V8 JavaScript engine (as used in Chrome, Node, and elsewhere) adds a feature to regex matching (the /d flag for returning indices of matches), faster super property access, and a significant WebAssembly optimization for JS-to-WASM calls.

Ingvar Stepanyan

Quick Bits

• Tailwind CSS user? It's getting a new just-in-time compiler to make the development process smoother.
• Did you know NASA are using JavaScript as part of their latest mission control system? The code is here.
• The Storybook component workshop has gotten a big update for Svelte users.
• AWS S3 has a new feature called Object Lambda that allows you to write code that wraps S3 object requests and transform data on the fly.
• It's not every day you get to see a non-minified JavaScript file first created in 2001 and updated since then. I'm feeling nostalgic.

Quick Releases

Node 15.12.0— The runtime, the CLI, the legend.
Ora 5.4.0— Elegant terminal spinners.
esbuild 0.9.4— Ultra-fast JS bundler.
Rollup 2.42.0— ES module bundler.
ApexCharts.js 3.26.0— Interactive SVG-based charts.
Ghost 4.0— Node.js-based blogging tool.

📖 Articles, Opinion & Tutorials

▶  Using Deno and the Slack API to Pick Contest Winners— Three books were being given away to random members of a Slack community and rather than pick the names out of a hat, why not write a Deno script to do the job?

The Changelog

Seven Ways to Debug Jest Tests at the Terminal— (Almost) all the ways you can debug a Jest test in the command line.

Nikola Đuza

A Tip to Familiarize Yourself with New JS Codebases— Getting thrown into a new codebase is difficult. But with tools for architecture analysis you can make your journey at your next job’s JavaScript or TypeScript codebase a breeze.

Kevin Peters

Best Practices for Building Better Angular Forms— Learn best practices for creating high-quality, accessible, and SEO-friendly Angular Forms. Read the guide on our blog.

Progress Kendo UI sponsor

Object Plus Array Is Not Zero— Exploring a common Javascript misconception with Chrome and ASTExplorer.

Evin Sellin

▶  Non-Blocking I/O and How Node Uses It (in Friendly Terms)— Short (8-minutes), sweet, and includes lots of useful animated diagrams to explain the concepts.

Studying with Alex

How to Generate an RSS Feed for Your Blog— The long forgotten RSS feed seems to making a comeback (thank you!), and this post offers a unique solution to generate this at runtime rather than build time using a Netlify Function.

Salma Alam-Naylor

An Engineering Leader’s Guide to OpenTelemetry

Lightstep sponsor

Tropical Particles Rain Animation with Three.js— A WebGL particle rain animation resulting in an interesting image effect made with Three.js. Here’s the demo.

Yuriy Artyukh

React95 3.7: Windows 95-Style UI Components for React— A fun set of Windows 95 themed UI components for React apps and built with styled-components. The latest release includes a bunch of new themes. Enjoy their very retro homepage.

Artur Bień

Lite YouTube Embed: A Faster Youtube Embed— Faster than the official one, at least. There’s a live demo here and you can really feel it.

Paul Irish

Clio: A Functional Language That Compiles to JS— It’s early days for this language (whose compiler is, itself, implemented in JavaScript) but is the sort of thing you might like to play with.

Eghbali, Franke, Luiz, et al.

The Definitive Guide to Feature Management— A feature management platform like LaunchDarkly fills the gaps of conventional feature toggles. Learn the ins & outs of feature management today.

LaunchDarkly sponsor

jsonld.js: A JSON-LD Processor and API Implementation— JSON-LD is a spec for a JSON-based format used to represent objects on the Web in a way that’s easy for code to read.

Digital Bazaar, Inc.

sql.js 1.5: A Library to Run SQLite on the Web— This brings things up to SQLite 3.35.0 standards (a pretty big release in its own right).

SQL.JS

Spectacle 7: A React and JSX-Based Presentation Library— Got a presentation coming up? Build your decks with JSX? A good way to get a feel for it is via the deck on its home page.

Formidable

💻 Jobs

Wanted: Curious Software Engineers with ❤— Stagnating? Carbon Five has new projects, tech and challenges perfectly paired with kind, supportive, brilliant people. Join us.

Carbon Five

Wynter Is Looking for Developers to Join Its Research Panel— Give feedback on digital products and landing pages, get paid $15-$50 per survey. Low-key commitment, 10-15 mins per survey.

Wynter Research Panels

Find Your Next Job Through Hired— Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

Hired

#531 — March 26, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

Human-Readable JavaScript: A Tale of Two Experts— JavaScript gives us many ways to do things, but deciding which way can be tricky. Laurie Barth looks at two broad approaches to choosing different paths with using new language features.

A List Apart

Sinon.JS 10: Test Fakes, Spies, Stubs and Mocks for JavaScript— We’ve mentioned Sinon in passing for years but never featured it directly, so when better than a big 10.0 release? Sinon is something you’d use when you have tricky things to test where a test double/stand-in object might be appropriate.

Sinon Committers

New Course: Production-Grade Next.js with Scott Moss— No matter if you’re making a blog, marketing page, or a full-stack app, Next.js has the tools you need. This detailed course runs through everything you need to build a production-ready, full-stack app.

Frontend Masters sponsor

SvelteKit Now In Public Beta— Back in November, we linked to What’s the deal with SvelteKit?– an article from Svelte’s creator on how he was rethinking the process of building Svelte apps. Here’s step one of the result: think of it as Next for Svelte. It’s a framework for building apps with Svelte, complete with server-side rendering, routing, code-splitting for JS and CSS, adapters for different serverless platforms and so on. This episode of Svelte Radio may also be of interest.

Rich Harris (Svelte)

📈 Billboard.js 3.0: The D3.js-Powered Chart Library— A popular library supporting a whole range of chart types out of the box (bar, line, areas, donuts, radars, and various hybrids) – 3.0 brings candlestick / OHLC chart support (often used in financial contexts) and supports D3.js v6. Project homepage.

Jae Sung Park

Quick Bits

• Jake Archibald is back working out which Formula 1 teams have the fastest (or slowest!) Web sites.
• TXTFiddle is a new online JavaScript sandbox focused specifically on text manipulation. The templates and being able to stop execution are useful features here.
• Do I think it's amazing JavaScript lets me run Windows 3.1 in my browser? Yes.
• Want to create your own VS Code theme as easily as possible? You can now do it in your browser.

Quick Releases

Node 15.12.0— Runs all the things.
webpack 5.28.0— The big bundler of everything.
React Spring 9.0— Animation library for React apps.
pkg 4.5.0— Turn Node apps into executables.
ReacType 6.0— Visual React prototyping tool.

📖 Articles, Opinion & Tutorials

React State Management Libraries and How to Choose— An overview of the best state management libraries and how to choose the right state management strategy for your app.

Dave Ceddia

▶  Discussing WebAssembly and WASI with Aaron Turner— The use of WebAssembly for deploying code generated by languages like Rust and Go to the Web is reasonably well understood, but this interview digs more into WebAssembly’s uses on the server (including for, yes, serverless use cases!) and how WASI makes it possible.

Serverless Chats Podcast podcast

Collaborative, Effortless Project Management— Clubhouse helps engineering and product teams ship quality software, faster. Easily import from Jira or Trello.

Clubhouse.io sponsor

▶  Automating Social Images with Airtable, Cloudinary, and Serverless— It’s an hour long but this is a fun format for a video.. a developer is brought on to solve a problem, live, in an hour. James’ challenge is to create a system to auto-generate social media sharing images using a variety of tools.

Colby Fayock and James Quick

The Difference Between Values and References in JavaScript— A look at the difference between passing by value and passing by reference.

Dmitri Pavlutin

How to Create a Screen Reader Accessible Graph (Like Apple's) with D3.js— A neat use of D3.js (commonly used to create data visualizations) to recreate Apple Watch-style ‘activity rings’. A detailed tutorial with lots of code and CodePen examples to dive into.

Sarah L. Fossheim

Nine JavaScript and TypeScript ORMs for 2021— A roundup, complete with code examples, showing off a variety of tools like Knex.js, Mongoose, TypeORM, Waterline, and Bookshelf.

Michael Wanyoike

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

Lightstep sponsor

Why I Prefer Makefiles Over package.json Scripts
John Ruble

How To Navigate Between Views with Vue Router
Dave Berning

wordwrapjs: A Word Wrapping Library for Node and Browser— It always intrigues me to see a package with over 700,000 downloads per week but relatively few GitHub stars.

Lloyd Brookes

eslint-plugin-clean-regex: ESLint Plugin for Better Regular Expressions— Catches things like redundant or non-functional patterns and can optimize character classes.

Michael Schmidt

Aladino: A Tiny WebGL Library to Enhance Your Site with Shader Effects— Lots of cool examples on the demo page but some of these can likely be accomplished with more optimal code.

Luigi De Rosa

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

Faker.js 5.5: Generate Realistic Fake Data in Node and Browser— ‘No more free work’said the maintainer of Faker.js last year, but happily he’s back maintaining this library, has received some support, and he has a (paid) API service to help keep the lights on.

Marak Squires

Piscina: A Fast Worker Thread Pool Implementation for Node.js— Now that Node now offers worker threads which bring true multithreading to Node apps..

Piscina

CodeTour: VS Code Extension to Record and Playback Guided Tours of Codebases— Here it is on the Visual Studio marketplace.

Microsoft

Intro.js: A User-Friendly 'Onboarding Tour' Library— For creating step-by-step product tours as commonly used when onboarding SaaS users, say. It’s AGPL-licensed, so a license is needed for commercial use. Shepherd is a similar MIT-licensed alternative.

Afshin Mehrabani

jsep: JavaScript Expression Parser— “Think of jsep as a tool to parse the kinds of expressions that would be written in individual Excel cells.”

Stephen Oney

Delaunator 5.0: Fast Delaunay Triangulation of 2D Points— The demo is the best way to get a feel for what this is about.

Mapbox

TypeScript Dedent: Smartly Trim and Strip Indentation from Multiline Strings

Tamino Martinius

💻 Jobs

Senior JavaScript Developer (Fullstack)— We’re looking for a senior full-stack developer to help us build a high performance, high accuracy online fraud prevention service.

FingerprintJS

Software Engineer at Carbon Five— Stagnating? Carbon Five has new projects, tech and challenges perfectly paired with kind, supportive, brilliant people. Check us out.

Carbon Five

Find Your Next Job Through Hired— Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

Hired

#532 — April 2, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

Deno Gets a Company, Some Money, and a Distributed VM— The folks behind Deno (the secure JS/TS runtime project founded by the original creator of Node.js) have raised $4.9m and formed a company to help push it further forward, including plans to hire more full-time engineers. They've also unveiled Deno Deploy, a 'globally distributed JavaScript VM' of sorts. Exciting times are afoot for them.

Ryan Dahl, Bert Belder

Announcing TypeScript 4.3 Beta— It dropped on April 1 but it was no joke. Notably, 4.3 introduces a override keyword to make it clear when you’re overriding a method rather than adding a new one. There are also template string type improvements, and methods and accessors can be given #private names.

Daniel Rosenwasser (Microsoft)

How to Model JSON to Get the Most Out of Your Document Database— Thinking about using a document database for your next project? The flexible data model is a major plus, but having so many options can be intimidating at first. This free virtual event will help you make all the right choices. Register here.

Couchbase sponsor

NativeScript 8.0 Released— NativeScript is a mature framework for building iOS and Android apps that lets you use native APIs directly from JavaScript (or TypeScript) – it’s agnostic so you can use Angular, React, Vue or Svelte with it too. 8.0 adds webpack5 support, Apple Silicon (M1) support, improved accessibility, and more.

OpenJS Foundation

Tagify 4.0: An Elegant Input Component for Tags— The polished demos show a lot of effort has been put in here. GitHub repo.

Yair Even-Or

Quick Bits

• Component development environment Storybook 6.2 has been released with Vue 3, webpack 5, and ESBuild support, plus a new JSON editor.
• In the April Fools' department came ES1995, a polyfill for 'super-modern' JavaScript.

Releases

ts-loader 8.1.0— TypeScript loader for webpack.
mustache 4.2.0— Long standing {{templating}} system.
Middy 2.0— Middleware for Node.js AWS Lambda functions.
HLS.js 1.0— JavaScript HLS client using Media Source Extension.
SVGO 2.3.0— Node.js tool for optimizing SVG files.
Husky 6.0— Git hooks made easier.
Next.js 10.1
npm 7.8.0

📖 Articles, Opinion & Tutorials

Make Your Jest Tests Faster by Changing a Single Setting— Some developers have found that tweaking how many worker threads Jest uses can improve performance on certain setups. It’s worth a try.

Ivan Tanev

A Look at Class static Initializer Blocks in V8 9.1— Sure, it looks a little Java-y, but this new syntax gives you a defined place to put code that runs just once for a defined class. Expect this in Chrome 91 (and therefore V8 9.1, we assume).

Shu-yu Guo

How to Build a Financial Dashboard with React— In this tutorial, we'll build a financial dashboard from scratch & learn a bit about CSS grid, KendoReact, and theming.

Progress KendoReact sponsor

On JavaScript Closures— The more advanced JS developers among you can skip this, but Kent quickly covers some useful points about closures here.

Kent C Dodds

▶  Discussing Skypack and Snowpack with Fred Schott— Yes, this is a Ruby podcast, but I find a more detached, 30,000 foot view of something as game changing as Snowpack useful in order to put it in context.

Remote Ruby Podcast podcast

Getting Started with React and D3.js— If you have been putting off incorporating D3 into your projects because of the visualization library’s reputation for being difficult to learn, here’s a well-paced (and somehow beautiful!) intro to get your efforts underway.

Amelia Wattenberger

How to Ship 2x Faster— Help devs trust their deploys. Because trust builds confidence, and confident teams deploy faster.

Sleuth sponsor

Delay Dispatching Actions in Redux using Thunk Middleware

Amit Merchant

Working with Media Queries from JavaScript

Maroun Baydoun

Cheetah Grid 1.0: 'Fastest' Open-Source Data Table for the Web?— A bold claim from a library we’ve not encountered before. There’s a live demo here with 1,000,000 records in a table if you want to try it for yourself, though.

Future Corp

d3-graphviz 4.0: D3-Powered Graphviz DOT Graph Rendering— Renders SVGs from DOT-defined graphs by way of a WebAssembly port of Graphviz, including animated transitions. Today’s 4.0 release brings it up to D3.js 6.0 standards.

Magnus Jacobsson

Free Chat & Activity Feed APIs for Qualifying Teams

Stream sponsor

A Recreation of the Spotify Client Built with Angular 11— Brings together Angular 11, Nx Workspace, ngrx, TailwindCSS and ng-zorro. Nice work, especially since it actually works.

Trung Vo

FicusJS: Lightweight Functions for Developing with Web Components
Matt Levy

Five Useful Tools and Libraries for Testing Vue.js Apps
Nethmi Wijesinghe

JParticles: Efficient Canvas Library for Building 'Cool Particle Effects'
Barrior

💻 Jobs

Software Engineer at Carbon Five— We’re a team of creative individuals dedicated to building brilliant products for innovative clients. Join us for new projects, tech and challenges.

Carbon Five

Remote Full-Stack Software Developer Opportunity— Write Code that Matters. Faithlife is looking for Full-stack Software Developers who can help us build awesome web software. Join us as we make revolutionary technology for administration and discipleship for churches all over the world.

Faithlife

Find Software Engineering Jobs with Hired— Take 5 minutes to build your free profile & start getting interviews for your next job. Companies on Hired are actively hiring right now.

Hired

# 533 — April 9, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

The Healing Power of JavaScript— There wasn’t a singular “big” bit of news this week, but why not something a little more whimsical? Craig Mod, a popular writer and photographer, has written a piece for WIRED about how, for Craig, “code is therapy, an escape and a path to hope in a troubled world.”

Craig Mod

📖  The ES2021 Edition “JavaScript for Impatient Programmers”— Dr. Axel has updated his popular JavaScript for Impatient Programmers book to ES2021 standards and you can still read the (nearly) whole book online.

Dr. Axel Rauschmayer

Connect Code to Customer in This Free Webinar Deep-Dive— Developers have become integral to the success of every business – because if your software sucks, your business sucks. In this live demo, we'll show you three successful strategies that put the customer at the center of your monitoring workflow.

Raygun sponsor

Vanilla JavaScript Code Snippets— A roundup of a number of useful sources when you want to keep your JavaScript simple and light and as vanilla as possible. Covers things like 1loc.dev, Micro.js and 30 seconds of code.

Vitaly Friedman

Five Ways to Prevent Code Injection in JavaScript— You never want malicious users to be able to send code over the wire that then gets run by your own program. Here are some ways to prevent this problem.

Liran Tal

Quick Bits

• The Vue project has decided to not support IE11 with Vue 3— instead, numerous features will be backported to Vue 2.
• Node saw a swathe of security releases this week to fix a few high severity issues, mostly in the OpenSSL dependency.
• The Chrome DevTools team have continued to write about how they're migrating the tools over to using TypeScript. They've previously written similarly about Puppeteer too.
• React Summit returns (remotely) next week. We've got some tickets to give away on Twitter.

Releases

Cucumber.js 7.1.0— Write tests as stories.
Fabric.js 4.4— Work with canvases from JS.
NSFW.js 2.4— Client-side NSFW image detection.
Node CSV 5.5— Full featured CSV parser.
Marko 5.7— eBay's UI library.

💻 Jobs

Front-End Senior Software Engineer (Remote)— Help power a platform meaningfully changing how journalists, PR pros, and marketers around the world work.

Muck Rack

Senior Software Engineering Consultant - [100% Remote] — Co-founded by Justin Searls, Test Double is an engineering consultancy on a mission to improve the way the world builds software. Work on challenging projects with a collaborative, passionate team. 100% employee owned, contract and full-time roles available.

TestDouble

Find Software Engineering Jobs with Hired— Take 5 minutes to build your free profile & start getting interviews for your next job. Companies on Hired are actively hiring right now.

Hired

📖 Articles, Opinions & Tutorials

Replacing let with const (Even When It Feels Impossible)— I’m not a big fan of shoehorning const in everywhere you can, but many developers find value in it and Charles argues that it has numerous benefits.

Charles Stover

How to Read React Errors— A practical tutorial on how to make sense out of some of the more obscure React error messages.

Dave Ceddia

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 Actually Test Component Driven UIs— The folks at Storybook spoke with ten engineering teams to see which UI testing methods work for them. Unsurprisingly, Storybook came up, but also tools like Axe and Cypress.

Varun Vachhar (Storybook)

▶  How to Create a Globe and Add Cities using Three.js— A recorded coding session. (86-minutes.)

Yuriy Artyukh

19 JavaScript 'Nuggets'— If you’re up for a quick list of JavaScript tips, start here. This links to nineteen posts (on the same blog) covering things like sorting, const, for/of, and working with strings.

Delicious Insights

How to Password Protect a Site with Cloudflare Workers— A demonstration of using Cloudflare Workers to add Basic HTTP authentication to sites even if they are hosted on a service like Vercel or Netlify.

Florian Kapfenberger

▶  Vue Explained for React Developers in 6 Minutes
Coding with Justin

Three Ways to Merge Arrays in JavaScript
Dmitri Pavlutin

Server-Side Rendering and the Journey to The Center of Nuxt.js
Michael Gallagher

Kaboom.js: A Fun JS Game Programming Library and Environment— Lets you edit your code, sprites, and sounds in one place and includes helpers to assist in building certain types of games faster. Project homepage.

replit

React Hook Form 7.0— After two years of work, the latest version of this mature form library has dropped. It features strict typing, reduced package size and improved performance. Already a user? There's a v6 to v7 migration guide aimed specifically at you.

React Hook Form

[New] AI Security Scanning for WebStorm - Try the Free Security Plugin— Avoid the refactoring fire drill. Catch (and fix) security issues as you code. Try Snyk’s free WebStorm security plugin.

Snyk sponsor

CSS-Select 4.0: A CSS Selector Compiler and Engine— Turns CSS selectors into functions that tests if elements match them.

Felix Böhm

moovie.js: A Movie-Focused HTML5 Media Player— Try it here. No dependencies, responsive, customizable, keyboard shortcuts, and includes support for .vtt or .srt caption/subtitle files.

Bruno Vieira

Cancelable Async Flows (CAF)— Gives you async/await style coding but using generators under the hood for more control over cancellation. Based on AbortController/AbortSignal, Kyle says his library can handle the ‘dirty work’ for you.

Kyle Simpson

Book a Demo. Ship Fast. Rest Easy. LaunchDarkly

LaunchDarkly sponsor

Flicking 3: A Flexible Carousel Component— There are wrappers for Angular, React, Vue and Preact users too.

NAVER Corp

#​534 — April 16, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

Comparing the New Generation of Build Tools— A detailed evaluation of a variety of approaches for bundling JavaScript and other front-end assets, including Snowpack, esbuild, Vite, and wmr. A handy overview.

Hugh Haworth

Slow and Steady: Converting Sentry’s Entire Frontend to TypeScript— Dozens of developers took a year to convert 1,100 files and 95,000 lines of code from JavaScript to TypeScript. This is one of those “we did a complicated thing and here’s what we learnt” pieces you’ll want to point to if your workplace attempts a similar thing.

Priscila Oliveira and Mark Story (Sentry)

Get to Know Chrome’s Dev Tools— Join Jon Kuperman for this introduction to Google’s Chrome Developer Tools. You’ll learn how to edit, debug and profile you web apps in this detailed video course.

Frontend Masters sponsor

15 DevTool Secrets for JavaScript Developers— I think ‘secrets’ is a bit bold, but nonetheless I picked up a few tips here. Breaking on DOM changes, filtering requests in the Network panel, and copying requests in fetch or curl format are all very neat.

Craig Buckler

🎤 It must be the season for thinking about the DevTools as the Syntax.fm podcast did an episode explaining the DevTools tabs too.

Quick Bits

• There's a new sub-Reddit called /r/JSdev aiming to foster JavaScript oriented discussions.
• Looking for a job? Emma Bostian has a great write up of seven mistakes to avoid in your next technical interview.
• The Cloudflare Workers serverless system runs on V8 but not Node.js exactly but now boasts Node.js support if you want to use (many of the) existing Node packages you know and love. Workers also just gained WebSockets support.

Releases

D3.js 6.7.0— Data visualization toolkit.
eslint-plugin-vue 7.9.0— ESLint plugin for Vue.js.
react-markdown 6.0— Markdown component for React.
pnpm 6.1.0— Alternative 'disk space efficient' package manager.
Cypress 7.1— Testing for anything that runs in a browser.

📖 Articles, Opinions & Tutorials

A Thorough Guide to Working with Strings in Modern JavaScript— A well presented suite of examples showing off numerous string manipulation techniques from how template literals work to joining, comparing, and searching through strings.

Dave J Saunders

Hyperapp – Is It a Lightweight 'React Killer'?— There are lots of frameworks which aspire to chip away at React’s market position. After an ecosystem setback when breaking changes were introduced in v2, Hyperapp is back and its claimed benefits warrant another look.

Arek Nawo

A Simple Start to ES Modules in Node.js— Once Node 10 shuffles away later this month, every supported Node release will support ES modules in addition to CommonJS. If you haven’t dipped a toe in the ESM water yet, Kent keeps it simple and straightforward with an example here.

Kent C Dodds

You Build the App, We’ll Parse the Logs— Send logs from your Node.js and JavaScript apps to LogDNA. We’ll parse them so you can search and take action in real time.

LogDNA sponsor

An Introduction to the switch(true) Pattern— Seán likes it, but I’m not so sure. It’s an interesting way to manage a complex set of conditionals though.

Seán Barry

How to Send Tweets with a JavaScript GitHub Action— Learn how to create a GitHub action which sends a tweet whenever a pull request is merged.

James Hibbard

A Real World CSS vs. CSS-in-JS Performance Comparison— No huge surprise here, I suspect.

Tomas Pustelnik

Building a Video Streaming App with Nuxt.js, Node and Express— A walkthrough of creating a server-side Node app that will handle the fetching and streaming of videos, generating thumbnails, and serving captions and subtitles. Nuxt.js is the Vue.js based framework that brings it all together.

Deven Rathore

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

▶  Building an ASCII Game Engine That Runs in the Browser— One of the best JavaScript YouTubers moves into a little bit of game development. If recreating Dwarf Fortress is on your bucket list, you might enjoy this.

Low Level JavaScript

Going “Meta GSAP”: The Quest for “Perfect” Infinite Scrolling
Jhey Tompkins

Tricking TypeScript Into Typing Untyped JavaScript Modules
Kamran Ayub

JS Classes Are Not “Just Syntactic Sugar”
Andrea Giammarchi

Deno 1.9 Released— Node's anagrammed cousin continues to get even better. 1.9 brings a native HTTP/2-compliant Web server (which seems to beat Node's in basic benchmarks), support for blob and data URLs, faster interop with the underlying Rust code, and more. "Why use Deno," you ask? Think V8, but with the layer on top built in Rust, with a focus on extra security, first class TypeScript support, and offering browser-compatible APIs wherever possible.

The Deno Team

Announcing react-pdf v2.0— While it remains backward-compatible with v1, the new version of react-pdf is a complete reimplementation from scratch. It offers a new hook-based API, improved performance, SVG support, and support for more CSS properties including z-index and overflow.

Diego Muracciole

Automate Code Standard Enforcement with Lightweight Static Analysis

Semgrep sponsor

party.js: A Way to 'Brighten Up' Your Site with Visual Effects— Back in the late 90s and early 00s, JavaScript was very commonly used to add ‘sparkle’ to Web sites in the form of snow, unusual cursors, and such. This is in much the same spirit. Support varies but it’s presented well.

YilianSource

Algolia Search API Client for JavaScript— An official, fully featured low-level client for interacting with Algolia, a popular search API. Works in both the browser and on Node.

Algolia

jest-puppeteer 5.0: Run Your Tests using Jest and Puppeteer

Smooth Code

#​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

#​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

#​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😏

#​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.

#​539 — May 21, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

DOM Events: A Way to Visualize and Experiment with the DOM Event System— A visualizer to help you learn about the DOM Event system – not always the easiest thing to get a mental model of – through exploration.

Alex Reardon

Introducing WebContainers: Run Node.js Natively in the Browser— An interesting new WebAssembly-based operating system that boots instantly and enables Node.js environments to run directly in the browser. People have been getting very excited about this on Twitter. Only supports Chromium-based browsers for now though.

Eric Simons (StackBlitz)

New & Updated Course: Complete Intro to React v6 with Brian Holt— Learn to build real-world applications using modern React. Much more than an intro, you’ll start from the ground up, getting to using the latest features in React, including hooks, effects, context, and portals, plus piecing together tools from the entire React ecosystem.

Frontend Masters sponsor

Parcel 2 Beta 3: A Wild Rust Appears!— How does a ‘beta 3’ release get a feature? By having its JavaScript compiler entirely rewritten in Rust is how. This change yields a “10x faster” compiler and continues an ongoing trend of writing JavaScript tools in other languages (such as esbuild, written in Go). There is more to the release, though - details within.

ParcelJS

Quick Bits

• Are you ready to shed a tear when Microsoft fully retires Internet Explorer on June 15, 2022?
• Enjoy this 'snake' game implemented in 27 lines of JS on CodePen.
• I admit I've not had much time to look at these maps of JavaScript concepts but they make for pretty overwhelming visuals - interesting!
• The Next.js Conf site is a sort of multiplayer experience. It takes place online on June 15, BTW.

Releases

Node 16.2.0
create-node-cli 1.6.0— Tool to create new Node CLI projects.
lowdb 2.0.0— Tiny local JSON database for small projects.

📖 Articles, Opinions & Tutorials

2D Optics Demos in JavaScript— A fun bit of visuals meeting code. These little live experiments are neat.

Philip Zucker

▶  A Complete Beginner's Guide to Next.js— Ali keeps it engaging and easily digestible in this 22-minute video. Well recorded. Fantastic.

Ali Spittel

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 Create Reusable Web Components with Lit and Vue— A thorough walk through creating a button component using the Lit framework for use in a Vue.js app.

Dan Valinotti

Tree-Shaking: A Reference Guide— A high-level, though comprehensive, introduction to what ‘tree shaking’ is all about. The basic idea is that unused code from modules you use gets ‘shaken’ off like dead leaves on a tree.

Átila Fassina

Embedding Google Forms in a Static Site Without iFrames— An approach promising more customizability than embedding a Google Form IFRAME.

Brian May

▶  'TypeScript is Testing'— In a 3-minute micro podcast episode, Kent makes the argument that TypeScript is like testing because of the extra confidence it gives you about your code.

Kent C Dodds podcast

Provision Infrastructure with JavaScript and Pulumi— Build, deploy, and manage modern cloud applications and infrastructure using JavaScript.

Pulumi sponsor

▶  Frontend Development in 2021: A Complete Guide— A tight 20-minute look at the frontend landscape, covering the libraries and tech you’ll want to know. One worth sharing with anyone you know who's interested in getting into the space.

Harry Wolff

A Guide to Unit Testing Vue Components
Patrick Kennedy

How to Use Tailwind's Just-in-Time Mode in Angular
Amadou Sall

Typehole: VS Code Tool to Automatically Generate TypeScript Types and Interfaces— An extension that helps you automate creating the initial static types for runtime values.

Riku Rouvila

Sublime Text 4 Released— While VS Code has become extremely popular in the past few years, Sublime Text used to be huge and it’s great to see a new major version. TypeScript, JSX and TSX support are baked in, as is Apple Silicon support, GPU rendering, and more.

Sublime Blog

[New] Free JavaScript Code Quality & Security Scanner - Real‑Time Scan

Snyk sponsor

A Boilerplate for SSR’d Vite, React 17, and TypeScript 4.3— Considers itself a “barebones, slightly-opinionated” boilerplate for working with a modern web stack.

JonLuca DeCaro

lightGallery: A Well Presented, Modular JS Image and Video Lightbox Gallery— Works with React.js, Vue.js, Angular, and TypeScript. Demos here or the GitHub repo. Been around a while but as of this week no longer relies on jQuery! GNU licensed.

Sachin N

Vuestic UI 1.0: A Vue.js 3.0 UI Framework— Features more than 50 highly customizable components.

Vuestic UI

ReacType 7.0: A Visual Prototyping Tool for React Developers— The popular drag-and-drop React prototyping tool with code preview is now in its seventh major release. Kevin Park has written an extensive article on it which provides an in-depth review of its capabilities.

OSLabs

💚 Use Node? Check out the latest issue of Node Weekly, our sibling email about all things relating to Node.js — from tutorials and screencasts to news and releases. Yep, we do include some Node related items here in JavaScript Weekly, but we save most of it for there.

→ Check out Node Weekly today

🎵 And one for fun..

Trombone.js: Yep, It's a Trombone..— I don’t know the first thing about playing the trombone, but here you go. The source is here along with an explanation of how it works. Allegedly it “closely approximates the acoustic properties of (a) real trombone”. I always found the 'pink trombone' vocal synthesizer (yes, it’s safe for work!) a laugh.

Jeffrey Auriemma

#​540 — May 28, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

Sparkplug: V8's Non-Optimizing JavaScript Compiler— When you wonder just where the V8 team will pull out a few more % of performance improvements, they come up with something :-). Their new ‘super-fast non-optimizing compiler’ in V8 v9.1 sits in between the existing interpreter and TurboFan compiler engines and brings another 5-15% boost to benchmarks. Firefox has had a similar concept in the shape of the baseline interpreter.

Leszek Swirski (V8 Team)

Locate Front-End Issues Like JavaScript or Network Errors Instantly— Get proactively alerted on any client-side issues such as JavaScript and network errors, optimize the load time of your front-end resources, and detect any UI issues that affect critical user journeys. Try it free with Datadog Synthetics.

Datadog sponsor

TypeScript 4.3 Released— Just a couple of weeks after the beta comes the real deal with a rather long feature list:

• An override keyword to explicitly define overriding methods.
• A --noImplicitOverride flag to make it an error to override methods in superclasses without using the aforementioned override.
• Template string type improvements.
• Methods and accessors can now be given private names, e.g. get #someValue().
• static index signatures.
• And, yes, a lot more.

Daniel Rosenwasser (Microsoft)

Jest 27 Released, Complete with Some New Defaults— Jest has ‘flipped some switches’ and introduced some new defaults you’ll want to be aware of if you use the popular testing framework. You can now also interactively step through failed tests one at a time, get inline snapshots without using Prettier, and you get much faster initialization times than Jest 26 too.

Tim Seckinger

Quick Bits

• The Angular project has unveiled an improved process for managing feature requests.
• 🎉 Node.js has turned 12 years old. You can still grab v0.0.1.
• Flow is a JavaScript static type checker out of Facebook that saw a lot of growth before TypeScript ate everyone's lunch. The project has issued a post clarifying Flow's future direction which is basically "Flow is staying open source but is going to focus even more on Facebook's own use cases."

Releases

fabric.js 4.5— JS Canvas framework (and SVG to Canvas parser).
Chart.js 3.3— Simple, flexible JS charting.
xstyled 3.0— CSS-in-JS framework built for React.
Cypress 7.4.0— Testing system.
ESLint 7.27.0— Find and fix problems in your JavaScript.

📖 Articles, Opinions & Tutorials

▶  How To Create Your First Flow in Node-RED— Node-RED is a browser-based ‘flow’ programming environment that uses Node.js under the hood. An interesting alternative way to build JavaScript powered systems.

Bleeding Code

A Thorough Analysis of CSS-in-JS— I feel too old-fashioned to fully buy into writing CSS alongside my JavaScript (sorry!) but Andrei does a good job at selling the benefits and compares some approaches.

Andrei Pfeiffer

Build a Node.js App with CockroachDB and the Node.js pg Driver— In this tutorial you’ll learn how to build a simple Node.js application with CockroachDB and the Node.js pg driver.

Cockroach Labs sponsor

Building a Rich WYSIWYG Text Editor From Scratch— Learn how to build a rich text editor into an app with Slate doing the heavy lifting.

Shalabh Vyas

The Modern Guide to React State Patterns— At one stage, you could basically just say ‘use Redux’ but there are so many options now, and this guide flies through a few approaches.

Fredrik Strand Oseberg

New Standards to Access User Device Hardware from JavaScript— WebHID, WebNFC, and Web Serial have opened up new avenues to interact with user’s device hardware for web apps. Device and browser support is kinda patchy, however.

Viduni Wickramarachchi

Using Pinia, an Alternative Vue.js Store— If you want to just go straight to the library, here’s its homepage (cute logo!)

Daniel Kelly

[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

Get Started with React by Building a 'Whac-a-Mole' Game— This is truly aimed at beginners keen to strike some ‘aha!’ moments while learning React. Using it to create a simple game certainly could take you out of your comfort zone.

Jhey Tompkins

Where's The Best Place to Host a Next.js Site?— A detailed look at deploying a Next.js app to Vercel, Netlify, Layer0 and Heroku and rating them based upon a variety of factors.

Ondrej Polesny

A Beginner's Guide to Vue 3
Catalin Pit

Boring Avatars: React Library to Generate Custom Avatars— Ranging from generic gradients to face-like creations, this library (GitHub repo) generates custom, SVG-based, round avatars from any username and color palette.

Boring Designers

CandyGraph: A Fast, Flexible 2D Plotting Library— A flexible and fast-by-default 2D plotting library tuned for rendering huge datasets on the GPU at interactive speeds. And if that sounds like a boast, hit up the examples (the animated ones lower down are the most interesting).

Rye Terrell

Drag-n-Drop Email Editor for React, Angular and Vue

Unlayer sponsor

threads.js: Web Workers Meet Worker Threads— Threads is both a terrifying nuclear apocalypse movie and also this library for making using both Web Workers and worker threads (as implemented in Node) as simple as possible. Outsourcing intensive code to other threads can really help in some cases.

Andy Wermke

NocoDB: An Open Source Airtable-a-Like— Airtable is a popular commercial spreadsheet-database service that we even use here at Cooperpress to help put the newsletters together. This is a flexible and surprisingly good looking open source pastiche with a Vue powered frontend.

nocodb team

ts-node 10.0: TypeScript Execution and REPL for Node
TypeStrong

eslint-plugin-tailwindcss: ESLint Plugin for Tailwind CSS Usage
Francois Massart

Velociraptor 1.0: npm-Style Script Runner for Deno
JurassiScripts

#​541 — June 4, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

Making JavaScript Run Fast on WebAssembly— Twenty years ago, JavaScript had a reputation of being rather slow but a huge amount of time, money and research went into making it incredibly fast in the browser. Now, the Bytecode Alliance is supporting work to do the same with optimizing performance in new environments opened up by WebAssembly. Lin illustrates what’s going on in her usual easily understood style.

Lin Clark (Bytecode Alliance)

Svelte for the Experienced React Dev— Svelte distinguishes itself from other frameworks by gaining efficiency with build time (as opposed to run time) compilation to vanilla JS. This walks through the basics with a React-leaning eye.

Adam Rackis

Couchbase Is the SQL-Friendly, NoSQL JSON Document Database— Couchbase has integrations available for Spring, Node, ASP.NET, and more. Read and write your data with a fusion of NoSQL flexibility and SQL familiarity. Check out developer.couchbase.com today for sample apps and tutorials.

Couchbase sponsor

▶  The History of Angular with Misko Hevery— The original developer of Angular talks about the history of the framework. 37 minutes.

Angular Rocks Podcast podcast

Quick Bits

• Chrome 92 is out in beta and the File Handling API now lets your PWAs define file handlers (origin trial only for now), V8 9.2 is included too with numerous JavaScript enhancements.
• Chrome 92's DevTools are looking sharp too. As well as a CSS Grid editor, consts can now be redeclared if you're working in the console.
• A look at the stage 3 Array.prototype.at proposal led to some discussion on Hacker News.
• After only a brief moment in the sun, Node.js 15 has gone 'end of life.' Upgrade to Node 16 ASAP. Node has also just turned 12 years old 🎂
• The Google Maps JavaScript API has some new powerful WebGL-powered functionality if you want to tilt, rotate, or work with 3D structures on your maps.

Releases

Node v16.3.0— Runner of the codes.
Electron 13— Build desktop apps with Node 14.16 and Chromium 91.
Acorn 8.3— Pure JS JavaScript parser.
Forever 4.0— CLI app to run a script forever.