--- title: Best Web Development posts — August 2023 | daily.dev description: The most upvoted Web Development posts from August 2023, curated by the daily.dev community. canonical: https://daily.dev/tags/webdev/best-of/2023/08 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/webdev/best-of/2023/08 og:type: website og:site_name: daily.dev og:title: Best Web Development posts — August 2023 | daily.dev og:description: The most upvoted Web Development posts from August 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 — August 2023 1. 1 [](/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 2. 2 [](/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 3. 3 [](/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 4. 4 [](/posts/chrome-debugger-is-easier-to-use-than-you-might-think-nxb619b0u "Chrome Debugger is easier to use than you might think") Article This is Learning · 3y Chrome Debugger is easier to use than you might think Chrome Debugger is easier to use than you might think - DEV Community Please, don't tell me you’re still using to debug your application. If you never used a debugger, imagine being able to run the code line by line, where you can see all values of your variables at any given time. 248 22 5. 5 [](/posts/css-loaders-com-the-biggest-collection-of-loading-animations-more-than-500--clodcli1v "css-loaders.com: The Biggest Collection of Loading Animations (more than 500 🤯)") Article CSS Articles · 3y css-loaders.com: The Biggest Collection of Loading Animations (more than 500 🤯) Css-loaders.com: The Biggest Collection of Loading Animations (more than 500) I collected all my CSS-only loaders into one unique place. Around 580 loaders are made using only one element! 221 7 6. 6 [](/posts/building-a-full-stack-airbnb-clone-with-next-js-tailwind-css-amplication-and-more-zljgwxlf7 "Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and More") Article Hacker Noon · 3y Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and More Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and more. The platform is centered around the concept of a low-code development environment. Amplication is an open-source development tool designed to simplify and expedite the process of building web applications. 221 8 7. 7 [](/posts/getting-started-lightning-css-cgt61gvlr "Getting Started – Lightning CSS") Article Community Picks · 3y Getting Started – Lightning CSS Lightning CSS can be used as a library from JavaScript or Rust. It can also be wrapped as a plugin in other build tools, and built into Parcel out of the box. From Node First, install Lightning CSS using a package manager such as Node First. Once installed, import the module and call one of the Lightning CSS APIs. 159 6 8. 8 [](/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 9. 9 [](/posts/monorepo-explained-l2jrzty90 "Monorepo Explained") Article Community Picks · 3y Monorepo Explained There are many great monorepo tools, built by great teams, with different philosophies. We chose these tools because of their usage or recognition in the Web development community. The tools we'll focus on are: Bazel (by Google), Gradle Build Tool (by Gradle, Inc), Lage (by Microsoft), Lerna. 153 5 10. 10 [](/posts/build-a-drag-and-drop-kanban-board-with-react-typescript-tailwind-dnd-kit-anrmqyogp "Build a drag and drop Kanban Board with React, Typescript, Tailwind, Dnd-Kit") Article ITNEXT · 3y Build a drag and drop Kanban Board with React, Typescript, Tailwind, Dnd-Kit Build a drag and drop Kanban Board with React, Typescript, Tailwind, Dnd-Kit. This project is a great way to practice your React skills and learn some new techniques and libraries. So what are you waiting for? Check out the video below and let me know what you think in the comments. 151 9 11. 11 [](/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 12. 12 [](/posts/learning-web-development-together-with-a-real-project-unypljn35 "Learning Web Development Together with a Real Project") Article This is Learning · 3y Learning Web Development Together with a Real Project The app is currently based on Next.js with TypeScript and Tailwind CSS. We manage some data, specifically from the GitHub APIs using the GraphQL endpoint and React Query. There's a login feature with NextAuth using GitHub as a provider. The project is open to any kind of contribution, from fixing typos to adding new features. 104 13. 13 [](/posts/react-custom-hook-useasync-xm3z5emfo "React Custom Hook: useAsync") Article habr · 3y React Custom Hook: useAsync The useAsync hook takes in a callback function that performs the asynchronous operation and an optional array of dependencies. It returns an object with three properties: loading, error, and value. The hook employs the useState and useEffect hooks to manage the loading state and invoke the memoized callback function when necessary. 84 3 14. 14 [](/posts/mern-stack-crash-course-build-a-book-store-app-fnyhf1ihg "MERN Stack Crash Course – Build a Book Store App") Article freeCodeCamp · 3y MERN Stack Crash Course – Build a Book Store App MERN stack is a set of technologies often used to build full stack web apps. You'll start from scratch and build a complete CRUD application, exploring both backend and frontend development. The course covers an array of topics, including but not limited to: Backend CRUD operations. 79 15. 15 [](/posts/a-quick-module-design-pattern-example-in-javascript-hojwnelz4 "A Quick Module Design Pattern Example in JavaScript") Article Hacker Noon · 3y A Quick Module Design Pattern Example in JavaScript A Quick Module Design Pattern is a way to encapsulate and organize code in a self-containing module that can expose certain functionalities while keeping the rest of the code private. This helps prevent variable and function name clashes, improves code maintainability, and promotes the concept of separation of concerns. 77 4 16. 16 [](/posts/nextjs-data-fetching-strategies-for-server-side-components-zn5tttnmu "NextJS: Data Fetching Strategies for Server Side Components") Article AWS Tip · 3y NextJS: Data Fetching Strategies for Server Side Components NextJS is an extension of ReactJS that provides features like Server Side components, Client and Server Rendering, Data fetching with revalidation and built in optimizations. NextJS gives us freedom to decide if we want a component to be rendered at client or server. 73 3 17. 17 [](/posts/react-custom-hook-usedarkmode-v8zzl6epm "React Custom Hook: useDarkMode") Article habr · 3y React Custom Hook: useDarkMode "UseDarkMode" Hook is one of the many carefully crafted hooks available in the collection of React custom hooks. It combines two other handy hooks and, to provide a seamless dark mode experience. It automatically detects the user's preferred color scheme and persists the dark mode state in the browser's local storage. 72 18. 18 [](/posts/react-custom-hook-useclickoutside-yezh95qls "React Custom Hook: useClickOutside") Article habr · 3y React Custom Hook: useClickOutside The useClickOutside hook is designed to simplify the process of detecting clicks outside a specified component. It listens for click events on the document level, allowing you to trigger a callback function when a click occurs outside the provided component's reference. It works seamlessly with functional components using the useState and useRef hooks. 63 2 19. 19 [](/posts/react-custom-hook-usedebuginformation-1ztlht8nk "React Custom Hook: useDebugInformation") Article habr · 3y React Custom Hook: useDebugInformation React Custom Hook: useDebugInformation is one of the many carefully crafted hooks available in the collection of React custom hooks. The hook tracks the number of renders, changed props, time since the last render, and the timestamp of the last rendering. UseDebugInformation can be applied in various scenarios. 57 20. 20 [](/posts/cyberpunk-music-player-react-web-audio-api-canvas-xk9zdowtj "Cyberpunk Music Player: React, Web Audio API & Canvas") Article Community Picks · 3y Cyberpunk Music Player: React, Web Audio API & Canvas The Cyberpunk Music Player is a Cyberpunk-Themed Music Player with React, Web Audio API, and Canvas. The complete code for this project is also available on my GitHub Prerequisites. You can find and host the audio files with these platforms, but covering that process will complicate this guide. 56 5 21. 21 [](/posts/react-custom-hook-usecookie-nrhqaw9xu "React Custom Hook: useCookie") Article habr · 3y React Custom Hook: useCookie React Custom Hook: useCookie is one of the many carefully crafted hooks available in the collection of React custom hooks. UseCookie allows you to effortlessly handle cookies by providing a concise interface. In scenarios where you need to remove a cookie, the deleteCookie function comes to the rescue. 52 3 22. 22 [](/posts/vscode-for-php-and-laravel-hssav4gt2 "VSCode for PHP and Laravel") Article DEV · 3y VSCode for PHP and Laravel VSCode for PHP and Laravel development is a solid base configuration that can be expanded upon using additional workspace specific configurations. Intelephense is the most important extension to install for PHP support. Phpactor is a PHP Language Server with more features than you can shake a stick atphpactor. 47 6 23. 23 [](/posts/react-custom-hook-usefetch-vpk6tvthm "React Custom Hook: useFetch") Article habr · 3y React Custom Hook: useFetch React Custom Hook: useFetch is one of the many carefully crafted hooks available in the collection of React custom hooks. UseFetch handles the network request, parses the JSON response, and provides the resulting data. The hook also offers flexibility through its customizable options parameter. 41 24. 24 [](/posts/react-custom-hook-usedebounce-atwqbkmz6 "React Custom Hook: useDebounce") Article habr · 3y React Custom Hook: useDebounce The useDebounce hook leverages the useTimeout hook internally to delay the execution of a callback function until a specified delay has passed. The hook takes care of managing the timeout and clears it when necessary, ensuring that the callback is only triggered after the specified delay and with the latest dependencies. 37 25. 25 [](/posts/a-fancy-hover-effect-for-your-avatar-2zdtnomgg "A Fancy Hover Effect For Your Avatar") Article CSS Tip · 3y A Fancy Hover Effect For Your Avatar A Fancy Hover Effect For Your Avatar for your Avatar. Add a nice "Pop out" hover effect to your avatar using a minimalist code. No extra element (only the tag) - No pseudo-element - Less than 20 declarations - Optimized with CSS variables. 35 1 [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/08#page","url":"https://daily.dev/tags/webdev/best-of/2023/08","name":"Best Web Development Posts — August 2023","description":"The most upvoted Web Development posts from August 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/08#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/15-terrible-advice-for-web-developers-hgvsczxvx","name":"15 Terrible Advice for Web Developers"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/mastering-javascript-shorthands-g7k8xsml1","name":"Mastering JavaScript Shorthands"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/how-programmers-flex-on-each-other-oq7jqpblx","name":"How programmers flex on each other"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/chrome-debugger-is-easier-to-use-than-you-might-think-nxb619b0u","name":"Chrome Debugger is easier to use than you might think"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/css-loaders-com-the-biggest-collection-of-loading-animations-more-than-500--clodcli1v","name":"css-loaders.com: The Biggest Collection of Loading Animations (more than 500 🤯)"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/building-a-full-stack-airbnb-clone-with-next-js-tailwind-css-amplication-and-more-zljgwxlf7","name":"Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and More"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/getting-started-lightning-css-cgt61gvlr","name":"Getting Started – Lightning CSS"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/react-custom-hook-usearray-xdnabel6v","name":"React Custom Hook: useArray"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/monorepo-explained-l2jrzty90","name":"Monorepo Explained"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/build-a-drag-and-drop-kanban-board-with-react-typescript-tailwind-dnd-kit-anrmqyogp","name":"Build a drag and drop Kanban Board with React, Typescript, Tailwind, Dnd-Kit"},{"@type":"ListItem","position":11,"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":12,"url":"https://daily.dev/posts/learning-web-development-together-with-a-real-project-unypljn35","name":"Learning Web Development Together with a Real Project"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/react-custom-hook-useasync-xm3z5emfo","name":"React Custom Hook: useAsync"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/mern-stack-crash-course-build-a-book-store-app-fnyhf1ihg","name":"MERN Stack Crash Course – Build a Book Store App"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/a-quick-module-design-pattern-example-in-javascript-hojwnelz4","name":"A Quick Module Design Pattern Example in JavaScript"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/nextjs-data-fetching-strategies-for-server-side-components-zn5tttnmu","name":"NextJS: Data Fetching Strategies for Server Side Components"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/react-custom-hook-usedarkmode-v8zzl6epm","name":"React Custom Hook: useDarkMode"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/react-custom-hook-useclickoutside-yezh95qls","name":"React Custom Hook: useClickOutside"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/react-custom-hook-usedebuginformation-1ztlht8nk","name":"React Custom Hook: useDebugInformation"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/cyberpunk-music-player-react-web-audio-api-canvas-xk9zdowtj","name":"Cyberpunk Music Player: React, Web Audio API & Canvas"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/react-custom-hook-usecookie-nrhqaw9xu","name":"React Custom Hook: useCookie"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/vscode-for-php-and-laravel-hssav4gt2","name":"VSCode for PHP and Laravel"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/react-custom-hook-usefetch-vpk6tvthm","name":"React Custom Hook: useFetch"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/react-custom-hook-usedebounce-atwqbkmz6","name":"React Custom Hook: useDebounce"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/a-fancy-hover-effect-for-your-avatar-2zdtnomgg","name":"A Fancy Hover Effect For Your Avatar"}]},{"@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":"August 2023"}]}]} ```