Industry News

#454 — September 13, 2019

Read on the Web

JavaScript Weekly

V8's Work on a Lighter V8 — V8 Lite has been a project aimed at reducing V8’s memory usage. Initially it was going to be a separate mode of V8 but many improvements have been able to come over to regular V8 too. Here’s a look at some of the key optimizations and the actual benefits to real workloads.

Mythri Alle, Dan Elphick, and Ross McIlroy (V8)

Moving Your JavaScript Development to the Terminal on Windows — If you’ve recently taken a look at Windows after becoming comfortable with macOS or Linux, this is for you. It’s a very detailed look at creating a powerful and elegant terminal-based development experience on Windows 10 using WSL and more.

Burke Holland

All-In-One Visual Testing and Review Platform — Replace time-consuming manual QA to catch visual UI bugs automatically. With Percy, you can test your UI across browsers and responsive widths on every pull request for continuous visual coverage.

Percy sponsor

Metronomes in JavaScript — An interesting experiment in comparing the efficacy of async functions, Web Workers, and using the Web Audio API’s clock for scheduling things precisely.

Monica Dinculescu

Lists of New ECMAScript Features by Version — This is pretty neat. Short and sweet lists of new ES features (with basic examples) that were introduced in ES2015 (a.k.a. ES6), ES2016, ES2017 and so on.

Dietmar Aumann

Immer 4.0: A Way to Work with Immutable State in JS — A popular package for working with immutable state in a convenient way. You apply changes to a draft state object and the mutations are applied to a state resulting in a new one.

immer

💻 Jobs

Full Stack Engineer — Expensify seeks a self-driven individual passionate about making code effective, with an understanding of algorithms and design patterns.

Expensify

Find a JavaScript job through Vettery — Make a free profile, name your salary, and connect with hiring managers from top employers.

Vettery

📘 Articles & Tutorials

Let's Generate a Million Digits of Pi in 9 Lines of JavaScript — BigInt support makes this possible.

Andrew Jennings

A Re-Introduction to Destructuring Assignment — Destructuring assignment, introduced in ES6, provides an interesting way to dig into arrays and other objects to withdraw values more directly.

Laurie Barth

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

Using void in JavaScript and TypeScript — void means rather different things in JS and TypeScript and does some things I hadn’t expected too.

Stefan Baumgartner

The 5 Big Features of TypeScript 3.7 and How to Use Them — It’s due in early November.

Tim Perry

▶  A 6 Hour React Native 'Crash Course' for Beginners — It’s slow going at first, but that’s because it’s truly aimed at beginners. It’s amazing how much is included here, though, and it’s well recorded too.

Maximilian Schwarzmüller

It’s Not Wrong That "🤦🏼‍♂️".length == 7 — The underlying ‘length’ of an emoji character is a complicated thing.. not just in JavaScript but in other languages too.

Henri Sivonen

X3D: Declarative 3D for the Modern Web — A look at X3D and how it offers a simple declarative approach for including 3D visualizations into web pages.

Adrian Sureshkumar

How Taiko Compares to Other Browser Automation Tools

ThoughtWorks - Taiko sponsor

Angular Dependency Injection Tips

Armen Vardanyan

▶  11 Talks from JSFoo VueDay 2019 — Talks from a Vue conference that took place in India two weeks ago.

YouTube

🔧 Code & Tools

nanoSQL 2: A Universal 'Database Layer' for Client, Server and Mobile — Basically an abstraction for any JavaScript developers who want a database in their app. It can use numerous actual databases behind the scenes, including localStorage, IndexedDB, RocksDB, Redis, DynamoDB, ScyllaDB and SQLite. It claims to be like “Lego™ for databases”.

Scott Lott

React Suite 4.0: A Suite of 'Sensible' UI Components — A set of components that’s been under active development for a couple of years now. Supports React 16+, uses TypeScript, and they work on all major browsers. Components include things like buttons, modals, drawers, navigation bars, form input fields, tables, calendars, and more. GitHub repo.

HYPERS

Spacekit: A Library for Creating 3D Visualizations of Space — Here’s an example.

Ian Webster

Headroom.js: Hides Your Page Header Until Needed — A pure JS widget for hiding elements until needed (for example, show your page header when scrolling up).

