--- title: Best Frontend Masters posts — April 2024 | daily.dev description: The most upvoted Frontend Masters posts from April 2024, curated by the daily.dev community. canonical: https://daily.dev/sources/frontendmasters/best-of/2024/04 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/frontendmasters/best-of/2024/04 og:type: website og:site_name: daily.dev og:title: Best Frontend Masters posts — April 2024 | daily.dev og:description: The most upvoted Frontend Masters posts from April 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 — April 2024 1. 1 [](https://daily.dev/posts/the-front-end-developer-engineer-handbook-2024-a-guide-to-modern-web-development-utrxl08ov "The Front End Developer/Engineer Handbook 2024 — A Guide to Modern Web Development") Article Frontend Masters · 2y The Front End Developer/Engineer Handbook 2024 — A Guide to Modern Web Development The Frontend Handbook 2024 is a comprehensive guide to modern web development, covering topics such as HTML, CSS, JavaScript, and popular tools and frameworks. It also explores using web technologies to develop native applications. 45 1 2. 2 [](https://daily.dev/posts/devtools-tips-tricks-oe3fiovcc "DevTools Tips & Tricks") Article Frontend Masters · 2y DevTools Tips & Tricks Learn useful tips and tricks to unlock the full potential of DevTools, including inspecting popups on hover, using logpoints for debugging, emulating foldable devices, autocompleting styles, capturing high-res screenshots, inspecting event streams, viewing and copying style changes, using live expressions, and debugging horizontal scrollbars. 27 1 3. 3 [](https://daily.dev/posts/popover-api-is-here-w4i2wiahe "Popover API is Here") Article Frontend Masters · 2y Popover API is Here The Popover API has support across browsers now, offering an easy way to create popups in HTML without the need for modals. It provides a more flexible alternative to the

element and allows users to interact with other elements while a popup is open. 22 1 4. 4 [](https://daily.dev/posts/gap-is-the-new-margin-ow167dbim "Gap is the new Margin") Article Frontend Masters · 2y Gap is the new Margin The 'Margin considered harmful' article discusses the negative impact of the margin property on component encapsulation. Adam Argyle predicts that the usage of margin will decline as the usage of gap increases. 15 1 5. 5 [](https://daily.dev/posts/the-html-css-and-svg-for-a-classic-search-form-ze5j26zfj "The HTML, CSS, and SVG for a Classic Search Form") Article Frontend Masters · 2y The HTML, CSS, and SVG for a Classic Search Form Learn how to create a classic search form in HTML and CSS, including label wrapping, search and form elements, hiding labels, and styling. Discover tips for accessibility and dark mode support. 14 6. 6 [](https://daily.dev/posts/a-css-powered-add-remove-tags-ui-zagsqlatv "A CSS-Powered Add/Remove Tags UI") Article Frontend Masters · 2y A CSS-Powered Add/Remove Tags UI Learn how to design a tag management UI using checkboxes and labels in HTML and CSS. Utilize the :has() selector in CSS to target specific elements. Customize the styling of tags using CSS. 13 [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/04#page","url":"https://daily.dev/sources/frontendmasters/best-of/2024/04","name":"Best Frontend Masters Posts — April 2024","description":"The most upvoted Frontend Masters posts from April 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/04#items","numberOfItems":6,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/the-front-end-developer-engineer-handbook-2024-a-guide-to-modern-web-development-utrxl08ov","name":"The Front End Developer/Engineer Handbook 2024 — A Guide to Modern Web Development"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/devtools-tips-tricks-oe3fiovcc","name":"DevTools Tips & Tricks"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/popover-api-is-here-w4i2wiahe","name":"Popover API is Here"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/gap-is-the-new-margin-ow167dbim","name":"Gap is the new Margin"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/the-html-css-and-svg-for-a-classic-search-form-ze5j26zfj","name":"The HTML, CSS, and SVG for a Classic Search Form"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/a-css-powered-add-remove-tags-ui-zagsqlatv","name":"A CSS-Powered Add/Remove Tags UI"}]},{"@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":"April 2024"}]}]} ```