Issue #14 - A VSCode like editor for React Applications, a neat trick for better if conditions and how Airbnb adopted TypeScript at scale
Learn how Kent C. Dodds rearchitected his website with super-fast build and load times, how the VSCode team improved the bracket colorization performance 10,000x times and, a library to add VSCode like editor to your React applications.
Tip of the day
When comparing a variable multiple times in an if condition, try using Array.includes()for better readability and flexibility.
// Instead of doing something like this
if (
name === 'Tony' ||
name === 'Natasha' ||
name === 'Thor' ||
name === 'Loki'
) {
...
}
// ...you can do it like this
const strongestAvengers = ['Tony', 'Natasha', 'Thor', 'Loki']
if (strongestAvengers.includes(name)) {
...
}
Articles
How I built a modern website in 2021
Explore with Kent, how he rewrote the architecture and did a complete redesign of his website. He gives a brief of all the technologies he used in the stack, why he used them and how it eventually helped him in achieving super-fast build times and load times.
by Kent C Dodds
Bracket pair colorization 10,000x faster
If you use VSCode chances are you are already using a bracket pair colorizing extension, that helps you identify matching pairs of brackets. These extensions usually work fine for small files but can be very slow for really large files. Check out how the VSCode team optimized this problem and made it 10000x faster.
by Henning Dieterichs
Tools
Transforms an input field or a textarea into a Tags component, in an easy, customizable way, with great performance and small code footprint, exploded with features.
by Yair Even Or
Easily add a VSCode like editor to your React existing React applications with no additional setup.
by Suren Atoyan
Tech Talks
Check out how AirBnB, went through the phase of TypeScript migration and adoption throughout their organization.
Quiz
What's the output?
const promise1 = Promise.resolve('First')
const promise2 = Promise.resolve('Second')
const promise3 = Promise.reject('Third')
const promise4 = Promise.resolve('Fourth')
const runPromises = async () => {
const res1 = await Promise.all([promise1, promise2])
const res2 = await Promise.all([promise3, promise4])
return [res1, res2]
}
runPromises()
.then(res => console.log(res))
.catch(err => console.log(err))
This week in GIF
When you resume working on my bugs on Monday morning (via thecodinglove.com)
Liked this issue? Share on Twitter or read previous issues.