--- title: Best Web Development posts of 2023 | daily.dev description: The most upvoted Web Development posts of 2023, curated by the daily.dev community. canonical: https://daily.dev/tags/webdev/best-of/2023 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/webdev/best-of/2023 og:type: website og:site_name: daily.dev og:title: Best Web Development posts of 2023 | daily.dev og:description: The most upvoted Web 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 Web Development — 2023 1. 1 [](/posts/sharing-a-state-between-windows-without-a-serve-nrutfuxaj "Sharing a state between windows without a serve") Article DEV · 3y Sharing a state between windows without a serve Learn how to share a state between multiple windows without a server by using Local Storage and Shared Workers. Understand the concept of Shared Workers and their role in communication between instances of the same script. 1.3K 41 2. 2 [](/posts/a-programmer-presents-a-mind-blowing-multi-window-adaptive-experience-oklqxunjd "A Programmer Presents a Mind-Blowing Multi-Window Adaptive Experience") Article 80 LEVEL · 3y A Programmer Presents a Mind-Blowing Multi-Window Adaptive Experience A programmer has developed a setup that allows synchronization of a 3D scene across multiple browser windows. It uses Three.js and localStorage and is designed for developers interested in advanced web graphics and window management techniques. 655 46 3. 3 [](/posts/iconbuddy-100k-open-source-icons-pozwwuwz1 "Iconbuddy — 100K+ open source icons") Article Pointer · 3y Iconbuddy — 100K+ open source icons Iconbuddy - 100K+ open source icons Iconbuddy Download, Customize, Edit and Personalize. We're shipping things fast af! We're soon launching a powerfulapi, sign up to keep updated. Contact us or follow us on us on Twitter. 635 44 4. 4 [](/posts/css-trick-transition-from-height-0-to-auto--wwxc8nnwz "🧙‍♂️ CSS trick: transition from height 0 to auto!") Article Community Picks · 3y 🧙‍♂️ CSS trick: transition from height 0 to auto! Learn how to transition from height 0 to auto in CSS using CSS Grid. Avoid fixed heights and use a neat trick with grid-template-rows. 573 26 5. 5 [](/posts/50-chatgpt-prompts-for-web-developers-px9aba8cc "50+ ChatGPT Prompts for Web Developers") Article Builder.io · 3y 50+ ChatGPT Prompts for Web Developers ChatGPT can generate code for a variety of web development tasks. It can help you generate semantic HTML and CSS code, JavaScript functions, and even database queries. With ChatGPT, you can identify code smells and security vulnerabilities in your code to make it more efficient and secure. 550 35 6. 6 [](/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 7. 7 [](/posts/writing-clean-code-best-practices-and-principles-2iykukjhq "Writing Clean Code: Best Practices and Principles") Article DEV · 3y Writing Clean Code: Best Practices and Principles Clean code is code that is easy to read, easy to understand, and easy to modify. Clean code follows a set of conventions and best practices that make it more consistent, making it easier for multiple developers to work on the same project seamlessly. Code that is difficult to understand is more prone to errors during modifications or enhancements. 505 27 8. 8 [](/posts/how-to-become-a-10x-dev-6z5terkqv "How to Become a 10x Dev") Article DEV · 3y How to Become a 10x Dev Learn how to become a 10x developer by automating repetitive tasks, mastering keyboard shortcuts, avoiding over-engineering, utilizing version control workflow, leveraging existing components and libraries, embracing HTML Emmet for rapid prototyping, and utilizing AI assistance and VS Code extensions. 476 25 9. 9 [](/posts/vite-5-0-is-out--mt2mszfah "Vite 5.0 is out!") Article Community Picks · 3y Vite 5.0 is out! Vite 5.0 has been released, bringing new features and improvements to the popular JavaScript build tool. It now uses Rollup 4 for improved build performance and introduces server.warmup to improve startup time. Vite no longer supports older versions of Node.js, requiring version 18 or higher. Check out the Migration Guide for a smooth upgrade process. 476 22 10. 10 [](/posts/js-design-patterns-a-comprehensive-guide-dpzxwdek4 "JS Design Patterns: A Comprehensive Guide") Article Community Picks · 3y JS Design Patterns: A Comprehensive Guide This post explores a range of essential design patterns in JavaScript, encompassing creational, structural, and behavioral patterns. By leveraging these design patterns, JavaScript developers can improve code reusability, maintainability, and overall system performance. 464 8 11. 11 [](/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 12. 12 [](/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 13. 13 [](/posts/css-tips-for-better-web-development-tbmegdu5s "CSS Tips for Better Web Development") Article Builder.io · 4y CSS Tips for Better Web Development Explore popular and unique CSS tricks and tips to make your website stand out, including creating smooth snapping product carousels, implementing sticky headers and footers, and using CSS variables for complex animations. 448 36 14. 14 [](/posts/3d-in-css-u28k7pkpd "3D in CSS") Article Community Picks · 3y 3D in CSS Learn how to use 3D effects in CSS to create depth and perspective in web design. The 'perspective' property enables a 3D space for child elements, while 'translate3d' and 'rotate3d' are used to move and rotate elements in the 3D space. Using 3D effects can provide more screen real estate and enhance user experience. 443 23 15. 15 [](/posts/the-valley-of-code---your-web-development-manual-uobi7zuvr "The Valley of Code - Your web development manual") Article Product Hunt · 3y The Valley of Code - Your web development manual The Valley of Code is a web development manual with big plans for the future. The author welcomes feedback and suggestions. 428 11 16. 16 [](/posts/mastering-javascript-shorthands-g7k8xsml1 "Mastering JavaScript Shorthands") Article Hacker Noon · 3y Mastering JavaScript Shorthands We'll explore the art of JavaScript shorthands - nifty techniques that make your code more concise and elegant. We'll dive into real use case examples in both vanilla JavaScript and shorthand form. The Ternary Operator: Conditional Assignment Use Case. 418 39 17. 17 [](/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 18. 18 [](/posts/daisyui-tailwind-css-components-version-4-update-is-here--2inwzemtw "daisyUI — Tailwind CSS Components ( version 4 update is here )") Article Community Picks · 3y daisyUI — Tailwind CSS Components ( version 4 update is here ) daisyUI is a plugin for Tailwind CSS that adds component class names for common UI elements, reducing the need for writing utility class names. It also offers customizable color names and a theme generator. With daisyUI, developers can create beautiful websites faster and with less code. 408 19 19. 19 [](/posts/javascript-one-liners-to-use-in-every-project-kxq3w4e2p "JavaScript One-Liners to Use in Every Project") Article freeCodeCamp · 4y JavaScript One-Liners to Use in Every Project Learn essential one-liners in JavaScript for tasks like capitalizing text, calculating percent, getting a random element, removing duplicates, sorting elements, checking equality, counting occurrences, waiting for a certain time, plucking property from an array of objects, and inserting an element at a certain position. 407 22 20. 20 [](/posts/i-bet-you-don-t-use-these-javascript-tricks-and-practices-4rfeklnkp "I Bet You Don’t Use These JavaScript Tricks and Practices") Article JavaScript in Plain English · 3y I Bet You Don’t Use These JavaScript Tricks and Practices I Bet You Don’t Use These JavaScript Tricks and Practices. Using FlatMap Flat Map in javascript is a great technique which you can learn here. Not using native Javascript classes enough Javascript comes pack with native javascript classes that can help you create/instantiate things like URL, Headers and Headers. 395 12 21. 21 [](/posts/use-notion-as-a-database-for-your-next-js-blog-0wpk1akhh "Use Notion as a database for your Next.JS Blog") Article DEV · 3y Use Notion as a database for your Next.JS Blog Learn how to use Notion as a database for your Next.JS Blog. Create a Notion Database, get a Notion Token, set up the project, and create the Post Page. Render the content of a Notion page in a Next.JS Blog. 378 25 22. 22 [](/posts/patterns-dev-resources-wrjzj5ycd "Patterns.dev ⏐ Resources") Article Community Picks · 4y Patterns.dev ⏐ Resources Learn more about the next book on building large-scale JavaScript web apps with React. Explore community resources on patterns for React, Angular, Vue, and TypeScript, including curated lists of recommended talks and courses. 375 11 23. 23 [](/posts/svg-tutorial-6zkocwjmr "SVG Tutorial") Article Hacker News · 3y SVG Tutorial Learn to code SVG images step by step. Topics include drawing basic shapes, using clip-path, and creating background patterns with SVG and CSS. 370 17 24. 24 [](/posts/how-programmers-flex-on-each-other-oq7jqpblx "How programmers flex on each other") Article Community Picks · 3y How programmers flex on each other 344 27 25. 25 [](/posts/i-quit-google-chrome-after-15-years-here-s-where-i-ended-up-and-why-wwiihx9lv "I quit Google Chrome after 15 years: Here’s where I ended up and why") Article Community Picks · 3y I quit Google Chrome after 15 years: Here’s where I ended up and why Laptop Mag: I quit Google Chrome after 15 years and decided it was time to take a break from Google Chrome. Chrome is impressively intuitive and well laid out — something that not every browser can wear as a badge of pride. The last week and change have been an eye-opener of sorts. 326 65 [See all Web Development archives](/tags/webdev/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/webdev/best-of/2023#page","url":"https://daily.dev/tags/webdev/best-of/2023","name":"Best Web Development Posts of 2023","description":"The most upvoted Web Development posts of 2023, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/webdev/best-of/2023#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/sharing-a-state-between-windows-without-a-serve-nrutfuxaj","name":"Sharing a state between windows without a serve"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/a-programmer-presents-a-mind-blowing-multi-window-adaptive-experience-oklqxunjd","name":"A Programmer Presents a Mind-Blowing Multi-Window Adaptive Experience"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/iconbuddy-100k-open-source-icons-pozwwuwz1","name":"Iconbuddy — 100K+ open source icons"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/css-trick-transition-from-height-0-to-auto--wwxc8nnwz","name":"🧙‍♂️ CSS trick: transition from height 0 to auto!"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/50-chatgpt-prompts-for-web-developers-px9aba8cc","name":"50+ ChatGPT Prompts for Web Developers"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/an-interactive-guide-to-css-grid-qaklckagh","name":"An Interactive Guide to CSS Grid"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/writing-clean-code-best-practices-and-principles-2iykukjhq","name":"Writing Clean Code: Best Practices and Principles"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/how-to-become-a-10x-dev-6z5terkqv","name":"How to Become a 10x Dev"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/vite-5-0-is-out--mt2mszfah","name":"Vite 5.0 is out!"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/js-design-patterns-a-comprehensive-guide-dpzxwdek4","name":"JS Design Patterns: A Comprehensive Guide"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/15-terrible-advice-for-web-developers-hgvsczxvx","name":"15 Terrible Advice for Web Developers"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/html-can-do-this-part-1-bboctxbfd","name":"HTML can do this? Part 1"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/css-tips-for-better-web-development-tbmegdu5s","name":"CSS Tips for Better Web Development"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/3d-in-css-u28k7pkpd","name":"3D in CSS"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/the-valley-of-code---your-web-development-manual-uobi7zuvr","name":"The Valley of Code - Your web development manual"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/mastering-javascript-shorthands-g7k8xsml1","name":"Mastering JavaScript Shorthands"},{"@type":"ListItem","position":17,"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":18,"url":"https://daily.dev/posts/daisyui-tailwind-css-components-version-4-update-is-here--2inwzemtw","name":"daisyUI — Tailwind CSS Components ( version 4 update is here )"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/javascript-one-liners-to-use-in-every-project-kxq3w4e2p","name":"JavaScript One-Liners to Use in Every Project"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/i-bet-you-don-t-use-these-javascript-tricks-and-practices-4rfeklnkp","name":"I Bet You Don’t Use These JavaScript Tricks and Practices"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/use-notion-as-a-database-for-your-next-js-blog-0wpk1akhh","name":"Use Notion as a database for your Next.JS Blog"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/patterns-dev-resources-wrjzj5ycd","name":"Patterns.dev ⏐ Resources"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/svg-tutorial-6zkocwjmr","name":"SVG Tutorial"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/how-programmers-flex-on-each-other-oq7jqpblx","name":"How programmers flex on each other"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/i-quit-google-chrome-after-15-years-here-s-where-i-ended-up-and-why-wwiihx9lv","name":"I quit Google Chrome after 15 years: Here’s where I ended up and why"}]},{"@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":"Web Development","item":"https://daily.dev/tags/webdev"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/webdev/best-of"},{"@type":"ListItem","position":5,"name":"2023"}]}]} ```