[{"data":1,"prerenderedAt":2398},["ShallowReactive",2],{"navigation":3,"blog-page":30,"blogs":41},[4],{"title":5,"path":6,"stem":7,"children":8,"page":29},"Blog","/blog","blog",[9,13,17,21,25],{"title":10,"path":11,"stem":12},"10 Coding Practices I Follow on Every Project (So You Don’t Have To Regret Hiring Me)","/blog/10-coding-practices-i-follow-every-project","blog/10-coding-practices-i-follow-every-project",{"title":14,"path":15,"stem":16},"AI vs Human Developers in 2025: A Collaboration Playbook","/blog/ai-vs-human-developers-collaboration-playbook","blog/ai-vs-human-developers-collaboration-playbook",{"title":18,"path":19,"stem":20},"Frontend vs Backend: The Endless Battle for Supremacy (And Why You Shouldn't Care)","/blog/frontend-vs-backend-the-endless-battle-for-supremacy-and-why-you-shouldn-t-care","blog/frontend-vs-backend-the-endless-battle-for-supremacy-and-why-you-shouldn-t-care",{"title":22,"path":23,"stem":24},"Scaling New Heights: Building Scalable Vue and Nuxt Applications","/blog/scaling-new-heights-building-scalable-vue-and-nuxt-applications","blog/scaling-new-heights-building-scalable-vue-and-nuxt-applications",{"title":26,"path":27,"stem":28},"What Hiring Managers Really Look for in Developer Portfolios in 2025","/blog/what-hiring-managers-want-in-developer-portfolios-2025","blog/what-hiring-managers-want-in-developer-portfolios-2025",false,{"id":31,"title":32,"body":33,"description":34,"extension":35,"links":36,"meta":37,"navigation":38,"path":6,"seo":39,"stem":7,"__hash__":40},"pages/blog.yml","Latest Articles",{"title":32,"description":34},"Some of my recent thoughts on design, development, and the tech industry.","yml",null,{},true,{"title":32,"description":34},"6J59snw_jGqoVqlEOH9klnsREEddTrr5viwslhC95ms",[42,530,975,1461,1956],{"id":43,"title":18,"author":44,"body":50,"canonical":36,"coverAlt":520,"date":521,"description":522,"excerpt":36,"extension":523,"featured":29,"image":524,"meta":525,"minRead":526,"navigation":38,"path":19,"seo":527,"stem":20,"tags":528,"__hash__":529},"blog/blog/frontend-vs-backend-the-endless-battle-for-supremacy-and-why-you-shouldn-t-care.md",{"name":45,"username":46,"to":47,"avatar":48},"Kadiri Success","codebyquan","https://twitter.com/codebyquan",{"src":49,"alt":45},"/avatar/kadiri.jpg",{"type":51,"value":52,"toc":505},"minimark",[53,57,62,78,85,90,93,100,104,107,118,122,132,143,147,150,153,157,168,171,175,178,185,188,223,226,229,254,257,260,297,300,303,323,325,328,352,354,357,377,379,382,401,403,406,426,428,431,451,453,456,476,478,480,483,486,489,492,495,498,500,502],[54,55,56],"p",{},"As a software engineer, I've lost count of how many times I've been asked: \"Are you a frontend or backend developer?\" It's like being asked to choose between pizza and sushi - both are delicious, but in different ways. But what's the real difference between these two factions of web development, and why do they seem to be in a constant state of rivalry?",[58,59,61],"h2",{"id":60},"the-frontend-where-the-magic-happens","The Frontend: Where the Magic Happens",[54,63,64,65,69,70,73,74,77],{},"The frontend, also known as the client-side, is where the user interface (UI) and user experience (UX) come to life. It's like the fancy exterior of a car - everyone sees it, and it's what makes the first impression. Frontend developers are responsible for creating the visual aspects of a website or application, using languages like ",[66,67,68],"strong",{},"HTML",", ",[66,71,72],{},"CSS",", and ",[66,75,76],{},"JavaScript",". They're the ones who make sure the website looks pretty, is responsive, and works seamlessly on different devices.",[54,79,80,81,84],{},"But being a frontend developer isn't just about making things look pretty. It's also about creating a seamless user experience, which is where ",[66,82,83],{},"UX design"," comes in. It's like being a chef - you need to balance flavors, textures, and presentation to create a dish that's both delicious and visually appealing. Frontend developers need to balance aesthetics, functionality, and performance to create a website that's both beautiful and user-friendly.",[86,87,89],"h3",{"id":88},"the-good-the-bad-and-the-ugly-of-frontend-development","The Good, the Bad, and the Ugly of Frontend Development",[54,91,92],{},"So, what's it like to be a frontend developer? The good news is that you get to see the immediate results of your work - you write some code, and voilà! The website looks amazing. The bad news is that you have to deal with the ever-changing landscape of web development, where new frameworks and libraries are popping up left and right. It's like trying to keep up with the latest fashion trends - just when you think you've got it figured out, something new comes along and changes the game.",[54,94,95,96,99],{},"And then there's the ugly side of frontend development - ",[66,97,98],{},"browser compatibility issues",". It's like trying to get a cat to do tricks - sometimes it works, sometimes it doesn't, and sometimes it just plain refuses to cooperate. But hey, at least it's not as bad as it used to be, right?",[58,101,103],{"id":102},"the-backend-where-the-magic-is-made","The Backend: Where the Magic is Made",[54,105,106],{},"The backend, also known as the server-side, is where the logic and data storage happen. It's like the engine of a car - it's what makes the car move, even if you can't see it. Backend developers are responsible for creating the server, database, and API - the behind-the-scenes stuff that makes the website work. They're the ones who make sure the website is secure, scalable, and can handle a large number of users.",[54,108,109,110,113,114,117],{},"But being a backend developer isn't just about writing code - it's also about ",[66,111,112],{},"problem-solving"," and ",[66,115,116],{},"critical thinking",". It's like being a detective - you need to analyze clues, follow leads, and piece together the puzzle to solve the mystery. Backend developers need to analyze data, identify patterns, and optimize performance to create a website that's both fast and reliable.",[86,119,121],{"id":120},"the-good-the-bad-and-the-ugly-of-backend-development","The Good, the Bad, and the Ugly of Backend Development",[54,123,124,125,113,128,131],{},"So, what's it like to be a backend developer? The good news is that you get to work on complex problems and create solutions that have a real impact on the user experience. The bad news is that you often have to deal with ",[66,126,127],{},"legacy code",[66,129,130],{},"technical debt"," - it's like inheriting an old house that needs renovation, but you're not sure where to start.",[54,133,134,135,138,139,142],{},"And then there's the ugly side of backend development - ",[66,136,137],{},"debugging",". It's like trying to find a needle in a haystack - sometimes you get lucky, sometimes you don't, and sometimes you just want to throw the whole haystack away. But hey, at least you have ",[66,140,141],{},"stack traces"," to help you figure out what's going on, right?",[58,144,146],{"id":145},"the-rivalry-why-its-time-to-put-the-battle-to-rest","The Rivalry: Why It's Time to Put the Battle to Rest",[54,148,149],{},"So, why do frontend and backend developers seem to be in a constant state of rivalry? Is it because frontend developers think backend developers are boring and uncreative, while backend developers think frontend developers are shallow and lacking in substance? Or is it because both sides are just trying to prove their worth in a rapidly changing industry?",[54,151,152],{},"The truth is, both frontend and backend development are essential to creating a great web application. It's like a marriage - both partners need to work together in harmony to create a beautiful and functional whole. Frontend developers need backend developers to provide the data and logic, while backend developers need frontend developers to create a user-friendly interface.",[86,154,156],{"id":155},"the-future-of-web-development-full-stack-and-beyond","The Future of Web Development: Full-Stack and Beyond",[54,158,159,160,163,164,167],{},"So, what's the future of web development? Is it ",[66,161,162],{},"full-stack development",", where one person does it all? Or is it ",[66,165,166],{},"specialization",", where frontend and backend developers work together as a team? The truth is, it's a little bit of both.",[54,169,170],{},"As the web development landscape continues to evolve, we're seeing a shift towards full-stack development, where developers need to have a broad range of skills to be successful. But at the same time, we're also seeing a need for specialization, where frontend and backend developers can focus on their respective areas of expertise.",[86,172,174],{"id":173},"conclusion-its-time-to-put-the-rivalry-to-rest","Conclusion: It's Time to Put the Rivalry to Rest",[54,176,177],{},"In conclusion, the frontend vs backend debate is a never-ending battle, but it's time to put the rivalry to rest. Both frontend and backend development are essential to creating a great web application, and it's time to recognize the value that each side brings to the table.",[54,179,180,181,184],{},"So, whether you're a frontend or backend developer, remember that you're not alone. You're part of a community of developers who are working together to create amazing web applications. And who knows - maybe one day, we'll have a ",[66,182,183],{},"universal developer"," who can do it all, from design to deployment. But until then, let's just focus on building amazing web applications, one line of code at a time.",[54,186,187],{},"Here are some key takeaways from this post:",[189,190,191,202,214,217,220],"ul",{},[192,193,194,195,69,197,73,199,201],"li",{},"Frontend development is about creating a seamless user experience, using languages like ",[66,196,68],{},[66,198,72],{},[66,200,76],{},".",[192,203,204,205,69,208,73,211,201],{},"Backend development is about creating the logic and data storage, using languages like ",[66,206,207],{},"Java",[66,209,210],{},"Python",[66,212,213],{},"Ruby",[192,215,216],{},"Both frontend and backend development are essential to creating a great web application.",[192,218,219],{},"The rivalry between frontend and backend developers is unnecessary and counterproductive.",[192,221,222],{},"The future of web development is full-stack and specialization, where developers need to have a broad range of skills and work together as a team.",[54,224,225],{},"I hope you enjoyed this post, and I'd love to hear your thoughts on the frontend vs backend debate. Do you have a preference for one side or the other, or do you think it's time to put the rivalry to rest? Let me know in the comments below!",[54,227,228],{},"Some popular resources for learning more about frontend and backend development include:",[189,230,231,237,243,248],{},[192,232,233,236],{},[66,234,235],{},"FreeCodeCamp",": A non-profit organization that offers a comprehensive curriculum in web development, including frontend and backend development.",[192,238,239,242],{},[66,240,241],{},"Codecademy",": An online learning platform that offers courses and tutorials in web development, including frontend and backend development.",[192,244,245,242],{},[66,246,247],{},"Udemy",[192,249,250,253],{},[66,251,252],{},"Stack Overflow",": A Q&A platform for developers, where you can ask questions and get answers from experienced developers.",[54,255,256],{},"Remember, the key to success in web development is to keep learning, stay curious, and always be willing to adapt to new technologies and trends. Happy coding!",[54,258,259],{},"Some popular tools and technologies for frontend and backend development include:",[189,261,262,268,274,280,286,292],{},[192,263,264,267],{},[66,265,266],{},"React",": A JavaScript library for building user interfaces.",[192,269,270,273],{},[66,271,272],{},"Angular",": A JavaScript framework for building single-page applications.",[192,275,276,279],{},[66,277,278],{},"Vue.js",": A JavaScript framework for building user interfaces.",[192,281,282,285],{},[66,283,284],{},"Node.js",": A JavaScript runtime environment for building server-side applications.",[192,287,288,291],{},[66,289,290],{},"Ruby on Rails",": A server-side framework for building web applications.",[192,293,294,291],{},[66,295,296],{},"Django",[54,298,299],{},"I hope this helps, and happy coding!",[54,301,302],{},"If you're interested in learning more about web development, I recommend checking out some of the following resources:",[189,304,305,311,317],{},[192,306,307,310],{},[66,308,309],{},"Web Development Bootcamp",": A comprehensive course that covers the basics of web development, including frontend and backend development.",[192,312,313,316],{},[66,314,315],{},"Full-Stack Development",": A course that covers the basics of full-stack development, including frontend and backend development.",[192,318,319,322],{},[66,320,321],{},"Web Development Tutorial",": A tutorial that covers the basics of web development, including frontend and backend development.",[54,324,256],{},[54,326,327],{},"Some popular communities for frontend and backend developers include:",[189,329,330,336,340,346],{},[192,331,332,335],{},[66,333,334],{},"Reddit",": A community of developers that includes subreddits for frontend and backend development.",[192,337,338,253],{},[66,339,252],{},[192,341,342,345],{},[66,343,344],{},"GitHub",": A platform for developers to share and collaborate on code.",[192,347,348,351],{},[66,349,350],{},"Meetup",": A platform for developers to meet and network with other developers.",[54,353,299],{},[54,355,356],{},"If you're interested in learning more about web development, I recommend checking out some of the following conferences:",[189,358,359,365,371],{},[192,360,361,364],{},[66,362,363],{},"Web Development Conference",": A conference that covers the latest trends and technologies in web development.",[192,366,367,370],{},[66,368,369],{},"Frontend Conference",": A conference that covers the latest trends and technologies in frontend development.",[192,372,373,376],{},[66,374,375],{},"Backend Conference",": A conference that covers the latest trends and technologies in backend development.",[54,378,256],{},[54,380,381],{},"Some popular blogs for frontend and backend developers include:",[189,383,384,390,396],{},[192,385,386,389],{},[66,387,388],{},"Smashing Magazine",": A blog that covers the latest trends and technologies in web development.",[192,391,392,395],{},[66,393,394],{},"CSS-Tricks",": A blog that covers the latest trends and technologies in frontend development.",[192,397,398,389],{},[66,399,400],{},"SitePoint",[54,402,299],{},[54,404,405],{},"If you're interested in learning more about web development, I recommend checking out some of the following podcasts:",[189,407,408,414,420],{},[192,409,410,413],{},[66,411,412],{},"The Web Development Podcast",": A podcast that covers the latest trends and technologies in web development.",[192,415,416,419],{},[66,417,418],{},"The Frontend Podcast",": A podcast that covers the latest trends and technologies in frontend development.",[192,421,422,425],{},[66,423,424],{},"The Backend Podcast",": A podcast that covers the latest trends and technologies in backend development.",[54,427,256],{},[54,429,430],{},"Some popular books for frontend and backend developers include:",[189,432,433,439,445],{},[192,434,435,438],{},[66,436,437],{},"\"HTML and CSS: Design and Build Websites\"",": A book that covers the basics of frontend development.",[192,440,441,444],{},[66,442,443],{},"\"JavaScript: The Definitive Guide\"",": A book that covers the basics of JavaScript development.",[192,446,447,450],{},[66,448,449],{},"\"Python Crash Course\"",": A book that covers the basics of Python development.",[54,452,299],{},[54,454,455],{},"If you're interested in learning more about web development, I recommend checking out some of the following online courses:",[189,457,458,464,470],{},[192,459,460,463],{},[66,461,462],{},"Web Development Course",": A course that covers the basics of web development, including frontend and backend development.",[192,465,466,469],{},[66,467,468],{},"Frontend Development Course",": A course that covers the basics of frontend development.",[192,471,472,475],{},[66,473,474],{},"Backend Development Course",": A course that covers the basics of backend development.",[54,477,256],{},[54,479,225],{},[54,481,482],{},"Thanks for reading, and happy coding!",[54,484,485],{},"P.S. If you're interested in learning more about web development, I recommend checking out some of the resources I mentioned above. And if you have any questions or need help with a project, don't hesitate to reach out. I'm always here to help.",[54,487,488],{},"This post is part of a series on web development, and I'll be covering more topics in the future. If you have any suggestions or ideas for future posts, let me know in the comments below!",[54,490,491],{},"Thanks again for reading, and happy coding!",[54,493,494],{},"Note: This post is for educational purposes only, and is not intended to be a comprehensive guide to web development. If you're interested in learning more about web development, I recommend checking out some of the resources I mentioned above.",[54,496,497],{},"Also, please note that the views and opinions expressed in this post are my own, and do not reflect the views or opinions of my employer or any other organization.",[54,499,482],{},[54,501,485],{},[54,503,504],{},"This post is",{"title":506,"searchDepth":507,"depth":507,"links":508},"",2,[509,513,516],{"id":60,"depth":507,"text":61,"children":510},[511],{"id":88,"depth":512,"text":89},3,{"id":102,"depth":507,"text":103,"children":514},[515],{"id":120,"depth":512,"text":121},{"id":145,"depth":507,"text":146,"children":517},[518,519],{"id":155,"depth":512,"text":156},{"id":173,"depth":512,"text":174},"Coding setup","2026-03-13T23:25:12.050Z","The age-old debate between frontend and backend developers has been raging for years, with each side convinced of their own superiority. But what's the real difference, and why should you care? In this post, we'll dive into the world of web development, exploring the highs and lows of both frontend and backend development, and why it's time to put the rivalry to rest. Whether you're a seasoned developer or just starting out, this post is for you - so grab a snack, get comfortable, and let's dive in.","md","https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=2070&auto=format&fit=crop",{},12,{"title":18,"description":522},"Web-Development, Career, Humor, Programming","rfQ9r6cSn0yQPVhOw3w-gepJISK_DCtKpgYuUaCZTzs",{"id":531,"title":22,"author":532,"body":534,"canonical":36,"coverAlt":520,"date":969,"description":970,"excerpt":36,"extension":523,"featured":29,"image":524,"meta":971,"minRead":686,"navigation":38,"path":23,"seo":972,"stem":24,"tags":973,"__hash__":974},"blog/blog/scaling-new-heights-building-scalable-vue-and-nuxt-applications.md",{"name":45,"username":46,"to":47,"avatar":533},{"src":49,"alt":45},{"type":51,"value":535,"toc":959},[536,546,550,556,608,619,623,630,729,750,754,761,781,785,792,888,895,899,902,906,909,940,944,955],[54,537,538,539,113,542,545],{},"As a developer, there's nothing quite like the feeling of building a scalable application that can handle a large volume of traffic and user engagement. In this post, we'll focus on ",[66,540,541],{},"Vue",[66,543,544],{},"Nuxt",", two popular frameworks for building web applications. We'll explore the best practices and techniques for building scalable Vue and Nuxt applications, from project structure to performance optimization.",[58,547,549],{"id":548},"project-structure","Project Structure",[54,551,552,553,555],{},"When it comes to building scalable applications, a well-organized project structure is essential. This is where ",[66,554,544],{}," comes in, providing a robust framework for building server-side rendered (SSR) and static site generated (SSG) applications. Here's an example of a basic Nuxt project structure:",[557,558,562],"pre",{"className":559,"code":560,"language":561,"meta":506,"style":506},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","components/\npages/\nplugins/\nstore/\nutils/\nnuxt.config.js\npackage.json\n","bash",[563,564,565,574,579,584,590,596,602],"code",{"__ignoreMap":506},[566,567,570],"span",{"class":568,"line":569},"line",1,[566,571,573],{"class":572},"sBMFI","components/\n",[566,575,576],{"class":568,"line":507},[566,577,578],{"class":572},"pages/\n",[566,580,581],{"class":568,"line":512},[566,582,583],{"class":572},"plugins/\n",[566,585,587],{"class":568,"line":586},4,[566,588,589],{"class":572},"store/\n",[566,591,593],{"class":568,"line":592},5,[566,594,595],{"class":572},"utils/\n",[566,597,599],{"class":568,"line":598},6,[566,600,601],{"class":572},"nuxt.config.js\n",[566,603,605],{"class":568,"line":604},7,[566,606,607],{"class":572},"package.json\n",[54,609,610,611,614,615,618],{},"In this structure, we have separate folders for components, pages, plugins, store, and utilities. The ",[563,612,613],{},"nuxt.config.js"," file is where we configure our Nuxt application, and the ",[563,616,617],{},"package.json"," file is where we manage our dependencies.",[58,620,622],{"id":621},"state-management","State Management",[54,624,625,626,629],{},"State management is a critical aspect of building scalable applications. In Vue, we can use the ",[66,627,628],{},"Vuex"," library to manage state across our application. Here's an example of a basic Vuex store:",[557,631,635],{"className":632,"code":633,"language":634,"meta":506,"style":506},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { createStore } from 'vuex'\n\nexport default createStore({\n  state: {\n    counter: 0\n  },\n  mutations: {\n    increment(state) {\n      state.counter++\n    }\n  },\n  actions: {\n    increment({ commit }) {\n      commit('increment')\n    }\n  }\n})\n","javascript",[563,636,637,642,647,652,657,662,667,672,678,684,690,695,700,706,712,717,723],{"__ignoreMap":506},[566,638,639],{"class":568,"line":569},[566,640,641],{},"import { createStore } from 'vuex'\n",[566,643,644],{"class":568,"line":507},[566,645,646],{"emptyLinePlaceholder":38},"\n",[566,648,649],{"class":568,"line":512},[566,650,651],{},"export default createStore({\n",[566,653,654],{"class":568,"line":586},[566,655,656],{},"  state: {\n",[566,658,659],{"class":568,"line":592},[566,660,661],{},"    counter: 0\n",[566,663,664],{"class":568,"line":598},[566,665,666],{},"  },\n",[566,668,669],{"class":568,"line":604},[566,670,671],{},"  mutations: {\n",[566,673,675],{"class":568,"line":674},8,[566,676,677],{},"    increment(state) {\n",[566,679,681],{"class":568,"line":680},9,[566,682,683],{},"      state.counter++\n",[566,685,687],{"class":568,"line":686},10,[566,688,689],{},"    }\n",[566,691,693],{"class":568,"line":692},11,[566,694,666],{},[566,696,697],{"class":568,"line":526},[566,698,699],{},"  actions: {\n",[566,701,703],{"class":568,"line":702},13,[566,704,705],{},"    increment({ commit }) {\n",[566,707,709],{"class":568,"line":708},14,[566,710,711],{},"      commit('increment')\n",[566,713,715],{"class":568,"line":714},15,[566,716,689],{},[566,718,720],{"class":568,"line":719},16,[566,721,722],{},"  }\n",[566,724,726],{"class":568,"line":725},17,[566,727,728],{},"})\n",[54,730,731,732,735,736,739,740,742,743,113,746,749],{},"In this example, we define a ",[563,733,734],{},"counter"," state property, a ",[563,737,738],{},"increment"," mutation, and an ",[563,741,738],{}," action. We can then use the ",[563,744,745],{},"mapState",[563,747,748],{},"mapActions"," helpers to access the state and dispatch actions in our components.",[58,751,753],{"id":752},"performance-optimization","Performance Optimization",[54,755,756,757,760],{},"Performance optimization is crucial for building scalable applications. In Vue, we can use the ",[66,758,759],{},"Vue Devtools"," to identify performance bottlenecks and optimize our code. Here are some tips for optimizing Vue applications:",[189,762,763,769,775],{},[192,764,765,768],{},[66,766,767],{},"Use lazy loading",": Lazy loading allows us to load components and modules only when they're needed, reducing the initial payload and improving performance.",[192,770,771,774],{},[66,772,773],{},"Use caching",": Caching allows us to store frequently accessed data in memory, reducing the number of requests to the server and improving performance.",[192,776,777,780],{},[66,778,779],{},"Optimize images",": Optimizing images can significantly reduce the size of our application and improve performance.",[58,782,784],{"id":783},"security","Security",[54,786,787,788,791],{},"Security is a top priority when building scalable applications. In Vue, we can use the ",[66,789,790],{},"Vue Helmet"," library to manage the document head and improve security. Here's an example of how to use Vue Helmet:",[557,793,795],{"className":632,"code":794,"language":634,"meta":506,"style":506},"import { VueHelmet } from 'vue-helmet'\n\nexport default {\n  components: { VueHelmet },\n  data() {\n    return {\n      title: 'My Application'\n    }\n  },\n  head() {\n    return {\n      title: this.title,\n      meta: [\n        { charset: 'utf-8' },\n        { name: 'viewport', content: 'width=device-width, initial-scale=1' }\n      ]\n    }\n  }\n}\n",[563,796,797,802,806,811,816,821,826,831,835,839,844,848,853,858,863,868,873,877,882],{"__ignoreMap":506},[566,798,799],{"class":568,"line":569},[566,800,801],{},"import { VueHelmet } from 'vue-helmet'\n",[566,803,804],{"class":568,"line":507},[566,805,646],{"emptyLinePlaceholder":38},[566,807,808],{"class":568,"line":512},[566,809,810],{},"export default {\n",[566,812,813],{"class":568,"line":586},[566,814,815],{},"  components: { VueHelmet },\n",[566,817,818],{"class":568,"line":592},[566,819,820],{},"  data() {\n",[566,822,823],{"class":568,"line":598},[566,824,825],{},"    return {\n",[566,827,828],{"class":568,"line":604},[566,829,830],{},"      title: 'My Application'\n",[566,832,833],{"class":568,"line":674},[566,834,689],{},[566,836,837],{"class":568,"line":680},[566,838,666],{},[566,840,841],{"class":568,"line":686},[566,842,843],{},"  head() {\n",[566,845,846],{"class":568,"line":692},[566,847,825],{},[566,849,850],{"class":568,"line":526},[566,851,852],{},"      title: this.title,\n",[566,854,855],{"class":568,"line":702},[566,856,857],{},"      meta: [\n",[566,859,860],{"class":568,"line":708},[566,861,862],{},"        { charset: 'utf-8' },\n",[566,864,865],{"class":568,"line":714},[566,866,867],{},"        { name: 'viewport', content: 'width=device-width, initial-scale=1' }\n",[566,869,870],{"class":568,"line":719},[566,871,872],{},"      ]\n",[566,874,875],{"class":568,"line":725},[566,876,689],{},[566,878,880],{"class":568,"line":879},18,[566,881,722],{},[566,883,885],{"class":568,"line":884},19,[566,886,887],{},"}\n",[54,889,890,891,894],{},"In this example, we use the ",[563,892,893],{},"VueHelmet"," component to manage the document head and set the title and meta tags.",[58,896,898],{"id":897},"conclusion","Conclusion",[54,900,901],{},"Building scalable Vue and Nuxt applications requires a combination of best practices, techniques, and tools. By following the guidelines outlined in this post, you can build high-performance, secure, and scalable applications that meet the needs of your users. Remember to always prioritize performance optimization, state management, and security when building your applications. Happy coding!",[86,903,905],{"id":904},"additional-resources","Additional Resources",[54,907,908],{},"For more information on building scalable Vue and Nuxt applications, check out the following resources:",[189,910,911,920,927,934],{},[192,912,913],{},[914,915,919],"a",{"href":916,"rel":917},"https://vuejs.org/v2/guide/",[918],"nofollow","Vue Documentation",[192,921,922],{},[914,923,926],{"href":924,"rel":925},"https://nuxtjs.org/docs/2.x/get-started/first-steps",[918],"Nuxt Documentation",[192,928,929],{},[914,930,933],{"href":931,"rel":932},"https://vuex.vuejs.org/guide/",[918],"Vuex Documentation",[192,935,936],{},[914,937,759],{"href":938,"rel":939},"https://chrome.google.com/webstore/detail/vue-devtools/nhdogjmejiglipccpnnnnahpafanjcd",[918],[86,941,943],{"id":942},"join-the-conversation","Join the Conversation",[54,945,946,947,950,951,954],{},"If you have any questions or comments about building scalable Vue and Nuxt applications, please join the conversation on Twitter using the hashtag ",[66,948,949],{},"#VueAndNuxt",". You can also follow me on Twitter at ",[66,952,953],{},"@codebyquan"," for more updates and insights on web development.",[956,957,958],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":506,"searchDepth":507,"depth":507,"links":960},[961,962,963,964,965],{"id":548,"depth":507,"text":549},{"id":621,"depth":507,"text":622},{"id":752,"depth":507,"text":753},{"id":783,"depth":507,"text":784},{"id":897,"depth":507,"text":898,"children":966},[967,968],{"id":904,"depth":512,"text":905},{"id":942,"depth":512,"text":943},"2026-03-13T23:20:39.502Z","In this post, we'll delve into the world of Vue and Nuxt, exploring the best practices and techniques for building scalable applications. From project structure to performance optimization, we'll cover it all. Whether you're a seasoned developer or just starting out, this guide will provide you with the knowledge and expertise to take your Vue and Nuxt applications to the next level.",{},{"title":22,"description":970},"Web-Development, Frontend, Vue, Nuxt","BlFWkMLSd-aHTx2jfxkrlXHDJ0RwPUXcSbYEnDaIMJw",{"id":976,"title":26,"author":977,"body":979,"canonical":1448,"coverAlt":1449,"date":1450,"description":1451,"excerpt":36,"extension":523,"featured":38,"image":1452,"meta":1453,"minRead":692,"navigation":38,"path":27,"seo":1454,"stem":28,"tags":1455,"__hash__":1460},"blog/blog/what-hiring-managers-want-in-developer-portfolios-2025.md",{"name":45,"username":46,"to":47,"avatar":978},{"src":49,"alt":45},{"type":51,"value":980,"toc":1435},[981,985,1013,1016,1020,1023,1035,1038,1049,1055,1057,1061,1064,1069,1072,1077,1080,1094,1097,1108,1111,1113,1117,1120,1123,1138,1141,1152,1159,1161,1165,1168,1179,1182,1193,1196,1204,1207,1209,1213,1216,1219,1230,1233,1244,1247,1249,1253,1256,1267,1270,1286,1293,1295,1299,1302,1307,1310,1321,1324,1335,1338,1340,1344,1347,1350,1361,1364,1375,1378,1380,1384,1387,1390,1401,1408,1410,1414,1417,1432],[58,982,984],{"id":983},"tldr","TL;DR",[189,986,987,993,1000,1003,1010],{},[192,988,989,990,201],{},"Portfolios are no longer just galleries; they’re ",[66,991,992],{},"evidence of how you work",[192,994,995,996,999],{},"Hiring managers care more about ",[66,997,998],{},"depth"," in a few projects than 20 tiny demos.",[192,1001,1002],{},"Case studies that explain trade-offs beat “tech stack badges” every time.",[192,1004,1005,1006,1009],{},"Showing how you use AI responsibly is a ",[66,1007,1008],{},"plus",", not a threat.",[192,1011,1012],{},"This portfolio is built with those expectations in mind.",[1014,1015],"hr",{},[58,1017,1019],{"id":1018},"_1-what-hiring-managers-actually-do-with-your-portfolio-link","1. What hiring managers actually do with your portfolio link",[54,1021,1022],{},"When a hiring manager or senior dev gets your portfolio link, they usually:",[1024,1025,1026,1029,1032],"ol",{},[192,1027,1028],{},"Open it on a laptop while on another call.",[192,1030,1031],{},"Click 1–2 projects maximum.",[192,1033,1034],{},"Spend 3–5 minutes skimming.",[54,1036,1037],{},"They’re not trying to deeply understand everything you’ve built. They’re asking faster questions:",[189,1039,1040,1043,1046],{},[192,1041,1042],{},"Can this person ship a complete feature, not just a hero section?",[192,1044,1045],{},"Do they understand performance, accessibility and basic UX?",[192,1047,1048],{},"Is this codebase likely to be maintainable in 6–12 months?",[54,1050,1051,1052,201],{},"Your portfolio has to answer these questions ",[66,1053,1054],{},"at a glance",[1014,1056],{},[58,1058,1060],{"id":1059},"_2-depth-beats-quantity","2. Depth beats quantity",[54,1062,1063],{},"Instead of showing:",[189,1065,1066],{},[192,1067,1068],{},"20 small clones with no real users,",[54,1070,1071],{},"I focus on:",[189,1073,1074],{},[192,1075,1076],{},"2–4 projects with clear goals, real constraints and documented decisions.",[54,1078,1079],{},"Each project on this portfolio answers:",[189,1081,1082,1085,1088,1091],{},[192,1083,1084],{},"What problem it solves.",[192,1086,1087],{},"Who it was built for.",[192,1089,1090],{},"What success looked like (metrics, outcomes, feedback).",[192,1092,1093],{},"What technical decisions were made and why.",[54,1095,1096],{},"Example: the Utibe & Teddy wedding client project covers:",[189,1098,1099,1102,1105],{},[192,1100,1101],{},"Why a fully static architecture was chosen for reliability and speed.",[192,1103,1104],{},"How I hit 98+ Lighthouse with optimised images and careful layout.",[192,1106,1107],{},"How I handled RSVPs, timeline and content updates without a complex backend.",[54,1109,1110],{},"That tells a much stronger story than “I know Nuxt and Tailwind”.",[1014,1112],{},[58,1114,1116],{"id":1115},"_3-show-your-thinking-not-just-your-stack","3. Show your thinking, not just your stack",[54,1118,1119],{},"Tech stack badges (Nuxt, Vue, Tailwind, Postgres, etc.) are useful but shallow.",[54,1121,1122],{},"Hiring managers want to see:",[189,1124,1125,1132,1135],{},[192,1126,1127,1128,1131],{},"Trade-offs: what you ",[66,1129,1130],{},"didn’t"," build and why.",[192,1133,1134],{},"Constraints: budget, deadlines, team size, skill level.",[192,1136,1137],{},"Evolution: what you’d improve if you had more time.",[54,1139,1140],{},"On each project, I try to include sections like:",[189,1142,1143,1146,1149],{},[192,1144,1145],{},"“Architecture in one paragraph.”",[192,1147,1148],{},"“Key trade-offs and why I chose them.”",[192,1150,1151],{},"“What I’d change in version 2.”",[54,1153,1154,1155,1158],{},"This makes it easier for someone reading to imagine you inside ",[66,1156,1157],{},"their"," codebase and their constraints.",[1014,1160],{},[58,1162,1164],{"id":1163},"_4-performance-reliability-and-dx-as-differentiators","4. Performance, reliability and DX as differentiators",[54,1166,1167],{},"In 2025, most portfolios look good visually. Few talk about:",[189,1169,1170,1173,1176],{},[192,1171,1172],{},"Response times.",[192,1174,1175],{},"Error handling.",[192,1177,1178],{},"Developer experience inside the repo.",[54,1180,1181],{},"To stand out, I surface:",[189,1183,1184,1187,1190],{},[192,1185,1186],{},"Lighthouse scores for key pages.",[192,1188,1189],{},"Caching strategy or route rules where relevant.",[192,1191,1192],{},"How I structure components, composables and tests.",[54,1194,1195],{},"For example, in my Nuxt 4 performance article, I explain:",[189,1197,1198,1201],{},[192,1199,1200],{},"How image optimisation alone improved Lighthouse by 18 points.",[192,1202,1203],{},"How route rules and islands avoided shipping unnecessary JavaScript.",[54,1205,1206],{},"That shows attention to detail beyond CSS and animations.",[1014,1208],{},[58,1210,1212],{"id":1211},"_5-how-i-talk-about-ai-in-my-portfolio","5. How I talk about AI in my portfolio",[54,1214,1215],{},"AI is part of the modern toolchain, and ignoring it looks outdated.",[54,1217,1218],{},"At the same time, hiring managers are nervous about:",[189,1220,1221,1224,1227],{},[192,1222,1223],{},"Blindly pasted AI code.",[192,1225,1226],{},"Security and licensing issues.",[192,1228,1229],{},"Candidates who can’t explain how their own code works.",[54,1231,1232],{},"So I aim to show:",[189,1234,1235,1238,1241],{},[192,1236,1237],{},"Where AI helped (boilerplate, refactors, test ideas).",[192,1239,1240],{},"Where I overrode AI suggestions based on context.",[192,1242,1243],{},"How I verify AI-generated code with tests and reviews.",[54,1245,1246],{},"This positions AI as a multiplier, not a crutch.",[1014,1248],{},[58,1250,1252],{"id":1251},"_6-making-it-easy-to-skim-like-a-hiring-manager","6. Making it easy to skim like a hiring manager",[54,1254,1255],{},"I design portfolio content to be skim-friendly:",[189,1257,1258,1261,1264],{},[192,1259,1260],{},"Clear headings that answer specific questions.",[192,1262,1263],{},"TL;DR sections at the top of blog posts and case studies.",[192,1265,1266],{},"Short paragraphs and bullets instead of walls of text.",[54,1268,1269],{},"The goal:",[189,1271,1272],{},[192,1273,1274,1275],{},"A busy senior dev should be able to scan a page and think:\n",[189,1276,1277,1280,1283],{},[192,1278,1279],{},"“Yes, this person understands trade-offs.”",[192,1281,1282],{},"“Yes, they’ve shipped real things under constraints.”",[192,1284,1285],{},"“Yes, they can probably collaborate with our team.”",[54,1287,1288,1289,1292],{},"Good formatting is not about aesthetics only; it’s about ",[66,1290,1291],{},"reducing cognitive load"," for the reader.",[1014,1294],{},[58,1296,1298],{"id":1297},"_7-tying-portfolio-projects-back-to-business-value","7. Tying portfolio projects back to business value",[54,1300,1301],{},"One underrated trick:",[189,1303,1304],{},[192,1305,1306],{},"Explicitly connect technical decisions to outcomes.",[54,1308,1309],{},"Examples:",[189,1311,1312,1315,1318],{},[192,1313,1314],{},"“We chose static generation to reduce hosting cost to almost zero.”",[192,1316,1317],{},"“Using Cloudinary cut image payloads by 60 %, improving conversion on mobile.”",[192,1319,1320],{},"“We automated part of the admin workflow, saving 2–3 hours per week.”",[54,1322,1323],{},"This helps hiring managers map your work to:",[189,1325,1326,1329,1332],{},[192,1327,1328],{},"Revenue.",[192,1330,1331],{},"Cost savings.",[192,1333,1334],{},"Risk reduction.",[54,1336,1337],{},"and not just “cool tech”.",[1014,1339],{},[58,1341,1343],{"id":1342},"_8-showing-you-can-work-with-others","8. Showing you can work with others",[54,1345,1346],{},"Even solo projects can demonstrate collaboration skills.",[54,1348,1349],{},"I try to surface:",[189,1351,1352,1355,1358],{},[192,1353,1354],{},"How I collected feedback from non-technical stakeholders.",[192,1356,1357],{},"How I documented the setup for future collaborators.",[192,1359,1360],{},"How I designed APIs to be friendly to other teams.",[54,1362,1363],{},"Signals that matter:",[189,1365,1366,1369,1372],{},[192,1367,1368],{},"Clear README and environment setup.",[192,1370,1371],{},"Useful error messages and logs.",[192,1373,1374],{},"Thoughtful folder structure and naming.",[54,1376,1377],{},"These are the same things teams look for when deciding whether you’ll make their lives easier or harder.",[1014,1379],{},[58,1381,1383],{"id":1382},"_9-turning-your-portfolio-into-an-ongoing-story","9. Turning your portfolio into an ongoing story",[54,1385,1386],{},"Portfolios that go stale send the wrong message.",[54,1388,1389],{},"Instead of treating this site as a static snapshot, I use:",[189,1391,1392,1395,1398],{},[192,1393,1394],{},"Blog posts to document what I’m learning (like this one).",[192,1396,1397],{},"Case studies to share real project stories and results.",[192,1399,1400],{},"Small UI and performance upgrades to reflect new skills.",[54,1402,1403,1404,1407],{},"This turns the portfolio into a ",[66,1405,1406],{},"timeline"," of my growth, not just a one-off assignment.",[1014,1409],{},[58,1411,1413],{"id":1412},"final-thoughts","Final thoughts",[54,1415,1416],{},"If you’re building your own portfolio right now, ask:",[189,1418,1419,1426,1429],{},[192,1420,1421,1422,1425],{},"Does this show what I can do ",[66,1423,1424],{},"today",", or who I was last year?",[192,1427,1428],{},"Can a busy hiring manager answer “why should we interview you?” in 3 minutes?",[192,1430,1431],{},"Am I showing how I think, or just listing tools?",[54,1433,1434],{},"This site is my answer to those questions—and it will keep evolving as the expectations for developers in 2025 and beyond continue to rise.",{"title":506,"searchDepth":507,"depth":507,"links":1436},[1437,1438,1439,1440,1441,1442,1443,1444,1445,1446,1447],{"id":983,"depth":507,"text":984},{"id":1018,"depth":507,"text":1019},{"id":1059,"depth":507,"text":1060},{"id":1115,"depth":507,"text":1116},{"id":1163,"depth":507,"text":1164},{"id":1211,"depth":507,"text":1212},{"id":1251,"depth":507,"text":1252},{"id":1297,"depth":507,"text":1298},{"id":1342,"depth":507,"text":1343},{"id":1382,"depth":507,"text":1383},{"id":1412,"depth":507,"text":1413},"https://codebyquan.dev/blog/what-hiring-managers-want-in-developer-portfolios-2025","Hiring manager reviewing a developer portfolio and CV on a laptop","2025-02-10T08:00:00.000Z","Beyond Dribbble shots: how I design portfolio projects so hiring managers see signal, not noise.","https://images.pexels.com/photos/1181467/pexels-photo-1181467.jpeg",{},{"title":26,"description":1451},[1456,1457,1458,1459],"Career","Portfolio","Hiring","Product-Thinking","d_khEw1AphFX404U7naXufwURpMxm6sUtRMWlpfq_0w",{"id":1462,"title":10,"author":1463,"body":1465,"canonical":1944,"coverAlt":1945,"date":1946,"description":1947,"excerpt":36,"extension":523,"featured":29,"image":1948,"meta":1949,"minRead":686,"navigation":38,"path":11,"seo":1950,"stem":12,"tags":1951,"__hash__":1955},"blog/blog/10-coding-practices-i-follow-every-project.md",{"name":45,"username":46,"to":47,"avatar":1464},{"src":49,"alt":45},{"type":51,"value":1466,"toc":1930},[1467,1469,1486,1488,1492,1495,1506,1509,1517,1520,1522,1526,1529,1537,1540,1545,1548,1559,1562,1564,1568,1575,1594,1597,1608,1611,1613,1617,1620,1631,1633,1657,1660,1671,1673,1677,1680,1691,1694,1702,1705,1713,1720,1722,1726,1729,1732,1740,1743,1751,1754,1756,1760,1763,1771,1774,1785,1788,1799,1802,1804,1808,1811,1814,1825,1828,1833,1836,1838,1842,1845,1856,1859,1862,1873,1875,1879,1882,1885,1896,1898,1906,1909,1911,1913,1916,1927],[58,1468,984],{"id":983},[189,1470,1471,1474,1477,1480,1483],{},[192,1472,1473],{},"These 10 habits are how I avoid “it works on my machine” drama.",[192,1475,1476],{},"I optimise for readability first, performance second (with measurements).",[192,1478,1479],{},"Git history must tell the story; no “final-final-v2” commits.",[192,1481,1482],{},"Tests, linting and basic monitoring are part of “done”, not an afterthought.",[192,1484,1485],{},"If a new teammate can’t ship in day one, the structure is wrong.",[1014,1487],{},[58,1489,1491],{"id":1490},"_1-start-from-the-user-and-the-constraints","1. Start from the user and the constraints",[54,1493,1494],{},"Before touching code, I write down three things:",[189,1496,1497,1500,1503],{},[192,1498,1499],{},"Who is this for?",[192,1501,1502],{},"What does “fast enough” mean in this context?",[192,1504,1505],{},"What constraints are we under? (time, budget, infra, team)",[54,1507,1508],{},"This gives me a simple decision filter:",[189,1510,1511,1514],{},[192,1512,1513],{},"If a micro-optimisation doesn’t move user outcomes, I skip it.",[192,1515,1516],{},"If a feature makes onboarding harder with little gain, I push back.",[54,1518,1519],{},"Code is only “good” inside the context of the problem it solves.",[1014,1521],{},[58,1523,1525],{"id":1524},"_2-favour-boring-predictable-architecture","2. Favour boring, predictable architecture",[54,1527,1528],{},"I’d rather have:",[189,1530,1531,1534],{},[192,1532,1533],{},"A readable, slightly repetitive Nuxt page structure.",[192,1535,1536],{},"A simple service layer with clear boundaries.",[54,1538,1539],{},"than:",[189,1541,1542],{},[192,1543,1544],{},"A clever meta-framework nobody wants to touch in six months.",[54,1546,1547],{},"Patterns I use a lot:",[189,1549,1550,1553,1556],{},[192,1551,1552],{},"Clear separation of concerns: pages vs components vs composables.",[192,1554,1555],{},"Dedicated directories for API, content and utilities.",[192,1557,1558],{},"One “source of truth” for each piece of data (no copy-paste configs).",[54,1560,1561],{},"If a new dev can’t guess where a file lives, the structure needs work.",[1014,1563],{},[58,1565,1567],{"id":1566},"_3-make-types-your-first-line-of-defence","3. Make types your first line of defence",[54,1569,1570,1571,1574],{},"I use TypeScript as a ",[66,1572,1573],{},"design tool",", not just a safety net:",[189,1576,1577,1580,1587],{},[192,1578,1579],{},"Define types for API responses and props early.",[192,1581,1582,1583,1586],{},"Model nullable cases explicitly instead of sprinkling ",[563,1584,1585],{},"!"," everywhere.",[192,1588,1589,1590,1593],{},"Prefer ",[563,1591,1592],{},"zod"," or similar runtime validation at boundaries.",[54,1595,1596],{},"This reduces:",[189,1598,1599,1602,1605],{},[192,1600,1601],{},"“undefined is not a function” bugs.",[192,1603,1604],{},"Confusion about what a function expects or returns.",[192,1606,1607],{},"Surprises when backend contracts change.",[54,1609,1610],{},"Strong types are a free specification your future self will thank you for.",[1014,1612],{},[58,1614,1616],{"id":1615},"_4-treat-git-history-as-documentation","4. Treat git history as documentation",[54,1618,1619],{},"My rules:",[189,1621,1622,1625,1628],{},[192,1623,1624],{},"One logical change per commit.",[192,1626,1627],{},"Commit messages describe intent, not implementation.",[192,1629,1630],{},"Branches are small and short-lived.",[54,1632,1309],{},[189,1634,1635,1641,1646,1652],{},[192,1636,1637,1638],{},"✅ ",[563,1639,1640],{},"feat: add RSVP guest limit with validation",[192,1642,1637,1643],{},[563,1644,1645],{},"fix: debounce search to reduce API calls",[192,1647,1648,1649],{},"❌ ",[563,1650,1651],{},"changes",[192,1653,1648,1654],{},[563,1655,1656],{},"fix stuff",[54,1658,1659],{},"Good history lets you:",[189,1661,1662,1665,1668],{},[192,1663,1664],{},"Blame without drama.",[192,1666,1667],{},"Revert safely.",[192,1669,1670],{},"Onboard new people quickly.",[1014,1672],{},[58,1674,1676],{"id":1675},"_5-write-tests-where-they-pay-off-the-most","5. Write tests where they pay off the most",[54,1678,1679],{},"I don’t test everything blindly. I test:",[189,1681,1682,1685,1688],{},[192,1683,1684],{},"Core business rules (money, access control, bookings).",[192,1686,1687],{},"Complex pure functions (formatters, calculators, mappers).",[192,1689,1690],{},"Critical flows (checkout, sign-up, contact).",[54,1692,1693],{},"I prefer:",[189,1695,1696,1699],{},[192,1697,1698],{},"Fast unit tests for logic.",[192,1700,1701],{},"A few end-to-end tests to protect critical journeys.",[54,1703,1704],{},"And I always:",[189,1706,1707,1710],{},[192,1708,1709],{},"Run tests before refactors.",[192,1711,1712],{},"Add tests when fixing bugs to avoid regressions.",[54,1714,1715,1716,1719],{},"The goal is ",[66,1717,1718],{},"confidence",", not 100 % coverage for its own sake.",[1014,1721],{},[58,1723,1725],{"id":1724},"_6-let-automation-enforce-code-style-not-humans","6. Let automation enforce code style, not humans",[54,1727,1728],{},"Style debates waste human energy. Tools don’t argue.",[54,1730,1731],{},"I use:",[189,1733,1734,1737],{},[192,1735,1736],{},"ESLint and formatters to enforce consistency.",[192,1738,1739],{},"Pre-commit hooks or CI checks to block broken code.",[54,1741,1742],{},"This means:",[189,1744,1745,1748],{},[192,1746,1747],{},"Code reviews focus on architecture, UX and performance.",[192,1749,1750],{},"Developers don’t nitpick each other’s spacing or commas.",[54,1752,1753],{},"Once the rules are agreed, the tools do the enforcement.",[1014,1755],{},[58,1757,1759],{"id":1758},"_7-measure-performance-instead-of-guessing","7. Measure performance instead of guessing",[54,1761,1762],{},"Instead of “this feels fast enough”, I:",[189,1764,1765,1768],{},[192,1766,1767],{},"Use Lighthouse and WebPageTest for frontends.",[192,1769,1770],{},"Use logs and tracing for backend endpoints.",[54,1772,1773],{},"On portfolios and landing pages, I care most about:",[189,1775,1776,1779,1782],{},[192,1777,1778],{},"First Contentful Paint.",[192,1780,1781],{},"Largest Contentful Paint.",[192,1783,1784],{},"Interaction to Next Paint.",[54,1786,1787],{},"I optimise:",[189,1789,1790,1793,1796],{},[192,1791,1792],{},"Images first.",[192,1794,1795],{},"JavaScript bundle size second.",[192,1797,1798],{},"Third-party scripts last.",[54,1800,1801],{},"Performance is a feature, not a nice-to-have.",[1014,1803],{},[58,1805,1807],{"id":1806},"_8-design-for-debugging-from-day-one","8. Design for debugging from day one",[54,1809,1810],{},"I ask: “When this breaks in production, how will we know why?”",[54,1812,1813],{},"So I:",[189,1815,1816,1819,1822],{},[192,1817,1818],{},"Attach identifiers to important requests and logs.",[192,1820,1821],{},"Use structured logging, not random console output.",[192,1823,1824],{},"Keep error messages helpful but not sensitive.",[54,1826,1827],{},"This turns “it’s broken” into:",[189,1829,1830],{},[192,1831,1832],{},"“This endpoint is returning a 500 for group X with payload Y.”",[54,1834,1835],{},"It saves hours of guesswork when things inevitably go wrong.",[1014,1837],{},[58,1839,1841],{"id":1840},"_9-leave-the-campsite-cleaner-than-you-found-it","9. Leave the campsite cleaner than you found it",[54,1843,1844],{},"When I touch old code, I try to:",[189,1846,1847,1850,1853],{},[192,1848,1849],{},"Extract one messy block into a small function.",[192,1851,1852],{},"Rename one confusing variable to something clearer.",[192,1854,1855],{},"Add one missing test for a known edge case.",[54,1857,1858],{},"I don’t rewrite everything. I just improve the area I already have open.",[54,1860,1861],{},"Over time, this:",[189,1863,1864,1867,1870],{},[192,1865,1866],{},"Reduces complexity.",[192,1868,1869],{},"Improves morale.",[192,1871,1872],{},"Makes “legacy” code less scary.",[1014,1874],{},[58,1876,1878],{"id":1877},"_10-communicate-clearly-early-and-often","10. Communicate clearly, early and often",[54,1880,1881],{},"The best code can still fail a project if communication is poor.",[54,1883,1884],{},"My habits:",[189,1886,1887,1890,1893],{},[192,1888,1889],{},"Share small updates instead of going silent for days.",[192,1891,1892],{},"Raise risks as soon as I see them, not after a deadline slips.",[192,1894,1895],{},"Translate technical trade-offs into business language.",[54,1897,1309],{},[189,1899,1900,1903],{},[192,1901,1902],{},"“We can hit the deadline if we skip feature X and add it later.”",[192,1904,1905],{},"“This API choice saves us money but adds 80 ms latency—worth it?”",[54,1907,1908],{},"Good developers ship code; great developers build trust.",[1014,1910],{},[58,1912,1413],{"id":1412},[54,1914,1915],{},"These 10 practices are simple, but they compound:",[189,1917,1918,1921,1924],{},[192,1919,1920],{},"Fewer bugs.",[192,1922,1923],{},"Faster onboarding.",[192,1925,1926],{},"Happier users.",[54,1928,1929],{},"If you’re reading this as a potential client or teammate, this is the standard I bring to every project on this portfolio.",{"title":506,"searchDepth":507,"depth":507,"links":1931},[1932,1933,1934,1935,1936,1937,1938,1939,1940,1941,1942,1943],{"id":983,"depth":507,"text":984},{"id":1490,"depth":507,"text":1491},{"id":1524,"depth":507,"text":1525},{"id":1566,"depth":507,"text":1567},{"id":1615,"depth":507,"text":1616},{"id":1675,"depth":507,"text":1676},{"id":1724,"depth":507,"text":1725},{"id":1758,"depth":507,"text":1759},{"id":1806,"depth":507,"text":1807},{"id":1840,"depth":507,"text":1841},{"id":1877,"depth":507,"text":1878},{"id":1412,"depth":507,"text":1413},"https://codebyquan.dev/blog/10-coding-practices-i-follow-every-project","Developer writing clean code and automated tests on dual monitors","2025-02-05T08:00:00.000Z","The non‑negotiable coding habits I use on client and personal projects—testing, git hygiene, documentation and performance.","https://images.pexels.com/photos/3861964/pexels-photo-3861964.jpeg",{},{"title":10,"description":1947},[1952,1953,1954,1456],"Best-Practices","Clean-Code","Testing","fg9zZjO7AjG2tpglR9IZFRLEGNIbJPz0yCJ0hqlXYJ8",{"id":1957,"title":14,"author":1958,"body":1960,"canonical":2387,"coverAlt":2388,"date":2389,"description":2390,"excerpt":36,"extension":523,"featured":38,"image":2391,"meta":2392,"minRead":680,"navigation":38,"path":15,"seo":2393,"stem":16,"tags":2394,"__hash__":2397},"blog/blog/ai-vs-human-developers-collaboration-playbook.md",{"name":45,"username":46,"to":47,"avatar":1959},{"src":49,"alt":45},{"type":51,"value":1961,"toc":2373},[1962,1964,1985,1987,1991,1994,2008,2011,2025,2032,2043,2046,2048,2052,2055,2105,2108,2110,2114,2117,2121,2124,2135,2142,2146,2149,2160,2163,2174,2177,2181,2184,2195,2198,2209,2212,2214,2218,2225,2228,2245,2248,2250,2254,2260,2263,2277,2280,2288,2291,2306,2308,2312,2315,2318,2326,2329,2340,2343,2346,2348,2350,2353,2358,2361,2366],[58,1963,984],{"id":983},[189,1965,1966,1969,1972,1975,1978],{},[192,1967,1968],{},"AI is a power tool, not a replacement for real developers.",[192,1970,1971],{},"You still need taste, architecture skills and ownership—AI can’t do those.",[192,1973,1974],{},"The best results come from turning vague prompts into clear problem statements.",[192,1976,1977],{},"I use AI heavily for exploration, scaffolding and refactors, not for blind copy‑paste.",[192,1979,1980,1981,1984],{},"Portfolios that show ",[66,1982,1983],{},"how"," you use AI will stand out from “prompt engineers”.",[1014,1986],{},[58,1988,1990],{"id":1989},"_1-what-ai-is-actually-good-at-today","1. What AI is actually good at today",[54,1992,1993],{},"Most arguments about “AI vs developers” ignore what AI is truly good at:",[189,1995,1996,1999,2002,2005],{},[192,1997,1998],{},"Pattern matching across thousands of codebases.",[192,2000,2001],{},"Explaining unfamiliar libraries and APIs quickly.",[192,2003,2004],{},"Generating boilerplate and repetitive code safely.",[192,2006,2007],{},"Suggesting edge cases and test scenarios you may miss.",[54,2009,2010],{},"That means AI shines in these workflows:",[189,2012,2013,2016,2019,2022],{},[192,2014,2015],{},"You know what you want, but not the exact syntax.",[192,2017,2018],{},"You’re jumping into a new framework or tool.",[192,2020,2021],{},"You’re refactoring something large but mechanical.",[192,2023,2024],{},"You want a second pair of eyes on complex logic.",[54,2026,2027,2028,2031],{},"It does ",[66,2029,2030],{},"not"," shine when:",[189,2033,2034,2037,2040],{},[192,2035,2036],{},"Requirements are fuzzy and trade-offs are subtle.",[192,2038,2039],{},"Security, privacy or compliance really matter.",[192,2041,2042],{},"The system is highly domain-specific with weird constraints.",[54,2044,2045],{},"That gap—that space where judgment, taste and responsibility live—is where human developers win.",[1014,2047],{},[58,2049,2051],{"id":2050},"_2-where-human-developers-still-win-and-will-keep-winning","2. Where human developers still win (and will keep winning)",[54,2053,2054],{},"There are three skills AI can’t fake today:",[1024,2056,2057,2073,2089],{},[192,2058,2059,2062],{},[66,2060,2061],{},"Owning the problem, not just the code",[189,2063,2064,2067,2070],{},[192,2065,2066],{},"Talking to stakeholders.",[192,2068,2069],{},"Negotiating scope and timelines.",[192,2071,2072],{},"Saying “no” when a feature is a bad idea.",[192,2074,2075,2078],{},[66,2076,2077],{},"Designing systems that survive reality",[189,2079,2080,2083,2086],{},[192,2081,2082],{},"Choosing trade-offs intentionally (speed vs reliability vs cost).",[192,2084,2085],{},"Designing for failure, observability and debugging.",[192,2087,2088],{},"Keeping complexity low enough that your future self doesn’t quit.",[192,2090,2091,2094],{},[66,2092,2093],{},"Caring about the user experience",[189,2095,2096,2099,2102],{},[192,2097,2098],{},"Understanding context: industry, culture, constraints.",[192,2100,2101],{},"Making small UX decisions that AI can’t see from code alone.",[192,2103,2104],{},"Writing content and microcopy that feel human.",[54,2106,2107],{},"AI can help you write code, but it can’t sit in a call with a client, understand the politics of a team, or be accountable when production breaks on a Friday night.",[1014,2109],{},[58,2111,2113],{"id":2112},"_3-my-ai-workflow-on-real-projects","3. My AI workflow on real projects",[54,2115,2116],{},"Here’s how I actually use AI day-to-day as a fullstack developer.",[86,2118,2120],{"id":2119},"a-clarify-the-problem-first","a) Clarify the problem first",[54,2122,2123],{},"Before opening any AI tool, I write a short spec:",[189,2125,2126,2129,2132],{},[192,2127,2128],{},"What is the user trying to do?",[192,2130,2131],{},"Where does this fit in the system?",[192,2133,2134],{},"What are the constraints (performance, security, DX)?",[54,2136,2137,2138,2141],{},"Only then do I ask AI for help, using that spec as context. This turns vague questions into ",[66,2139,2140],{},"sharp prompts","—and the difference in answer quality is huge.",[86,2143,2145],{"id":2144},"b-use-ai-as-a-senior-pair-for-exploration","b) Use AI as a senior “pair” for exploration",[54,2147,2148],{},"I treat AI like a senior dev sitting beside me:",[189,2150,2151,2154,2157],{},[192,2152,2153],{},"“Here’s the shape of the API I want—any obvious pitfalls?”",[192,2155,2156],{},"“Given this Nuxt route structure, where would you put this logic?”",[192,2158,2159],{},"“Can you suggest a more testable way to model this?”",[54,2161,2162],{},"I don’t accept answers blindly. I skim for:",[189,2164,2165,2168,2171],{},[192,2166,2167],{},"Globals, side effects and unnecessary complexity.",[192,2169,2170],{},"Security smells: unsafe eval, missing validation, leaky logs.",[192,2172,2173],{},"Performance issues like N+1 queries or unbounded loops.",[54,2175,2176],{},"If something looks off, I ask follow-up questions or discard the suggestion completely.",[86,2178,2180],{"id":2179},"c-let-ai-write-the-boring-80","c) Let AI write the boring 80 %",[54,2182,2183],{},"For CRUD forms, type definitions, DTOs, mocks and config, I let AI write the first draft:",[189,2185,2186,2189,2192],{},[192,2187,2188],{},"Validated DTOs for backend endpoints.",[192,2190,2191],{},"Boilerplate Vue components with props and emits.",[192,2193,2194],{},"Simple unit test skeletons with realistic test cases.",[54,2196,2197],{},"Then I:",[189,2199,2200,2203,2206],{},[192,2201,2202],{},"Rename everything to fit my naming style.",[192,2204,2205],{},"Remove abstractions I don’t need.",[192,2207,2208],{},"Add comments to edge cases when necessary.",[54,2210,2211],{},"The result: I spend more time on the hard 20 %—architecture, business logic, UX—and less time on typing.",[1014,2213],{},[58,2215,2217],{"id":2216},"_4-how-to-keep-ai-from-making-your-code-worse","4. How to keep AI from making your code worse",[54,2219,2220,2221,2224],{},"AI can easily ",[66,2222,2223],{},"lower"," the quality of a codebase if you don’t manage it.",[54,2226,2227],{},"Here are rules I follow on client and personal projects:",[189,2229,2230,2233,2236,2239,2242],{},[192,2231,2232],{},"Never paste unaudited AI code into security-sensitive areas.",[192,2234,2235],{},"Always run tests and linting after accepting big AI-generated chunks.",[192,2237,2238],{},"Keep PRs small; don’t merge huge AI-generated commits.",[192,2240,2241],{},"Make AI explain the reasoning; if it can’t, don’t ship it.",[192,2243,2244],{},"Prefer patterns that already exist in the codebase over “clever” new ones.",[54,2246,2247],{},"If I wouldn’t accept code from a junior developer without explanation, I don’t accept it from an AI model either.",[1014,2249],{},[58,2251,2253],{"id":2252},"_5-turning-ai-usage-into-a-portfolio-advantage","5. Turning AI usage into a portfolio advantage",[54,2255,2256,2257,201],{},"Most portfolios show code or UI only. Very few show ",[66,2258,2259],{},"how the developer thinks",[54,2261,2262],{},"To stand out, you can:",[189,2264,2265,2268,2271,2274],{},[192,2266,2267],{},"Document where you used AI in a project and why.",[192,2269,2270],{},"Show a “before vs after” refactor that AI helped with.",[192,2272,2273],{},"Include test coverage screenshots to prove you don’t blindly trust AI.",[192,2275,2276],{},"Add a short “AI workflow” section in your README or case study.",[54,2278,2279],{},"For example:",[189,2281,2282,2285],{},[192,2283,2284],{},"“AI generated the initial Prisma schema, but I reworked relationships based on business rules.”",[192,2286,2287],{},"“I used AI to propose test cases for edge scenarios; final suite covers 95 % of branches.”",[54,2289,2290],{},"Hiring managers want to see that you:",[189,2292,2293,2296,2299],{},[192,2294,2295],{},"Understand limitations.",[192,2297,2298],{},"Stay in control of the architecture.",[192,2300,2301,2302,2305],{},"Use AI to move faster ",[66,2303,2304],{},"without"," losing quality.",[1014,2307],{},[58,2309,2311],{"id":2310},"_6-what-this-means-for-your-career-in-the-next-3-years","6. What this means for your career in the next 3 years",[54,2313,2314],{},"In 2025 and beyond, the real split won’t be “AI vs developers”.",[54,2316,2317],{},"It will be:",[189,2319,2320,2323],{},[192,2321,2322],{},"Developers who can clearly define problems, evaluate AI output and ship reliable systems.",[192,2324,2325],{},"Developers who wait for the perfect prompt, ship fragile code and can’t explain their decisions.",[54,2327,2328],{},"The first group will:",[189,2330,2331,2334,2337],{},[192,2332,2333],{},"Ship faster.",[192,2335,2336],{},"Handle more complexity.",[192,2338,2339],{},"Become the people teams rely on when things are unclear.",[54,2341,2342],{},"The second group will feel more and more replaceable.",[54,2344,2345],{},"You get to choose which side you’re on.",[1014,2347],{},[58,2349,1413],{"id":1412},[54,2351,2352],{},"Use AI aggressively where it shines:",[189,2354,2355],{},[192,2356,2357],{},"Exploration, boilerplate, test ideas, refactors.",[54,2359,2360],{},"Protect your edge where it matters:",[189,2362,2363],{},[192,2364,2365],{},"Architecture, communication, trade-offs, ownership.",[54,2367,2368,2369,2372],{},"If you want to work with a developer who does both—writes code ",[66,2370,2371],{},"and"," knows how to drive AI tools—this portfolio is a live example. Let’s build something together.",{"title":506,"searchDepth":507,"depth":507,"links":2374},[2375,2376,2377,2378,2383,2384,2385,2386],{"id":983,"depth":507,"text":984},{"id":1989,"depth":507,"text":1990},{"id":2050,"depth":507,"text":2051},{"id":2112,"depth":507,"text":2113,"children":2379},[2380,2381,2382],{"id":2119,"depth":512,"text":2120},{"id":2144,"depth":512,"text":2145},{"id":2179,"depth":512,"text":2180},{"id":2216,"depth":507,"text":2217},{"id":2252,"depth":507,"text":2253},{"id":2310,"depth":507,"text":2311},{"id":1412,"depth":507,"text":1413},"https://codebyquan.dev/blog/ai-vs-human-developers-collaboration-playbook","Software developer collaborating with an AI assistant in a code editor","2025-02-01T08:00:00.000Z","How I combine AI tools with real engineering judgment to ship faster, safer code—without replacing developers.","https://images.pexels.com/photos/1181671/pexels-photo-1181671.jpeg",{},{"title":14,"description":2390},[2395,2396,1456,1952],"AI","Productivity","xSwu2DoG0Uvbcdgh70RRcwewed1Ri5bqvXBrF_B_MXM",1773445097956]