Nick Williams

Automated Code Reviews for JavaScript — Set standards on coverage, duplication, complexity, and style issues and see real-time feedback in your Git workflow.

Codacy sponsor

Storytime: Tell Stories About Pieces of Code — This is hard to explain without a demo, so check out this explain demonstrating how React Fiber works.

Storytime

Emoji Button: A Vanilla JavaScript Emoji Picker — Turns a button element into an emoji picker (similar to that some operating systems provide).

Joe Attardi

Filesize.js: A Library to Create Human Readable File Size Strings — For example: filesize(265318) returns 259.1 KB.

Jason Mulligan

🐦 An interesting Twitter thread...

Kyle Simpson, the author of YDKJS, has been thinking about some pain points when using asynchronous functions, particularly in relation to being able to cancel their execution when circumstances change. The whole thread is an interesting read, complete with people making suggestions of their workarounds.

We'd be pretty keen to link to any articles or opinion pieces covering this topic if you have any spare time this weekend ;-)

#453 — September 6, 2019

Read on the Web

JavaScript Weekly

An Introduction to D3.js — A fantastic, well presented introduction to D3, a popular JavaScript-based data-visualization library, and its ecosystem of modules.

Amelia Wattenberger

Firefox 69 Released; Now Supports Public Instance Fields (and More) — Firefox 69 went out on the main Release channel this week and for JS developers, the inclusion of public instance fields will be of interest. The Resize Observer API and the Microtasks API are now also available to use and the JS debugger has gotten many improvements too.

Mozilla Hacks

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

Apple Just Shipped Web Components to Production and You Probably Missed It — Apple just launched a Web-based client for their Apple Music service and several developers noticed what tech they’re using to make it tick (namely Ember, Web Components, and Stencil JS).

Max Lynch

▶  21 Talks from React Rally 2019 — The React Rally event took place in Salt Lake City just two weeks ago but already lots of the talks are up and ready to watch.

React Rally

A Google Developer's Feedback on TypeScript — “We recently upgraded Google to use TypeScript 3.5. Here is some feedback on the upgrade.” We also learn Google only uses a single version of TypeScript that’s updated for everyone simultaneously.

Evan Martin

Using void in JavaScript and TypeScript — void means rather different things in JS and TypeScript and does some things I hadn’t expected too.

Stefan Baumgartner

💻 Jobs

Work with Giant, Caged Robots, and Node.js; Senior Developer, London — So, about the robots: They live in cages, travel at 60mph, and they’re controlled via AMQ messages from a Node-based Warehouse Management System.

CareerJS

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

X-Team

Find a JavaScript job through Vettery — Make a free profile, name your salary, and connect with hiring managers from top employers.

Vettery

📘 Tutorials

5 Handy Applications of Array.from() — Array.from() transforms array-like objects to arrays and can be used to generate ranges, remove duplicates, and clone arrays.

Dmitri Pavlutin

Creating Drag and Drop Elements with Vanilla JavaScript and HTML — I remember when this used to be really complicated to do, but the HTML Drag and Drop API helps a lot nowadays.

Jess Mitchell

Score SOC 2 Compliance Quick Wins Using Git: A Developer's Guide

Datree.io sponsor

Debugging TypeScript in Firefox DevTools — Firefox Debugger has evolved a lot in the last several months and while it’s well suited for working with JavaScript, it’s possible to debug TypeScript too thanks to source maps. Here’s a basic example.

Jan Honza Odvarko

You Already Use Types — A post aimed firmly at skeptics and newcomers to type systems.

Shawn 'swyx' Wang

Simplify Your JavaScript with .some() and .find() — If you haven’t revised the array methods in recent years, you might be missing out and reinventing the wheel in your code.

Etienne Talbot

Some Practical Uses of Symbols in JavaScript and TypeScript

Stefan Baumgartner

Creating a Simple JavaScript Obfuscator — Obfuscating a language that’s ultimately run in an interpreted style can often seem like a pointless endeavor, but it’s neat to see the process adopted here.

Antoine Vastel

Writing Data to InfluxDB with Python

InfluxData sponsor

▶  Discussing Functional Programming with Brian Lonsdorf — A 45 minute podcast chat about the fundamentals of functional programming and comparisons with object oriented approaches.

