https://javascriptbit.com/component---src-templates-blog-post-js-c…d-engineer-index-md-904000ec153ceaec04e8.js

1"use strict";(self.webpackChunkjavascript_bit=self.webpackChunkjavascript_bit||[]).push([[4870],{259:function(e,t,n){n.d(t,{Zo:function(){return u},ah:function(){return c}});var a=n(9142);function r(e,t,n){return(t=(0,a.Z)(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var o=n(7294);function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var l=o.createContext({});function c(e){var t=o.useContext(l);return o.useMemo((function(){return"function"==typeof e?e(t):s(s({},t),e)}),[t,e])}var m={};function u(e){var t,n=e.components,a=e.children;return t=e.disableParentContext?"function"==typeof n?n({}):n||m:c(n),o.createElement(l.Provider,{value:t},a)}},5929:function(e,t,n){n.r(t),n.d(t,{Head:function(){return d},default:function(){return h}});var a=n(259),r=n(7294);function o(e){var t=Object.assign({p:"p",span:"span",h3:"h3",h4:"h4",a:"a",em:"em"},(0,a.ah)(),e.components);return r.createElement(r.Fragment,null,r.createElement(t.p,null,r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 630px; "\n    >\n      <a\n    class="gatsby-resp-image-link"\n    href="/static/320eb1d4bd1eeb9c54eb6a371a98763a/857b3/richy-great-MAYEkmn7G6E-unsplash.jpg"\n    style="display: block"\n    target="_blank"\n    rel="noopener"\n  >\n    <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 66.45569620253164%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABAAD/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAL/2gAMAwEAAhADEAAAAUKJsbxaK//EABsQAAICAwEAAAAAAAAAAAAAAAEDAAIQEyIj/9oACAEBAAEFAlW5DLTbEHxJx//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABoQAAEFAQAAAAAAAAAAAAAAAAACEBExQtH/2gAIAQEABj8C1J0oS/8A/8QAHBAAAgEFAQAAAAAAAAAAAAAAAAERECFRYXHh/9oACAEBAAE/IbRxuTEMvgcvY2gSf//aAAwDAQACAAMAAAAQZ9//xAAXEQADAQAAAAAAAAAAAAAAAAAAAREh/9oACAEDAQE/EE9If//EABYRAQEBAAAAAAAAAAAAAAAAAAEAIf/aAAgBAgEBPxBMm//EAB4QAQACAgEFAAAAAAAAAAAAAAEAESExUWFxkaGx/9oACAEBAAE/EMERLbqc+JtQuMvqbCr6QTsP1istP//Z\'); background-size: cover; display: block;"\n  ></span>\n  <img\n        class="gatsby-resp-image-image"\n        alt="A sunset landscape"\n        title="A sunset landscape"\n        src="/static/320eb1d4bd1eeb9c54eb6a371a98763a/828fb/richy-great-MAYEkmn7G6E-unsplash.jpg"\n        srcset="/static/320eb1d4bd1eeb9c54eb6a371a98763a/ff44c/richy-great-MAYEkmn7G6E-unsplash.jpg 158w,\n/static/320eb1d4bd1eeb9c54eb6a371a98763a/a6688/richy-great-MAYEkmn7G6E-unsplash.jpg 315w,\n/static/320eb1d4bd1eeb9c54eb6a371a98763a/828fb/richy-great-MAYEkmn7G6E-unsplash.jpg 630w,\n/static/320eb1d4bd1eeb9c54eb6a371a98763a/0ede0/richy-great-MAYEkmn7G6E-unsplash.jpg 945w,\n/static/320eb1d4bd1eeb9c54eb6a371a98763a/3ac88/richy-great-MAYEkmn7G6E-unsplash.jpg 1260w,\n/static/320eb1d4bd1eeb9c54eb6a371a98763a/857b3/richy-great-MAYEkmn7G6E-unsplash.jpg 6000w"\n        sizes="(max-width: 630px) 100vw, 630px"\n        style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n        loading="lazy"\n        decoding="async"\n      />\n  </a>\n    </span>'}}),"\n",r.createElement("span",null,"Photo by ",r.createElement("a",{href:"https://unsplash.com/@richygreat?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"},"Richy Great")," on ",r.createElement("a",{href:"https://unsplash.com/s/photos/browser?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"},"Unsplash"))),"\n",r.createElement(t.p,null,"There are a lot of resources out there on how to start frontend development. However, there are some gems that I found during the course of my career that helped me become a Senior Frontend Engineer and then a Principal Engineer. Most of these are free resources. I have been using these resources to learn and improve my skills for a long time and some of them have been around for much longer than my career, so we know they're tried and tested."),"\n",r.createElement(t.h3,null,"Learn about PWAs & Offline Web Applications"),"\n",r.createElement(t.h4,null,r.createElement(t.a,{href:"https://classroom.udacity.com/courses/ud811"},"Intro to Progressive Web Apps")),"\n",r.createElement(t.p,null,r.createElement(t.a,{href:"https://classroom.udacity.com/courses/ud811"},"Course Link"),"\nPWAs have become integral to the Web now. This course teaches you all about the Cache API, manifest and some caching techniques that will surely be useful to you as a Senior Engineer. Udacity offers this course completely free and even thought it might seem a bit dated, it's still highly useful."),"\n",r.createElement(t.h4,null,r.createElement(t.a,{href:"https://classroom.udacity.com/courses/ud899"},"Offline Web Applications")),"\n",r.createElement(t.p,null,r.createElement(t.a,{href:"https://classroom.udacity.com/courses/ud899"},"Offline Web Applications")),"\n",r.createElement(t.p,null,"In addition to the PWA course, this one compliments your knowledge of Service Workers, IndexedDB and Caching. There are some overlaps with the PWA course but rest assured, you will really know PWAs after this."),"\n",r.createElement(t.h3,null,"Learn about Web Performance"),"\n",r.createElement(t.p,null,r.createElement(t.a,{href:"https://classroom.udacity.com/courses/ud884"},"Website Performance Optimization")),"\n",r.createElement(t.p,null,"Performance matters, right? This course teaches you about browser fundamentals like the Critical Rendering Path and how to find slow code and fix it to build a smooth 60fps app. This is a huge skill to have especially if you're working on Enterprise applications!"),"\n",r.createElement(t.h3,null,"Learn about Web Acce

1ssibility (a11y)"),"\n",r.createElement(t.p,null,r.createElement(t.a,{href:"https://classroom.udacity.com/courses/ud893"},"Web Accessibility")),"\n",r.createElement(t.p,null,"Learn how to build apps with accessibility (a11y) in mind. The best practices should become an unconscious habit for folks who want to make world-class products. Trust me, your users will appreciate it and it will make your application more inclusive."),"\n",r.createElement(t.h3,null,"Learn JavaScript Design Patterns"),"\n",r.createElement(t.h4,null,r.createElement(t.a,{href:"patterns.dev"},"Modern Web App Design Patterns")," by ",r.createElement(t.a,{href:"https://twitter.com/addyosmani"},"Addy Osmani")," and ",r.createElement(t.a,{href:"https://twitter.com/lydiahallie"},"Lydia Hallie")),"\n",r.createElement(t.p,null,r.createElement(t.a,{href:"patterns.dev"},"Modern Web App Design Patterns")),"\n",r.createElement(t.p,null,"This one is by far the most useful resource for someone who wants to become a Senior Engineer and beyond in the modern context. It covers all the newer design patterns brought in due to the age of React and other popular frameworks."),"\n",r.createElement(t.h4,null,r.createElement(t.a,{href:"https://addyosmani.com/resources/essentialjsdesignpatterns/book/"},"JavaScript Design Patterns")," by ",r.createElement(t.a,{href:"https://twitter.com/addyosmani"},"Addy Osmani")),"\n",r.createElement(t.p,null,r.createElement(t.a,{href:"https://addyosmani.com/resources/essentialjsdesignpatterns/book/"},"JavaScript Design Patterns")),"\n",r.createElement(t.p,null,"This is yet another evergreen resource from ",r.createElement(t.a,{href:"https://addyosmani.com/"},"Addy Osmani"),". I've been reading and referring to this book since 2014 and it has helped me not just with my job, but also with cracking interviews. If you ever needed to know the difference between the Pub-Sub pattern and the Observer pattern, this is the book for you."),"\n",r.createElement(t.h3,null,"Learn the Core JavaScript Concepts"),"\n",r.createElement(t.p,null,"If you haven't read ",r.createElement(t.em,null,"Secrets of the JavaScript Ninja")," by ",r.createElement(t.a,{href:"https://johnresig.com"},"John Resig")," , you should definitely go for it. You could also go through the ",r.createElement(t.a,{href:"https://johnresig.com/apps/learn/"},"practice-based learning app")," based on the same book by the author."),"\n",r.createElement(t.h3,null,"CSS Concepts"),"\n",r.createElement(t.p,null,"For CSS, I would always refer to CSS Secrets by ",r.createElement(t.a,{href:"https://twitter.com/LeaVerou"},"Lea Verou"),". The first time I found about the book was in 2015 and it holds the same value as it did back then."),"\n",r.createElement(t.p,null,"I've been going through most of these resources since 2015, so please don't get disheartened about the amount of content. Learning & improvement are always a continuous process and it's all right to go at your own pace, or just slow down at times."))}var i=function(e){void 0===e&&(e={});var t=Object.assign({},(0,a.ah)(),e.components).wrapper;return t?r.createElement(t,e,r.createElement(o,e)):o(e)},s=n(3688),l=n(2198),c=n(9357),m=n(4992),u=n(6376),A=function(e){var t,n=e.data,a=n.previous,o=n.next,i=n.site,c=n.mdx,A=e.location,d=e.pageContext,h=e.children,p=(null===(t=i.siteMetadata)||void 0===t?void 0:t.title)||"Title",g=(d||{}).seriesPosts,E=c.fields;return r.createElement(l.Z,{location:A,title:p},r.createElement("article",{className:"blog-post",itemScope:!0,itemType:"http://schema.org/Article"},r.createElement("header",null,r.createElement("h1",{itemProp:"headline"},c.frontmatter.title),r.createElement("p",null,c.frontmatter.category&&r.createElement("span",{className:"category-pill"},c.frontmatter.category),c.frontmatter.date,(null==E?void 0:E.wordCount)>0&&r.createElement("span",{style:{marginLeft:"0.75rem",color:"inherit",opacity:.6}},"· ",Math.max(1,Math.round(E.wordCount/200))," min read"))),c.frontmatter.series&&g&&g.length>0&&r.createElement(u.Z,{seriesSlug:c.frontmatter.series,currentSlug:c.fields.slug,seriesPosts:g}),r.createElement("section",{itemProp:"articleBody"},h),r.createElement(m.Z),r.createElement("hr"),r.createElement("footer")),r.createElement("nav",{className:"blog-post-nav"},r.createElement("ul",{style:{display:"flex",flexWrap:"wrap",justifyContent:"space-between",listStyle:"none",padding:0}},r.createElement("li",null,a&&r.createElement(s.Link,{to:a.fields.slug,rel:"prev"},"← ",a.frontmatter.title)),r.createElement("li",null,o&&r.createElement(s.Link,{to:o.fields.slug,rel:"next"},o.frontmatter.title," →")))))},d=function(e){var t=e.data.mdx;

1return r.createElement(c.Z,{title:t.frontmatter.title,description:t.frontmatter.description||t.excerpt})};function h(e){return r.createElement(A,e,r.createElement(i,e))}},6376:function(e,t,n){var a=n(2982),r=n(7294),o=n(3688),i={"browser-concurrency":{title:"Browser Concurrency",description:"A practical guide to sharing data and coordinating work across browser threads — tabs, workers, and shared memory."},"frontend-system-design":{title:"Frontend System Design Interview Prep",description:"A complete guide to acing frontend system design interviews — from the RADIO framework to real-world component designs asked at FAANG."}};t.Z=function(e){var t=e.seriesSlug,n=e.currentSlug,s=e.seriesPosts;if(!t||!s||0===s.length)return null;var l=i[t]||{title:t,description:""},c=(0,a.Z)(s).sort((function(e,t){return e.seriesOrder-t.seriesOrder})),m=c.findIndex((function(e){return e.slug===n})),u=m>=0?"Part "+(m+1)+" of "+c.length:c.length+" articles";return r.createElement("nav",{"aria-label":l.title+" series navigation",style:{borderLeft:"4px solid #4f46e5",background:"#f0f4ff",borderRadius:"0 6px 6px 0",padding:"1rem 1.25rem",marginBottom:"2rem",fontFamily:"var(--fontFamily-sans, system-ui, sans-serif)"}},r.createElement("p",{style:{margin:"0 0 0.75rem 0",fontSize:"0.95rem",fontWeight:700,color:"#1e1b4b",letterSpacing:"-0.01em"}},"📚 ",l.title," — ",u),r.createElement("ol",{style:{listStyle:"none",padding:0,margin:"0 0 0.75rem 0"}},c.map((function(e,t){var a=e.slug===n,i=t<m,s={marginBottom:"0.35rem",fontSize:"0.9rem",display:"flex",alignItems:"baseline",gap:"0.4rem"},l=a?"→":i?"✓":"  ",c={flexShrink:0,width:"1.2em",color:a?"#4f46e5":i?"#6b7280":"#9ca3af",fontWeight:a?700:400};return a?r.createElement("li",{key:e.slug,style:s,"aria-current":"page"},r.createElement("span",{style:c},l),r.createElement("strong",{style:{color:"#1e1b4b"}},t+1,". ",e.title)):r.createElement("li",{key:e.slug,style:s},r.createElement("span",{style:c},l),r.createElement(o.Link,{to:e.slug,style:{color:i?"#6b7280":"#4f46e5",textDecoration:"none"}},t+1,". ",e.title))}))),r.createElement(o.Link,{to:"/series/"+t+"/",style:{fontSize:"0.85rem",color:"#4f46e5",textDecoration:"none",fontWeight:600}},"View all articles in this series →"))}},4992:function(e,t,n){var a=n(7294);t.Z=function(){var e=(0,a.useState)(!1),t=e[0],n=e[1];(0,a.useEffect)((function(){sessionStorage.getItem("hideKofi")&&n(!0)}),[]);return t?null:a.createElement(a.Fragment,null,a.createElement("a",{target:"_blank",rel:"noreferrer",href:"https://ko-fi.com/javascriptbit"},"Donate"),a.createElement("button",{style:{marginLeft:"1em"},onClick:function(e){e.preventDefault(),n(!0),sessionStorage.setItem("hideKofi","true")}},"Hide for now"))}},2198:function(e,t,n){n.d(t,{Z:function(){return l}});var a=n(7294),r=n(3688),o=n(259);var i=function(){var e=a.useState(null),t=e[0],n=e[1];a.useEffect((function(){var e=document.documentElement.getAttribute("data-theme")||"light";n(e)}),[]);return null===t?a.createElement("span",{style:{width:32,display:"inline-block"}}):a.createElement("button",{onClick:function(){var e="dark"===t?"light":"dark";n(e),document.documentElement.setAttribute("data-theme",e);try{localStorage.setItem("jsbit-theme",e)}catch(a){}},"aria-label":"dark"===t?"Switch to light mode":"Switch to dark mode",title:"dark"===t?"Light mode":"Dark mode",style:{background:"none",border:"none",cursor:"pointer",fontSize:"1.2rem",padding:"4px 8px",borderRadius:"6px",lineHeight:1,color:"inherit",opacity:.75,transition:"opacity 0.15s ease"},onMouseEnter:function(e){return e.currentTarget.style.opacity="1"},onMouseLeave:function(e){return e.currentTarget.style.opacity="0.75"}},"dark"===t?"☀️":"🌙")},s={FullscreenContainer:function(e){var t=e.child,n=(0,a.useState)(!1),r=n[0],o=n[1],i=(0,a.useCallback)((function(e){"Enter"===e.key?o(!r):"Escape"===e.key&&o(!1)}),[r]);return a.createElement("div",{className:"fullscreen "+(r?"active":"")},a.createElement("div",{className:"buttons-container"},a.createElement("span",{tabIndex:-1,role:"button",onClick:function(){return o(!r)},onKeyUp:i},a.createElement("img",{src:"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxNHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNCAxNCIgd2lkdGg9IjE0cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iIzAw

1MDAwMCIgaWQ9IkNvcmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMTUuMDAwMDAwLCAtMjU3LjAwMDAwMCkiPjxnIGlkPSJmdWxsc2NyZWVuIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTUuMDAwMDAwLCAyNTcuMDAwMDAwKSI+PHBhdGggZD0iTTIsOSBMMCw5IEwwLDE0IEw1LDE0IEw1LDEyIEwyLDEyIEwyLDkgTDIsOSBaIE0wLDUgTDIsNSBMMiwyIEw1LDIgTDUsMCBMMCwwIEwwLDUgTDAsNSBaIE0xMiwxMiBMOSwxMiBMOSwxNCBMMTQsMTQgTDE0LDkgTDEyLDkgTDEyLDEyIEwxMiwxMiBaIE05LDAgTDksMiBMMTIsMiBMMTIsNSBMMTQsNSBMMTQsMCBMOSwwIEw5LDAgWiIgaWQ9IlNoYXBlIi8+PC9nPjwvZz48L2c+PC9zdmc+",alt:"Toggle Full Screen",color:"currentColor"}))),t)}},l=function(e){var t,n=e.location,l=e.title,c=e.children,m="/"===n.pathname,u=a.useState(2024),A=u[0],d=u[1];return a.useEffect((function(){d((new Date).getFullYear())}),[]),t=m?a.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"}},a.createElement("h1",{className:"main-heading"},a.createElement(r.Link,{to:"/"},l)),a.createElement(i,null)):a.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"}},a.createElement(r.Link,{className:"header-link-home",to:"/"},l),a.createElement(i,null)),a.createElement(o.Zo,{components:s},a.createElement("div",{className:"global-wrapper","data-is-root-path":m},a.createElement("header",{className:"global-header"},t),a.createElement("main",null,c),a.createElement("footer",null,"© ",A,", Built with"," ",a.createElement("a",{href:"https://www.gatsbyjs.com"},"Gatsby"))))}},9357:function(e,t,n){var a=n(7294),r=n(3688);t.Z=function(e){var t,n,o,i=e.description,s=e.title,l=e.children,c=(0,r.useStaticQuery)("2841359383").site,m=i||c.siteMetadata.description,u=null===(t=c.siteMetadata)||void 0===t?void 0:t.title;return a.createElement(a.Fragment,null,a.createElement("title",null,u?s+" | "+u:s),a.createElement("meta",{name:"description",content:m}),a.createElement("meta",{property:"og:title",content:s}),a.createElement("meta",{property:"og:description",content:m}),a.createElement("meta",{property:"og:type",content:"website"}),a.createElement("meta",{name:"twitter:card",content:"summary"}),a.createElement("meta",{name:"twitter:creator",content:(null===(n=c.siteMetadata)||void 0===n||null===(o=n.social)||void 0===o?void 0:o.twitter)||""}),a.createElement("meta",{name:"twitter:title",content:s}),a.createElement("meta",{name:"twitter:description",content:m}),l)}}}]);
2//# sourceMappingURL=component---src-templates-blog-post-js-content-file-path-opt-build-repo-content-blog-how-to-become-senior-frontend-engineer-index-md-904000ec153ceaec04e8.js.map