--- title: Best Frontend Development posts of 2023 | daily.dev description: The most upvoted Frontend Development posts of 2023, curated by the daily.dev community. canonical: https://daily.dev/tags/frontend/best-of/2023 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/frontend/best-of/2023 og:type: website og:site_name: daily.dev og:title: Best Frontend Development posts of 2023 | daily.dev og:description: The most upvoted Frontend Development posts of 2023, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of Frontend Development — 2023 1. 1 [](/posts/frontend-developer-roadmap-3yxhfdqd6 "Frontend Developer Roadmap") Article Community Picks · 3y Frontend Developer Roadmap Front-end development is the development of visual and interactive elements of a website that users interact with directly. It's a combination of HTML, CSS and JavaScript, where HTML provides the structure, CSS the styling and layout, and JavaScript the dynamic behaviour and interactivity. 589 72 2. 2 [](/posts/an-interactive-guide-to-css-grid-qaklckagh "An Interactive Guide to CSS Grid") Article Josh W Comeau · 3y An Interactive Guide to CSS Grid Learn about the fundamentals of CSS Grid, including how it works and how it can be used to create complex layouts. 544 10 3. 3 [](/posts/15-terrible-advice-for-web-developers-hgvsczxvx "15 Terrible Advice for Web Developers") Article Medium · 3y 15 Terrible Advice for Web Developers Fotis Adamakis came up with 15 terrible advice for Web Developers. The advice is full of useful articles and great advice to create robust and maintainable applications. But what if you don't like your colleagues and want to ruin their day? 451 50 4. 4 [](/posts/html-can-do-this-part-1-bboctxbfd "HTML can do this? Part 1") Article DEV · 3y HTML can do this? Part 1 Discover some cool things that HTML can do, including creating open/close widgets, linking to email addresses and telephone numbers, using autocomplete in a list, and modifying text directly. 451 14 5. 5 [](/posts/fetch-api-do-you-really-know-how-to-handle-errors--4o6kwel5d "Fetch API, do you really know how to handle errors?") Article DEV · 3y Fetch API, do you really know how to handle errors? Learn how to handle errors when using the Fetch API and understand the best practices for error handling. Discover different approaches, such as using try/catch and checking the response status, and how to combine them for better error handling. 415 18 6. 6 [](/posts/a-front-end-application-folder-structure-that-makes-sense-x72onqaat "A Front-End Application Folder Structure that Makes Sense") Article Medium · 3y A Front-End Application Folder Structure that Makes Sense The goal is to apply some kind of modularisation that will make the codebase easier to understand by setting boundaries between features and minimizing code coupling and side effects. By default when scaffolding a new project using one of the popular front-end frameworks the component structure is flat and follows no hierarchy whatsoever. 331 20 7. 7 [](/posts/how-to-write-good-documentation-with-docsify-u9fp7brm1 "How to Write Good Documentation with Docsify") Article freeCodeCamp · 3y How to Write Good Documentation with Docsify Documentation is critical to a successful product and can be challenging to create. Docsify is a powerful tool that helps write documentation without needing extensive technical knowledge. 329 15 8. 8 [](/posts/6-low-code-tools-that-will-make-you-a-better-frontend-developer-o4ajsnl57 "6 Low-Code Tools That Will Make You a Better Frontend Developer") Article Permit.io · 3y 6 Low-Code Tools That Will Make You a Better Frontend Developer A developer is measured by their ability to deliver product features in less time while maintaining high code quality. Striking this balance has become more achievable today, thanks to advancements in languages, platforms, CI/CD automation tools, and testing methodologies. We'll explore six low-code tools that can help you become a better frontend developer. 271 22 9. 9 [](/posts/next-js-14-layouts-vs-templates-msqo4eh1r "Next.js 14: Layouts vs Templates") Article builder.io · 3y Next.js 14: Layouts vs Templates Next.js 14 introduced layouts and templates for building UI in web applications. Layouts act as persistent UI shells that wrap around pages, while templates remount with each page transition. Layouts ensure consistency, maintain state, and boost performance, while templates provide isolation, behavioral flexibility, and the ability to alter default behaviors. Choosing between layouts and templates depends on the specific needs of each page and the desired balance between user experience and performance. 248 5 10. 10 [](/posts/vite---next-generation-frontend-tooling-k7cpmnx91 "Vite - Next Generation Frontend Tooling") Article Product Hunt · 3y Vite - Next Generation Frontend Tooling Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. A build command that bundles your code, pre-configured to output highly optimized static assets. A dev server that provides rich feature enhancements. 243 9 11. 11 [](/posts/new-frontend-framework-again--xdr9ekfrq "New frontend framework, again?!") Article ShiftMag - Insightful Engineering Content · 3y New frontend framework, again?! Explore the pros and cons of front-end frameworks dynamism, the potential pitfalls of blindly following trends, and the importance of building a solid foundation in web development. 213 17 12. 12 [](/posts/astro-4-0-mbyihcus8 "Astro 4.0") Article Astro · 3y Astro 4.0 Astro 4.0 introduces new APIs, faster builds, redesign documentation, and a unique new development tool called the Astro Dev Toolbar. It also includes features like internationalization routing, incremental content caching, and new view transition APIs. 191 3 13. 13 [](/posts/send-large-files-from-frontend-to-the-backend-waethotjq "Send large files from frontend to the backend") Article Medium · 4y Send large files from frontend to the backend Learn how to send large files from frontend to backend using FileReader in JavaScript. Split the file into small chunks and stream them to the backend. Send the file name as a query parameter for unique identification. 187 9 14. 14 [](/posts/full-stack-engineer-career-guide-m0b42nnwr "Full Stack Engineer – Career Guide") Article freeCodeCamp · 3y Full Stack Engineer – Career Guide Full Stack engineering roles have been growing in popularity over the last decade. But what exactly are full-stack engineers? What do they do on a day-to-day basis? And how can you become a full- Stack engineer yourself? In this article, I will go over the definition of full- stack engineering. 186 2 15. 15 [](/posts/why-tailwind-is-better-ceqlgbmzz "Why Tailwind is better") Article Towards Dev · 4y Why Tailwind is better Tailwind CSS is a utility-first CSS framework that offers flexibility and allows for easy customization. It reduces the need for naming classes and simplifies the implementation of page designs. It also offers the advantage of automatic purging of unused classes and supports reusability of styles. 173 39 16. 16 [](/posts/web-development-stacks-in-2023-software-trends-qextnj3wc "Web development stacks in 2023 – software trends") Article The Software House · 3y Web development stacks in 2023 – software trends Web development stack is a set of tools typically used in tandem to develop web apps. A highly specialized web stack can exist within the constraints of frontend or backend development. The most important choice is the one concerning your full development stack. Full web development stacks are abbreviated based on the technologies that comprise them. 168 11 17. 17 [](/posts/the-roadmap-to-web-dev-mastery-best-resources--yfvsltyo0 "The Roadmap to Web Dev Mastery (Best Resources)") Article DEV · 3y The Roadmap to Web Dev Mastery (Best Resources) Learn about the complexities of today's web development landscape, including frameworks and libraries. Acquire skills for free through resources and avoid critical mistakes. Grasp the workings of a website, delve into front-end mastery with HTML, CSS, and JavaScript, optimize workflow with JavaScript frameworks, build a portfolio, and explore back-end mastery. Bright Data provides a valuable tool for accessing web data. 158 4 18. 18 [](/posts/react-custom-hook-usearray-xdnabel6v "React Custom Hook: useArray") Article habr · 3y React Custom Hook: useArray "useArray" hook is one of the many carefully crafted hooks available in the collection of React custom hooks. The useArray hook uses the useState hook from React to manage the array state. The advantages of using this custom hook are twofold: it simplifies the management of array states and provides a cleaner and more readable code structure. 153 10 19. 19 [](/posts/html-first-nzhd2hxvo "HTML First") Article Hacker News · 3y HTML First HTML First is a set of principles that aims to make building web software easier, faster, more inclusive, and more maintainable by leveraging the default capabilities of modern web browsers, the simplicity of HTML's attribute syntax, and the web's ViewSource affordance. 144 9 20. 20 [](/posts/frontend-development-in-2024-crafting-a-dynamic-skillset-for-success-onvolz1mp "Frontend Development in 2024: Crafting a Dynamic Skillset for Success") Article DEV · 3y Frontend Development in 2024: Crafting a Dynamic Skillset for Success Explore the essential skills and technologies shaping the frontend realm in 2024\. Master HTML, CSS, and JavaScript, embrace React and state management libraries, optimize web performance, understand backend environments, and prioritize Core Web Vitals. Continuous learning is crucial. 141 2 21. 21 [](/posts/9-common-css-mistakes-we-make-07yr6sm2s "9 Common CSS Mistakes We Make") Article asayer · 3y 9 Common CSS Mistakes We Make Learn about common CSS mistakes and their solutions, including overusing !important, using absolute units instead of relative units, using inline style in HTML, ignoring browser compatibility, using color names instead of hex codes, and more. 137 1 22. 22 [](/posts/refine-new---introducing-the-fastest-way-to-create-react-apps-ovfcgubvu "⚡refine.new - Introducing the Fastest Way to Create React Apps") Article Community Picks · 3y ⚡refine.new - Introducing the Fastest Way to Create React Apps Discover how refine.new is transforming the way developers create React apps with its fast and easy-to-use browser tool. Learn about the benefits of using refine and refine.new, including time-saving, high-quality code, enterprise-grade applications, and open-source availability. 138 9 23. 23 [](/posts/frontend-devs-what-are-the-favorite-tools-from-your-daily-workflow--qcxi3cgx8 "Frontend Devs: What are the favorite tools from your daily workflow?") Article DEV · 3y Frontend Devs: What are the favorite tools from your daily workflow? Frontend Devs: What are the favorite tools from your daily workflow? I am curious to hear your answers. It could be anything a Chrome extension, VS Code Extension, maybe some AI Code writer, whatever you can't live without. 124 6 24. 24 [](/posts/announcing-tanstack-query-v5-nmuggj4cd "Announcing TanStack Query v5") Article Community Picks · 3y Announcing TanStack Query v5 TanStack Query v5 is released with new features, breaking changes, and improved APIs. It introduces a simplified way to perform optimistic updates, introduces suspense support, offers improved server-side rendering with Next.js, and provides better options for query definitions and persistence. 123 2 25. 25 [](/posts/nuejs-nuejs-build-user-interfaces-with-cleaner-code-alternative-to-react-vue-and-svelte-eic7ellxu "nuejs/nuejs: Build user interfaces with cleaner code. Alternative to React, Vue, and Svelte") Article Pointer · 3y nuejs/nuejs: Build user interfaces with cleaner code. Alternative to React, Vue, and Svelte Nue JS is a small JavaScript library for building web interfaces with cleaner code. It offers a minimalist approach and easy-to-understand code, making it easier to scale. Nue supports server-side rendering and can be used for UI library development, progressive enhancement, static website generators, and single-page applications. 123 6 [See all Frontend Development archives](/tags/frontend/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/frontend/best-of/2023#page","url":"https://daily.dev/tags/frontend/best-of/2023","name":"Best Frontend Development Posts of 2023","description":"The most upvoted Frontend Development posts of 2023, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/frontend/best-of/2023#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/frontend-developer-roadmap-3yxhfdqd6","name":"Frontend Developer Roadmap"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/an-interactive-guide-to-css-grid-qaklckagh","name":"An Interactive Guide to CSS Grid"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/15-terrible-advice-for-web-developers-hgvsczxvx","name":"15 Terrible Advice for Web Developers"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/html-can-do-this-part-1-bboctxbfd","name":"HTML can do this? Part 1"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/fetch-api-do-you-really-know-how-to-handle-errors--4o6kwel5d","name":"Fetch API, do you really know how to handle errors?"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/a-front-end-application-folder-structure-that-makes-sense-x72onqaat","name":"A Front-End Application Folder Structure that Makes Sense"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/how-to-write-good-documentation-with-docsify-u9fp7brm1","name":"How to Write Good Documentation with Docsify"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/6-low-code-tools-that-will-make-you-a-better-frontend-developer-o4ajsnl57","name":"6 Low-Code Tools That Will Make You a Better Frontend Developer"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/next-js-14-layouts-vs-templates-msqo4eh1r","name":"Next.js 14: Layouts vs Templates"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/vite---next-generation-frontend-tooling-k7cpmnx91","name":"Vite - Next Generation Frontend Tooling"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/new-frontend-framework-again--xdr9ekfrq","name":"New frontend framework, again?!"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/astro-4-0-mbyihcus8","name":"Astro 4.0"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/send-large-files-from-frontend-to-the-backend-waethotjq","name":"Send large files from frontend to the backend"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/full-stack-engineer-career-guide-m0b42nnwr","name":"Full Stack Engineer – Career Guide"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/why-tailwind-is-better-ceqlgbmzz","name":"Why Tailwind is better"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/web-development-stacks-in-2023-software-trends-qextnj3wc","name":"Web development stacks in 2023 – software trends"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/the-roadmap-to-web-dev-mastery-best-resources--yfvsltyo0","name":"The Roadmap to Web Dev Mastery (Best Resources)"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/react-custom-hook-usearray-xdnabel6v","name":"React Custom Hook: useArray"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/html-first-nzhd2hxvo","name":"HTML First"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/frontend-development-in-2024-crafting-a-dynamic-skillset-for-success-onvolz1mp","name":"Frontend Development in 2024: Crafting a Dynamic Skillset for Success"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/9-common-css-mistakes-we-make-07yr6sm2s","name":"9 Common CSS Mistakes We Make"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/refine-new---introducing-the-fastest-way-to-create-react-apps-ovfcgubvu","name":"⚡refine.new - Introducing the Fastest Way to Create React Apps"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/frontend-devs-what-are-the-favorite-tools-from-your-daily-workflow--qcxi3cgx8","name":"Frontend Devs: What are the favorite tools from your daily workflow?"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/announcing-tanstack-query-v5-nmuggj4cd","name":"Announcing TanStack Query v5"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/nuejs-nuejs-build-user-interfaces-with-cleaner-code-alternative-to-react-vue-and-svelte-eic7ellxu","name":"nuejs/nuejs: Build user interfaces with cleaner code. Alternative to React, Vue, and Svelte"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"Frontend Development","item":"https://daily.dev/tags/frontend"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/frontend/best-of"},{"@type":"ListItem","position":5,"name":"2023"}]}]} ```