Bytes #47 - Why can't fruit be compared?

Why can't fruit be compared?

Issue #47.May 10, 2021.2 Minute read.

For months I've based both my identity as well as my happiness on TailwindCSS. Sadly, this week someone on the interview wrote a post about how it's "bad". This, clearly, is a personal attack on myself. If you have any suggestions on a new technology I can haphazardly attach myself to, I'd love to hear it.


The three amigos

Tfw you release Bootstrap 5 on 5/5

Bootstrap Cinco de Cinco de Mayo

Say what you want about Bootstrap, but you've gotta respect the dedication to a nice meme-friendly launch date.

Quick review: Bootstrap is one of the web's OG CSS frameworks. It was created back in 2011 by Mark Otto, Jacob Thornton, and some other Twitter devs as an internal design tool known as "Twitter Blueprint." But it eventually evolved into the Bootstrap framework that we all ~~used to hide our design incompetence~~ know and love.

A lot's changed in the last decade, but Mark and Jacob are still core maintainers of the Bootstrap project and we still can't edit Tweets.

What's new in Bootstrap 5:

  • RIP jQuery -- All Bootstrap components have now been migrated to plain old JavaScript. Dropping jQuery as a dependency finally saves us all from the dreaded Bootstrapper’s Dilemma: Is the convenience of Bootstrap worth the cost of having to add jQuery to my project?

  • New Utilities API -- This new API-based approach gives Bootstrap a similar vibe to Tailwind and lets you easily create and customize all types of utility classes for spacing, positioning, sizing, etc.

  • ~~Crunchatize~~ Customize me, Captain -- By dropping support for IE 11, Bootstrap was able to incorporate the powers of Sass and CSS custom properties for a more flexible, modern system. This should make it a lot easier to create a Bootstrap site that doesn't look like every other Bootstrap site.

The Bottom Line

At the top of the v5 announcement post, the Bootstrap team embedded a link to Daft Punk's classic "One More Time" music video. That song's obviously a banger, but something about Bootstrap directly referencing a pop song from 2009, created by a band who (sadly) hasn't put out any new music since 2013, felt almost a little too fitting.

But hey, this v5 release does a lot to address longstanding concerns about Bootstrap's lack of customizability and the frustrations of working with jQuery. So maybe we're in for a Bootstrap comeback.


Next.js Conf

Don't call it a comeback

Next.js Conf - June 15th

Block off some "Deep Work" time on your calendar and shake off your online conference fatigue because the hottest ticket in tech is back. v2021 of Next.js Conf kicks off on June 15th and you're invited.

In true Vercel fashion, they're taking a "less is more" approach. According to the calendar invite, the conference starts at 9:00am PDT with the "Afterparty" starting just 30 minutes later at 9:30 ~~then after the party it's the hotel lobby~~.

We're not sure what Vercel has up their sleeve, but it's a safe assumption it'll make your life better. You can claim your spot here - Claim Your Ticket.

p.s. When you sign up you're given your own personal ticket. I haven't confirmed this, but I'm pretty sure the lower your number the better of a developer you are 😉.


Jeff Bezos

Should have aimed for the head

AWS Wants Cloudflare's Lunch Money

We all know Jeffy B. doesn't like feeling left out. So when Cloudflare released its edge-computing Workers product a few years ago, it was only a matter of time before AWS pumped out its own version. That day finally came last week, when Amazon released CloudFront Functions -- a new serverless edge compute capability.

How did we get here? AWS kicked off the serverless movement with Lambda almost 7 years ago. Since then, dozens of serverless frameworks and providers have popped up, each trying to be the fastest/most reliable/cheapest solution. Cloudflare's Workers product took a new approach by running code inside a V8 isolate, which made Workers the king of the serverless hill for a while.

That is, until AWS decided to come back for the crown.

CloudFront Functions may seem like just a slightly different kind of Lambda, but it's actually really different. You can only run JavaScript code (as opposed to Python and Go for Lambda), and your environment is more limited overall. You can't use Node APIs, your function only has 1 millisecond to run, and you don't get access to the network, filesystem, or request body.

Are you sold yet? 😅

Ok, here's the upside: Your functions run in an exceptionally secure environment, you can access the request headers, and you'll get sub-millisecond responses. Yeah, you read that right. We're talking freaky fast, Jimmy-Johns-sandwich-delivery levels of speed here. Oh, and it only costs like 1/6th the price of Lambda.

So what kinds of things would you use CloudFront functions for?

  • Rewrite URLs and Redirecting -- Send users to different pages based on A/B test or authentication status
  • Modify request headers -- Put the client's IP address into a header so you can give a more personalized experience
  • Access Authorization -- Parse a JSON web token (JWT) to know whether a user should be visiting that page and redirect to the login page if they shouldn't

The Bottom Line

In a contest of who can be fastest, cheapest, and most reliable, it's pretty tough to bet against Amazon. It doesn't matter if we're talking about serverless computing or doggie diapers.


Spot the Bug - Answer Below

function capitalize(string) {
  string[0].toUpperCase()
  return string
}

Cool Bits

  1. Benchmark-done-right is a collection of three different benchmarks for various JavaScript tools that align the benchmark tasks with what the tool actually does. That way, you're not comparing apples to oranges. (Why can't fruit be compared?)

  2. Drew wrote about flexible nominal typing for TypeScript, which is a good first step on your journey of becoming a flexible TypeScript yogi. Namaste.

  3. Mantine is an open source library of 60+ React components and hooks with native dark mode support and a focus on usability & accessibility. Man-time, on the other hand, is what middle age men talk about when their poor life decisions start catching up with them. [Sponsored]

  4. 5 months after receiving $100k+ in donations from the community, Rome just raised $4.5M in VC money to "provide more meaningful support and larger development efforts with full-time staff."

  5. zx is a new tool from Google that gives you an easy way to write quick scripts in JavaScript (and saves you from having to use Bash).

  6. Jeff Lindsay made a tutorial on how to customize your computer screen with HTML & JavaScript.

  7. Kent Dodds wrote an article on TypeScript Function Syntax.

  8. We only had 7 "Cool Bits" today but unfortunately we need 8 "Cool Bits" to make a "Cool Byte" - so here's an article I wrote about the 'this' keyword, 'call', 'apply', and 'bind' in JavaScript that will have you on the edge of your seat.


Jobs

  • Developer Advocate - Vercel - Educate on the latest Next.js and Vercel features, craft high-quality examples and demos, engage with our community, write documentation, and advocate for a faster web.

  • Senior Frontend Engineer - Podium - As a Senior Frontend Engineer, we will look to you to help further establish robust patterns that help our code be scalable, composable and consistent across our frontend architecture.

  • Web Performance Engineer - Airtable - Design and architect complex new systems, focusing not only on performance and scalability, but also on crafting a high quality user experience. Fully remote.


Spot the Bug - Answer

When we call toUpperCase, we're assuming that we're modifying the string that was passed into the function. However, since strings are primitive values, that means they're immutable and can't be modified once they're been created. Instead of trying to modify the string directly, we need to return a new string after capitalizing the first character.

const capitalize = ([firstLetter, ...restOfWord]) => {
  return firstLetter.toUpperCase() + restOfWord.join('')
}

For more information, visit How to capitalize the first letter of a string in JavaScript

Join Bytes

Delivered to 105,434 developers every Monday