Venusaur used S̶o̶l̶a̶r̶ f̶l̶a̶r̶e̶ Cloudflare!

Issue #27.December 21, 2020.2 Minute read.
Bytes

Next week will be the last Bytes issue of 2020, and we want your help commemorating this…interesting year.

So if you feel inclined, respond to this email with your answer to one of the questions below along with your Twitter handle (#CloutChasing), and we’ll feature our favorites in next week’s JavaScript New Year’s Extravaganza Issue™.

  1. What was the most important new release of 2020?
  2. What’s a new or growing JavaScript trend you think we’ll see more of in 2021?

GLHF.

Cloudflare Pages is a new way to JAMstack

Venusaur

Venusaur used S̶o̶l̶a̶r̶ f̶l̶a̶r̶e̶ Cloudflare!

It’s super effective… at web infrastructure and security. And now, Cloudflare wants its new Pages platform to be your go-to tool for building, deploying, and hosting JAMstack sites.

Sound familiar? Maybe that’s because it’s pretty much the same way that Netlify, Vercel, and Gatsby are trying to make money too. (*Nervous laughter*)

Luckily, none of those companies have recently raised millions of VC dollars or anything. Because that would be crazy. And maybe a little awkward, tbh. (*Eye twitch*)

But hey, one of the world’s oldest holiday traditions is to pretend like consequences don’t exist in December. It’s why I ripped my gums to shreds while eating three bowls of Christmas Captain Crunch last night, and it’s also why we’re not gonna worry too much about the long term financial viability of the VC-backed companies behind some of the most popular JavaScript frameworks.

At least not til after New Year’s.

With that, let’s get to the Cloudflare Pages highlights:

Deep git integration with built-in builds should make Continuous Integration tooling a lot less cumbersome and annoying (we hope). You just select the repo and the framework, and CF Pages will build and deploy changes for you. Each commit also gets its own unique Preview URL, so that you can do halfway decent code reviews without having to pull down the entire branch.

Easier staging with Preview and Production environments that build all feature branches and preview links with “preview variables,” so you can experiment with stuff without impacting your production data.

A generous free tier that allows for 1 build at a time, 500 builds per month, and unlimited sites, requests, bandwidth, and admin seats. Cloudflare says they did this to give back to the community for the holidays, but we’re jaded enough to know a marketing ploy when we see one. That said, we can respect a good marketing ploy, especially when it comes with a lot of free stuff.

The Bottom Line

Tl;dr - Software is (still) eating the world, and Cloudflare is using its huge network of data centers to eat the entire software infrastructure value chain. Maybe that’s why the stock price jumped 45% in November.

The Web Turns 30

The web turns 30

I am beautiful. I am smart. I am web scale.

30 years ago yesterday… British scientist Tim Berners-Lee published the world’s first website at info.cern.ch and the world’s first web page address: http://info.cern.ch/hypertext/WWW/TheProject.html. The web was born 👼.

Pretty sure that Tim (aka TBL) could’ve gotten a better domain name at that point, but let’s set that aside for now.

The site featured info about the web project itself — a description of hypertext, instructions for creating a web server, and more.

To create the world’s first website, TBL also had to create the world’s first browser and web server. He called the browser WorldWideWeb after spending a few months developing it at the CERN Research Center on a NeXT computer (yes, that NeXT computer).

He was (rightfully) paranoid about someone at the CERN lab accidentally switching off the computer, so he taped a handwritten label in red ink to the computer that read, “This machine is a server. DO NOT POWER IT DOWN!!”

That original browser could only run on NeXT computers, which meant that WorldWideWeb wasn’t actually very worldwide (considering NeXT machines cost about a gagillion dollars back then).

So in 1991, TBL worked with Nicola Pellow (a math intern at CERN) to create the Line Mode Browser — the first cross-platform web browser that could also work on older terminals. (Call it the React Native of its time.)

Nicola probably wasn’t paid for that internship, but she did “get great experience for her resume.”

And that was the one time that statement was probably true.

Merry Webmas! 🎄

🔥 JS Tip - Understanding the “this” keyword

Knowledge of JavaScript’s this keyword is becoming less important as we abstract away JavaScript’s weird parts. However, as of today, I’d still consider it crucial knowledge for any JS dev.

Here’s a cheat sheet for understanding what the this keyword is referencing.

  1. Look to where the function was invoked.
  2. Is there an object to the left of the dot (foo.bar)? If so, that’s what the this keyword is referencing (foo). If not, continue to #3.
  3. Was the function invoked with .call, .apply, or .bind? If so, it’ll explicitly state what the this keyword is referencing. If not, continue to #4.
  4. Was the function invoked using the new keyword? If so, the this keyword is referencing the newly created object that was made by the JavaScript interpreter. If not, continue to #5.
  5. Is this inside of an arrow function? If so, its reference may be found lexically in the enclosing (parent) scope. If not, continue to #6.
  6. Are you in strict mode? If yes, the this keyword is undefined. If not, continue to #7.
  7. JavaScript is weird. this is referencing the window object.

For a more detailed explanation, visit Understanding the “this” keyword, call, apply, and bind in JavaScript

Cool Bits

  1. Discord just released Focus Rings — a centralized system for displaying focus indicators on a webpage, allowing for an all-keyboard navigation experience. “Focus Rings” sounds like the name of a scammy “biohacking” gummi, but if it tasted like Peach-O’s we’d probably try it.

  2. Dominic wrote about how to increase CSS-in-JS performance by 175x. He almost went for 176x, but come on that would be crazy.

  3. JSitor is a new online editor for JavaScript, HTML, and CSS that features support for different layouts and a mobile app.

  4. Yoni & Friends (great band name) made a list of 100+ best Node practices. #1 tip: “enable this chrome extension that blocks all mentions of the word Deno.”

  5. Last week, Facebook announced the last major release of Flux before it gets moved to maintenance mode. Goodbye Flux — we won’t miss you, but we’ll never forget you.

  6. Moiva is a new way to measure and compare JavaScript libraries. It’s also the name of a very flat, long fish. So there’s that.

  7. Duncan wrote an interesting article about how his team at Shopify uses WebAssembly outside the browser.

  8. React Hot Toast is a new React notification library. Fun fact: “Hot Toast” was my nickname in middle school basketball 🔥🍞.