JavaScript Jabber podcast

An App Security Expert's POV on Dependency Management — An application security expert’s point of view over what practices you should be adopting on your own projects.

Adam Baldwin (npm, Inc.) node

🔧 Code and Tools

Bitmelo: An Online Environment for Creating JavaScript Games — It’s early days for this interesting project, but it’s basically an online sandbox geared to creating and working on simple JavaScript games, complete with tile, sound, map, and code editors.

David Byers

Cytoscape.js: A Graph Theory/Network Library for Visualization and Analysis — Handy if you need to model and/or visualize relational data, like biological data or social networks.

Max Franz

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

MongoDB Atlas sponsor

Angular Tools for High Performance — Contains a list of new tools and practices that can help in the building of faster Angular apps and to monitor their performance over time.

Minko Gechev

instant.page 2.0: Preload Link Target Pages ASAP — You include some JavaScript in your page and the browser will begin to preload the destination page the second someone clicks on a link. This can result in a slight, but noticeable, performance increase.

Alexandre Dieulot

SpaceTime: A Timezone Library with No Dependencies — Supports daylight savings, leap years, and hemispheres, and lets you calculate times in different timezones.

Spencer Kelly

vue-treeselect: A Multi-Select Component for Vue.js with Nested Options Support — There’s a lot of documentation and examples to enjoy here.

Fangzhou Li

Jimp: Image Processing in Node with No Native Dependencies — Want to get your resizing, cropping, color manipulation, or dithering on without any external dependencies?

Oliver Moran node

Redux Persist: Persist and Rehydrate a Redux Store

Zack Story

Build a JS Interpreter in JavaScript Using Acorn as a Parser

Chidume Nnamdi

How to Build a Search App for Unsplash with Svelte 3 — Use Svelte 3 and the Intersection Observer API to build a basic search tool for the Unsplash stock photography collection.

Ayo Isaiah

#452 — August 30, 2019

Read on the Web

JavaScript Weekly

How JavaScript Grew Up and Became a 'Real' Language — If you were in the JavaScript space in the early 2000s, skip this one.. but I still remember the first time I saw Google Maps in 2005, then saw Microsoft’s documentation for XMLHttpRequest (which shipped in IE 5 in 1999!), and a Pandora’s box was rapidly opened as developers finally saw potential in making Web pages interactive in a truly two-way fashion. JavaScript’s second wind had begun!

Matthew MacDonald

Announcing TypeScript 3.6 — The latest version of the increasingly popular, optionally typed superset of JavaScript introduces stricter checking for iterators and generator functions, improved UX around Promises, a new playground, and more besides.

Daniel Rosenwasser (Microsoft)

Dive Deep into Promises and Async/Await to Write Better Code — The all-in-one course that covers both fundamentals and the latest upgrades. Say goodbye to hackish code and puzzled debugging: with this 3-hr video course split into bite-size segments, you’ll get rock-solid knowledge and in-depth understanding.

Delicious Screencasts sponsor

npm Inc. Moves to Ban Ads on the Terminal — After a mixed reaction to a recent experiment in open source funding by showing text ads upon the installation of npm packages, npm Inc. is updating their policies to explicitly ban packages that display ads at runtime or installation.

Catalin Cimpanu

Should You Be Using Web Workers? (Probably Not.) — An interesting contrast to Surma’s recently popular article promoting Web Workers and their ability to execute JavaScript off of the main thread. But David thinks they’re over-hyped: “I have seen exactly zero other instances where Web Workers would have improved the user experience.”

David Gilbertson

🐦 What do you think? Join the discussion on whether or not to more proactively use Web Workers in our latest Twitter thread.

A Practical Guide to ES6 Symbols — ES6 introduced symbols as a new primitive type to act as unique identifiers. Here’s a look at their uses.

Valeri Karpov

Dojo 6 Released: A Progressive Framework for Webapps — Mikeal Rogers once said React is the new Dojo, but Dojo, a popular ‘batteries included’ framework, is still innovating with v6 being the most ambitious release since last year’s v2.

Open JS Foundation

