--- title: Best asayer posts — May 2024 | daily.dev description: The most upvoted asayer posts from May 2024, curated by the daily.dev community. canonical: https://daily.dev/sources/asayer/best-of/2024/05 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/asayer/best-of/2024/05 og:type: website og:site_name: daily.dev og:title: Best asayer posts — May 2024 | daily.dev og:description: The most upvoted asayer posts from May 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 asayer — May 2024 1. 1 [](https://daily.dev/posts/using-the-upcoming-css-when-else-rules-meqd3cehz "Using the upcoming CSS when/else rules") Article asayer · 2y Using the upcoming CSS when/else rules Learn about the upcoming CSS when/else rules which provide a mechanism for applying styles selectively based on specific conditions. These rules are still in the proposal stage and not yet implemented in browsers. The @when rule allows for selective styling, dynamic adaptability, specific conditions, user interaction, state and event styling, customization, and enhanced usability and aesthetics. The @when/@else rules simplify conditional styling and improve readability. They can be implemented by checking browser support, writing base CSS, defining conditions, using @when to apply conditional styles, and using @else for alternative styles. Some advanced techniques include combining with CSS preprocessors and using dynamic styling based on conditions. Best practices include planning CSS, using flexible units, maintaining consistency, and documenting code. Debugging techniques involve using browser DevTools, isolating rules, and eliminating possible causes of issues. 241 8 2. 2 [](https://daily.dev/posts/understand-react-hooks-with-these-visual-guide-cheatsheets-q7yu1c2c4 "Understand React Hooks with these Visual Guide Cheatsheets") Article asayer · 2y Understand React Hooks with these Visual Guide Cheatsheets Learn about React hooks through visual cheatsheets. Understand the core hooks like useState, useEffect, useReducer, useContext, useMemo, useCallback, and useRef. Also, explore additional hooks like useDeferredValue, useLayoutEffect, useDebugValue, and useId. Improve your React development with these powerful tools. 198 5 3. 3 [](https://daily.dev/posts/understanding-the-holy-grail-layout-pattern-in-css-xhjkht6oi "Understanding the Holy Grail Layout Pattern in CSS") Article asayer · 2y Understanding the Holy Grail Layout Pattern in CSS Learn about the Holy Grail layout pattern in CSS, its advantages in web design, and common use cases. See how it differs from other layout patterns and how to implement it using CSS Grid. 170 7 4. 4 [](https://daily.dev/posts/how-to-generate-pdfs-in-a-react-app-ysbnvqiyv "How to Generate PDFs in a React App") Article asayer · 2y How to Generate PDFs in a React App Learn how to generate PDFs in a React app using the React-pdf library. Discover the use cases, features, and installation process of React-pdf. 142 2 5. 5 [](https://daily.dev/posts/bento-box-a-refreshing-layout-approach-for-websites-ehlcvkvaa "Bento Box: A Refreshing Layout Approach for Websites") Article asayer · 2y Bento Box: A Refreshing Layout Approach for Websites Discover Bento Box Design, a refreshing layout approach for websites that brings order, clarity, and fun to website design. Improve user experience, increase engagement, and create an adaptable design. Learn about the origins, core principles, and examples of Bento Box Layouts. Explore case studies and a practical guide for implementing Bento Box Design on your own website. 138 5 6. 6 [](https://daily.dev/posts/advanced-animation-techniques-with-anime-js-kysg4aqnc "Advanced Animation Techniques with Anime.js") Article asayer · 2y Advanced Animation Techniques with Anime.js Learn about advanced animation techniques using the anime.js library. Discover common animations on modern websites, the importance of mastering advanced animation in web development, and explore keyframe animations, easing functions, staggering animations, path animations, and SVG morphing animations. 71 5 7. 7 [](https://daily.dev/posts/exploring-the-creative-potential-of-atropos-js-for-web-design-d7nhp1z8n "Exploring the Creative Potential of Atropos.js for Web Design") Article asayer · 2y Exploring the Creative Potential of Atropos.js for Web Design Explore the creative potential of Atropos.js in web design. Atropos.js is a versatile JavaScript library that enhances web design with scroll-based animations, parallax effects, and seamless integration with popular frameworks. It facilitates the creation of unique and memorable user experiences, improves website performance, and offers design flexibility. Learn how to build a scroll-based gallery using Atropos.js, Axios, and React. 68 1 8. 8 [](https://daily.dev/posts/using-trpc-for-backend-requests-with-react-nkzm1gbyt "Using tRPC for Backend Requests with React") Article asayer · 2y Using tRPC for Backend Requests with React This post explores the integration of tRPC into React applications, emphasizing its benefits in simplifying API communication and enhancing developer productivity. Topics covered include the workflow of tRPC in the frontend context, the benefits of using tRPC compared to traditional API communication methods, setting up tRPC in a React application, and advanced features like real-time data synchronization, security, error handling, and debugging. 52 3 9. 9 [](https://daily.dev/posts/tanstack-router-for-react---a-complete-guide-drtoy59kt "Tanstack Router for React - A Complete Guide") Article asayer · 2y Tanstack Router for React - A Complete Guide Build a single-page movie application with React and TanStack Router. Learn about the core philosophy of TanStack Router and how it compares to React Router. 51 1 10. 10 [](https://daily.dev/posts/forever-functional-of-maps-and-pipes-chains-and-nests-and-more-ldv0gvw6u "Forever Functional: Of maps and pipes, chains and nests, and more") Article asayer · 2y Forever Functional: Of maps and pipes, chains and nests, and more Explore the usage of the map() method for different data types, as well as its application to functions. Learn about the concepts of composition and pipelining in functional programming. 48 11. 11 [](https://daily.dev/posts/four-ways-of-caching-node-js-apis-for-high-performance-tbhdp6vvi "Four Ways of Caching Node.JS APIs for High Performance") Article asayer · 2y Four Ways of Caching Node.JS APIs for High Performance Learn about different caching techniques for optimizing Node.js APIs, including in-memory caching, distributed caching, Content Delivery Networks (CDNs), and the Cache-Aside pattern. 45 [See all asayer archives](/sources/asayer/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/asayer/best-of/2024/05#page","url":"https://daily.dev/sources/asayer/best-of/2024/05","name":"Best asayer Posts — May 2024","description":"The most upvoted asayer posts from May 2024, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/asayer/best-of/2024/05#items","numberOfItems":11,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/using-the-upcoming-css-when-else-rules-meqd3cehz","name":"Using the upcoming CSS when/else rules"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/understand-react-hooks-with-these-visual-guide-cheatsheets-q7yu1c2c4","name":"Understand React Hooks with these Visual Guide Cheatsheets"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/understanding-the-holy-grail-layout-pattern-in-css-xhjkht6oi","name":"Understanding the Holy Grail Layout Pattern in CSS"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/how-to-generate-pdfs-in-a-react-app-ysbnvqiyv","name":"How to Generate PDFs in a React App"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/bento-box-a-refreshing-layout-approach-for-websites-ehlcvkvaa","name":"Bento Box: A Refreshing Layout Approach for Websites"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/advanced-animation-techniques-with-anime-js-kysg4aqnc","name":"Advanced Animation Techniques with Anime.js"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/exploring-the-creative-potential-of-atropos-js-for-web-design-d7nhp1z8n","name":"Exploring the Creative Potential of Atropos.js for Web Design"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/using-trpc-for-backend-requests-with-react-nkzm1gbyt","name":"Using tRPC for Backend Requests with React"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/tanstack-router-for-react---a-complete-guide-drtoy59kt","name":"Tanstack Router for React - A Complete Guide"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/forever-functional-of-maps-and-pipes-chains-and-nests-and-more-ldv0gvw6u","name":"Forever Functional: Of maps and pipes, chains and nests, and more"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/four-ways-of-caching-node-js-apis-for-high-performance-tbhdp6vvi","name":"Four Ways of Caching Node.JS APIs for High Performance"}]},{"@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":"asayer","item":"https://daily.dev/sources/asayer"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/asayer/best-of"},{"@type":"ListItem","position":5,"name":"May 2024"}]}]} ```