--- title: Best LogRocket posts — August 2024 | daily.dev description: The most upvoted LogRocket posts from August 2024, curated by the daily.dev community. canonical: https://daily.dev/sources/logrocket/best-of/2024/08 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/logrocket/best-of/2024/08 og:type: website og:site_name: daily.dev og:title: Best LogRocket posts — August 2024 | daily.dev og:description: The most upvoted LogRocket posts from August 2024, 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 LogRocket — August 2024 1. 1 [](https://daily.dev/posts/javascript-design-patterns-guide-vdelaysdv "JavaScript design patterns guide") Article LogRocket · 2y JavaScript design patterns guide Developers use design patterns as reusable solutions to common problems. This guide demonstrates several JavaScript design patterns, including creational (factory and builder), structural (adapter and decorator), and behavioral (chain of responsibility and strategy) patterns. Each pattern is illustrated with practical code examples to aid understanding. 704 6 2. 2 [](https://daily.dev/posts/next-js-view-transitions-api-eaba2t69t "Next.js View Transitions API") Article LogRocket · 2y Next.js View Transitions API User expectations for seamless web application experiences have led to the development of the View Transitions API. This API enhances navigation, providing smooth and fluid transitions between views in both single-page (SPA) and multi-page apps (MPA). Implementing transitions is simplified with the next-view-transitions library, which integrates smoothly with Next.js. The post outlines how to set up a Next.js project, install the library, and build components to showcase transitions, highlighting the ease of use, performance optimization, and consistency of using the library compared to manual implementation. 282 5 3. 3 [](https://daily.dev/posts/creating-3d-effects-in-css-i0ngkbxue "Creating 3D effects in CSS") Article LogRocket · 2y Creating 3D effects in CSS Learn to create 3D effects in CSS by using properties like \`transform\`, \`translate\`, and \`perspective\`. Understand how to simulate depth and height, create reflections and shadows, and animate elements to enhance web design. Experiment with code examples that illustrate how to rotate, translate, and scale elements in a virtual 3D space for interactive and visually compelling pages. 262 7 4. 4 [](https://daily.dev/posts/zustand-adoption-guide-overview-examples-and-alternatives-voblxrpxo "Zustand adoption guide: Overview, examples, and alternatives") Article LogRocket · 2y Zustand adoption guide: Overview, examples, and alternatives State management in dynamic applications is crucial for modern SPAs. Zustand, a lightweight state management tool for React, simplifies state handling and addresses issues found in Redux and MobX. The guide details how to integrate Zustand into a React-based tic-tac-toe game, illustrating its usage and benefits. Zustand uses a central store concept to avoid data inconsistencies and zombie child rendering. It features immutability, selective state subscription, SSR support, and excellent performance due to its simplicity and direct store access design. The post also compares Zustand with Redux and MobX in terms of features, performance, community support, documentation, and learning curve. 140 4 5. 5 [](https://daily.dev/posts/optimizing-css-time-based-animations-with-new-css-functions-er0evq7mp "Optimizing CSS time-based animations with new CSS functions") Article LogRocket · 2y Optimizing CSS time-based animations with new CSS functions Discover how new CSS functions like mod(), round(), and trigonometric functions simplify the creation of time-based animations, offering increased flexibility over traditional keyframes. Understand the advantages, examples, and implementation strategies for utilizing these functions in web development to enhance user experience. Explore comparisons between CSS functions, CSS keyframes, and JavaScript for dynamic animations. 105 1 6. 6 [](https://daily.dev/posts/building-cross-platform-gui-apps-in-rust-using-egui-gozhxtrhy "Building cross-platform GUI apps in Rust using egui") Article LogRocket · 2y Building cross-platform GUI apps in Rust using egui Explore how to build a cross-platform GUI application in Rust using the egui library and eframe framework. The post explains the immediate mode GUI concept, compares it with retained mode, and provides a step-by-step guide to creating a pet management app. It includes instructions for setting up SQLite for data storage and fetching random pet images using APIs. Event-driven architecture is used to handle asynchronous data operations, and the post discusses the benefits and challenges of this approach. 84 1 7. 7 [](https://daily.dev/posts/understanding-optimistic-ui-and-react-s-useoptimistic-hook-zz0ro5nkz "Understanding optimistic UI and React’s useOptimistic Hook") Article LogRocket · 2y Understanding optimistic UI and React’s useOptimistic Hook Optimistic UI updates enhance user experience by immediately reflecting UI changes based on user's actions, assuming background operations will succeed. React’s \`useOptimistic\` Hook facilitates these updates by showing a different state while an asynchronous operation is underway. This approach ensures faster and more responsive interactions, reducing perceived wait times. The Hook assumes the API response will be successful and reverts changes if an error occurs, maintaining a balance between perceived speed and data integrity. 81 1 8. 8 [](https://daily.dev/posts/implement-the-pragmatic-drag-and-drop-library-hu8lmzcmr "Implement the Pragmatic drag and drop library") Article LogRocket · 2y Implement the Pragmatic drag and drop library Drag-and-drop functionality is vital for creating intuitive and interactive user interfaces in web development. The Pragmatic drag and drop library provides a versatile and performance-focused solution leveraging the native HTML Drag and Drop API. Key aspects include making elements draggable, defining drop targets, handling drag-and-drop events, and creating custom drop indicators. The guide includes a step-by-step tutorial for building a Kanban Board application to demonstrate these features. 56 9. 9 [](https://daily.dev/posts/go-long-by-generating-pdfs-in-golang-with-maroto-pgiljsxvk "Go long by generating PDFs in Golang with Maroto") Article LogRocket · 2y Go long by generating PDFs in Golang with Maroto Golang is an efficient language for generating PDFs at scale, thanks to its performance and concurrency features. Maroto is a PDF generation library inspired by Bootstrap’s layout system, making it easy for developers to manage layouts using rows and columns. It supports various components like text, images, QR codes, and barcodes. This guide details how to set up a project with Maroto, create a basic ticket PDF layout, and handle elements such as headers, footers, and dynamic content. 37 10. 10 [](https://daily.dev/posts/svelte-adoption-guide-overview-examples-and-alternatives-s3uurp26l "Svelte adoption guide: Overview, examples, and alternatives") Article LogRocket · 2y Svelte adoption guide: Overview, examples, and alternatives Svelte is a compiler-based frontend framework designed to provide a more streamlined developer experience by producing highly optimized vanilla JavaScript at build time. It simplifies the development process by reducing boilerplate code, offering built-in features like state management and scoped styling, and eliminating virtual DOM overhead. With Svelte, you can build efficient and fast web applications utilizing familiar HTML, CSS, and JavaScript paradigms. 29 1 11. 11 [](https://daily.dev/posts/color-psychology-chart-understanding-color-meanings-and-effects-zorhit1j0 "Color psychology chart: Understanding color meanings and effects") Article LogRocket · 2y Color psychology chart: Understanding color meanings and effects Color psychology, a study of how colors affect mood and behavior, is a powerful tool in marketing, branding, and web design. Different colors evoke different emotions and reactions. For instance, red can invoke action and urgency while blue can induce calmness and security. Brands like Coca-Cola and Facebook use specific colors to align with their brand stories and evoke desired customer reactions. A step-by-step plan for leveraging color psychology in UX design includes learning the basics, picking emotions to evoke, matching colors with branding, ensuring cultural consistency, and creating a cohesive color palette. 30 1 12. 12 [](https://daily.dev/posts/advanced-monorepo-management-with-turborepo-2-0-hk34rk9sj "Advanced monorepo management with Turborepo 2.0") Article LogRocket · 2y Advanced monorepo management with Turborepo 2.0 Turborepo 2.0, a tool developed by Vercel for managing monorepos in JavaScript/TypeScript, introduces several new features to enhance development efficiency. It now allows selective log viewing and interactive task execution via stdin. The updated version also supports parallel task execution with a 'watcher' feature for automatic task re-runs on code changes, and improved caching mechanisms to speed up development. The release is aimed at making monorepo management faster and easier, with strong support for both small and large projects. 28 1 13. 13 [](https://daily.dev/posts/eslint-adoption-guide-overview-examples-and-alternatives-obpyqqwmh "ESLint adoption guide: Overview, examples, and alternatives") Article LogRocket · 2y ESLint adoption guide: Overview, examples, and alternatives ESLint is a highly configurable and extensible JavaScript linter used for static code analysis. It helps improve code quality by enforcing coding standards and detecting potential issues. The latest version (v9.7 as of summer 2024) introduces significant changes, including a new flat config system. ESLint's strength lies in its flexibility, extensive rule set, and plugin support, which help maintain clean and reliable codebases. The guide also covers installation steps, configurations for TypeScript, integration with code editors, and comparisons with alternative tools. 26 2 14. 14 [](https://daily.dev/posts/improve-text-flow-and-balance-with-the-css-text-wrap-property-ewjrwwdfn "Improve text flow and balance with the CSS text-wrap property") Article LogRocket · 2y Improve text flow and balance with the CSS text-wrap property CSS text-wrap property now includes new values like 'balance' and 'pretty' to help improve text legibility and aesthetics automatically. These changes allow for more consistent text formatting across different browsers and responsive layouts. Practical examples and demos show how these new values can be applied to text elements like headlines, block quotes, and body text to create better visual balance without manual intervention. It addresses cross-browser inconsistencies and highlights performance considerations when using these properties. 22 1 15. 15 [](https://daily.dev/posts/fastify-adoption-guide-overview-examples-and-alternatives-w6c5udzx5 "Fastify adoption guide: Overview, examples, and alternatives") Article LogRocket · 2y Fastify adoption guide: Overview, examples, and alternatives Fastify is an efficient, open-source Node.js framework designed for building fast and secure web applications. It features a modular architecture with an easy-to-integrate plugin system, schema-based validation, and full TypeScript support. Fastify is compatible with modern frontend frameworks like React, Vue, and Angular. The guide covers installation steps, basic routing, plugin usage, JWT authentication, schema validation, and error handling. It also compares Fastify with other frameworks like Express.js, Hapi, and Koa, providing insights to help developers choose the right tool for their projects. 19 1 16. 16 [](https://daily.dev/posts/hydration-visualization-in-angular-18-using-debugging-tools-baalddm1y "Hydration visualization in Angular 18 using debugging tools") Article LogRocket · 2y Hydration visualization in Angular 18 using debugging tools Angular 18 introduces hydration error visualization tools that streamline the debugging process by providing real-time insights into hydration status. These tools help identify components that fail to hydrate and offer detailed messages about each failure, improving error-fixing efficiency. Using Angular DevTools, developers can track hydration statuses and diagnose issues to ensure smoother client-side interactivity. Enabling and monitoring hydration in Angular projects is now simpler with this new feature. 19 17. 17 [](https://daily.dev/posts/linting-with-ruff-the-python-linter-built-with-rust-z5f5il9ne "Linting with Ruff: the Python linter built with Rust") Article LogRocket · 2y Linting with Ruff: the Python linter built with Rust Ruff is a highly efficient Python linter and code formatter built with Rust, designed to address the inefficiencies and frustrations of slower linters. It supports over 800 lint rules inspired by other popular linters like Flake8, Pylint, and more. Ruff can be installed via pip, OS package managers, conda, or standalone installers, and can be configured through the pyproject.toml or ruff.toml files. Benchmark comparisons show Ruff outperforming other tools like Flake8, Pylint, and Black in both small and large codebases. Its growing community and adoption by major projects indicate a promising future. 18 1 18. 18 [](https://daily.dev/posts/framer-vs-webflow-for-no-code-website-building-pvnldnmx1 "Framer vs. Webflow for no-code website building") Article LogRocket · 2y Framer vs. Webflow for no-code website building No-code builders are gaining traction due to their ability to speed up the development process. This post compares Framer and Webflow, highlighting Framer's focus on design and rapid prototyping with features like Figma integration, AI text tools, and prebuilt pages. In contrast, Webflow offers extensive plugin support, e-commerce solutions, and client billing, making it ideal for commercial use but with a steeper learning curve and higher cost. Framer is noted for its ease of use for designers and cost-effectiveness, while Webflow excels in advanced possibilities and a strong community support. 18 3 [See all LogRocket archives](/sources/logrocket/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/sources/logrocket/best-of/2024/08#page","url":"https://daily.dev/sources/logrocket/best-of/2024/08","name":"Best LogRocket Posts — August 2024","description":"The most upvoted LogRocket posts from August 2024, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/logrocket/best-of/2024/08#items","numberOfItems":18,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/javascript-design-patterns-guide-vdelaysdv","name":"JavaScript design patterns guide"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/next-js-view-transitions-api-eaba2t69t","name":"Next.js View Transitions API"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/creating-3d-effects-in-css-i0ngkbxue","name":"Creating 3D effects in CSS"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/zustand-adoption-guide-overview-examples-and-alternatives-voblxrpxo","name":"Zustand adoption guide: Overview, examples, and alternatives"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/optimizing-css-time-based-animations-with-new-css-functions-er0evq7mp","name":"Optimizing CSS time-based animations with new CSS functions"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/building-cross-platform-gui-apps-in-rust-using-egui-gozhxtrhy","name":"Building cross-platform GUI apps in Rust using egui"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/understanding-optimistic-ui-and-react-s-useoptimistic-hook-zz0ro5nkz","name":"Understanding optimistic UI and React’s useOptimistic Hook"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/implement-the-pragmatic-drag-and-drop-library-hu8lmzcmr","name":"Implement the Pragmatic drag and drop library"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/go-long-by-generating-pdfs-in-golang-with-maroto-pgiljsxvk","name":"Go long by generating PDFs in Golang with Maroto"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/svelte-adoption-guide-overview-examples-and-alternatives-s3uurp26l","name":"Svelte adoption guide: Overview, examples, and alternatives"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/color-psychology-chart-understanding-color-meanings-and-effects-zorhit1j0","name":"Color psychology chart: Understanding color meanings and effects"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/advanced-monorepo-management-with-turborepo-2-0-hk34rk9sj","name":"Advanced monorepo management with Turborepo 2.0"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/eslint-adoption-guide-overview-examples-and-alternatives-obpyqqwmh","name":"ESLint adoption guide: Overview, examples, and alternatives"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/improve-text-flow-and-balance-with-the-css-text-wrap-property-ewjrwwdfn","name":"Improve text flow and balance with the CSS text-wrap property"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/fastify-adoption-guide-overview-examples-and-alternatives-w6c5udzx5","name":"Fastify adoption guide: Overview, examples, and alternatives"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/hydration-visualization-in-angular-18-using-debugging-tools-baalddm1y","name":"Hydration visualization in Angular 18 using debugging tools"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/linting-with-ruff-the-python-linter-built-with-rust-z5f5il9ne","name":"Linting with Ruff: the Python linter built with Rust"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/framer-vs-webflow-for-no-code-website-building-pvnldnmx1","name":"Framer vs. Webflow for no-code website building"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"LogRocket","item":"https://daily.dev/sources/logrocket"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/logrocket/best-of"},{"@type":"ListItem","position":5,"name":"August 2024"}]}]} ```