React in the streets, D3 in the sheets

Issue #15.September 28, 2020.2 Minute read.
Bytes

Got a real spicy one for you today. Airbnb releases visx, Elder.js is a new Svelte framework, and CGId buttholes.

Airbnb releases visx 1.0

Visx

Visualizing a future where we can stay in Airbnbs again

Tony Robbins taught us to visualize success… Last week, Airbnb officially released visx 1.0, a collection of reusable, low-level visualization components that combine the powers of React and D3 (the JavaScript library, not, sadly, the Mighty Ducks).

Airbnb has been using visx internally for over two years to “unify our visualization stack across the company.” By “visualization stack”, they definitely mean “all of our random charts and graphs”, but that shouldn’t stop you from listing yourself as a full-stack visualization engineer once you’ve played around with visx a few times.

Why tho? The main sales pitch for visx is that it’s low-level enough to be powerful but high-level enough to, well, be useful. The way it does this is by leveraging React for the UI layer and D3 for the under the hood mathy stuff. Said differently - React in the streets, D3 in the sheets.

The library itself features 30 separate packages of React visualization primitives and offers 3 main advantages compared to other visualization libraries:

  1. Smaller bundles: because visx is split into multiple packages.

  2. BYOL: Like your boyfriend around Dinner time, visx is intentionally unopinionated. Use any animation library, state management solution, or CSS-in-JS tools you want - visx DGAF.

  3. Not a charting library: visx wants to teach you how to fish, not catch a fish for you. It’s designed to be built on top of.

The bottom line

Are data visualizations the hottest thing to work on? Not really. But are they important? Also not really.

But the marketing and biz dev people at your company love them. And those nerds esteemed colleagues will probably force you to help them create some visualizations in the future (if they haven’t already). visx seems like a great way to help you pump those out faster, easier, and with greater design consistency.

Plus, there’s always a chance that the product you’re working on could require some sort of visualizations (i.e. tooltips, gradients, patterns, etc.). visx can help with that too. So, thanks Airbnb.

No word yet on if Airbnb is planning on charging their usual 3% service fee on top of an overinflated cleaning fee for usage of visx, but we’ll keep you update.

Elder.js 1.0 - a new Svelte framework

Very nice elderly couple

Whoever Svelte it, dealt it dear

Respect your generators… Elder.js 1.0 is a new, opinionated Svelte framework and static site generator that is very SEO-focused. It was created by Nick Reese in order to try and solve some of the unique challenges that come with building flagship SEO sites with 10-100k+ pages, like his site elderguide.com.

Quick Svelte review: Svelte is a JavaScript library way of life that was first released ~4 years ago. It compiles all your code to vanilla JS at build time with less dependencies and no virtual DOM, and its syntax is known for being pretty simple and readable.

So, what’s unique about Elder.js?

  • Partial hydration: It hydrates just the parts of the client that need to be interactive, allowing you to significantly reduce your payloads and still maintain full control over component lazy-loading, preloading, and eager-loading.

  • Hooks, shortcodes, and plugins: You can customize the framework with hooks that are designed to be “modular, sharable, and easily bundled in to Elder.js plugins for common use cases.”

  • Straightforward data flow: Associating a data function in your route.js gives you complete control over how you fetch, prepare, and manipulate data before sending it to your Svelte template.

These features (plus its tiny bundle sizes) should make a Elder.js a faster and simpler alternative to Sapper (the default Svelte framework) for a lot of use cases. Sapper is still probably the way to go if you’re building a full-fledged Svelte app, but Elder.js seems pretty awesome for content-heavy Svelte sites.

The bottom line

We’re super interested in who will lead Elder.js’s $10 million seed round. That’s how this works, right?

JS Quiz - Answer Below

Why does this code work?

const friends = ['Alex', 'AB', 'Mikenzi']
friends.hasOwnProperty('push') // false

Specifically, why does friends.hasOwnProperty('push') work even though friends doesn’t have a hasOwnProperty property and neither does Array.prototype?

Cool bits

  1. Vime is an open-source media player that’s customizable, extensible, and framework-agnostic.

  2. The React Core Team wrote about the new JSX transform in React 17. Speaking of React 17, Happy 3rd Birthday React 16 😅.

  3. Nathan wrote an in-depth post about how to understand React rendering.

  4. Urlcat is a cool JavaScript library that helps you build URLs faster and avoid common mistakes. Is it cooler than the live-action CATS movie tho? Only one of those has CGId buttholes, so you tell us. (My search history is getting real weird writing this newsletter.)

  5. Everyone’s favorite Googler Addy Osmani wrote about visualizing data structures using the VSCode Debug Visualizer.

  6. Smolpxl is a JavaScript library for creating retro, pixelated games. There’s some strong Miniclip-in-2006 vibes in this one.

  7. Lea Verou wrote a great article about the failed promise of Web Components. “The failed promise” sounds like a mix between a T-Swift song and one of my middle school journal entries, but sometimes web development requires strong language, ok?

  8. Billboard.js released v2.1 because I guess this is now Chart Library Week 2020.

JS Quiz - Answer

const friends = ['Alex', 'AB', 'Mikenzi']
friends.hasOwnProperty('push') // false

As mentioned earlier, if you look at Array.prototype, it doesn’t have a hasOwnProperty method. How then, does the friends array have access to hasOwnProperty?

The reason is because the Array class extends the Object class. So when the JavaScript interpreter sees that friends doesn’t have a hasOwnProperty property, it checks if Array.prototype does. When Array.prototype doesn’t, it checks if Object.prototype does, it does, then it invokes it.

const friends = ['Alex', 'AB', 'Mikenzi']

console.log(Object.prototype)
/*
   constructor: ƒ Object()
   hasOwnProperty: ƒ hasOwnProperty()
   isPrototypeOf: ƒ isPrototypeOf()
   propertyIsEnumerable: ƒ propertyIsEnumerable()
   toLocaleString: ƒ toLocaleString()
   toString: ƒ toString()
   valueOf: ƒ valueOf()
*/

friends instanceof Array // true
friends instanceof Object // true

friends.hasOwnProperty('push') // false