3:I[9275,[],""]
4:I[1343,[],""]
5:I[9029,["106","static/chunks/106-acc3efb4159324f9.js","173","static/chunks/173-750157ccf15d452b.js","185","static/chunks/app/layout-57e032e11744d0a0.js"],"RootLayout"]
6:I[5112,["106","static/chunks/106-acc3efb4159324f9.js","173","static/chunks/173-750157ccf15d452b.js","836","static/chunks/836-61217279b7d646b1.js","575","static/chunks/575-9210af6369086fb5.js","677","static/chunks/app/blog/a-short-guide-to-component-naming/page-c98521284620662a.js"],"FadeIn"]
7:I[231,["106","static/chunks/106-acc3efb4159324f9.js","173","static/chunks/173-750157ccf15d452b.js","836","static/chunks/836-61217279b7d646b1.js","575","static/chunks/575-9210af6369086fb5.js","677","static/chunks/app/blog/a-short-guide-to-component-naming/page-c98521284620662a.js"],""]
0:["aS2Tj1IE4tp7VtP-4GZKS",[[["",{"children":["blog",{"children":["a-short-guide-to-component-naming",{"children":["__PAGE__",{}]}]}]},"$undefined","$undefined",true],["",{"children":["blog",{"children":["a-short-guide-to-component-naming",{"children":["__PAGE__",{},[["$L1","$L2"],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children","a-short-guide-to-component-naming","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]},[["$","html",null,{"lang":"en","className":"h-full bg-neutral-950 text-base antialiased","children":["$","body",null,{"className":"flex min-h-full flex-col","children":["$","$L5",null,{"children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"mx-auto max-w-7xl px-6 lg:px-8 flex h-full items-center pt-24 sm:pt-32 lg:pt-40","children":["$","div",null,{"className":"mx-auto max-w-2xl lg:max-w-none","children":["$","$L6",null,{"className":"flex max-w-xl flex-col items-center text-center","children":[["$","p",null,{"className":"font-display text-4xl font-semibold text-neutral-950 sm:text-5xl","children":"404"}],["$","h1",null,{"className":"mt-4 font-display text-2xl font-semibold text-neutral-950","children":"Page not found"}],["$","p",null,{"className":"mt-2 text-sm text-neutral-600","children":"Sorry, we couldn’t find the page you’re looking for."}],["$","$L7",null,{"href":"/","className":"mt-4 text-sm font-semibold text-neutral-950 transition hover:text-neutral-700","children":"Go to the home page"}]]}]}]}],"notFoundStyles":[],"styles":null}]}]}]}],null],null],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/9ce14b073fbdbc47.css","precedence":"next","crossOrigin":"$undefined"}]],"$L8"]]]]
8:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"A Short Guide to Component Naming - DevLexus"}],["$","meta","3",{"name":"description","content":"As a developer,  the most important aspect of your job is naming components. It’s not just about being descriptive and clear, but also about having fun and being creative."}],["$","link","4",{"rel":"icon","href":"/favicon.ico","type":"image/x-icon","sizes":"196x196"}]]
1:null
9:I[8355,["106","static/chunks/106-acc3efb4159324f9.js","173","static/chunks/173-750157ccf15d452b.js","836","static/chunks/836-61217279b7d646b1.js","575","static/chunks/575-9210af6369086fb5.js","677","static/chunks/app/blog/a-short-guide-to-component-naming/page-c98521284620662a.js"],"GrayscaleTransitionImage"]
a:I[9342,["106","static/chunks/106-acc3efb4159324f9.js","173","static/chunks/173-750157ccf15d452b.js","836","static/chunks/836-61217279b7d646b1.js","575","static/chunks/575-9210af6369086fb5.js","677","static/chunks/app/blog/a-short-guide-to-component-naming/page-c98521284620662a.js"],"GridPattern"]
b:I[5112,["106","static/chunks/106-acc3efb4159324f9.js","173","static/chunks/173-750157ccf15d452b.js","836","static/chunks/836-61217279b7d646b1.js","575","static/chunks/575-9210af6369086fb5.js","677","static/chunks/app/blog/a-short-guide-to-component-naming/page-c98521284620662a.js"],"FadeInStagger"]
2:[["$","article",null,{"className":"mx-auto max-w-7xl px-6 lg:px-8 mt-24 sm:mt-32 lg:mt-40","children":["$","div",null,{"className":"mx-auto max-w-2xl lg:max-w-none","children":[["$","$L6",null,{"children":["$","header",null,{"className":"mx-auto flex max-w-5xl flex-col text-center","children":[["$","h1",null,{"className":"mt-6 font-display text-5xl font-medium tracking-tight text-neutral-950 [text-wrap:balance] sm:text-6xl","children":"A Short Guide to Component Naming"}],["$","time",null,{"dateTime":"2022-12-01","className":"order-first text-sm text-neutral-950","children":"December 1, 2022"}],["$","p",null,{"className":"mt-6 text-sm font-semibold text-neutral-950","children":["by ","Angela Fisher",", ","Front-end Developer"]}]]}]}],["$","$L6",null,{"children":["$","div",null,{"className":"[&>*]:mx-auto [&>*]:max-w-3xl [&>:first-child]:!mt-0 [&>:last-child]:!mb-0 mt-24 sm:mt-32 lg:mt-40","children":["$","div",null,{"className":"typography","children":["\n","\n","\n",["$","h2",null,{"children":"1. Brevity is Key"}],"\n",["$","p",null,{"children":"Time is scarce, don’t waste it typing out long, descriptive component names. One approach is to give them short, cryptic names that only you will understand."}],"\n",["$","p",null,{"children":"Need a button? Call it \"btn\". A modal? How about \"md\"? You’ll save precious minutes per day and you’ll get the added benefit of being the only person in the codebase who knows where anything is. This is called job security."}],"\n",["$","div",null,{"className":"group isolate my-10 overflow-hidden rounded-4xl bg-neutral-100 max-sm:-mx-6","children":["$","$L9",null,{"src":{"src":"/_next/static/media/typewriter.bb047a62.jpg","height":3520,"width":2400,"blurDataURL":"data:image/jpeg;base64,/9j/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wgARCAAIAAUDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGgB//EABYQAQEBAAAAAAAAAAAAAAAAAAIBEv/aAAgBAQABBQKN7//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQMBAT8Bf//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIBAT8Bf//EABkQAAIDAQAAAAAAAAAAAAAAAAECABJCYf/aAAgBAQAGPwJrBQuez//EABYQAQEBAAAAAAAAAAAAAAAAAAEhAP/aAAgBAQABPyFhiGho3//aAAwDAQACAAMAAAAQC//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQMBAT8Qf//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIBAT8Qf//EABgQAQADAQAAAAAAAAAAAAAAAAEAEUEh/9oACAEBAAE/ED1mL3otTMn/2Q==","blurWidth":5,"blurHeight":8},"alt":"","sizes":"(min-width: 768px) 42rem, 100vw","className":"aspect-[16/10] w-full object-cover"}]}],"\n",["$","h2",null,{"children":"2. Rank High in Search"}],"\n",["$","p",null,{"children":"When working in large repos with lots of collaborators, it’s important that your component ranks high when people search for anything."}],"\n",["$","p",null,{"children":"One way to stand out is to include all the possible search terms in your component name. Instead of “SignInButton” you might want call it “SignInButtonAuthenticationCookieUserLogIn” which will ensure that it is returned in almost any related search result."}],"\n",["$","div",null,{"className":"group isolate my-10 overflow-hidden rounded-4xl bg-neutral-100 max-sm:-mx-6","children":["$","$L9",null,{"src":{"src":"/_next/static/media/magnifying-glass.5cedfad8.jpg","height":1600,"width":2400,"blurDataURL":"data:image/jpeg;base64,/9j/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wgARCAAFAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAX/xAAVAQEBAAAAAAAAAAAAAAAAAAAEBf/aAAwDAQACEAMQAAABohc//8QAFhABAQEAAAAAAAAAAAAAAAAAAQIS/9oACAEBAAEFAitP/8QAFREBAQAAAAAAAAAAAAAAAAAAAEH/2gAIAQMBAT8Br//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIBAT8Bf//EABYQAAMAAAAAAAAAAAAAAAAAAAARYf/aAAgBAQAGPwJ0/8QAGBAAAgMAAAAAAAAAAAAAAAAAAREAMaH/2gAIAQEAAT8hryRDZ//aAAwDAQACAAMAAAAQ+//EABURAQEAAAAAAAAAAAAAAAAAAABB/9oACAEDAQE/EKf/xAAWEQADAAAAAAAAAAAAAAAAAAAAAUH/2gAIAQIBAT8QiP/EABgQAQEAAwAAAAAAAAAAAAAAABEBAEGh/9oACAEBAAE/ELU0XVKjzP/Z","blurWidth":8,"blurHeight":5},"alt":"","sizes":"(min-width: 768px) 42rem, 100vw","className":"aspect-[16/10] w-full object-cover"}]}],"\n",["$","h2",null,{"children":"3. Mix Languages"}],"\n",["$","p",null,{"children":"If you work remotely, it’s likely you are on a global team and yet all your components have English names. This slows down your non-english colleagues considerably so you should allow them to use their native tongue when naming components."}],"\n",["$","p",null,{"children":"You can create an index file that maps all the different languages within your repo. Need a dropdown? Look for “Desplegable”. A form? Search “Форма”. You’ll learn multiple new languages while being more inclusive to your colleagues."}],"\n",["$","div",null,{"className":"group isolate my-10 overflow-hidden rounded-4xl bg-neutral-100 max-sm:-mx-6","children":["$","$L9",null,{"src":{"src":"/_next/static/media/everyday-english.d8b8a071.jpg","height":3600,"width":2400,"blurDataURL":"data:image/jpeg;base64,/9j/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wgARCAAIAAUDASIAAhEBAxEB/8QAFAABAAAAAAAAAAAAAAAAAAAAAP/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAEJf//EABYQAQEBAAAAAAAAAAAAAAAAAAIDBP/aAAgBAQABBQKuQJf/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oACAEDAQE/AX//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAgEBPwGP/8QAGBAAAgMAAAAAAAAAAAAAAAAAAAECERL/2gAIAQEABj8CvSgf/8QAGBAAAgMAAAAAAAAAAAAAAAAAAAERQVH/2gAIAQEAAT8hmFp1p//aAAwDAQACAAMAAAAQC//EABYRAQEBAAAAAAAAAAAAAAAAAAEAYf/aAAgBAwEBPxBcv//EABcRAQADAAAAAAAAAAAAAAAAAAEAMaH/2gAIAQIBAT8QGFuT/8QAGRABAAIDAAAAAAAAAAAAAAAAAQARIUFx/9oACAEBAAE/EDd67SHWdz//2Q==","blurWidth":5,"blurHeight":8},"alt":"","sizes":"(min-width: 768px) 42rem, 100vw","className":"aspect-[16/10] w-full object-cover"}]}],"\n","\n"]}]}]}]]}]}],["$","div",null,{"className":"relative pt-24 sm:pt-32 lg:pt-40 mt-24 sm:mt-32 lg:mt-40","children":[["$","div",null,{"className":"absolute inset-x-0 top-0 -z-10 h-[884px] overflow-hidden rounded-t-4xl bg-gradient-to-b from-neutral-50","children":["$","$La",null,{"className":"absolute inset-0 h-full w-full fill-neutral-100 stroke-neutral-950/5 [mask-image:linear-gradient(to_bottom_left,white_40%,transparent_50%)]","yOffset":-270}]}],["$","div",null,{"className":"mx-auto max-w-7xl px-6 lg:px-8","children":["$","div",null,{"className":"mx-auto max-w-2xl lg:max-w-none","children":["$","$L6",null,{"className":"max-w-2xl","children":[["$","h2",null,{"children":["$undefined",["$","span",null,{"className":"block font-display tracking-tight [text-wrap:balance] text-2xl font-semibold text-neutral-950","children":"More articles"}]]}],"$undefined"]}]}]}],["$","div",null,{"className":"mx-auto max-w-7xl px-6 lg:px-8 mt-16","children":["$","div",null,{"className":"mx-auto max-w-2xl lg:max-w-none","children":["$","$Lb",null,{"className":"grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-2","children":[["$","$L6","/blog/future-of-web-development",{"children":["$","article","/blog/future-of-web-development",{"children":["$","div",null,{"className":"relative flex flex-col items-start pl-8 relative before:absolute after:absolute before:bg-neutral-950 after:bg-neutral-950/10 before:left-0 before:top-0 before:h-6 before:w-px after:bottom-0 after:left-0 after:top-8 after:w-px","children":[["$","h3",null,{"className":"mt-6 text-base font-semibold text-neutral-950","children":"The Future of Web Development: Our Predictions for 2023"}],["$","time",null,{"dateTime":"2023-04-06","className":"order-first text-sm text-neutral-600","children":"April 6, 2023"}],["$","p",null,{"className":"mt-2.5 text-base text-neutral-600","children":"Let’s explore the latest trends in web development, and regurgitate some predictions we read on X for how they will shape the industry in the coming year."}],["$","$L7",null,{"href":"/blog/future-of-web-development","className":"mt-6 flex gap-x-3 text-base font-semibold text-neutral-950 transition hover:text-neutral-700","aria-label":"Read more: The Future of Web Development: Our Predictions for 2023","children":["Read more",["$","svg",null,{"viewBox":"0 0 24 6","aria-hidden":"true","className":"w-6 flex-none fill-current","children":["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M24 3 18 .5v2H0v1h18v2L24 3Z"}]}],["$","span",null,{"className":"absolute inset-0"}]]}]]}]}]}],["$","$L6","/blog/3-lessons-we-learned-going-back-to-the-office",{"children":["$","article","/blog/3-lessons-we-learned-going-back-to-the-office",{"children":["$","div",null,{"className":"relative flex flex-col items-start pl-8 relative before:absolute after:absolute before:bg-neutral-950 after:bg-neutral-950/10 before:left-0 before:top-0 before:h-6 before:w-px after:bottom-0 after:left-0 after:top-8 after:w-px","children":[["$","h3",null,{"className":"mt-6 text-base font-semibold text-neutral-950","children":"3 Lessons We Learned Going Back to the Office"}],["$","time",null,{"dateTime":"2023-02-18","className":"order-first text-sm text-neutral-600","children":"February 18, 2023"}],["$","p",null,{"className":"mt-2.5 text-base text-neutral-600","children":"Earlier this year we made the bold decision to make everyone come back to the office full-time after two years working from a dressing table in the corner of their bedroom."}],["$","$L7",null,{"href":"/blog/3-lessons-we-learned-going-back-to-the-office","className":"mt-6 flex gap-x-3 text-base font-semibold text-neutral-950 transition hover:text-neutral-700","aria-label":"Read more: 3 Lessons We Learned Going Back to the Office","children":["Read more",["$","svg",null,{"viewBox":"0 0 24 6","aria-hidden":"true","className":"w-6 flex-none fill-current","children":["$","path",null,{"fillRule":"evenodd","clipRule":"evenodd","d":"M24 3 18 .5v2H0v1h18v2L24 3Z"}]}],["$","span",null,{"className":"absolute inset-0"}]]}]]}]}]}]]}]}]}]]}],["$","div",null,{"className":"mx-auto max-w-7xl px-6 lg:px-8 mt-24 sm:mt-32 lg:mt-40","children":["$","div",null,{"className":"mx-auto max-w-2xl lg:max-w-none","children":["$","$L6",null,{"className":"-mx-6 rounded-4xl bg-neutral-950 px-6 py-20 sm:mx-0 sm:py-32 md:px-12","children":["$","div",null,{"className":"mx-auto max-w-4xl","children":["$","div",null,{"className":"max-w-xl","children":[["$","h2",null,{"className":"font-display text-3xl font-medium text-white [text-wrap:balance] sm:text-4xl","children":"Tell us about your project"}],["$","div",null,{"className":"mt-6 flex","children":["$","$L7",null,{"className":"inline-flex rounded-full px-4 py-1.5 text-sm font-semibold transition bg-white text-neutral-950 hover:bg-neutral-200","href":"/contact","children":["$","span",null,{"className":"relative top-px","children":"Say Hej"}]}]}],["$","div",null,{"className":"mt-10 border-t border-white/10 pt-10","children":[["$","h3",null,{"className":"font-display text-base font-semibold text-white","children":"Our offices"}],["$","ul",null,{"role":"list","className":"mt-6 grid grid-cols-1 gap-8 sm:grid-cols-2","children":["$","li",null,{"children":["$","address",null,{"className":"text-sm not-italic text-neutral-300","children":[["$","strong",null,{"className":"text-white","children":"HQ"}],["$","br",null,{}],["1309 Coffeen Avenue STE 1200",["$","br",null,{}],"Sheridan, Wyoming, 82801, USA"]]}]}]}]]}]]}]}]}]}]}]]