We wasn't supposed to make it past 25

Issue #25.December 7, 2020.2 Minute read.
Bytes

Our beloved JavaScript turned 25 years old last week, and this is the 25th issue of Bytes. Is it just a coincidence? Or are we that interconnected with JS itself? You tell us.

JavaScript turns 25

Brendan Eich

We wasn’t supposed to make it past 25

“…Joke’s on you, JS is still alive” -Kanye West -Brandon Eich. ​ The year was 1995. The cult classic Heavy weights was in theaters, Nicolas Cage had just won an Oscar, and websites typically looked something like this.

At the time, Netscape Navigator was the most popular web browser with almost 80% market share. The founder of Netscape, the company behind Netscape Navigator, was Marc Andreessen. He had a vision for the future of the web. He envisioned a more dynamic platform with client side interactivity. To help make his vision a reality, he called in the big guns and hired Brandon Eich, the Patron Saint of the Script 🙏.

As legend has it, after 10 days of hacking, Mocha LiveScript JavaScript was born.

It had some functionality from Scheme, the object orientation of Smalltalk, and the syntax of Java. A true Frankenstein’s Eichenstein’s monster of a scripting language.

Here lied the problem - JavaScript worked in Netscape Navigator, but if you wanted to build for IE, you needed to write JScript. JScript was similar-ish to JavaScript but similar-ish doesn’t compile, unfortunately.

So how did they solve this? Just as any good programmer would, they created a “Best viewed in Netscape” banner for others to use and hoped for the best.

Thankfully these dark ages didn’t last too long and in 1996, Netscape submitted JavaScript to ECMA (an association dedicated to the standardization of information and communication systems) to build out a standard, universal specification.

ECMA formed the TC39 committee to oversee JavaScript’s evolution and the implementation of new features. TC39 (aka The Fellowship of the Spec) faithfully ushered in the JS Golden Age, and today JavaScript is the most popular programming language in the world.

See y’all in 2045 for the big 5-0.

​

RTK Query - Powerful data fetching and caching for Redux

monkey knife fight

the simple joys of a monkey knife fight

Maybe It’s Maybelline… or maybe everyone is sick of DDoSing their own servers with React.useEffect…, but regardless, another data fetching/caching library has entered the arena.

Meet React RTK Query - “an advanced data fetching and caching tool, designed to simplify common cases for loading data in a web application”.

It comes with all the features you’d expect -

  • Caching: By default, a request will only ever be made once. After the initial request RTK Query will grab the data from cache.

  • Automatic re-fetching: RTK Query will intelligently re-fetch data and update its cache so unlike The Big Bang Theory, you never have to worry about staleness.

  • Polling: RTK Query comes with “polling”, or the ability to query for data at a specified interval for that “real-time” effect.

  • Optimistic Updates: Because RTK Query relies heavily on cache, you get optimistic updates (where the UI updates instantly before the request actually succeeds) for free.

  • + More: Dependent queries, pre-fetching, skip queries, etc.

What’s more interesting than its features is the signal this sends. RTK Query represents a soft pivot away from the traditional Redux philosophy of “fetch server state then manage it on the client” to “make fetching and caching easier so you don’t have to manage it on the client”. A strategy that has worked well for React Query and SWR.

If you’re already a happy Redux user and you need a data fetching/caching strategy which is closely integrated with the Redux ecosystem, RTK Query will be a solid choice.

The Bottom Line

All things considered, we’re excited for RTK Query. Not because it’s anything revolutionary, but because it aligns the Redux ecosystem with the direction the overall web ecosystem seems to be heading now. ​

Cool Bits

  1. Did you know browser’s have a built-in Web Audio API? Me neither. But Alex did, cause he’s smart, which is why I hired him. Anyway, check out an Introduction to the Web Audio API. You’ll learn something, or your money back.

  2. In From Callback Hell to Callback Heaven, Eugene does his best Ms. Frizzle impersonation and takes you along on a valuable yet educational journey. The only thing he missed was an absolute rager of a theme song.

  3. The folks (or maybe just Jason?) behind Preact just released WMR — an all-in-one dev tool for modern web apps that prides itself on being tiny (2mb) and dependency-free.

  4. The State of CSS in 2020 just came out, and it’s got a lot of neat data and pretty visualizations. Tl;dr people really like Tailwind CSS.

  5. Rachel Andrew wrote a great article about Native CSS Masonry Layout in CSS Grid.

  6. Remember the good old days when every company would write their own custom front-end framework and then when you left that company everything you learned would be worthless because no one else used that framework? Me neither. Regardless, Jake wrote a post on how “no one ever got fired for choosing React,” because as your app grows, you’ll probably need some type of abstraction over vanilla JS.

  7. Mannequin.js is a creepy interesting library of a 3D mannequin figure whose shape and movements are done purely in JavaScript. It’s really useful if… you’re an old woodcarver named Geppetto and you’re trying to prototype your next puppet who might come alive and become the son you never had? Regardless, we’re thankful it’s not that detailed.

  8. I filmed/wrote about Animated Transitions with React Router v5. Not to be confused with my other greatest hit “Animated Transitions with React Router v4” and my future greatest hit “Animated Transitions with React Router v6”.

Worthless Fun JS knowledge

Have you ever wondered how you’d create your own implementation of Array in JavaScript? No? Oh, well this is awkward.

function array () {
  let arr = Object.create(array.prototype)

  Object.defineProperty(arr, 'length', {
    value: 0,
    enumerable: false,
    writable: true,
  })

  for (key in arguments) {
    arr[key] = arguments[key]
    arr.length += 1
  }

  return arr
}

array.prototype.push = function (element) {
  this[this.length] = element
  this.length++
  return this.length
}

array.prototype.pop = function () {
  this.length--
  const elementToRemove = this[this.length]
  delete this[this.length]
  return elementToRemove
}

array.prototype.filter = function (cb) {
  let result = array()

  for (let index in this) {
    if (this.hasOwnProperty(index)) {
      const element = this[index]

      if (cb(element, index)) {
        result.push(element)
      }
    }
  }

  return result
}

If you’re curious or confused by the code, we wrote about it here.