Industry News

#450 — August 16, 2019

Read on the Web

JavaScript Weekly

JavaScript and Node Testing Best Practices — Almost 50 best practices divided into categories (backend, frontend, CI, etc.) complete with code examples. Not just the basics, it digs into areas like visual regression, property-based testing, and contract testing, too.

Yoni Goldberg

Introducing the New React DevTools — We’ll feature this more in next week’s React newsletter but if you’re a React developer, you should be using the DevTools and if you are, they’re now a lot faster and easier to navigate. React 15 and above are supported.

Brian Vaughn

Image & Video Management Made for Developers — Simplify and automate the process of uploading, manipulating, optimizing, and delivering images and videos across every device at any bandwidth. Try Cloudinary. See how easy media management can be. Get your own free account today.

Cloudinary sponsor

Google's Guide to Improving Third-Party JavaScript Performance — The folks over at Google have a really neat guide to making your site faster and have just released three new tutorials and a 'code lab' on the topic of improving performance when you load in JavaScript from third-parties:

• 
  Third-Party JavaScript Performance covers the big picture.


• 
  Identify Slow Third-Party JavaScript demonstrates using Chrome's DevTools and Lighthouse to find performance bottlenecks.


• 
  Efficiently Load Third-Party JavaScript provides techniques for loading JavaScript into your pages.


• 
  The Optimizing Third-Party JavaScript Codelab lets you put your new-found skills to the test.

Milica Mihajlija

The History and Legacy of jQuery — jQuery may have fallen somewhat out of favor in web development, but we recently did a poll that showed 13% of JavaScript developers still proactively turn to it.

Danny Guo

An Extensive VS Code Extension List for Full Stack Developers — A massive compilation of VS Code extensions mainly aimed at JavaScript developers. It’s interesting because the original version got torn apart on social media so the author has rewritten it with everyone’s suggestions! 😄

Jon R. Corbin

💻 Jobs

Front-end Engineer — Goldstar is looking for Front-end Engineers with React expereince onsite in Portland, Oregon and Pasadena, California.

Goldstar

100+ JavaScript Roles on hackajob 🎉 — Upload your GitHub projects and we'll do the rest. Find a role based on your skills with an average salary of £70k.

hackajob

📘 Tutorials

How to Chain Multiple Functions Properly with await/async

Nicholas Dunkel

'Logic-Less' JSX — The opportunities that JSX provides for mixing logic and markup are significant but.. you can go too far. Here are some thoughts on how to keep things clean.

Jonathan Verrecchia

The Best Way To Lazy Load Angular Elements — Advice based on enterprise-level production experience.

Tomas Trajan

Security Best-Practices for CI/CD — Read about a number of ways that can help you implement standard security measures for CI/CD pipeline security.

CircleCI sponsor

5 Interesting Uses of JavaScript Destructuring

Dmitri Pavlutin

The Differing Perspectives on CSS-in-JS — Some people outright hate the idea of CSS-in-JS, some love it. Chris Coyier runs through the varying stances.

CSS Tricks

▶  Low Level JavaScript — A new YouTube channel focusing on building low level things in the high level language we all know and love. The first 4 videos focus on parsers.

Low Level JavaScript

🔧 Code and Tools

meSpeak.js 2.0: Text to Speech in JavaScript — Yes, browsers mostly support the Speech Synthesis API natively now, but this is an interesting alternative under certain circumstances (the voices are not great, but you can get some interesting effects – there’s even a Scottish voice).

Norbert Landsteiner

NPKILL: Find and Remove Old or Large node_modules Folders — Stop joking about those gigantic node_modules folders and delete the ones you don’t need with this tool.

Estefanía García Gallardo and Juan Torres Gómez node

Accelerated Distraction-Free JavaScript Testing — Wallaby.js is a developer productivity tool that runs your JavaScript and TypeScript tests immediately as you type, highlighting results in your IDE right next to your code.

Wallaby.js sponsor

