Modals have been an important part of websites for two decades. Stacking contents and using fetch to accomplish tasks are a great way to improve UX on both desktop and mobile. Unfortunately most developers don’t know that the HTML and JavaScript specs have implemented a native modal system via the popover attribute — let’s check it out! The HTML Creating a native HTML modal consists of using the popovertarget attribute as the trigger and the popover attribute, paired with an id, to identify the content element: Open popover This is the contents of the popover Upon clicking the button, the…
Author: drweb
Creativity thrives on experimentation, and Suz Sirunyan put this to the test with a bold 100-day challenge—creating daily web experiments purely for the joy of exploration. What started as a personal project quickly grew into a community-driven journey, inspiring designers and developers alike. In this article, she shares the lessons learned from stepping outside her comfort zone, embracing imperfection, and rediscovering the fun in digital design. When Comfort Zones Get Too Comfortable When I started my 100-day challenge in August 2024, I was a digital designer who had found her rhythm—a stable client base, a solid portfolio, and a decent…
February 20, 2025 A nice tool for generating mesh gradients from Erik D. Kennedy. You might call it a bit of a trend, but as Erik pointed out in a recent newsletter, they can be quite versatile because it’s just a nice background look that doesn’t demand anything in particular from the brand. Mesh gradients can work across a huge variety of brands. Dark? Yes. Light? Yes. Grainy? Sure. Pensive? Absolutely. Delicate? Yup. Weatherworn and rugged? Totally.
Editor’s note: This article is outside the typical range of topics we normally cover around here and touches on sensitive topics including recollections from an abusive marriage. It doesn’t delve into much detail about the abuse and ends on a positive note. Thanks to Lee for sharing his take on the intersection between life and web development and for allowing us to gain professional insights from his personal life. When my dad was alive, he used to say that work and home life should exist in separate “watertight compartments.” I shouldn’t bring work home or my home life to work. There’s the quote misattributed to Mark…
CSS selectors never cease to amaze me in how powerful they can be in matching complex patterns. Most of that flexibility is in parent/child/sibling relationships, very seldomly in value matching. Consider my surprise when I learned that CSS allows matching attribute values regardless off case! Adding a {space}i to the attribute selector brackets will make the attribute value search case insensitive: /* case sensitive, only matches “example” */ [class=example] { background: pink; } /* case insensitive, matches “example”, “eXampLe”, etc. */ [class=example i] { background: lightblue; } The use cases for this i flag are likely very limited, especially if…
Welcome to WordPress. This is your first post. Edit or delete it, then start writing!