Got a real spicy one for you today. Airbnb releases visx, Elder.js is a new Svelte framework, and CGId buttholes.
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:
Smaller bundles: because visx is split into multiple packages.
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.
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.
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.
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.
We're super interested in who will lead Elder.js's $10 million seed round. That's how this works, right?
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
?
Vime is an open-source media player that's customizable, extensible, and framework-agnostic.
The React Core Team wrote about the new JSX transform in React 17. Speaking of React 17, Happy 3rd Birthday React 16 😅.
Nathan wrote an in-depth post about how to understand React rendering.
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.)
Everyone's favorite Googler Addy Osmani wrote about visualizing data structures using the VSCode Debug Visualizer.
Smolpxl is a JavaScript library for creating retro, pixelated games. There's some strong Miniclip-in-2006 vibes in this one.
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?
Billboard.js released v2.1 because I guess this is now Chart Library Week 2020.
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
Delivered to 105,434 developers every Monday
Sdu
@sduduzo_g
This is the first ever newsletter that I open a music playlist for and maximize my browser window just to read it in peace. Kudos to @uidotdev for great weekly content.
Brandon Bayer
@flybayer
The Bytes newsletter is a work of art! It's the only dev newsletter I'm subscribed too. They somehow take semi boring stuff and infuse it with just the right amount of comedy to make you chuckle.
John Hawley
@JohnHawly
Bytes has been my favorite newsletter since its inception. It's my favorite thing I look forward to on Mondays. Goes great with a hot cup of coffee!
Garrett Green
@garrettgreen
I subscribe to A LOT of dev (especially JS/TS/Node) newsletters and Bytes by @uidotdev is always such a welcomed, enjoyable change of pace to most (funny, lighthearted, etc) but still comprehensive/useful.
Muhammad
@mhashim6_
Literally the only newsletter I’m waiting for every week.
Grayson Hicks
@graysonhicks
Bytes is the developer newsletter I most look forward to each week. Great balance of content and context! Thanks @uidotdev.
AMD_
@_amdaniel_
The sense of humor and structure of the Bytes Newsletter is first class and the information that comes with it is enough to make a mini course.
False
@nullish2
Very few newsletters manage to be useful and not very boring. @uidotdev manages to achieve these pretty effortlessly. You can almost see Tyler chuckle as he writes them.
Chris Finn
@thefinnomenon
Every JavaScript programmer should be subscribed to the newsletter from @uidotdev. Not only do they manage to succinctly cover the hot news in the JavaScript world for the week but it they manage to add a refreshing humor to it all.