Introducing Transloco: Angular Internationalization Done Right — A new i18n library for Angular that seems to put the developer experience first and foremost. GitHub repo.

Netanel Basal

useAuth: The Simplest Way to Add Auth to a React App — Integrates with Auth0, the authentication platform, to give you a lot of features ‘out of the box’.

Swizec Teller

Inferno: A Fast, React-a-Like with a Different Approach — It’s not React, but it’s very much like it and you might be intrigued by its differences (which include a different approach to optimizing performance and lifecycle events on functional components).

Inferno

MongoDB Atlas Is a Powerful and Reliable Cloud Database. Try Now

MongoDB Atlas sponsor

Acorn 7.0: A Tiny JavaScript Parser written in Pure Javascript

Haverbeke, Stepanyan, et al.

nve 1.0: Run Things With a Specific Node.js Version — Easily execute a file, command, or REPL using a specific version of Node.

ehmicky node

The buffer Module From Node, But for the Browser

Feross Aboukhadijeh

#449 — August 9, 2019

Read on the Web

JavaScript Weekly

React v16.9 Released and a Roadmap Update — BTW, if you’re a React developer, be sure to check out our React-specific newsletter for goodies like how React’s development mode works or tips to avoid React hook gotchas.

Dan Abramov and Brian Vaughn

Using Async Generator Functions in JavaScript — Async generator functions are special because you can use both await and yield in them, but what are the practical uses?

Valeri Karpov

Instantly Know When JavaScript Errors Occur and How to Fix Them — With JavaScript error tracking from Rollbar you get exception and crash reports in real-time. Track and debug bugs in record time. Start monitoring and fixing errors in minutes - Try Rollbar for free.

Rollbar sponsor

Future-Oriented Programming with Vue.js 3 — One of Vue.js 3’s forthcoming new features is support for a function-based API (more on what that means in this podcast). Here’s a look at what problems it’ll solve and how it’ll improve logic composition.

Taras Batenkov

Explaining the globalThis ES Proposal — The good Dr. Axel is back digging into another new proposal, this time explaining how globalThis (currently at stage 3) could normalize the way you access the global this object (which might otherwise be window, self, or global depending on your environment).

Dr. Axel Rauschmayer

Intl.NumberFormat and Its New Capabilities — Intl.NumberFormat is an established route to locale-aware number formatting, but it is gaining a variety of new abilities (already supported on Chrome 77+) including support for BigInt, units of measurement, and scientific notation.

Mathias Bynens and Shane F. Carr (V8)

💻 Jobs

Have You Thought About Being a Web Developer in Robotics? — A unique opportunity to work on a high-powered engineering web application for a computer vision system combining 3D graphics and an intuitive user experience.

Veo Robotics

Job Searching Without the Searching? Try hackajob 🔎 — Let your skills do the talking. Our AI matches you to roles based on your favourite JavaScript frameworks so you can do what you love.

hackajob

📘 Tutorials

What’s New in ES2019 — We’ve linked to a few ES2019 roundups this year. Here’s another that’s been big on several social sites this week, so it’s clearly a topic of interest.

Marin Radman

Remainder Operator vs. Modulo Operator — Is the % in 5 % 2 a remainder operator or a modulo operator? There’s a difference and Dr. Axel outlines what happens in JavaScript. This is the sort of thing that could catch you out if you’re familiar with other languages that treat % in a different way..

Dr. Axel Rauschmayer

Using Time Series for Application Performance Monitoring to Win at the Flight E-Ticket Sales Game

InfluxData sponsor

How to Reduce Your Vue.js Bundle Size with webpack — Vue recommends that your bundles don’t exceed 244KB, but what if they do? webpack-bundle-analyzer to the rescue!

Jennifer Bland

Building a Full-Stack Serverless App with Cloudflare Workers — Workers is Cloudflare’s edge-located serverless JavaScript platform. This walkthrough demonstrates how to build apps on it and store data on its key-value storage system.

Kristian Freeman

