The solution to your impending technical irrelevance

Issue #23.November 23, 2020.2 Minute read.
Bytes

TypeScript 4.1 Released

Clippy

Microsoft’s most ambitious crossover yet

TypeScript released v4.1 last week, and some folks (us) are calling it Microsoft’s biggest moment since Bill Gates jumped over that chair in the ’90s..

Quick review: TypeScript extends JavaScript with syntax for typing, which “saves you time by catching errors and providing fixes before you run code.”

Our friend, David K. (creator of XState) put it slightly differently — “TypeScript is great because instead of coding for 30 min and debugging for 2 hours, you can code for 2 hours and debug for 30 min.”

Jokes aside, TypeScript is an exciting and beloved language that’s becoming more and more of an industry standard.

Here are the 3 big new features you should know about in last week’s TypeScript 4.1 release.

  • Template Literal Types: Building blocks for template literal strings. It has the same syntax as JavaScript’s template literal strings, but is used in type positions. So when you use it with literal types, it’ll produce a new string literal type by concatenating the contents.

  • Mapped Type Key Remapping: It’s a mouthful, but this feature allows you to re-map keys in mapped types with a new as clause. This can help you leverage features like template literal types to easily create property names based off of old ones. You can even filter out keys by producing never.

  • Recursive Conditional Types: Conditional types can now immediately reference themselves within their branches, making it easier to write recursive type aliases. This models JavaScript functions’ ability to flatten and build up container types at arbitrary levels.

Here are 3 of our favorite implementations of these new features:

The Bottom Line

If none of this post made sense to you, you might want to check out our brand new TypeScript course.

If you’re not ready to commit, check out our Introduction to TypeScript Livestream happening tomorrow.

Tailwind CSS Releases v2.0

Adam Sandler

Tailwind 2 Bling >>>

“This is how I win.” Tailwind CSS released v2.0 last week — its first major release since v1 came out 18 months ago. The Tailwind team celebrated the release with an epic video that feels like an Avengers trailer and a beautiful new website.

We get it, y’all are good at design, ok?

What’s Tailwind CSS? A “utility-first CSS framework” that helps you create easily-customizable utility classes. It saves you from writing tons of custom CSS (gross), but it’s still primitive enough to help you design custom components that don’t all to look the same (cough, Bootstrap, cough).

There aren’t many breaking changes in Tail-2.0 (T-2? TWCSSv2?), but there are a lot of new features to unpack. We’ll cover 3 of our favorites and let you check out the rest on your own.

The Bottom Line

It’s been a minute since we’ve seen a tool as universally loved as Tailwind. If you haven’t checked it out yet, now would be a great time to start.

JS Tip - .find

One array method that I find is underrated is .find. It allows you to find the first element in an array which satisfies a test specified by a given function.

const tweets = [
  { id: 1, stars: 13, text: 'Turns out "git reset --hard HEAD^" was a terrible idea.' },
  { id: 2, stars: 87, text: 'Tech conferences are too expensive.' },
  { id: 3, stars: 51, text: 'Clean code is subjective. Optimize for deletion.' },
  { id: 4, stars: 19, text: 'Maybe the real benefit of open source was the friendships we made along the way?' },
]

const tweet = tweets.find((t) => t.id === 3)

console.log(tweet) // {id: 3, stars: 51, text: "Clean code is subjective. Optimize for deletion."}

Cool Bits

  1. Speaking of Tailwind, Ritesh made this pretty nifty CSS-to-Tailwind converter.. Now you can look like a hip, trendy developer without actually having to put in the hard work of learning something new! Win/win.

  2. Electron 11 was released with experimental support for Apple’s new M1 chip. Someday, it’d be nice see Apple experiment with supporting Taiwan, the country where it manufactures the M1 chip.

  3. Gatsby announced a new File System Route API that lets you move route creation logic out of gatsby-node.js and into the file name of a file inside the pages folder.

  4. Docusaurus released a v2 alpha with a new CodeSandbox, ThemedImage, and still the cutest logo out there.

  5. Nick—a Senior Engineer at Coinbase—wrote about his team’s 8-month journey to re-write CB’s Android app from scratch in React Native. No word yet on how this has affected Bitcoin’s bull run, but we’re still HODL’ing.

  6. Cloudflare announced a new, free tier for Workers KV, which includes up to 100,000 read operations per day. It’s a kind gesture after Cloudflare’s stock grew by almost 300% in the last year..

  7. Marcel wrote about three steps to go from JavaScript to WebAssembly,.

  8. Chakra UI just released v1 of its reusable and composable React components. And unlike Aang from Avatar, you won’t have to give up all your relationships to unlock its power.

This week on ui.dev