Google has learned your toasting habits

Issue #38.March 8, 2021.2 Minute read.
Bytes

Last week I had a typo in the “JS Tip” section where I logged the wrong value to the console. It was great talking to the few hundred of you who noticed and emailed me about it 😅. This week’s JS Tip includes the correct code. Sorry about that!

Gatsby 3.0

Kyle Matthews as Gatsby

🙃

How we got here: GatsbyJS is a React framework for static site generation (SSG) that was created during React’s Paleolithic Era (appx. 2015). It quickly became the default option for spinning up static sites like blogs and e-comm stores, and it leveraged that popularity to build a company that has since raised $47 million in VC. That’s a lot of fancy shirts.

Competition’s been heating up lately with newer players like Next.js/Vercel dipping their toes into the SSG water, so we were excited to check out what Gatsby had up its sleeve for v3.0 — its first major release in over 2 years.

The Highlights:

Faster local dev experience — Fast refresh for everything, an error overlay that’s more accessible and reliable, and “only fetching what you need, when you need it” have helped Gatsby 3 make the local dev experience faster by “as much as 70%” in some cases (their words).

Incremental builds — This was flagged as experimental for a while, but now it’s a real boy enabled by default in Gatsby open-source (which is like, the Gatsby you’re probably using - naming things is hard). The general idea is that instead of a content update kicking off a full rebuild of your entire site, IB only updates pages that have new content to display.

2 big plugin updates — Gatsby Plugin Image (which powers Gatsby’s well known image handling) was updated to make it easier to use and more performant. There’s also a release candidate for an updated Gatsby Shopify source plugin, which lets you source Shopify data in Gatsby and improve build performance of Shopify sites.

They also introduced new hosting capabilities for Gatsby Cloud, which apparently gives customers “super fast” deploy times. It also gives Gatsby a new monetization angle.

The Bottom Line

No word on if they’ve fixed the plugin system where every plugin is almost what you need but not quite.

Flutter 2.0 is coming for the web everything

Napoleon Dynamite

The OG Flutter

Are you even a real tech giant… if you don’t spend millions building your own programming language/framework/library?

Google wasn’t about to find out, so they used some of their big brother dollars “targeted ads revenue” to build the Flutter UI toolkit, which just released v2.0 last week.

Quick review: Google released Flutter back in 2019 as a way to finally use Dart for something open-source toolkit for building natively compiled, cross-platform mobile apps. It’s built with Dart and has steadily expanded beyond mobile apps, which has helped fuel its speedy rise in popularity.

Flutter 2.0 doubles down on extendibility in a big way. The release announcement proudly claims that v2 enables developers to use the same codebase to ship native apps to five different operating systems (iOS, Android, Windows, macOS, and Linux) and create web experiences for all major browsers.

Web support: Flutter moved away from the traditional “DOM-centric” approach to web development in favor of an “app-centric” approach with its CanvasKit rendering engine. This WebAssembly project makes the Skia graphics engine (which powers both Android and Chrome) available to web apps, providing both modern graphics and solid performance.

Support for everything else: Like that try-hard from Uni, Flutter wants to be involved in as many extracurriculars as possible. They’ve formed official partnerships with companies like Canonical (creators of the Ubuntu Linux distro), Microsoft, and Toyota to create “digital experiences” for tablets, cars, and various IoT devices. And there are over 15,000 packages for Flutter and Dart from companies like Amazon, Adobe, and Square.

The Bottom Line

“Ok, so why is Google doing all of this?” we can hear you ask. And because it’s Google, the answer to that question is always the same: “For the ads, obviously.”

The very end of the Flutter 2 release mentions a new beta release of Google Mobile Ads for Flutter — “a new SDK that works with AdManager to offer a variety of new ad formats.”

Picture this utopia: You wake up early one morning in March 2024. You check your smart-toaster app (built with Flutter) on your smart watch to see if your sesame bagel has finished perfectly toasting yet. It has not. While you wait, your smart watch pings you with an ad from Google for strawberry cream cheese. You had totally forgotten to get some at the store last night — what a crisis! But lucky for you, Google has learned your toasting habits, your bagel consumption habits, and your cream cheese preferences (sometimes you like plain cream cheese, but Google knew this would be a strawberry morning). You’re able to place an order for strawberry cream cheese right there in your smart toaster app, and Google Shopping has it delivered it to you in minutes. Crisis averted!

JS Tip

This is the same as last weeks but… without the typo.

Sometimes you want to remove a property/value from an object. Using the power of JavaScript™ (and ES6’s rest operator), you can do it like this.

const user = {
  name: 'Tyler',
  age: 30,
  date: 1614619969641,
  funny: true
}

const { funny, ...updatedUser } = user

console.log(updatedUser) // {name: "Tyler", age: 30, date: 1614619969641}

Cool Bits

  1. jQuery just released version 3.6 and said they “still have their eye on a 4.0 release.” That feels kinda like me saying, “I still have my eye on asking Jamie to Prom”, but we still ❤ you, jQuery.

  2. Taras wrote a great deep dive on button design as part of a larger series breaking down multiple UI components.

  3. David Walsh (the OG himself) wrote a great article on simplifying React authentication. That’s cool David, but could you start working on a Flutter tutorial for cloning the 2020 Toyota Corolla’s media dashboard? Thx.

  4. Kevin created TroisJS, which tries to bring some of the react-three-fiber magic to Vue. Really hoping someone builds react-three-fiber for JQuery in time for that v4 release.

  5. Michal created a minecraft client written in JavaScript, so you can make them blocks break in the browser.

  6. Fernando wrote an article about the dark side of JavaScript. It’s good to finally see someone step up and call out all those Twitter JS grifter accounts. Wait, what? It just covers a few JS features he thinks you should avoid? Oh, bummer.

  7. Stephanie created SmolCSS — a collection of minimal snippets for modern CSS layouts and components that will help you trick your users into thinking you actually know CSS.

  8. Svelte NodeGUI is a lightweight electron alternative for building cross-platform desktop apps. The only catch is that every time you use it, you have to yell LIGHT-WEIGHT BABY!!! as loud as you can.