I don’t make libs for free, I make ’em for freedom

Issue #26.December 14, 2020.2 Minute read.
Bytes

GitHub’s New Treats from GH Universe

Are you afraid of the dark?

’90s Nickelodeon hit different

GitHub Universe happened last week — and yes, we heard about dark mode 🌛.

When we first saw the announcement video, we thought it might be live footage of GitHub being baptized into the Church of Satan. But since GH was acquired by Microsoft back in 2018, we assumed that ceremony had already happened a long time ago.

Jokes aside, we are excited for coding in the dark to be even more… dark.

Here’s a quick rundown of our other favorite new GH features.

  • Codespaces: An online dev environment that’s “hosted by GitHub and powered by VSCode” (Microsoft tag-team). It’s basically a fully-featured editor in the browser that includes everything you’d need to develop for a specific repo (project dependencies, terminal and shell access, debugging tools, etc.). GitHub calls it “programming in the cloud,” and in case you’re wondering — yes, they’re going to make bank off this.

  • Auto-merge pull requests: When enabled, this lets you merge and close PR’s automatically, instead of manually (like a peasant). If all checks pass and your changes are approved, GH will automatically merge your PRs into the target branch for you.

  • New GitHub CLI: gh lets you bring pull requests, issues, and other GitHub concepts to the terminal with over 45 CLI commands.

Other fun new features include a native iPad app, a major release of GH Enterprise Server, a new dependency review tool, the ability for companies to participate in GH Sponsors, and Build-A-Bear for developers code-your-own-OctoCats.

The Bottom Line

Check out the full Opening Keynote for everything we didn’t cover here. It’s pretty entertaining, but it’s nothing compared to Microsoft’s greatest video of all time.

React Query 3.0 Released

Coloring Book

I don’t make libs for free, I make ’em for freedom

React Query v3 was just released… literally this morning. So here we are, furiously writing about it to bring you all the latest info. Heavy is the head that wears the crown.

Quick Review: React Query is a Hooks library for fetching, caching, and updating server state in React. Some people have called it “the missing data-fetching library for React” (and by “some people”, we mean Tanner). Others have called it “a way to never have to use useEffect again (and by “others”, we mean me, Tyler. I hate useEffect).

What’s new in RQ 3?

A lot. So much we’re going to break our own rule and just copy/pasta from the announcement tweet.

  • Better SSR
  • Universal recycling symbol keepPreviousData
  • Bi-Directional Infinite Queries
  • Selectors
  • useQueries
  • Retry/offline support for mutations
  • Agnostic core
  • Bundled Devtools
  • LocalStorage Cache (experimental)

You can check out all the changes in the Migration Guide. And you’ll have a lot more fun reading it if you play The Official React Query Documentation Drinking Game™ — drink every time you see the word “cache” in the docs. GLHF.

The Bottom Line

There’s an ever-expanding smorgasbord of React server state solutions, but React Query seems to be leading the charge.

JS Tip - Format Numbers to Dollars in JS

function formatToDollar (number) {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
  }).format(number)
}

formatToDollar(873) // "$873.00"
formatToDollar(1634) // "$1,634.00"
formatToDollar(1523.65) // "$1,523.65"
formatToDollar(1893042.3498) // "$1,893,042.35"

In the example above we see how you can use the Intl.NumberFormat API to format numbers as dollars in JavaScript. Let’s walk through the different options in case you need to customize it for yourself.

style is the formatting style to use. There are three options - decimal (default), currency, and percent.

If you’re using a style of currency as we are above, you also need to specify the currency format, in our case, USD. Other options include EUR for the Euro, CNY for the Chinese RMB, MXN for the Peso, or any other “ISO 4217” currency.

If you need more fine tuned customization, you can view the full API here.

Cool Bits

  1. OpenSSF released a criticality score to “define the influence and importance” of open source projects. This kinda feels like a nerdier version of ranking the hottest kids at your middle school back when you were 14. Hopefully it causes just as much drama.

  2. Deno v1.6 was released and now allows you to build self-contained, standalone binaries – whatever that means.

  3. Addy Osmani wrote about The Import On Interaction Pattern. It’s a great post, but it’s a shame that Addy accidentally flipped that giant switch at Google that made all the servers simultaneously go offline this morning.

  4. Julio wrote a deep dive on Rome that goes over linting, compiling, and bundling. ICYMI Rome is a JavaScript toolchain created by Sebastian McKenzie (the creator of Babel).

  5. This is an older one, but this is my newsletter and you can’t stop me from putting it in here. how client side routers work is a must read if you’re using a client side router (which you probably are).

  6. Jason & Houssein wrote an in-depth article about Google’s newly released tool, Estimator.dev. It calculates the size and performance improvements a site could achieve by delivering modern JavaScript syntax. Surely this won’t be used by certain Google DevRels to tell you you’re a bad person because the app you built with limited time and resources is slow. Surely.

  7. Speaking of Google (and antiquated software), AngularJS is officially shutting down on 12/31/2021. Hopefully we’ll be out of quarantine by then so we can gather with friends and loved ones to remember all the good times.