Bytes #51 - My toddler's only interested in Redux

Browser Land

The Happiest Place on Earth

Updates from Browser-Land

There’s been a lot of browser news recently, so we ventured into the depths of Browser-Land so that you don’t have to. Here’s the latest from the front lines.

Chrome 92 just launched its beta, which includes a new File Handling API that lets you declare web apps as file handlers (great news for online text editors, design tools, etc.) and a new Shared Element Transitions API that makes it a lot easier to add polished, native-like transitions. v92 also comes with new DevTools like a long-requested CSS grid editor and a new source order viewer.

And since every tech platform copies Snapchat, Chrome 92 also has a new feature called Memories. It’s a combined view for your bookmarks, history, and open tabs that (we hope) will serve up fun notifications like, “On this day 3 years ago, you spent 2 hours stalking every single picture of your ex’s trip to Maui — Share now?”

Firefox 89 was also released last week, with some major design changes. Some updates were welcomed with open arms — like the cleaner/simpler menus, modals, and toolbar. But the new tab redesign has generated a lot more ~~visceral rage~~ mixed reviews. v89 also doubles down on Firefox’s beloved CSS DevTools, with a new forced-colors media feature and new -override functionality.

Mighty [not sponsored, but dtf] jumped head-first into Browser-Land a month ago when it launched v1 of its super-fast-and-expensive browser with a twist. For $30/month, you can stream its remote Chromium-based browser that lives in the cloud to your own machine. It’s like Netflix, but instead of streaming Breaking Bad, you’re streaming a marginally faster version of Chrome.

Some say that Mighty is the future that will eventually help the web replace all native apps, while others are a little more… skeptical of the Chrome-in-a-server model.

Retool >>> office ping pong table [Sponsored]

You know what would be a great work perk? A lifetime guarantee that you’ll never be asked to “throw together some internal tools” for your company’s higher-ups ever again. But since that’s probably too much to ask, the next best perk is Retool.

That way, you won’t ever be forced to spend weeks hacking together your company’s wide variety of data sources, only to realize at the last minute that you never considered auth, and (oh crap) the whole thing looks terrible.

Retool saves you a ton of time (and sanity) by abstracting away all the annoying parts of building internal tools, while still giving you the flexibility to write custom JavaScript anywhere in the app.

Ping pong & Free-Lunch-Fridays are great, but it’s time to tell your boss that they’re never allowed to say “we’re a family” until they let you try out Retool.

Spectrum Vans

Get the best triple play deals on Cable TV, High Speed Internet, and Home Phone Service.

Adobe Spectrum proves our theory that every tech company has a project named Spectrum

React Spectrum is a collection of libraries and tools that Adobe created to prove that you don’t need Warby Parker glasses and a $200 haircut to build beautiful and accessible user experiences in React. It was first released last summer, but since it’s been getting a lot of buzz again this week, we wanted to give you a quick refresher.

React Spectrum features 3 main libraries/tools:

React Spectrum — Meta. This is an implementation of Adobe’s design system, Spectrum, that could be useful if you’re integrating with Adobe software or just want to use their component library in a project.
React Aria — A collection of Hooks that implement behavior and accessibility based on the WAI-ARIA Authoring Practices. It also implements internationalization for 30+ languages.
React Stately — Another Hooks library that provides cross-platform state management and core logic for each component. They don’t make assumptions about the platform they’re on, and they don’t have any theme or design system-specific logic.

The Bottom Line

Some of these tools are more production-ready than others, but we’re 100% down for any tools that make it easier to build cohesive design systems and more accessible React applications. If you want to learn more about React Spectrum or see it in action, check out Devon Govett’s talk at last year’s React Europe Conference.

Jobs

G2i is seeking Senior React, React Native, or Node Developers | 100% Remote

Looking for highly competent engineers that take pride in their craft, are never satisfied with their knowledge base, and bring enthusiasm to building applications in React, React Native, and/or Node. Ideal candidates are comfortable working in dynamic engineering environments and display strong communication and documentation skills.

2x Sr. Frontend Engineers - React | 100% Remote

Close.com is looking for two experienced individuals that have a solid understanding of React and want to help design, implement and launch major user-facing features. They are a 100% globally distributed team of ~45 high-performing, happy people that are dedicated to building a product our customers love.

JS Tip

Sometimes (mostly in job interviews) you need to write a function to find the longest word in a string. Here’s one implementation using .reduce that’ll do it.

Is it the best? I don’t know, but I dig it.

function findLongestWord (str) {
  return str.split(' ')
    .reduce((longest, word) =>
      word.length > longest.length 
        ? word 
        : longest
  , '')
}

findLongestWord('Find the longest word') // longest

Note it’ll return the first word if there’s a tie. If you’re in a job interview, that’s a good question to clarify before diving into the code.

Cool Bits

Facebook Open Source made a 90-second video called “Explain Like I’m 5: Flux”, which also could’ve been titled “Explain Like it’s 2015”. Sorry, but my toddler’s only interested in Redux these days.
Lin Clark wrote a great article about making JavaScript run fast on WebAssembly for the Bytecode Alliance blog. We’re not sure what we have to do to get invited to the Bytecode Alliance, but we’re willing.
Ben Schmidt (a professor & researcher at NYU) wrote an in-depth article about Javascript and the next decade of data programming. Hopefully he’ll make an ELI5 video to go along with it too.
Svelte Motion is an animation library for Svelte apps that’s based on Framer Motion. It was also the name of my very fit all-male dance team, which came *this* close to winning regionals back in ‘07. Damn, we were good.
Yare.io is a real-time strategy game where you control your units by writing JavaScript code. Now we just need an Age of Empires II version. 🐐
Pascal created an in-depth intro to WebAssembly for JavaScript developers. I guess that makes it like Pascal’s Wager, but for believing in Wasm?
Milkdown is a powerful WYSIWYG markdown editor that’s lightweight and really slick. Hopefully they raise a bunch of VC money, so they can build a Danimals drinkable yogurt competitor to really double down on their brand.
Prosus acquired StackOverflow for $1.8b, because that’s what can you do after your parent company cashes in on the greatest VC investment in modern history. No word yet on if Prosus be allowing us to exchange our “reputation” points for dollars? Or at least Dogecoin?