jQuery and TypeScript take the L

Issue #1.June 22, 2020.2 Minute read.
Bytes

“WTF is this?” First off, watch your language. Bytes is the new, weekly newsletter from ui.dev (previously TylerMcGinnis.com) that covers new releases, emerging trends, and everything else you need to know about the JavaScript ecosystem. Please tweet all criticisms to our head of content, Steve.

Bootstrap 5 drops jQuery, starts vaping with the cool kids

New V. New Me… The world’s most popular CSS framework is back with a major release that includes a new API, new logo, new docs, and a new direction:

  • jQuery, SmayQuery: All Bootstrap components have now been migrated to plain old JavaScript. By dropping jQuery as a dependency, the Bootstrap team has saved us all from the dreaded Bootstrapper’s Dilemma: “Is the convenience of jQuery worth the cost of having to add jQuery to my project? (no offense)”.

  • Utilities API: This new API-based approach gives Bootstrap a feeling similar to Tailwind CSS and gives developers a chance to create all types of utility classes for spacing, positioning, sizing, etc. It’s never been easier to build a Design System and make your parents proud of you.

  • CSS Custom Properties: Bootstrap 5 dropped support for Internet Explorer so it could incorporate the powers of both Sass and CSS custom properties for a more flexible, modern system.

  • Better docs: Every release promises better docs, but the new Customize section of the v5 docs does seem to give some genuinely helpful guidance on how to best customize the framework.

The Bottom Line

For years, the two most common criticisms of Bootstrap have been 1) it’s difficult to actually customize your CSS within the framework, and 2) it’s difficult to work with jQuery when using Bootstrap’s JavaScript components alongside popular technologies like Vue and React.

Each of Bootstrap 5’s changes seem designed to address those specific problems by providing new features and resources for customization and by swapping jQuery for “just JavaScript”. The million-dollar question is – will this be enough to actually solve those problems? We should have a better idea once v5 enters its beta phase (presumably sometime in the next 3-18 months).

Deno sheds its TypeScript scales (interally)

Littlefoot

TypeScript takes (the very rare) L

And Deno was its name-o… Deno (pronounced DEE-NO, I don’t care whatever anyone else says) is a newly released JavaScript runtime created by Ryan Dahl (yes, the dude who created Node.js). Deno is obviously similar to Node, but with the letters rearranged but aims to provide a more modern development environment by addressing many of the issues Ryan discussed in his famous 2018 conference talk, “10 things I regret about Node.js”.

Why the change from TS to JS? The design doc explains that removing types from the internal code in favor of pure JavaScript “reduces complexity and helps us ship a faster product.”

If you want to dig deeper, the doc also lists a few of the specific headaches TypeScript was causing for Deno, including -

  • “Crushingly slow” incremental compile time when changing files in CLI/JS
  • Runtime performance problems with the TypeScript organization/structure that they’re using in CLI/JS
  • TypeScript (counterintuitively) making it more difficult to organize code
  • Internal code and runtime TypeScript declarations must already be manually kept in sync

The Bottom Line

In a world where everyone is migrating to TypeScript, this is a rare move. The doc explicitly states that Deno will still support TypeScript and that the highly contextual reasons for this change shouldn’t be used to draw conclusions on TypeScript’s usefulness (too late). Like most decisions, it’s all about tradeoffs.

Spot the Bug (answer below)

const Animal = (name, type) => {
  this.name = name
  this.type = type
  this.age = 0
}

Animal.prototype.birthday = function () {
  this.age++
}

const leo = new Animal('Leo', 'Lion')

Cool Bits

  1. A short post from Julia Evans shows us what a little bit of plain JavaScript can do
  2. Learn how to replicate Zelda’s interface with React & Tailwind CSS
  3. GitHub released Super Linter - basically an open source combination of regular linters.
  4. Dr. Axel explores how we can compute with types at compile time in TypeScript and makes us all wish we could be called Doctors.
  5. Free Code Camp blessed us with 15 🍨 JavaScript project walkthroughs in one mega-video.
  6. Arbaz Siddiqui breaks down CORS for frontend developers. You’ll still probably get CORS errors, but now you’ll at least know why when you Google how to fix them.
  7. Midori is a library of animated background images worthy of a spot in a lo-fi hip hop beats Youtube video.
  8. Patrick is living his best quarantine life and made an open-source automated irrigation system with React, Node, and some Raspberry Pi’s.

Spot the Bug - Problem

const Animal = (name, type) => {
  this.name = name
  this.type = type
  this.age = 0
}

Animal.prototype.birthday = function () {
  this.age++
}

const leo = new Animal('Leo', 'Lion')

Arrow functions don’t have their own this. This leads to three errors in our code.

First, we’re adding properties to this in the constructor function. Again, because Arrow Functions don’t have their own this, you can’t do that.

Second, we can’t use the new keyword with an Arrow Function. This will throw a X is not a constructor error.

Third, we can’t add a property on a function’s prototype if that function is an arrow function, again, because there’s no this.

Spot the Bug - The Solution

function Animal (name, type) {
  this.name = name
  this.type = type
  this.age = 0
}

Animal.prototype.birthday = function () {
  this.age++
}

const leo = new Animal('Leo', 'Lion')

One Question Interview

What will building for the web look like in 5 years?

Nader Dabit

“I think that we will be past the discussions of how to manage and optimize performance as these problems will be solved and instead we will be discussing how the lines have blurred about the definition of a “web developer”. I think that there will be less and less “front end” developers and instead we will have a hybrid of what we now call a “full stack” developer and a cloud engineer. A single developer (or a very small team) will be able to achieve what in the past took numerous teams working in tandem to achieve: building scalable and real-world enterprise quality applications by leveraging more and more powerful managed services offered by cloud providers and startups alike. They will achieve this using their existing skillset, one that in the past limited them to front end but now gives them more and more power flexibility.”

What we’re vibin’ to

The Midnight

The Midnight - They’re like if Daft Punk, Kenny G, and Ken Wheeler got high and started making beats – and I’m here for it.

Specifically, these, tracks, are, rad.