Industry News

#507 — September 25, 2020

Unsubscribe  |  Read on the Web

⏪ In case you missed it, last week we covered the release of Vue 3.0, a major update on the Moment.js project, and a big new Deno release. Now on to this week..

JavaScript Weekly

Feature Watch: ECMAScript 2021 — Dr. Axel always keeps tabs on the new features coming to future versions of ECMAScript and he’s now started to do the same for the forthcoming ES2021.

Related to this TC39 has advanced a number of proposals this week (though they're not all guaranteed for ES2021 by any means):

• 
  Class static initialization blocks to stage 2


• 
  .item() for indexables to stage 3 (more on this by Dr. Axel.)


• 
  Import Assertions to stage 3


• 
  Intl.DisplayNames to stage 4


• 
  Intl.Enumeration to stage 2


• and a few others..
  

Dr. Axel Rauschmayer

billboard.js 2.1.0: A D3-Based Chart Library — Supporting over 10 different chart types or a combination of such, Billboard is a powerful option for rendering attractive charts – check out the demos here. v2.1 increases performance for larger datasets both during rendering and resizing – there’s a new theme available too.

Jae Sung Park

Scout APM - A Developer’s Best Friend — Scout’s intuitive UI helps you quickly track down issues so you can get back to building your product. Rest easy knowing that Scout is tracking your app’s performance and hunting down small issues before they become large issues. Get started for free.

Scout APM sponsor

Vime: A Customizable Media Player Built with Web Components — If you need to put together a standards compliant media player and just want a single API to worry about while supporting numerous video providers, this is for you. Frameworks like React, Vue, Angular and Svelte have also been thought about and it integrates with them too.

Rahim Alwer

V8 Release 8.6 — The latest version of the V8 JavaScript engine is now in beta until its eventual release with Chrome 86 (and, eventually, a future version of Node). The codebase is now more respectful, there are speedups in Number.prototype.toString, and a JavaScript fuzzer called js-fuzzer has been open sourced.

Ingvar Stepanyan (V8 Team)

💻 Jobs

Senior Software Engineer (Remote within U.S.) — Understand and enjoy working on the full stack? If you've got a proven track record of building user-oriented software we want to hear from you.

Reforge

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

Vettery

📚 Tutorials, Opinions and Stories

How to Visualize Data Structures in VS Code — VSCode Debug Visualizer is a handy VS Code extension for visualizing data structures – we’ve linked it before, but Addy does a great job of showing off the benefits here. JavaScript and related languages have the best support.

Addy Osmani

▶  Building a Netflix Clone with React, Styled Components and Firebase — A rather epic 10 hour tutorial covering almost everything you’d need to know to build the frontend for your own Netflix-a-like.

Karl Hadwen

Decreasing Bundle Sizes with ES Modules in Angular 10 — Does your module formatting choice affect bundling size, CommonJS, and ES modules? Get answers in this review.

Wijmo by GrapeCity, Inc. sponsor

A Look at Textures.js, a Way to Add Textured Styles to d3 Visualizations — It’s nice that it’s so simple, but beware that adding such features to charts can sometimes impede usability(!) GitHub repo.

Brady Dowling

VS Code Tips for Power Users — I remember when Vim tutorials were all the rage, but now it’s Visual Studio Code, so here are some tips and techniques to help you make the most of it.

Boris Yordanov

▶  Discussing TypeScript and Svelte — Orta Therox, who works on the TypeScript compiler, talks about how TypeScript works with Svelte, what the latest news is, and more. Definitely worth a listen if you’re exploring Svelte.

Real Talk JavaScript Podcast podcast

Learn How Devs are Helping 👨🏾‍🎨👩🏻‍🔧👨🏽‍🌾 Adapt to 2020

Square UnBoxed - Free Virtual Event sponsor

Running Go in the Browser with WASM and Web Workers — Qvault (interactive coding courses in the browser) started using Web Workers and WASM in order to stream output from a program. This post shows off the JavaScript needed to bring it all together.

Lane Wagner

Learn date-fns: A Lightweight JavaScript Date Library

James Hibbard

🔧 Code & Tools

urlcat: A URL Builder Library for JavaScript — “makes building URLs very convenient and prevents common mistakes.”

Botond Balázs

fflate: High Performance Compression and Decompression in 8KB — The README has a comparison table against pako, tiny-inflate, and UZIP.js and promises to offer the best of all worlds across performance, size, and ES module support.

Arjun Barrett

Stream Chat API & JavaScript SDK for Custom Chat Apps — Build real-time chat in less time. Rapidly ship in-app messaging with our highly reliable chat infrastructure.

Stream sponsor

big.js: A Small Library for Arbitrary-Precision Decimal Arithmetic — 0.1 + 0.2 doesn’t equal 0.30000000000000004 here. v6.0 just came out.

Michael M

Crossfilter: Fast N-Dimensional Filtering and Grouping of Records — For exploring large multivariate datasets in the browser. Supports fast (<30ms) interaction with coordinated views, even with datasets containing a million or more records.

Square and the community

Importabular: A 5KB JavaScript Spreadsheet Component — There are certainly lots of options available for an Excel-like JS component but this super light alternative, which is mobile friendly, might also be worth a look. GitHub repo.

Renan Le Caro

tinyhttp 0.4: A Lightweight and Modular Express-Like Web Framework — Written in TypeScript and claims to be faster than Express but with full Express middleware support. GitHub repo and 0.4 release notes.

Paul Losev

11 Top Node ORMs, Query Builders and Database Libraries in 2020 — A roundup of the most popular options including Mongoose, Knex.js, Sequelize and, yes, Prisma.

Prisma

ts-sql: A SQL 'Database' Implemented Purely in TypeScript Type Annotations — Last week we saw a spell checker built with TypeScript types and the tomfoolery continues here!

codemix

#506 — September 18, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

Vue 3.0 'One Piece' Released — Vue.js is a highly popular framework for building UIs with JavaScript, and a common alternative to things like React or Angular. Vue 3.0 has been in the pipeline for quite some time and has gone through a *lot* of beta and RC releases, but 3.0 is finally here with a new composition API, Teleport, and more. If you're coming from an earlier version of Vue, check out the migration guide. You can also watch Evan's Vue.js Amsterdam keynote where he just announced the release.

Vue.js Team

Moment.js: It's Done, Jim, But Now As We Know It — Moment.js is a hugely popular date and time manipulation library. People often find reasons not to use it, though, such as its size in app bundles, but the creators want to keep it as it is, not add new features, and keep the project alive but in a ‘done’ state.

Moment.js Team

When the Bits Hit the Fan: AppSignal — Deploys can go bad. That's when you need clear and focused insights. Stop logging into five different tools to try and connect the dots. AppSignal provides insights into errors, performance, servers and more - all in one clear and easy interface.

AppSignal sponsor

Understanding the Event Loop, Callbacks, Promises, and async/await — This isn’t new ground, but Tania always does a great job of explaining concepts from the ground up.

Tania Rascia

Node.js September 2020 Security Releases — New versions of all supported release lines are out to fix three security issues, so pick up Node 10.22.1, 12.18.4 or 14.11.0 today.

Michael Dawson

Deno 1.4 Released — Deno is a modern, security focused V8-based runtime for JS and TypeScript that hit the big 1.0 recently, but features continue to get added. In 1.4, we get support for a WebSocket API (which you can use from Deno just like you would in a browser), automatic restarts on file changes, integrated test coverage support, and more.

Bartek Iwańczuk, Ryan Dahl, and Luca Casonato

💻 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 Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

📚 Tutorials, Opinions and Stories

Inspecting Just-in-Time Compiled JavaScript — Warning: Very technical! jsshell (js) is a CLI interactive prompt for Firefox’s JS runtime and you can now coerce it into showing you the results of JIT compilation.

Tom Ritter (Mozilla)

Rewriting Facebook's 'Recoil' React Library From Scratch in 100 Lines — Recoil is a state management library for React being built by a team at Facebook (though not the React team itself).

Bennett Hardwick

Jest Has Its Pros and Cons. There's a Way to Run It with No Cons — Wallaby runs your JavaScript and TypeScript tests immediately as you type, with results in your editor right next to your code.

Wallaby.js sponsor

From Rust to TypeScript — Alan really likes Rust, so he’s been looking at how to take some of its approaches and best practices and introduce them into his TypeScript programming.

Alan Darmasaputra

Why Next.js is My Ultimate Choice over Gatsby, Gridsome, and Nuxt — More detailed and balanced in its comparisons than the title may imply.

Ondrej Polesny

How I Built a Serverless Recipe App with FaunaDB and Vue.js — If you tend to turn to Express.js and a more traditional database for building CRUD apps, this post will present an interesting alternative approach to you.

Tom Doe

🤡  Misusing The TypeScript Type Checker As A Spell Checker — Why? Because you can. Sort of. Yes, this is purely for fun and giggles.

Kevin Kuchta

What Are the Best JavaScript Debugging Tools of 2020? Find Out in This Guide — Improve the quality of your code with these JavaScript debugging tools.

Raygun sponsor

A Hands-On Introduction to Reactive Programming with RxJS

Daniel Caldas

▶  Let's Rebuild Pac-Man with JavaScript — A well recorded 1h40m guide/tutorial to building a Pac-Man (that game from the 80s with the ghosts and pills!) clone using modern JavaScript.

Thomas Weibenfalk

Effective Limited Parallel Execution in JavaScript — Well, concurrency really, but nonetheless a short and sweet look at what using a promise pool could do for you.

Arseny Yankovsky

🔧 Code & Tools

μPlot 1.2: A Fast, Tiny Time Series Chart Library — A fast, memory efficient Canvas-based time series plotting library.

Leon Sorokin

Luxon: A Library for Working with Dates and Times — If you saw the Moment.js news (featured), you might be looking for lighter alternatives. You can think of Luxon as an ‘evolution’ of Moment, said Moment’s creators.

Isaac Cambron

Klipse: A Javacript Plugin for Embedding Interactive Code Snippets in Blog Posts — Supports many languages including JavaScript, naturally, but also uses client-side evaluators to work with languages like Ruby, C++, PHP, SQL and Python too.

Yehonathan Sharvit

ip-address: Library for Parsing and Manipulating IP Addresses — Works with both IPv4 and IPv6 addresses.

Beau Gunderson

Get an Instant GraphQL API with Hasura to Build Fullstack Apps, Fast

Hasura sponsor

react-range: Accessible Range Input with a Slider — Accessible and customizable. Examples here.

Vojtech Miksu

Functional: Common Functional Programming Algebraic Data Types for JavaScript — Boasts compatibility with ‘most modern browsers’ and Deno.

Sebastien Filion

Gemini 4: A 'Currently Playing' Viewer for Spotify — A basic Electron app that offers an ‘easy on the eyes’ way to see what’s currently playing in Spotify.

Gabe Haarberg

#505 — September 11, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

A New Proposal for Decorators for JavaScript Classes — Currently at stage 2 in TC39’s process and due to be discussed in more depth this month, decorators provide a way to extend methods and other ‘syntax forms’ by wrapping them with other functionality. Note that this proposal differs from the decorators proposed to TC39 in 2018, that Babel 7 supports, and that inspired ‘experimental’ decorators in TypeScript.

TC39

▶  'You Really Don't Need All That JavaScript, I Promise' — If you have twenty minutes, you might enjoy this. Stuart, a long time Web standards expert, explains why we shouldn’t rely on JavaScript as much as we do and why we shouldn’t reach for a JS framework as the first, last, and only tool we use.

Stuart Langridge

New Course: 🐧 Complete Intro to Linux and the Command-Line — Gain powerful command-line skills, learn to use Ubuntu, quit VIM, handle package management, and write your own shell scripts.

Frontend Masters sponsor

Playwright 1.4: Fast and Reliable Cross-Browser Testing — Despite being 1.4, this is a pretty big release for the Puppeteer alternative. It now includes a CLI playwright-cli with which you can record user interactions and generate Playwright scripts, generate page screenshots, and more. Plus there’s experimental support for recording videos of what your scripts do with the browser.

Microsoft

JavaScript for Data Science: A Book — A book available both commercially and to read online, aimed not specifically at JavaScript developers (as it provides a neat introduction to JS in its own right) but at anyone looking to use JavaScript as a bit of a ‘Swiss Army knife’ for working with datasets. This is one of those great resources you’re likely to pass on to someone who really needs it.

Gans, Hodges and Wilson

💻 Jobs

Sr. Engineer @ Dutchie, Remote — Dutchie is the world's largest and fastest growing cannabis marketplace. Backed by Howard Schultz, Thrive, Gron & Casa Verde Capital.

DUTCHIE

Sr. Engineer (TypeScript) at Brightflow AI — We’re bringing easy, automated cash flow forecasting tools and financial insights to small and mid-sized businesses.

Brightflow AI

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

Vettery

📚 Tutorials, Opinions and Stories

Rendering React on the Edge with Flareact and Cloudflare Workers — Josh works at Vox Media, one of the Web’s biggest publishers (think The Verge) and rendering pages quickly is important for them given they sell ads. Here, he introduces Flareact, an edge-rendered React framework built for Cloudflare Workers.

Josh Larson

Sending Data From an HTML Form to a Google Sheet — By going via AWS Lambda and SQS. BTW, if serverless use cases interest you, we have a serverless newsletter for that 😁

Levi Nunnink

Stream Chat API & JavaScript SDK for Custom Chat Apps — Build real-time chat in less time. Rapidly ship in-app messaging with our highly reliable chat infrastructure.

Stream sponsor

Testing an HTML Canvas with Cypress — An example of setting up basic visual regression testing with Cypress.

Valentino Gagliardi

Creating Extensions for Visual Studio Code: An Introduction — If you want to extend one of the most popular editors out there.. (Note: This tutorial uses TypeScript for the heavy lifting.)

Ganesan Rengasamy

How cdnjs Migrated to Serverless with Workers KV — cdnjs is a free CDN service that hosts almost 4,000 JavaScript libraries. Cloudflare provides the CDN services, but now it’s been remodelled to using their serverless Workers platform and Workers KV key-value data store – here’s the full story.

Tyler Caslin (Cloudflare)

A Practical Guide to the Web Cryptography API

David R. Myers

Raygun’s Guide to Debugging JavaScript in Major Browsers. Read It Here.

Raygun sponsor

Symbolic Computation in JavaScript with Math.js — Math.js is an extensive math library that can parse expressions, deal with things like complex numbers, matrices, etc. This post is really just a showcase of Klipse, a plugin for embedding interactive code snippets into blog posts, but we dig it.

Yehonathan Sharvit

Basic Procedural Texture Generation with texgen.js — Like the post above, this is really just showing off Klipse, but in a more visual way.

Yehonathan Sharvit

Learning JavaScript By Building a Snake Game — You know I like a straightforward ‘from scratch’ tutorial that gets to the core of the matter without lots of extraneous tooling.. and this ticks that box 😄

Souparno Paul

🔧 Code & Tools

Tooltip Sequence: A Simple Step by Step Tooltip Helper for Any Site — Another option, this one minimal, to add a ‘guided tour’ set of tooltips to a website or app, to point out features. Demo here.

Sooraj S Nair

Cropper.js: An Image Cropping Control — Now 5 years old but still seeing active development and available in an ES module variant. GitHub repo.

Fengyuan Chen

Try the Fastest, Most Secure Way to Test and Build Software Today 🚀 — Buildkite is as fast and enjoyable to use at 500 developers as it is at 10. Self-hosted agents work with all languages.

Buildkite sponsor

edit-in-place: A Flexible Edit-in-Place Library for Angular — Try it here to check out the variety of ways you can enable this functionality.

netanel basal

vanilla-colorful: A Tiny Color Picker for Modern Web Apps — See a demo here. It’s built as a ‘custom element’ with TypeScript, framework-agnostic (indeed it’s a port of react-colorful to vanilla custom elements), no dependencies, and mobile friendly.

Serhii Kulykov

Tweakpane: A Compact GUI for Fine-Tuning Parameters and Monitoring Values — I love the interactive nature of the homepage's demo. GitHub repo.

Hiroki Kokubun

#504 — September 4, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

Underscore.js 1.11.0: The Long Standing Functional Helper Library Goes Modular — “Underscore!?” I hear some of our longer serving readings exclaiming. Yes, it’s still around, still under active development, and still a neat project at a mere 11 years old. As of v1.11.0 every function is now in a separate module which brings treeshaking opportunities to all, but there’s also a monolithic bundle in ES module format for those who prefer that. This article goes into a lot more depth about the new modular aspects.

Jeremy Ashkenas

Mastering the Hard Parts of JavaScript — A currently 17-part blog post series written by someone taking Frontend Masters’ JavaScript: The Hard Parts course and reflecting on the exercises that have helped them learn about callbacks, prototypes, closures, and more.

Ryan Ameri

FusionAuth Now Offers Breached Password Detection and LDAP — FusionAuth is a complete identity and access management tool that saves your team time and resources. Implement complex standards like OAuth, OpenID Connect, and SAML and build out additional login features to meet compliance requirements.

FusionAuth sponsor

How Browsers May Throttle requestAnimationFrame — requestAnimationFrame is a browser API that allows code execution to be triggered before the next available frame on the device display, but it’s not a guarantee and it can be throttled. This post looks at when and why.

Matt Perry

Brahmos: Think React, But Without the VDOM — An intriguing user interface library that supports the modern React API and native templates but with no VDOM.

Brahmos

NativeScript 7.0: Create Native iOS and Android Apps with JS — A signficant step forward for the framework by aligning with modern JS standards and bringing broad consistency across the whole stack. Supports Angular, Vue, and you can even use TypeScript if you prefer.

NativeScript

💻 Jobs

Senior JavaScript Developer (Warsaw, Relocation Package) — Open source rich text editor used by millions of users around the world. Strong focus on code quality. Join us.

CKEDITOR

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 Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

📚 Tutorials, Opinions and Stories

Designing a JavaScript Plugin System — jQuery has plugins. Gatsby, Eleventy, and Vue do, too. Plugins are a common way to extend the functionality of other tools and libraries and you can roll your own plugin approach too.

Bryan Braun

▶  Making WAVs: Understanding, Parsing, and Creating Wave Files — If you’ve not watched any of the Low Level JavaScript videos yet, you’re missing a treat. But this is a good place to start, particularly if the topic of working with a data format at a low level appeals to you.

Low Level JavaScript

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

The New Logical Assignment Operators in JavaScript — Logical assignment operators combine logical operators (e.g. ||) and assignment expressions. They're currently at stage 4.

Hemanth HM

Eight Methods to Search Through JavaScript Arrays

Joel Thoms

TypeScript 4.0: What I’m Most Excited About — Fernando seems particularly enthused about the latest version of TypeScript!

Fernando Doglio

Machine Learning for JavaScript Devs in 10 Minutes — Covers the absolute basics but puts you in a position to move on elsewhere.

Allan Chua

How to Refactor a Shopify Site for JavaScript Performance

Shopify Partners sponsor

'TypeScript is Weakening the JavaScript Ecosystem' — Controversial opinion alert, but we need to balance out the TypeScript love sometime.

Tim Daubenschütz

▶  Why I’m Using Next.js in 2020 — Lee makes the bold claim that he thinks “the future of React is actually Next.js”.

Lee Robinson

Building a Component Library with React and Emotion

Ademola Adegbuyi

Tackling TypeScript: Upgrading from JavaScript — You’ll know Dr. Axel from Deep JavaScript and JavaScript for Impatient Programmers.. well now he’s tackling TypeScript and you can read the first 11 chapters online.

Dr. Axel Rauschmayer

Introducing Modular Underscore — Just in case you missed it in the top feature of this issue ;-)

Julian Gonggrijp

🔧 Code & Tools

CindyJS: A Framework to Create Interactive Math Content for the Web — For visualizing and playing with mathematical concepts with things like mass, springs, fields, trees, etc. Lots of live examples here. The optics simulation is quite neat to play with.

CindyJS Team

Print.js: An Improved Way to Print From Your Apps and Pages — Let’s say you have a PDF file that would be better to print than the current Web page.. Print.js makes it easy to add a button to a page so users can print that PDF directly. You can also print specific elements off of the current page.

Crabbly

AppSignal Is All About Automatic Instrumentation and Ease of Use — AppSignal provides you with automatic instrumentation for Apollo, PostgreSQL, Redis, and Next.js. Try us out for free.

AppSignal sponsor

Volt: A Bootstrap 5 Admin Dashboard Using Only Vanilla JS — See a live preview here. Includes 11 example pages, 100+ components, and some plugins with no dependencies.

Themesberg

Stencil 2.0: A Web Component Compiler for Building Reusable UI Components — Stencil is a toolchain for building reusable, scalable design systems. And while this is version 2.0, there are few breaking changes.

Ionic

NgRx 10 Released: Reactive State for Angular

ngrx