June 2022 Newsletter

[TODO Add some description]

Joke of the month:

What do you call a company that makes okay products? A satisfactory! šŸ„

I was doing pentest in the data center the other day.

Contents šŸ“‹


News & Explore

Ecmascript 2022

New standards have landed for Ecmascript, top-level await, ā€œ.at()ā€ usage, and moreā€¦

Ecmascript 2022 (opens in a new tab)

Beta React Docs

React team has been working on new documentation for React. Itā€™s looking pretty good and has better explanations.

Docs (opens in a new tab)

Github Co-Pilot

Co-Pilot beta is ending on the 22nd of August and will be paid feature. Till then, you can use it for free and test it.

CoPilot (opens in a new tab)

Cancel async tasks

AbortController provides a way to abort requests at any given point. Letā€™s check how that works.

AbortController (opens in a new tab)

Last Minute Release Next.js

Vercel team has dropped new update on Next.js just before end of the month. It includes some experimental features and some features that are now stable.

Next.js 12.2 (opens in a new tab)

Maintaining React Component Library

While making an internal react component library, the most challenging thing is maintaining it. Here are some pieces of advice about it.

Maintaining React Component Library (opens in a new tab)

Component Encyclopedia

The Storybook team has cataloged the top UI components and put them in a list. Thereā€™re 5,132 components from big companies. (Airbnb, Microsoft, Zendeskā€¦ and many more)

Component Encyclopedia (opens in a new tab)


Challenge

We are using features of ecmascript and the different libraries but do you know what this code does?

const friends = ["Neo", "Trinity", "John", "Peralta", "Jake", "Morpheus"];
 
const { length, 0: first, [length - 1]: last } = friends;

Explanation Using destructure is not only for objects. You can actually use for arrays too. So the case we have is actually working code that returns.

{
  length: 6,
  0: "Neo",
  5: "Morpheus"
}

So next time when you need to access spesific location of an array you can use this.