Bytes #17 - WTF IDC just ship it

Sorry for this issue being a bit late today. A certain popular library went all “WTF IDC just ship it” on a Saturday afternoon releasing a major version with tons of breaking changes. In other news…

Webpack 5

Buy another one

Everyone’s ~~favorite~~ most used code bundler released its 5th version on Saturday and OH BOY the jokes (literally) write themselves. Like Eminem in 8 Mile, they played the “you can’t hurt me if I hurt myself first” strategy and we’re totally here for it. Here are some of our favorite lines from the release.

“So today webpack 5.0.0 is released, but this doesn’t mean it’s done, bugfree or even feature-complete”

“We know that people dislike major changes… Especially with webpack, which people usually only touch twice a year, and the remaining time it ‘just works’.”

“There is a good chance that upgrading fails and you would need to give it a second or 3rd try.”

👏👏👏 Honestly, if more libraries start becoming this self aware we’ll be out of a job.

The changes we understand because we don’t have a PHD in Computer Science

Bye bye, Node.js Polyfills - In order to allow most NPM packages to run in the browser, historically Webpack would automatically polyfill most core Node.js modules. That way, things Just Worked™. With v5, they’ve removed those Polyfills and things Just Don’t Work™.
Module Federation - Despite your best guesses, this is not a new government centered around a modular ideology. Module Federation gives you the ability to more easily share modules amongst different projects. Perfect for the #microfrontend crowd.
Asset Modules - Historically you had to use the right combination of raw-loader, url-loader, or file-loader for modules representing assets (fonts, icons, etc). With v5, Webpack now offers the same functionality natively so you can get rid of those loaders.

The Bottom Line

Webpack v5 has a lot of new features, most of which you probably won’t understand (we didn’t either!). It’s easy to sit behind a computer and make jokes about it. The reality is Webpack is a vital tool that continues to solve difficult problems. Congrats on the new release, team.

Volta: A New CLI Tool

Volta

☝️ how it started, 👇 how it’s going

Here to defend justice and JavaScript… Volta is a new, “hassle-free” way to manage all your JavaScript CLI tools like node, npm, or yarn. It pitches itself as a faster, more lightweight alternative to nvm that offers greater functionality and promises to get out of your way.

How does it work?

Volta keeps track of which project you’re working on, based on your current directory (like a package manager does). From there, the tools in your Volta toolchain automatically detect which version of each tool is being used in your project, and it routes you to the right version of the tool that you need.

It does this by adding a shim (a small library that transparently intercepts an API) to your PATH whenever you install a tool with Volta. That shim then acts as an intelligent router to the right version of the tool and runs it with the right Node engine. Pretty slick.

Other cool features:

Cross-platform support, including Windows and most Unix shells.
Supports multiple package managers.
Stable tool installation (no need to reinstall on each Node upgrade).
Built with Rust as a single, native executable, so there are no external dependencies. (Plus, all the Rust devs will give you #RustClout for using it — and then try to convince you to join their cult.)

The Bottom Line

The project is still in its early phases, but Volta could (in theory) save you from having to type nvm use ever again.

Volta even has its own superhero-esque catch phrase: “No matter the package manager, Node runtime, or OS, one command is all you need: volta install.” </Christian-Bale-Batman-Voice>

Spot the Bug (answer below)

Since we’re running late this week, this is a repeat of “Spot the Bug” from the first issue of Bytes. Most of you probably didn’t read that one though…

const Animal = (name, type) => {
  this.name = name
  this.type = type
  this.age = 0
}

Animal.prototype.birthday = function () {
  this.age++
}

const leo = new Animal('Leo', 'Lion')

Cool Bits

Dr. Axel wrote about this hip new trend of writing JavaScript tools in other languages. We’re hoping he breaks down the “drink Ocean Spray while listening to Fleetwood Mac on your skateboard” trend next week.
Jacob wrote about how you can use Google Sheets a database because what could possibly go wrong? A lot, it turns out.
ESLint wrote a one-year review of paying contributors. Tl;dr - paying people for their work gets “two thumbs way up!”
Chetan wrote about React 17 delegating events to a root node instead of document and the macroeconomic impact that has on the Middle East. OK maybe not that last part.
There’s a new Discord Server for Angular developers. As for me, I’m waiting for the AngularJS Discord instead. #ng-repeat4lyfe
Serge built an entire suite of simple Microsoft Office apps using small bits of HTML and JavaScript and wrote a blog post about it.
JS13K Games just announced the winners of last week’s game development competition. Congrats to the winner, Ninja vs. EvilCorp!
Speaking of Facebook, the React Team announced that they’ll be redoing the React docs to make them more Hooks-focused. To follow, we’ll also be redoing Bytes to make it more Hooks-focused starting next week when we DDoS our own servers by misusing useEffect.

Spot the Bug - Solution

Arrow functions don’t have their own this. This leads to three errors in our code.

First, we’re adding properties to this in the constructor function. Again, because Arrow Functions don’t have their own this, you can’t do that.

Second, we can’t use the new keyword with an Arrow Function. This will throw a X is not a constructor error.

Third, we can’t add a property on a function’s prototype if that function is an arrow function, again, because there’s no this.

function Animal (name, type) {
  this.name = name
  this.type = type
  this.age = 0
}

Animal.prototype.birthday = function () {
  this.age++
}

const leo = new Animal('Leo', 'Lion')