The Story of a V8 Performance Cliff in React — A look at how V8 chooses optimal in-memory representations for various JavaScript values, and how that impacts the shape machinery (all of which helps explain a recent V8 performance cliff in React core).

Benedikt Meurer and Mathias Bynens

💻 Jobs

High Growth Startup, Sweet Product, Big Challenges - We Want You — Work on a beautiful app and help us to expand into Europe. We are hiring for pragmatic engineers who want to make a real impact. 🚀

FREETRADE

Senior Software Engineer - Frontend (100% Remote) — Do you have a solid understanding of web technologies and want to design, implement, and launch major user features? Apply now.

Close

Take a <br> From Job Hunting — Upload your past projects or try out our custom challenges - our AI will match you with amazing companies who apply to you, salary upfront. No recruiters.

hackajob

📘 Tutorials

▶  Building a Minesweeper Game in Under an Hour with Angular — It took him 48 minutes, but luckily the video is only 11 minutes and he narrates what he did 😄 (This is a cool way to do a live coding video.)

Stephen Fluin

Introduction the Optional Chaining Operator ?. — The proposal is still at stage 3, but when the official V8 blog is posting about it, it’s as good as official. Here’s how it works.

Maya Lekova

On Demand: Getting Started with NodeSource and AWS Lambda

NodeSource sponsor

Working with Attributes on DOM Elements — The DOM is just a little weird about some things, and the way you deal with attributes is no exception..

Chris Coyier

Documentation Made Easy with VuePress — VuePress is a static site generator that is particularly well suited for generating documentation sites.

Ben Hong

Creating 'Live' Avatars with face-api.js — Less a tutorial and more a neat idea you might like to recreate. This company has ‘live avatars’ on its site using face position tracking with face-api.js.

Doug Safreno

A Beginner's Guide to Using Regular Expressions in JavaScript — Love or hate them, regular expressions are hugely powerful when it comes to matching against the content of strings.

Muhsin Warfa

Going Beyond npm with Yarn and pnpm — A quick look at two alternatives to npm if you haven’t ventured off the beaten path.

Niccolo Borgioli

Creating an Object Validator in the Test-Driven Development Way

Nick Scialli

🔧 Code and Tools

Iosevka: A Condensed, 'Slender' Typeface for Code — As well as being useful for code, it’s easily customizable via code and defined via code itself (example code).

Belleve Invis

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

Fiddle: The Easiest Way to Get Started with Electron — If you’ve wanted to play with Electron for building a JavaScript-powered desktop app but didn’t have the time, Fiddle makes it into more of a quick-start ‘playground’ experience.

Electron

radialMenu: A Highly Customizable Radial Menu — Works on both desktop and mobile. You can see a demo here.

Victor Ribeiro

ApexCharts: A JavaScript Chart (and More) Library — A year ago, its creator explained why we needed yet another chart library and to his credit it continues to improve frequently. It does sparklines, gauges, candlesticks, heatmaps, and more, too.

Juned Chhipa

Trumbowyg: A Lightweight WYSIWYG Editor — It’s a jQuery plugin (..ssh!) Only 8KB when gzipped though and there’s a live demo.

Alexandre Demode

Browser Automation Experience Made Reliable and Less Flaky

ThoughtWorks - Taiko sponsor

Feathers 4: A Framework for Real-Time Apps and REST APIs — Brings together Node, React Native and the browser in a framework based around services and workflows rather than routes and controllers.

David Luecke

Karma: A Multi-Browser Test Runner for JavaScript — A popular way to test your code in multiple, real browsers at once.

Karma

#451 — August 23, 2019

Read on the Web

JavaScript Weekly

Using Native JavaScript Modules in Production Today — “now, thanks to some recent advances in bundler technology, it’s possible to deploy your production code as ES2015 modules—with both static and dynamic imports—and get better performance than all non-module options currently available.”

Philip Walton

Web Template Studio 2.0: Generate New Apps from VS Code Wizard-Style — Web Template Studio is an extension, from Microsoft, for Visual Studio Code that simplifies creating new full-stack apps in a ‘wizard’-esque style. It now supports Angular, Vue, and React.

Lea Akkari (Microsoft)