Asynchronous Modules and Components in Angular Ivy — Ivy is the code name for Angular’s next-generation compilation and rendering pipeline.

Artur Androsovych

Using scrollIntoView() to Show Added Elements to a Container with Overflow — A great example of one of those times when you see something in the docs you didn’t realize existed and it makes an existing task much easier.

Christian Heilmann

Interesting Use Cases for JavaScript's Bitwise Operators — If you need to do some bit-level manipulation of values, JavaScript has the operators you need.

Glad Chinda

The Essential Guide To JavaScript’s Newest Data Type: BigInt — For when the Number type just isn’t enough..

Faraz Kelhini

Webinar: Getting Started with NodeSource and AWS Lambda

NodeSource sponsor

Exporting Angular Page Content to PDF Using Kendo UI

Christian Nwamba

Getting More Out of Vue's Async Components — Some interesting things you can do with async components in Vue.js.

Abdelrahman Awad

🔧 Code and Tools

TypeLighter.js: A Lightweight 'Typewriter' Effect — An elegant effect delivered in just 1KB of code. Here’s the GitHub repo.

Edern Clemente

Resemble.js: Image Analysis and Comparison Library — A Canvas-based approach for performing basic color/brightness analysis of images or to test how two images ‘resemble’ each other. Here’s some live demos.

Resemble

A Much Faster Way to Debug Code Than with Breakpoints or console.log — Wallaby catches errors in your tests and code and displays them right in your editor as you type, making your development feedback loop more productive.

Wallaby.js sponsor

Vuestic Admin 2.0: A Well-Designed Vue.js Admin Template — A template for an admin system along with over 40 custom UI components. Here’s a live demo.

Epicmax

JustGage: A Way to Draw and Animate Dashboard-Style 'Gauges' — An older library that’s just had its first release in 3 years. Uses Raphaël for the rendering.

Bojan Djuricic

vue-router 3.1: The Official Router for Vue.js — router-link now has a scoped slot.

Vue.js

MC.js: An Open Source 'Minecraft'-Style Engine — It's built with React, GraphQL, Three.js (so it uses WebGL behind the scenes), and Node.

Ian Huang

#448 — August 2, 2019

Read on the Web

JavaScript Weekly

Hotkey: Trigger an Action on an Element When a Keyboard 'Hotkey' is Pressed — Want quick and simple keyboard shortcuts for elements on your page? Set the data-hotkey attribute and use Hotkey. It even supports multiple keys pressed in sequence. GitHub built and uses it (view source on any GitHub page and look for the data-hotkey attributes).

GitHub

Electron 6.0 Released — Just 3 months after version 5 was released, the popular JavaScript-based cross-platform desktop app building platform hits version 6 and uses Chromium 76, Node 12.4, and V8 7.6 under the hood.

Electron.js Team

New Introduction to Gatsby Course with Jason Lengstorf — Build blazing 🔥 fast website by default with Gatsby. In this course, you'll build up a blog from scratch and deploy your brand new blog to Netlify for the world to see!

Frontend Masters sponsor

Did You Know String.prototype.replace Supports Replacement Patterns? — It feels a bit Perl-like, but this is an interesting feature I’d never seen in JavaScript before (despite being in the MDN docs). Example: 'abc'.replace('b', '$&-$&') === 'ab-bc'.

Stefan Judis

Writing a Simple MVC App in Plain JavaScript — If you’re tired of hearing about React, Angular, Mithril, Ember, and the rest, and just want to write JavaScript, this is for you. (Ultimately, all of those frameworks are very useful but being able to work without them first will help you appreciate what they do!)

Tania Rascia

Taking Redux Off of the Main Thread with Comlink — Using Web Workers carefully can yield major UX and performance benefits by taking computation off of the UI thread. Here’s one way to do it when using Redux.

Surma

💻 Jobs

JavaScript Developer at X-Team (Remote) — Join the most energizing community for developers. Work from anywhere with the world's leading brands.

X-Team

