Best of HTML — September 2024
- 1
- 2
Community Picks·2y
15 Useful CSS Properties You Should Know About 🎨
Discover 15 often overlooked but incredibly useful CSS properties that can enhance the design, performance, and user experience of websites. These properties include caret-color for changing text cursor color, accent-color for form controls, pointer-events to manage mouse activity, backdrop-filter for background effects, and scroll-snap-type for smooth scrolling transitions, among others.
- 3
Piccalilli·2y
How I build a button component
Learn how to build a versatile button component in HTML and CSS with multiple variants including a ghost button and one with hard edges. The guide emphasizes using semantic elements instead of <div> and JavaScript handlers, outlines the use of custom properties for maintainable styles, and incorporates best practices for accessibility using ARIA attributes.
- 4
DEV·2y
7 Old-School Practices in HTML Should Be Avoided
Avoid using outdated HTML practices like specifying type attributes for <script> and <style>, using frameborder on <iframe>, and including support for IE 8. Utilize semantic elements like <header> and <footer> properly within sections, and choose heading tags based on page structure rather than design. Lastly, simplify boolean attributes by omitting unnecessary values.
- 5
3D Book Flip Cover
The post explains how to use HTML, CSS, and JavaScript preprocessors in CodePen to enhance your coding experience. It also covers linking to external resources using both secure (https) and non-secure (http) protocols, as well as how to properly apply vendor prefixes for cross-browser support. Additional tips include autosaving and live preview configurations in CodePen.
- 6
- 7
Hacker News·2y
Sanding UI
Effective UI development involves iterative testing and tweaking, similar to sanding wood. By continually interacting with the UI, developers can identify and eliminate issues. The author shares an experience with using flexbox in CSS for aligning radio inputs and labels, and solving interaction dead zones by replacing gap with padding.
- 8
Kevin Powell·2y
Improve your forms with this underused HTML element
Learn how to enhance user experience in forms by using the HTML datalist element. The datalist attribute allows you to create dropdown lists for input fields, which can be used for text, color, and time inputs. This lets users choose from predefined options while still allowing manual input.
- 9
asayer·2y
Removing Image Backgrounds with CSS
Learn how to remove image backgrounds using CSS, exploring different techniques such as solid color removal and mix-blend-mode. Understand the core CSS properties and their limitations, and get insights on when to use advanced tools like Photoshop or Canva for more intricate images. Best practices and browser compatibility considerations are also discussed to ensure a seamless web design experience.
- 10
HTMX, Raku and Pico CSS
The post explores simplifying web development by using HTMX to eliminate the need for JavaScript in dynamic content, favoring a return to using HTML for layout and CSS for styling. It highlights Pico CSS as an efficient styling tool that minimizes HTML attribute bloat, in contrast to frameworks like Bootstrap and Tailwind. The author shows practical code examples integrating HTMX with Raku/Cro backends and emphasizes the benefits of semantic HTML.
- 11
It's time to speed up your website with rel="preload"
Using the HTML link rel='preload' attribute can significantly improve your website's performance by preloading critical resources like fonts, stylesheets, and scripts. This reduces render-blocking issues and improves the First Contentful Paint (FCP), enhancing the overall user experience. However, it's crucial to preload only essential assets to avoid performance degradation.
- 12
CSS-Tricks·2y
Time Travelling CSS With :target
Explore the creative use of the :target pseudo-class in CSS, focusing on its application in creating a Tic Tac Toe game entirely with CSS. This method allows styling and animating based on user interaction without using JavaScript, offering benefits such as bookmarking game states and utilizing browser navigation for game control. The approach is presented as a fun, educational way to push CSS boundaries.
- 13
CSS in Emails: Crafting Cross-Client Compatible Layouts
Crafting cross-client compatible email layouts is crucial for enhancing engagement, increasing open rates, and driving conversions. Due to inconsistent support for modern web technologies among email clients, inline styles and basic CSS properties are recommended for uniform rendering. Techniques such as responsive design, proper testing across various devices and clients, and fallback strategies ensure that email layouts work seamlessly. Tables often serve as a reliable structure for organizing content, while media queries aid in responsiveness. Testing in diverse environments, including dark mode and accessibility checks, is essential to ensure a smooth user experience.
- 14
Developer Community·2y
Let's learn all about HTML 5 in Web Development
HTML5, the fifth major version of HTML, introduces new features such as semantic elements (header, nav, main), multimedia elements (video, audio), and various APIs (Geolocation, Web Storage). It offers improved structuring, multimedia handling, and real-time communication. Key takeaways include understanding new features, leveraging APIs, and ensuring cross-browser compatibility.
- 15
LogRocket·2y
Developing modals using only CSS and the Popover API
Learn how to develop accessible modals using only HTML and CSS by combining the Dialog and Popover APIs. This approach reduces the need for JavaScript, making the code simpler and less error-prone. The guide covers how to style the backdrop, prevent scrolling, and ensure accessibility for keyboard and assistive technology users.
- 16
Bytes by ui.dev·2y
Big W for Web Components
Declarative Shadow DOM is now supported by all major browsers, enabling server-side rendering for Web Components. This enhancement addresses previous limitations and improves SEO, streaming rendering, and prevents FOUC. Additionally, Expo's EAS Update offers a flexible tool for over-the-air updates, making the update process more efficient and affordable. The post also discusses various tips and insights on JavaScript and app development, including a JavaScript array reference trick and resources for improving React development skills.