Free Webinar: Design Patterns for Microservice Architecture — If you're planning to design microservice architecture, make sure to learn the best design patterns first. We'll talk about API Gateway, BFF, Monorepo, gRPC and more. Everything based on real-life examples from successful SOA projects.

The Software House sponsor

▶  The State of JavaScript Frameworks in August 2019 — Every six months, Tracy Lee sits down with several representatives of different frameworks to get a brief update on how they’re doing. This hour long episode features Evan You (Vue.js), Minko Gechev (Angular), Michael Dawson (Node.js), Jen Weber (Cardstack), Manu Mtz.-Almeida (Ionic) and Marvin Hagemeister (Preact).

Tracy Lee

JavaScript to Know for React — Examples of which JavaScript features in particular you should be familiar with when learning and using React.

Kent C Dodds

date-fns 2.0: It's Like lodash But For Dates — A date utility library that provides an extensive and consistent API for manipulating dates, whether in the browser or in Node. After tree-shaking and minification, date-fns can be much more compact than moment.js. Homepage.

date-fns

Node v12.9.0 (Current) Released, Now on V8 7.6 — The upgrade to V8 7.6 opens up some new opportunities like Promise.allSettled(), JSON.parse and frozen/sealed array perf improvements, and BigInt now has a toLocaleString method for localized formatting of large numbers.

Node.js Foundation

💻 Jobs

Frontend Engineer at Scalable Capital (Munich) — Passionate about React and GraphQL? Join our Team of JavaScript Developers and shape the future of FinTech.

Scalable Capital GmbH

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

Get Hired Based on Your Skills Not Your CV — We’ll introduce you to over 1,500+ companies who’ll compete to hire you. You’re always hidden from your current employer and we’re trusted by over 100k developers.

hackajob

📘 Tutorials

An Introduction to Memoization in JavaScript — ‘Memoization’ is when you cache return values of functions based upon the arguments provided. Here’s an example of creating a separate function that can do this for existing functions.

Nick Scialli

Why is ('b'+'a'+ + 'a' + 'a').toLowerCase() 'banana'? — One of those fun little JavaScript “wat” moments.

Stack Overflow

The State of JavaScript: 2019 and Beyond. Get the Whitepaper — Read about the latest developments and trends in the JavaScript ecosystem, and how things will change in 2019 and beyond.

Progress Kendo UI sponsor

All The New ES2019 Tips and Tricks — An accessible, example-heavy roundup of new ES2019 features.

Laurie Barth

Exploring the Two-Sum Interview Question in JavaScript — There are two solutions, the straightforward ‘brute force’ way, and a more efficient solution that can demonstrate strong CS fundamentals..

Nick Scialli

Using Generators for Deep Recursion

Jason H Priestly

7 Ways to Make Your Angular App More Accessible

Chris Ward

▶  Is Modern JavaScript Tooling Too Complicated? — A podcast where two developers debate a point with two other developers, each group taking one side of the debate. Is modern JS tooling too complicated? Discuss!

JS Party podcast

🔧 Code and Tools

NodeGUI: A New Way to Build Native Desktop Apps with JavaScript — An interesting new alternative to something like Electron as it’s based around Qt, the cross platform widget toolkit, rather than a browser engine.

Atul R

Chart.xkcd: xkcd, Hand-Drawn-Style Charts — If you like your lines wiggly and rough, this might be for you. It tries to mimic the style of the fantastic xkcd comic.

Tim Qian

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

FilePond: A Flexible File Uploader with a Smooth UI — It’s vanilla JavaScript but has adapters to make it easier to use with React, Vue, Angular, or even jQuery. v4.5 has just dropped. GitHub repo.

Rik Schennink

v8n: A 'Fluent Validation' Library — Chain together rules to make validations, e.g. v8n().some.not.uppercase().test("Hello");

Bruno C. Couto

file-type: Detect The File Type of a Buffer/Uint8Array — For example, give it the raw data from a PNG file, and it’ll tell you it’s a PNG file.

Sindre Sorhus

pagemap: A 'Mini Map' for Your Pages — A neat little idea that’s particularly useful on long pages. This adds a clickable/navigable overview of an entire page to the top right corner. Here’s the associated repo.

Lars Jung

Automated Code Reviews for 27 Languages, Directly from Your Workflow

Codacy sponsor