Front-end Engineer — Goldstar is looking for front-end Engineers with React experience on-site in Portland, Oregon and Pasadena, California.

Goldstar

Get Hired Based on Your Skills Not Your CV — Our AI makes it easier and quicker to match with top JavaScript jobs, with no recruiters and an average salary of £70k.

hackajob

📘 Tutorials, Opinions, and Videos

▶  Let's Learn About Scope in JavaScript — Google’s dynamic JavaScript duo, Jake and Surma, present an entertaining chat about variable scoping, complete with tablet-based demos.

Google Chrome Developers

Looking at the Optional Chaining ES Proposal — Boils down the proposal to exactly the essentials you need to know.

Dr. Axel Rauschmayer

The Developer’s Guide to Not Losing the Metrics You Need — Gathering and storing metrics is a part of production. When adverse events occur, you need to have the metrics available to debug the problems.

InfluxData sponsor

Do React Hooks Replace Redux? — This question has bounced around in the community a lot recently as more use cases for hooks emerge.. but Eric’s TLDR is ‘Hooks are Great, but No.’ and he explains why in depth.

Eric Elliott

Getting Started with Vuetify 2.0 — Vuetify is a Material Design-based component library for Vue.js.

Ben Hong

Quick Tips for Using Mocks when Unit Testing with Jest

Daniel Caldas

First-Class Functions in JavaScript — A brief tutorial aimed at beginners who might be wondering why being able to treat functions as first-class citizens (i.e. as objects in their own right) has merit.

Nick Scialli

Top 10 GitHub Best Practices - Lessons from Thousands of Repositories

Datree.io sponsor

My VS Code Setup: Making The Most Out of VS Code — A grab bag of addons and tools to consider if you’re a VS Code user.

Deepu K Sasidharan

Understanding RxJS Observables and Why You Need Them — RxJS is a reactive programming library based around ‘observables’ and is used by Angular for its reactivity.. but you can use it separately too.

Nwose Lotanna

🔧 Code and Tools

Hackathon Starter: A Boilerplate for Node Web Apps — A boilerplate for when you want to start building a Node app quickly (such as at a hackathon) as it includes almost everything you’d need.

Sahat Yalkabov

Esprint: Runs ESLint Across Multiple Threads for More Performance — It’s been considered that this could be merged into ESLint itself.

Pinterest

Ensure That Your Code Is Error-Free Before Merging — Set standards on coverage, duplication, complexity, and style issues and see real-time feedback in your Git workflow.

Codacy sponsor

Treeverse: Walk Tree Structures Depth- or Breadth-First

Isaac Z Schlueter

Rollup: A Modern ES6 Module Bundler — Not a new project, but it's been getting plenty of releases lately. Write your code using ES modules and get tree-shaking/dead code elimination and bundling to the format you require. One of Rollup’s wins over more popular alternatives is its speed.

Rollup Contributors

Top 25 JavaScript Plugins for WebStorm and IntelliJ

Ilana Brudo

#447 — July 26, 2019

Read on the Web

JavaScript Weekly

▶  Creating JavaScript: The Story of JavaScript's Birth — A very highly produced narrative podcast episode that digs into the history of JavaScript over the course of 27 minutes. One to listen to on your commute.

Command Line Heroes podcast

Mithril.js 2: A JavaScript Framework for Building Brilliant Applications — Mithril is a really neat alternative to things like Vue, React or Angular. It’s very compact and fast (so ideal for mobile), runs a bit closer to vanilla JS than the alternatives, and is great for tying together vanilla JS libraries rather than needing its own alternatives. 2.0 is a big release so congratulations.

Mithril

Image & Video Management Made for Developers — Simplify and automate the process of uploading, manipulating, optimizing, and delivering images and videos across every device at any bandwidth. Try Cloudinary. See how easy media management can be. Get your own free account today.

Cloudinary sponsor

Practical Ways to Write Better JavaScript — You’re not necessarily going to agree with all of them (e.g. “Use TypeScript”!) but this is a reasonably solid batch of points to think about overall.

