"I love Developer way: improve your technical skills with in-depth explanations, practical advices and useful tips and tricks."

2022-05-07 07:10:04

html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box;-webkit-text-size-adjust:100%;}*,*::before,*::after{box-sizing:inherit;}strong,b{font-weight:700;}body{margin:0;color:rgba(0, 0, 0, 0.87);font-family:"Roboto","Helvetica","Arial",sans-serif;font-weight:400;font-size:1rem;line-height:1.5;letter-spacing:0.00938em;background-color:#fff;}@media print{body{background-color:#fff;}}body::backdrop{background-color:#fff;}.css-r4ldvb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100vh;background:#232739;}.css-1lqmyfw{height:100vh;overflow:auto;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-nifu4u{background:#232739;color:#F4F4F6;font-family:Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:6rem 3rem;font-size:1.25rem;line-height:2.25rem;}@media only screen and (max-width: 1024px){.css-nifu4u{padding:2rem 1rem;}}@media only screen and (max-width: 600px){.css-nifu4u{padding:2rem 0;}}.css-nifu4u a{color:#F4F4F6;-webkit-text-decoration:none;text-decoration:none;}.css-nifu4u a:hover{color:#CCD0E0;}.css-nifu4u h1{font-size:2.25rem;line-height:4rem;font-weight:400;color:#fff;margin-top:0;}.css-nifu4u h2{font-size:1.25rem;line-height:2rem;font-weight:400;color:#fff;padding:0;margin:0;}@media only screen and (max-width: 800px){.css-nifu4u{font-size:1.25rem;line-height:1.75rem;height:auto;}.css-nifu4u h1{font-size:2rem;line-height:2.5rem;}}.css-1qsxih2{width:100%;margin-left:auto;box-sizing:border-box;margin-right:auto;display:block;padding-left:16px;padding-right:16px;}@media (min-width:600px){.css-1qsxih2{padding-left:24px;padding-right:24px;}}@media (min-width:1200px){.css-1qsxih2{max-width:1200px;}}.css-fi6khn{box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;width:100%;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}@media (min-width:0px){.css-fi6khn{margin-top:-32px;}.css-fi6khn>.MuiGrid-item{padding-top:32px;}}@media (min-width:900px){.css-fi6khn{margin-top:-64px;}.css-fi6khn>.MuiGrid-item{padding-top:64px;}}@media (min-width:0px){.css-fi6khn{width:calc(100% + 32px);margin-left:-32px;}.css-fi6khn>.MuiGrid-item{padding-left:32px;}}@media (min-width:900px){.css-fi6khn{width:calc(100% + 64px);margin-left:-64px;}.css-fi6khn>.MuiGrid-item{padding-left:64px;}}.css-16ykuap{box-sizing:border-box;margin:0;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;max-width:100%;}@media (min-width:600px){.css-16ykuap{-webkit-flex-basis:58.333333%;-ms-flex-preferred-size:58.333333%;flex-basis:58.333333%;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;max-width:58.333333%;}}@media (min-width:900px){.css-16ykuap{-webkit-flex-basis:58.333333%;-ms-flex-preferred-size:58.333333%;flex-basis:58.333333%;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;max-width:58.333333%;}}@media (min-width:1200px){.css-16ykuap{-webkit-flex-basis:58.333333%;-ms-flex-preferred-size:58.333333%;flex-basis:58.333333%;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;max-width:58.333333%;}}@media (min-width:1536px){.css-16ykuap{-webkit-flex-basis:58.333333%;-ms-flex-preferred-size:58.333333%;flex-basis:58.333333%;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;max-width:58.333333%;}}Advanced writing for developers..css-16ld4sy{margin:0 0 1rem 0;}Improve your technical skills with in-depth explanations, practical advices and useful tips and tricks..css-r2qwdp{color:#979EBF;font-style:italic;margin:0 0 5rem 0;font-size:1.1rem;}Techstack: React, Typescript, node, monorepos, yarn, webpack, etc..css-1dm46or{line-height:1rem;}.css-wb7iwb{font-size:1rem;color:#979EBF;font-family:Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif;}Get the latest content by email. No spam, ever..css-889chh{text-align:right;}.css-12hwzlt{box-sizing:border-box;margin:0;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;max-width:100%;text-align:right;}@media (min-width:600px){.css-12hwzlt{-webkit-flex-basis:41.666667%;-ms-flex-preferred-size:41.666667%;flex-basis:41.666667%;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;max-width:41.666667%;}}@media (min-width:900px){.css-12hwzlt{-webkit-flex-basis:41.666667%;-ms-flex-preferred-size:41.666667%;flex-basis:41.666667%;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;max-width:41.666667%;}}@media (min-width:1200px){.css-12hwzlt{-webkit-flex-basis:41.666667%;-ms-flex-preferred-size:41.666667%;flex-basis:41.666667%;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;max-width:41.666667%;}}@media (min-width:1536px){.css-12hwzlt{-webkit-flex-basis:41.666667%;-ms-flex-preferred-size:41.666667%;flex-basis:41.666667%;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;max-width:41.666667%;}}.css-1swwqt8{width:6rem;border-radius:50%;}G'day, I'm Nadia.css-1bj7tbz{font-size:1.5rem;line-height:1.5rem;margin-bottom:1.5rem;}Frontend Architect, coder.css-1kn3lk3{font-size:0.9rem;line-height:1.5rem;font-weight:400;margin:0 0 1.5rem 0;color:#CCD0E0;}Worked on architecture of Jira Frontend monorepo (300 devs, 2mil lines of code), Atlassian Design systems.Currently Founding Engineer in Pyn.css-42os3i{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;padding:0;margin:0;}.css-1i6olsw{margin:0 3px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-8p5o4p{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:1.5rem 0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}.css-xp319y{width:100%;margin-left:auto;box-sizing:border-box;margin-right:auto;display:block;padding-left:16px;padding-right:16px;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:1.5rem 0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}@media (min-width:600px){.css-xp319y{padding-left:24px;padding-right:24px;}}@media (min-width:1536px){.css-xp319y{max-width:1536px;}}.css-jcl15c{width:33%;}@media only screen and (max-width: 1024px){.css-jcl15c{width:50%;}}@media only screen and (max-width: 600px){.css-jcl15c{width:100%;}}.css-x81lv{width:100%;margin-left:auto;box-sizing:border-box;margin-right:auto;display:block;padding-left:16px;padding-right:16px;width:33%;}@media (min-width:600px){.css-x81lv{padding-left:24px;padding-right:24px;}}@media (min-width:1200px){.css-x81lv{max-width:1200px;}}@media only screen and (max-width: 1024px){.css-x81lv{width:50%;}}@media only screen and (max-width: 600px){.css-x81lv{width:100%;}}.css-92jqcb{-webkit-transition:-webkit-transform 250ms ease,box-shadow 250ms ease,color 250ms ease;transition:transform 250ms ease,box-shadow 250ms ease,color 250ms ease;box-shadow:1px 1px 5px 0 rgb(1 1 1 / 5%);overflow:hidden;border-radius:0.5rem;background:#F4F4F6;margin:1rem 0;font-family:Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif;}.css-92jqcb:hover{-webkit-transform:translateY(-0.1rem);-moz-transform:translateY(-0.1rem);-ms-transform:translateY(-0.1rem);transform:translateY(-0.1rem);}.css-mt6lmi{overflow:hidden;position:relative;height:15rem;display:block;}@media only screen and (max-width: 1024px){.css-mt6lmi{height:10rem;}}@media only screen and (max-width: 600px){.css-mt6lmi{height:15rem;}}.css-mt6lmi>img{width:100%;height:100%;position:absolute;object-fit:cover;}.css-bwm6wk{padding:1rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-e2q3x2{padding:0;margin:0.5rem 0 1rem 0;font-size:1.25rem;line-height:1.75rem;color:#08090D;font-weight:bold;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-e2q3x2>a{color:#08090D;-webkit-text-decoration:none;text-decoration:none;}React components composition: how to get it right.css-1508ynw{padding:0;margin:0 0 1rem 0;font-size:1rem;line-height:1.5rem;color:#424A6B;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}.css-1508ynw>a{color:#424A6B;-webkit-text-decoration:none;text-decoration:none;}What is components composition? How do you know when to start splitting a big component into smaller pieces and how to compose them properly? What makes a good component?.css-1maj6wo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-family:Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif;}.css-1myyumg{width:2rem;height:2rem;overflow:hidden;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin:0 0.5rem 0 0;border-radius:2rem;}.css-1myyumg>img{width:100%;height:100%;float:left;}.css-8pv54l{font-size:0.75rem;line-height:1rem;text-transform:uppercase;color:#424A6B;margin:0;padding:0;}Nadia Makarevich.css-14daez1{font-size:0.75rem;line-height:1rem;color:#979EBF;margin:0;padding:0;}Apr 12, 2022Implementing advanced usePrevious hook with React useRefLooking into how refs work when not attached to DOM and how to use them to implement advanced usePrevious hook to get the previous state or props value.Nadia MakarevichMar 21, 2022Higher-Order Components in React Hooks eraWhat is a React higher-order component? How it can be used and why? And do we still need them in modern apps in React hooks era?Nadia MakarevichFeb 27, 2022React component as prop: the right way™️Exploring how to pass React components as props, why we would want to do it, and what is the best pattern for the jobNadia MakarevichFeb 15, 2022How to write performant React apps with ContextDe-mystifying Context and its influence on React apps' performance. Learning a few useful patterns in the process, that could help minimize the re-renders impact and improve code's readability and scalability.Nadia MakarevichFeb 7, 2022Why custom react hooks could destroy your app performanceExploring performance implications of custom React hooks and how not to shoot yourself in the foot when writing or using them.Nadia MakarevichJan 24, 2022How to write performant React code: rules, patterns, do's and don'tsLooking into patterns that lead to poor performance of React apps, why they are bad, and how to recognise and avoid them.Nadia MakarevichJan 9, 2022Advanced typescript for React developers - discriminated unionsExploring how to discriminate unions properly and how this pattern can be useful for React developers' everyday professional life.Nadia MakarevichDec 30, 2021Advanced typescript for React developers - part 3Learning while coding what is the purpose of exhaustiveness checking, how the narrowing of types works and when typescript enums could be useful.Nadia MakarevichDec 20, 2021Advanced typescript for React developersDiving into advanced typescript concepts and understanding how and why we need things like type guards, keyof, typeof, is, as const and indexed types.Nadia MakarevichDec 8, 2021Typescript generics for React developersLooking into why we need generics in Typescript, and how to use them to develop re-usable React components. And as a bonus: the secret of React hooks ?Nadia MakarevichNov 25, 2021? Prison break, or solving life like a developer️How would you deal with something like relocating to another country and becoming digital nomad? A story on how I took approach that I would use as a developer with large projects at work.Nadia MakarevichNov 15, 2021Custom eslint rules + typescript monorepo = ❤️A simple trick that allows you to write in typescript and consume right away custom eslint rules. No compilation, build or publish/link step, just write code and use it!Nadia MakarevichApr 18, 2021Three simple tricks to speed up yarn installThose tricks can speed up your yarn install by up to 50%Nadia MakarevichApr 5, 2021Learning by fixing: Node.js, modules and packagesLearn how Node resolves modules and deals with packages by pretending to be a detective and debugging a mysterious build failureNadia MakarevichFeb 8, 2021webpack and yarn magic against duplicates in bundlesThis page describes the theory and some technical details behind the webpack-deduplication-plugin plugin, which helped us reduce javascript size in Jira by ~10%.Nadia MakarevichJun 11, 2020.css-e5cvo4{height:3.5rem;background:#232739;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 3rem;color:rgba(255, 255, 255, 0.7);font-size:0.9rem;font-family:Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif;}.css-e5cvo4 a{color:rgba(255, 255, 255, 0.7);-webkit-text-decoration:none;text-decoration:none;}.css-e5cvo4 a:hover{color:#fff;}@media only screen and (max-width: 600px){.css-e5cvo4{padding:0 32px;}}.css-4cxur2{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}© Developer Way 2021.css-1pricwv{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;text-align:right;}Contact | Twitter | Linkedin