--- title: Best Frontend Masters posts — June 2024 | daily.dev description: The most upvoted Frontend Masters posts from June 2024, curated by the daily.dev community. canonical: https://daily.dev/sources/frontendmasters/best-of/2024/06 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/frontendmasters/best-of/2024/06 og:type: website og:site_name: daily.dev og:title: Best Frontend Masters posts — June 2024 | daily.dev og:description: The most upvoted Frontend Masters posts from June 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 Frontend Masters — June 2024 1. 1 [](https://daily.dev/posts/has-is-the-god-selector-frontend-masters-boost-vdny4usrd ":has() is “The God Selector” – Frontend Masters Boost") Article Frontend Masters · 2y :has() is “The God Selector” – Frontend Masters Boost The :has() selector in CSS, hailed as 'The God Selector' by Bruce Lawson, allows you to select any element based on the state of any other element without needing any structural relationship in the DOM. This makes it incredibly powerful for styling purposes. 87 1 2. 2 [](https://daily.dev/posts/pure-css-circular-text-without-requiring-a-monospace-font-frontend-masters-boost-mfpwpkdbk "Pure CSS Circular Text (without Requiring a Monospace Font) – Frontend Masters Boost") Article Frontend Masters · 2y Pure CSS Circular Text (without Requiring a Monospace Font) – Frontend Masters Boost Creating circular text with pure CSS allows for more flexibility compared to traditional methods that use monospace fonts. This guide provides steps to split text into segments, position them in a circle, and use perspective to achieve a seamless look. The technique lets you use various fonts including cursive and even emojis, and allows for further customization with colors and animations. 34 3. 3 [](https://daily.dev/posts/a-text-reveal-effect-using-conic-gradient-in-css-frontend-masters-boost-xflrkzlw1 "A Text-Reveal Effect Using conic-gradient() in CSS – Frontend Masters Boost") Article Frontend Masters · 2y A Text-Reveal Effect Using conic-gradient() in CSS – Frontend Masters Boost Discover how to create engaging text-reveal effects using conic-gradient() and CSS masking. This technique can boost your web designs, making them more interactive and visually appealing. Key steps involve using blend modes, CSS variables, and animations. Practical examples and design variations are provided to inspire creativity. 28 1 4. 4 [](https://daily.dev/posts/introducing-drizzle-frontend-masters-boost-gyazichld "Introducing Drizzle – Frontend Masters Boost") Article Frontend Masters · 2y Introducing Drizzle – Frontend Masters Boost This post introduces Drizzle, a novel ORM tool that provides a traditional ORM querying API as well as a typed SQL querying API. It explains how Drizzle simplifies SQL queries by allowing them to be treated as typed function calls and demonstrates the process of setting up the schema and executing queries in Drizzle. It also highlights the flexibility and debugging capabilities of Drizzle. 27 1 5. 5 [](https://daily.dev/posts/single-css-keyframe-tricks-are-magic-frontend-masters-boost-nnbxyuf0s "Single CSS Keyframe Tricks are Magic – Frontend Masters Boost") Article Frontend Masters · 2y Single CSS Keyframe Tricks are Magic – Frontend Masters Boost Learn about the magic of single CSS keyframe tricks and how they can be used to create animations that grow and shrink elements. 25 6. 6 [](https://daily.dev/posts/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto-frontend-masters-boost-wvdps9ryp "One of the Boss Battles of CSS is Almost Won! Transitioning to Auto – Frontend Masters Boost") Article Frontend Masters · 2y One of the Boss Battles of CSS is Almost Won! Transitioning to Auto – Frontend Masters Boost The post discusses the use of the experimental CSS function calc-size(auto) to animate transitions and animations from zero to a value. It also explores workarounds, and warns about the experimental nature of the feature. 24 [See all Frontend Masters archives](/sources/frontendmasters/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/frontendmasters/best-of/2024/06#page","url":"https://daily.dev/sources/frontendmasters/best-of/2024/06","name":"Best Frontend Masters Posts — June 2024","description":"The most upvoted Frontend Masters posts from June 2024, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/frontendmasters/best-of/2024/06#items","numberOfItems":6,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/has-is-the-god-selector-frontend-masters-boost-vdny4usrd","name":":has() is “The God Selector” – Frontend Masters Boost"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/pure-css-circular-text-without-requiring-a-monospace-font-frontend-masters-boost-mfpwpkdbk","name":"Pure CSS Circular Text (without Requiring a Monospace Font) – Frontend Masters Boost"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/a-text-reveal-effect-using-conic-gradient-in-css-frontend-masters-boost-xflrkzlw1","name":"A Text-Reveal Effect Using conic-gradient() in CSS – Frontend Masters Boost"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/introducing-drizzle-frontend-masters-boost-gyazichld","name":"Introducing Drizzle – Frontend Masters Boost"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/single-css-keyframe-tricks-are-magic-frontend-masters-boost-nnbxyuf0s","name":"Single CSS Keyframe Tricks are Magic – Frontend Masters Boost"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto-frontend-masters-boost-wvdps9ryp","name":"One of the Boss Battles of CSS is Almost Won! Transitioning to Auto – Frontend Masters Boost"}]},{"@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":"Frontend Masters","item":"https://daily.dev/sources/frontendmasters"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/frontendmasters/best-of"},{"@type":"ListItem","position":5,"name":"June 2024"}]}]} ```