Whoopi Goldberg discuss the latest tech

Issue #61.August 16, 2021.2 Minute read.
Bytes

This week we got hired as Vercel’s marketing agency (kind of), GitHub is taking over the world (still), and we have a JavaScript quiz because you don’t get enough opportunities at work to figure out what arbitrary code someone else wrote is doing. Welcome to #61.

Evil Woody

Developers👏developers👏developers👏developers👏

Is GitHub Codespaces the future?

Microsoft’s been on a mission to control empower developers for a while now. And with last week’s GitHub Codespaces announcement, it looks like their master plan is finally coming together.

WTF is Codespaces? It’s a fully-featured dev environment in the cloud that basically combines all of Microsoft’s developer tools into one. It provisions your storage and compute resources from Azure, pulls your code from GitHub, and gives you the editing power of VS Code (including extensions) — right in your browser.

But don’t cloud-based IDE’s mostly suck? Yes, that’s true (at least it used to be). We’ve seen three main categories of cloud IDE’s emerge over the years, and most of them are pretty limited at best:

  • Scratchpads for HTML, CSS, and JavaScript (like Codepen and jsbin.com) — Helpful for building small browser widgets, but not powerful enough to build full-scale apps.

  • Container App Sandboxes (like CodeSandbox and StackBlitz) — You can run Node.js in a container, but that’s about it. And you better pray you don’t exceed the memory limit.

  • Provisioned IDE Servers (like Cloud9) — The IKEA of cloud IDE’s. You get a provisioned server and maybe a second-rate browser editor, but you have to set up and configure everything else yourself.

But Codespaces changes everything. It lets you do everything that your local machine can do (access a terminal, run servers, execute tests, sync your local VS Code settings, etc.) — but from any computer in the world. That also means a single config change can upgrade your dev environment from a dinky 1 CPU 8GB RAM server to a beefy 32 core, 64GB RAM monster.

Bottom Line: Codespaces is a paid product (free trial ends September 10), so it’s hard to predict how many developers will ultimately end up using it. But just like The One Ring, it’s hard to not be tempted by its power. Want to give it a shot? Head over to this repo and press ..

Retool meme

Just ship it. [sponsored]

Retool can help you build internal tools 10x faster

It finally happened. Your boss approached you and needs some “internal tools thrown together” because the suits upstairs want to make some “data-driven decisions.”

No problem, you think, should only take a few days. But then you spend the next month hacking together a wide variety of your company’s data sources, only to realize at the last minute that you never considered auth, and (oh crap) the whole thing looks terrible. Should’ve used Retool.

Retool started when a few developers realized that all internal tools are made up of the same basic pieces — tables, lists, charts, forms, maps, wizards (I’m a wot?), etc. So they made a rad product that abstracts away all the annoying parts of building those tools, while still giving you the flexibility to write custom JavaScript anywhere in the app.

And thanks to their pretty generous free tier, I can finally tell my mom that I’m a 10x (internal tools) developer.

👉 Check it out

NeXt Bus

Vercel needs to buy this van from MTV and start touring the world ASAP

Next.js supports ESM now

When Next.js released v11.1 last week, it (sadly) didn’t come with an MTV Cribs-style tour of Guillermo’s house this time around (guess we’ll have to wait for Next.js Conf to see his bathroom).

But the v11.1 release did bring some other big news — headlined by the fact that the team is now working on “extensive ES Modules support” in Next.js. For now, you can experimentally import npm packages using ESM, but esmExternals: true will become the default in Next.js 12.

Along with that big win for ESM stans, Next.js 11.1 has some other cool new stuff:

  • Adopting SWC — This Rust-based compiler is super fast and will soon replace Babel and Terser in Next.js. Vercel even hired SWC’s creator as a full-time employee, because that’s what you do when you have $100 mil in the bank and you love Rust more than Salad Fingers himself.

  • Better performance — SWC isn’t fully integrated yet, but it’s already resulting in builds that are twice as fast in tests. But you should notice better performance right away with this release, particularly when pre-rendering, fetching content from a Headless CMS, or including source maps in your applications.

  • next/image Improvements — Static image imports are now automatically lazy-loaded, and the built-in image optimizer can now automatically detect the external image content type.

Business Talk: Drake dropped a banger on us back in March with his single, “What’s Next”. So Vercel’s next order of business (after buying the MTV van) should be to pay Drizzy whatever he wants to write a new song in time for the Next.js 12 release — “What’s next, Next?”

Did we just become Vercel’s marketing agency?

Jobs

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 Quiz - Answer below

What will be logged to the console after the code is finished executing?

function first () {
  var name = 'Jordyn'

  console.log(name)
}

function second () {
  var name = 'Jake'

  console.log(name)
}

console.log(name)
var name = 'Tyler'
first()
second()
console.log(name)

Cool Bits

  1. Rich Harris wrote a deeper dive on all the drama around Chrome breaking the web, which we briefly covered last week. Classic Rich, always trying to one-up us.

  2. Assembler CSS is a utility-first CSS framework that’s kind of like Tailwind but with more JavaScript. Not to be confused with my current side project, Thundercats-Assemble!!!-CSS.

  3. HyperFormula is an open source, spreadsheet-like calculation engine with over 380 functions. If someone can figure out how to incorporate it into an AI that also features a Wall Street Journal subscription, a Brooks Brothers catalog, and GPT-3, we’ll be able to replace 95% of the world’s investment bankers.

  4. Atif wrote about why you shouldn’t attach tooltips to document.body and provided a good walk-through of an alternative approach.

  5. Vue 3.2 was just released with new features for Single File Components, some major performance improvements, and more. But personally, we’re even more excited for Evan’s new morning show where he and Whoopi Goldberg discuss the latest tech and political news in front of a live studio audience — The Vue, weekdays at 10am ET on ABC.

  6. Tobias wrote a good post about how to make a Web Worker optional. Work that web, honey.

  7. MIDIVal is a JavaScript library for sending and receiving MIDI data via a simple API. It’s also (probably) the official MIDI library of Medieval Times — a very strange tourist attraction where children eat giant turkey legs and watch grown men LARP with horses and real swords. Best 7th-grade field trip I ever went on.

JS Quiz - Answer

We get undefined, Jordyn, Jake, then Tyler. What this shows us is that you can think of each new Execution Context as having its own unique variable environment. Even though there are other Execution Contexts that contain the variable name, the JavaScript engine will first look to the current Execution Context for that variable.

For more info (and to see a cool GIF on how the JS interpreter evaluates the code above that I would include here but honestly I’m not sure how different email clients support GIFs), visit The Ultimate Guide to Hoisting, Scopes, and Closures in JavaScript