Bring a bucket and a mop for these new operators

Issue #12.September 7, 2020.2 Minute read.
Bytes

ESLint’s got a new vision board roadmap

ESLint's Vision Board

Passion, Ambition, and Love

It was a busy week for the King of JavaScript linters as the team released a new update and also shared ESLint’s first-ever public roadmap.

v7.8.0 is a minor release - the biggest highlight is new support for logical assignment operators and numeric separators. WTF are those?

Logical assignment operators

Bring a bucket and a mop for these new operators, ||=, &&=, and ??=

/*
  ||= returns its right-hand side
  when its left-hand side is falsy

  &&= returns its right-hand side
  when its left-hand side is truthy

  ??= returns its right-hand side
  when its left-hand side is null or undefined.
*/

// Turns this code
function isUndefinedOrNull (input) {
  return input === null || input === undefined
}

function calculateBill (options) {
  options.name || (options.name = 'Guest')
  options.greeting && (options.greeting = 'Welcome Back!')
  options.tax = isUndefinedOrNull(options.tax)
    ? 0.05
    : options.tax
  options.discount = isUndefinedOrNull(options.discount)
    ? 0
    : options.discount

  return // math
}

// Into this code
function calculateBill (options) {
  options.name ||= 'Guest'
  options.greeting &&= 'Welcome Back!'
  options.tax ??= 0.05
  options.discount ??= 0

  return // math
}

Numeric Separators

Turns out, humans aren’t good at reading large numbers. Numeric Separators makes that a little easier by allowing developers to create visual separation between groups of digits with an _.

const oldAndBusted = 1000000000
const newHotness = 1_000_000_000

oldAndBusted === newHotness // true

Both Logical assignment operators and Numeric separators are currently Stage 4 in the ECMAScript process - now back to the ESLint.

The Roadmap

The public roadmap is a little more exciting and features three major initiatives:

1. Lint files in parallel: Just like it sounds, this new capability will allow you to lint multiple files in parallel, which should speed up the linting process significantly. It’s also something that ESLint fans have been begging for patiently requesting for over 5 years.

2. New configuration system: The team has already been working hard on the new config for months, with the intention of making ESLint simpler and faster overall. They also plan to make it easier to create plugins and shareable configs, so that you’ll maybe try using a new config besides just the over opinionated Airbnb one.

3. Participating in the Google Season of Docs: This is kind of like going to OSS documentation summer camp, but instead of learning how to make the perfect boondoggle, a few ESLint maintainers will learn how to overhaul and simplify the docs so that they’re a lot more useful.

Why release this roadmap now?

2 words: Money Talks.

Microsoft, Salesforce, and a few other big names recently donated tens of thousands of dollars to ESLint. This has allowed the ESLint team to pay some maintainers (part-time) for all their work and begin working on these larger, long-term projects. Hooray for capitalism!… uhh I mean supporting open source!


NativeScript releases lucky number v7

Bobby doing situps

NativeScript working hard on its core

One small step for man… NativeScript says they made a “significant step forward” with the release of v7.0 last week, with some significant new features focused on improving the framework’s core.

ICYMI NativeScript is a framework that was first released back in 2015 for building “truly native” iOS and Android apps with JavaScript and other frontend technologies like Angular, Vue, and TypeScript.

Feel like you’ve heard that sales pitch before? That’s probably because you have. But unlike Ionic, Cordova, or Phone Gap (lol), NativeScript does this with real native components, not a webview.

Now let’s jump into what’s new in v7:

  • New build targeting of ES2017 and higher should make for faster and more performant code, which allows you to utilize all of the latest and greatest ES features.

  • V8 iOS engine means that both Android and iOS now run on V8, which should make it easier to maintain both runtimes. (Goodbye forever, JavaScriptCore.)

  • New @NativeClass() decorator for TypeScript/JavaScript classes, inherited from native iOS and Android classes.

  • nativescript.config.ts is a new, strongly-typed NativeScript config module that is self-documenting

This update also introduces a new monorepo structure that should make it easier for more developers to contribute to the project and test-drive NativeScript with some new demo applications.

The bottom line

(Comparatively) NativeScript hasn’t gained a ton of mainstream adoption in the 5 years it’s been around, but it does have a pretty engaged community (not quite as intense as the Rust zealots, but still solid). By aligning itself with modern JS standards and introducing some other core improvements, this release should make NativeScript a more appealing option for all mobile developers.


Spot the Bug - Answer Below

function capitalize (string) {
  string[0].toUpperCase()
  return string
}

Cool bits

  1. Dr. Axel Rauschmayer is kind of like the Ernest Hemingway of JavaScript: he’s written a ton of great books that you probably can’t understand. He just released “Tackling TypeScript”, and you can read the first half of it for free online.

  2. React without the virtual DOM? Is that even legal? We’re not sure, but Brahmos is a new UI library that’s pushing the limits. It still supports the modern React API and native templates.

  3. Allan wrote a helpful introduction to machine learning for JavaScript devs. After reading it, you’ll probably be able to control a pig’s brain just like Elon, but with great power comes great responsibility.

  4. Joel wrote about 8 methods to find, search, and filter arrays.

  5. Nick made a helpful guide for some common areas of confusion in JavaScript called JS tips and tidbits.

  6. In an attempt to trick us into liking Math, CindyJS is a new framework for creating interactive math content for the web (physics simulations, visualizers, etc).

  7. Gustavo wrote a a gentle introduction to code splitting with React. This can be a confusing topic, but this article is a helpful resource.

  8. Monica made a classic tower stacking game in under 100 lines of JavaScript. I heard a rumor that if you get to level 100, they’ll send you a giant stuffed animal in the mail (definitely not true).


Spot the Bug - Answer

When we call toUpperCase, we’re assuming that we’re modifying the string that was passed into the function. However, since strings are primitive values, that means they’re immutable and can’t be modified once they’re been created. Instead of trying to modify the string directly, we need to return a new string after capitalizing the first character.

const capitalize = ([firstLetter, ...restOfWord]) => {
  return firstLetter.toUpperCase() + restOfWord.join('')
}

For more information, visit How to capitalize the first letter of a string in JavaScript