a jQuery tattoo station

This week, we’ve got baby (JavaScript) driver, the festival of the century, and a new CSS selector that pays tribute to a classic R&B group.

Welcome to #114.

---

It’s not the car, it’s the driver

Volume up, pedal down

We, like most people, appreciate a good driver. Minnie, Adam, Baby… all fantastic. So PlanetScale definitely caught our attention last week when they announced the “PlanetScale serverless driver for JavaScript” (name clearly inspired by “Dwight Schrute’s gym for muscles”).

If you haven’t heard of PlanetScale, it was started when a bunch of homies from GitHub decided to dip their toes into the warm waters of hosted MySQL and make a database that operates a lot like Git (you can branch and merge, making migrations and updates as easy as a pull request).

Previously, you needed to make a “raw TCP connection” (sounds dirty) to whisper sweet nothings SQL statements to PScale — but now with their serverless driver, you can do all of that with JavaScript. To accomplish this, the team had to rebuild their whole HTTP infrastructure.

Here are a few noteworthy details:

1. Global Routing — edges, nodes, connection pools – all the good stuff. But really all you need to know is that it’s faster by ~100ms (solving some issues common to edge ↔️ db connections)

2. Built on the Fetch API — You can use their driver anywhere fetch is supported (even the browser of choice for those of you in the Chaotic Evil quadrant)

3. Security — This new driver sanitizes your queries to prevent SQL injection (and we’ll use this moment to remind you to sanitize that HydroFlask you haven’t cleaned in months — we know ya’ll nasty)

4. Currently in Beta — Like beta software has ever stopped you before (but it might not hurt to try before you buy)

Bottom Line: Another huge W for the edge, serverless, and fetch (also wouldn’t mind if the 🌎Scale team wanted to send us one of them bomber jackets).

---

“I still think it needs more pop” [sponsored]

Bugherd will break you out of the infinite feedback loop

Dante’s 8th level of Dev Hell: trying to get feedback on a website from a big team.

You create the new landing page and send it to your manager, who gives you feedback and sends it to the VP, who also gives you feedback and “CC’s a few more stakeholders” who also give you feedback… for eternity.

Thankfully, there’s BugHerd:

1. It lets your team pin feedback directly to website elements and automatically provides metadata about their specific URL, browser, OS, and screen resolution (no more messy spreadsheets and email 🙏).

2. It consolidates all of that feedback into one place, so you can manage and track progress on bug fixes (no more switching between platforms 🙏).

It saves a lot of time and is our favorite way to work with QA teams, outside clients, or contractors.

Check it out – and see why over 10,000 companies use it.

---

The celebs are out at BootFest

Bootie’s 11th birthday bash

To celebrate Bootstrap turning 11 years old last week, we wanted to throw a huge, 2011-themed party with an all-dubstep dance floor, a jQuery tattoo station, and Justin Bieber’s Never Say Never documentary playing on repeat.

But since none of you responded to our e-vite for BootFest 2022, we’ll just have to celebrate in email form.

How we got here: Bootstrap was never supposed to be the next big thing. Mark Otto and Jacob Thornton were just trying to help their team at Twitter build internal tools that looked a little less janky (Retool wasn’t around yet 😢).

But after debuting their first version of “Twitter Bootstrap” at the company’s Hackweek, it immediately took off within other teams at Twitter. So Mark and Jacob started working with an equal mix of designers and engineers to create a more extensive library of components that looked great and were easy to implement by adding a few classes to your HTML.

When they open sourced Bootstrap in August 2011, developers ate it up. Web apps were still just starting to become a thing, and Bootstrap provided a helpful starting point for devs who weren’t used to building (or styling) richer, more interactive experiences for the web.

Even though we all eventually got tired of seeing the same Bootstrap sites everywhere, its 11-year run (that’s 77 in web years) continues to be super impressive. They’ve gone through major rewrites — incorporating responsive design, switching from Less to Sass, adding Flexbox support, removing jQery dependencies — while adding dozens of new components along the way.

Today, Bootstrap is still the #7 most-starred project on GitHub and gets more npm installs than Tailwind CSS. Turns out that being well-designed and easy to use is still an undefeated combo in OSS.

Bottom Line: BootFest might’ve been brief, but it was definitely more fun than half of this summer’s tech conferences (it smelled better too).

---

Jobs

Senior or Staff Front-end Engineer — React (100% Remote)

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

---

JS Quiz — Sponsored by Sleuth.io

Sleuth was created by the founding engineer of Jira, and is the best way to track & improve your team’s engineering efficiency (without spying on them).

Why does this code work?

const friends = ['Alex', 'AB', 'Mikenzi']
friends.hasOwnProperty('push') // false

Specifically, why does friends.hasOwnProperty('push') work even though friends doesn’t have a hasOwnProperty property and neither does Array.prototype?

---

Cool Bits

1. Last week 👑 Addy Osmani asked, Can browsers optimize the loading of third-party resources? Coincidentally, last week I asked “Can I go my entire career only learning JavaScript?“. I guess that’s why Addy gets paid the big bucks.

2. The FusionAuth team wrote this great technical paper all about Login and Authentication Workflows for web apps, mobile apps, and SPAs. You’ll learn so much that you’ll have to buy your mom a new bumper sticker that says, “My child is a certified authLord.” (She can put it right next to that COEXIST sticker from 2002.) [sponsored]

3. VSCode just announced a new Markdown language server that’ll add more robust MD tooling. We’ll never have to worry about making *markdown mistakes_ ever again 🙏.

4. Atila Fassina wrote about The rise of serverless databases — or as I like to call them, “Get-out-of-Backend-Jail-free databases.”

5. Joe Liccini wrote about Why Your Cached JavaScript Is Still Slow. Apparently Joe didn’t get the message that the best way to educate others about perf problems is yelling at them on Twitter.

6. This Postgres Playground got Postgres running in the browser via Wasm (cool flex), and it shares some helpful Postgres examples. Forget the outdoors, this is the only playground my children will be attending for the rest of the summer. (They’ll thank me later, even if there’s no splash pad.)

7. :has() can now be a CSS parent selector, which lets you apply CSS to an element based on what’s happening inside that element. A big breakthrough for my patented TLC selector - i:has(.no-scrubs).

8. The James Webb Space Telescope runs JavaScript to control its Integrated Science Instrument Module — which NASA calls “the heart of the Telescope.” So what I’m hearing is that JavaScript is basically the heart of NASA’s heart? I guess that answers my “Can I go my entire career only learning JavaScript?” question 😏.

---

Spot the Bug Solution — Sleuth.io

const friends = ['Alex', 'AB', 'Mikenzi']
friends.hasOwnProperty('push') // false

As mentioned earlier, if you look at Array.prototype, it doesn’t have a hasOwnProperty method. How then, does the friends array have access to hasOwnProperty?

The reason is because the Array class extends the Object class. So when the JavaScript interpreter sees that friends doesn’t have a hasOwnProperty property, it checks if Array.prototype does. When Array.prototype doesn’t, it checks if Object.prototype does, it does, then it invokes it.

const friends = ['Alex', 'AB', 'Mikenzi']

console.log(Object.prototype)
/*
   constructor: ƒ Object()
   hasOwnProperty: ƒ hasOwnProperty()
   isPrototypeOf: ƒ isPrototypeOf()
   propertyIsEnumerable: ƒ propertyIsEnumerable()
   toLocaleString: ƒ toLocaleString()
   toString: ƒ toString()
   valueOf: ƒ valueOf()
*/

friends instanceof Array // true
friends instanceof Object // true

friends.hasOwnProperty('push') // false