Ryland Goldstein

Optional Chaining and Nullish Coalescing Now at Stage 3 — New JavaScript features go through various stages before they become official and this ?. operator to let you make chained property or function calls optional is now on the brink of making the standard. Also now at stage 3? Nullish Coalescing!

Ecma TC39

Announcing TypeScript 3.6 Beta — Feature complete, with the final release due in a few weeks.

Daniel Rosenwasser (Microsoft)

💻 Jobs

Sr. Front End Engineer - New York — Our mission is to fix finance. Join our engineering team to create a platform for robust and powerful financial apps.

Addepar

Full-Stack Senior Software & Marketing Engineer — Bring your engineering prowess to the brand helping athletes and coaches around the world analyze and plan their training.

TrainingPeaks

Find a Job Through Vettery — Vettery matches top tech talent with growing companies. Create a profile to get started.

Vettery

📘 Tutorials, Opinions, and Videos

Dissecting a Mini Black Hole Implemented in 139 Bytes of JavaScript — This is a really neat exploration of a tiny bit of (admittedly ultra compact) JavaScript code.

Frank Force

The Fundamentals of React — An evergreen, one-stop-shop introductory guide to React that covers all of the fundamental concepts you need to know. P.S. We also have a React newsletter where we focus on all things React!

Samer Buna

Immediate JavaScript/TypeScript Test Feedback in Your IDE As-You-Type — Wallaby.js is a developer productivity tool that runs tests immediately as you type, highlighting results in your editor beside your code.

Wallaby.js sponsor

▶  On the New Awesomeness Coming in Vue.js 3.0 — An hour long chat with Vue.js core team member Chris Fritz on what’s coming in the next major version of Vue.

devmode.fm podcast

When A Rewrite Isn’t: Rebuilding Slack on the Desktop — A brief look behind the scenes at how chat service Slack has made significant architectural improvements to their Electron-based client.

Mark Christian and Johnny Rodgers (Slack)

Why You Should Definitely Learn How to Use CSS-in-JS

Brent Jackson

🔧 Code and Tools

Tabulator: An Interactive Table and Data Grid Library — Supports all major browsers and can be used with Angular, Vue, and React if you wish.

Oli Folkerd

CesiumJS: A Geospatial 3D Mapping and Virtual Globe Library — It’s been around a few years (we first linked it in 2016!) but with lots of releases under its belt and near universal support for WebGL nowadays, it’s worth checking again if you need to render globes or maps. GitHub repo. The demos are all quite striking.

Cesium Consortium

Browser Automation Experience Made Reliable and Less Flaky — Taiko is a free/open source browser automation tool that addresses the last mile to reliable testing.

ThoughtWorks - Taiko sponsor

json-complete: A JSON Alternative That Retains References, Handles Circular Dependencies, and More — Provides an interesting way to encode and store state and supports ‘almost every data type’ available in JavaScript.

CiereLabs

Vuetify 2.0 Released: A Material Component Framework for Vue.js — A framework that provides clean, reusable components for Vue apps that adhere to Google Material Design principles. Here’s how to get started.

Vuetify.js

Moveable: A Library to Make Elements Easier to Manipulate — Add moving, dragging, resizing, and rotation functionality to elements with this.

Daybrush (Younkue Choi)

Jay: A 'Supercharged' JavaScript REPL — An interesting alternative to Node’s built-in REPL that adds features like loading modules directly from the npm registry, eager evaluation, colored input, bracket completion, typeahead completion and more.

Maciej Łaszcz

Automated Code Reviews for JavaScript, Directly from Your Git Workflow

Codacy sponsor

A Collection of Classic Computer Science Paradigms and Algorithms in JavaScript — Including 7 data structures and 5 sorting approaches.

Nicholas C. Zakas

Treat: Themeable, Statically Extracted CSS-in-JS

SEEK

P.S. Did you know we're on Twitter as well? Follow us @JavaScriptDaily