JavaScript Weekly Issue 430: March 29, 2019

#430 — March 29, 2019

⚡️ We have another interview this week, this time with Nicolás Bevacqua of Pony Foo fame at the end of this issue.

Responsible JavaScript: Part I — Jeremy Wagner plots a course to avoid the unnecessary bloat and inaccessible patterns of current JavaScript trends.

Jeremy Wagner

What You Should Know About JavaScript Arrays — It’s nice to see an article that essentially delivers on a lofty title. It goes into a lot of depth about all the different ways you can work with arrays. If you're an expert-level JavaScript developer, however, move on ↓

Thomas Lombart

Build & Deploy Serverless Apps on a Global Cloud Network — Learn how to start writing serverless APIs in JavaScript, and reserve a custom subdomain for your next project.

Cloudflare Workers sponsor

Pika/Web for a Future Without Webpack? — Using an approach that's not without controversy, @pika/web can install npm packages that run natively in the browser.

Fred K. Schott

Majestic: A Zero Config GUI for Jest — An interesting tool to help make your JavaScript testing life a little easier. Try it now by running npx majestic in the folder of any project that uses Jest for testing (assuming you have npm installed).

Raathi Kugarajan

Advanced Map Shading with JavaScript and WebGL — This is a really neat and thorough look at an interesting use for JavaScript: shading satellite imagery. The final result is beautiful.

Rye Terrell

'Keep JavaScript Dumb' — David, who coauthored the Cluetrain Manifesto and has played a significant role in US tech, thinks that JavaScript is being damaged by becoming harder to use by hobbyists and amateurs. He admits he’s probably wrong but it’s important to discuss this stuff.

David Weinberger

💻 Jobs

Senior JavaScript Developer (Remote) — Our hardware/software product uses machine learning/AI to help DSLR/mirrorless users get better photos.

Arsenal

Find A Job Through Vettery — Vettery specializes in dev roles and is completely free for job seekers.

Vettery

📘 Tutorials and Opinions

An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array Methods — A look at how to leverage these three useful JS array methods.

Una Kravets

Experimenting with the Streams API — You probably associate streams with Node.js, but did you know they’re also supported in browsers?

Dean Hume

The Shortest Way to Conditionally Insert Properties into an Object Literal — A dig into how a particularly short bit of confusing-looking JavaScript works. I’m not sure I like it, but the explanation is good.

Andrea Simone Costa

The Pitfalls of async/await in Array Loops — Using async/await while looping through arrays seems simple, but there’s some non-intuitive behavior to look out for.

Tory Walker

Build a Slack App in 10 minutes with MongoDB Stitch — Want to extend Slack with chat bots and additional commands? Check out this tutorial to learn how to build a Slack app in 10 minutes with MongoDB Stitch.

MongoDB sponsor

Creating a Reusable Pagination Component in Vue.js

Mateusz Rybczonek

How to Remove Duplicates from an Array in JavaScript — Leaning on ES6’s set support seems to be the quickest way.

Maciej Cieślar

Routing in React with Hooks: A New Approach to Routing? — hookrouter has some compelling advantages compared to existing routers.

Christian Engel

🔧 Code and Tools

Tone.js: An Audio Framework for Interactive Music in the Browser — There are lots of examples of the main features but also full scale demos to enjoy.

Yotam Mann

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

Vue DevTools 5.0: A DevTools Extension for Debugging Vue Apps — A significant new release (5.0.0) that adds a variety of new features including new tabs and NativeScript support. For Firefox and Chrome.

Vue.js

eslint-plugin-unicorn: Various Awesome ESLint Rules — Includes 34 different rules for things like enforcing a case style for filenames, disallowing process.exit(), avoiding unsafe regexes, and more.

Sindre Sorhus et al.

John Papa

Leadership Training for Engineers: Free Talk - Sign Up Today

Big Nerd Ranch sponsor

📊 Cube.js: An Open Source Analytics Framework — For building things like internal BI tools or customer dashboards. There’s a guide to its use here.

Statsbot

React LoadCon: Use Your Favicon to Show Progress — Turns your page’s favicon (as displayed in the browser tab) into a donut or circle that can indicate progress. GitHub repo.

foreseaz

💬 A Q&A with…
Nicolás Bevacqua
the author of Mastering Modular JavaScript

Nicolás Bevacqua is a long-time JavaScript developer who has authored multiple books and has recently published Mastering Modular JavaScript. We caught up with him to ask a few questions about modular JavaScript development in general:

What's your one paragraph pitch for Mastering Modular JavaScript?

Keeping complexity in check is hard. Today, more and more applications are turning to front-end JavaScript frameworks, and many choose React. You might've noticed how React apps are structured as acyclical component trees. Those trees turn out to be ideal in not just encapsulating code, but also in encouraging modularity. Writing modular JavaScript is, in no small part, a matter of writing code that lends itself to writing other, small pieces of software.

What's the most common mistake you see in relation to modularity?

At every level of an application, such as modules, functions, blocks, and individual expressions, there's room for modular thinking. One of the most common mistakes is not splitting modules (or functions, or blocks) as they grow larger and larger. Even in otherwise modular applications, it's not uncommon for modules to become dauntingly large. Prune your trees every so often! 🌳

What three resources do you consider a must-read for developers looking to improve the structure of their code?

One of the most influential works that I've read on structuring code is definitely The Twelve Factor App. It has definitely shaped how I think about and write open-source software.

Performance mindedness is useful when it comes to reasoning about whether something belongs critically in client-side code or could be dealt with through a web service. High Performance Browser Networking helps you respect the user and encourages transmitting fewer bytes.

Having an interest in security also helps, as you're more likely to be on the lookout for exploitable angles like unescaped or poorly sanitized user inputs. The Tangled Web is a great book in that space.

If you could get JavaScript developers to all adopt the same piece of advice at once, what would it be?

Everyone? Stop using webpack *poof!* 🔥

You're the face behind Pony Foo — what's the latest?

We're aiming to reinvent Pony Foo as one of the web developer's go-to platforms, like CSS-Tricks or Smashing Magazine are. We already have quite a few articles lined up and we're on the lookout for (paid!) guest authors!

Nicolás Bevacqua runs Pony Foo and is a JavaScript developer at Elastic.