Issue #10 - A deep dive into React.children, using string literals in TypeScript, a TailwindCSS component library, and find JavaScript methods from terminal
Learn to write scalable React code, dive into React.children iteration methods ensuring good performance, know about the evolution of graphics in JavaScript, using string literals for types, and a slick TalwindCSS UI component library.
Tip of the day
TypeScript has a type manipulation method called Template Literal Types, which lets you expand individual string types to a combination of string types via unions, with a familiar syntax of template literal strings in JavaScript. Find out more about them in the TypeScript docs for Template Literal Types.
type EmailLocaleIDs = "welcome_email" | "email_heading";
type FooterLocaleIDs = "footer_title" | "footer_sendoff";
type AllLocaleIDs = `${EmailLocaleIDs | FooterLocaleIDs}_id`;
// type AllLocaleIDs = "welcome_email_id"
// | "email_heading_id"
// | "footer_title_id"
// | "footer_sendoff_id"
Articles
How JavaScript Works: the evolution of graphics
This article takes you on a journey through the evolution of Graphics since the beginning of the web as we know it 30 years ago to the modern Browser native APIs like SVG, 2D canvas API, WebGL etc.
by Gigi Sayfan
React Children And Iteration Methods
Understand the use cases of iterating over React children and the ways to do it, and deep dive into one of the utility methods, React.Children.toArray, that React gives you, which helps to iterate over the children in a way that ensures performance and determinism.
by Arihant Verma
Tools
Instead of digging through the docs to find an array or object method, it will ask you what you need, give you a description and example, and optionally store it for later.
by Sarah Drasner
daisyUI easily lets you create TailwindCSS components, with some predefined customizable component classes, helping you write cleaner HTML code and saving you time with its predesigned components.
by Pouya Saadeghi
Tech Talks
Scalable React Development for Large Projects
Scaling React development across multiple teams can be incredibly difficult. Teams need to share core functionality while staying autonomous. Changes need to propagate through many projects while being tested. Nx is an open-source toolkit that allows organizations to scale development more easily than before! Nx makes setting up Cypress, Prettier, Storybook, Next.js, and Gatsby faster than ever. You can also develop full-stack by using Node frameworks like Apollo and Nest.js and share code between frontend and backend. In this talk you’ll learn how large organizations like Facebook, Microsoft, and Google are able to successfully scale across multiple teams, business units, and products.
Quiz
What will be the output of the snippet?
const john = {
pet: 'Ghost',
birthplace: {
name: 'Winterfell'
}
}
const arya = {
pet: 'Nymera',
birthplace: john.birthplace
}
john.birthplace.name = 'The wall'
john.birthplace = {
name: "King's landing"
}
console.log(arya.birthplace.name)
This week in GIF
Liked this issue? Share on Twitter or read previous issues.