Customizable Select API: Building Advanced UI Components
Stop fighting div-based dropdowns. The new Customizable Select API is a game-changer for front-end developers, allowing deep CSS customization of the native
Category: Front-end
Modern CSS Features: Stop Ignoring Anchor Positioning and random()
Modern CSS features like random(), anchor positioning, and clip-path are making legacy JavaScript hacks obsolete. In this update, Ahmad Wael breaks down the latest browser releases, including the “big gotcha” of anchor positioning and how to use tabular-nums to stabilize your WooCommerce dashboards. Stay ahead of the 2026 Interop standards.
Why the JS Temporal API is Finally Replacing Moment.js
After years of bloated bundles and “mutability hell” with Moment.js, the native JS Temporal API is finally here. In this guide, I’ll show you why this Stage 4 proposal is a game-changer for WordPress developers, how it handles time zones natively, and the right way to refactor your legacy code today.
Beyond Slide Decks: Why I’m Watching SmashingConf Amsterdam
SmashingConf Amsterdam is heading to the legendary Pathé Tuschinski in April 2026. This isn’t your typical slide-deck conference; it’s a deep dive into “live-work” philosophy, modern CSS, and AI-driven design systems. Join world-class experts like Sara Soueidan and Kevin Powell for a masterclass in front-end craftsmanship and Dutch “gezelligheid.”
CSS corner-shape property: Stop hacking your UI corners
Stop using brittle clip-path hacks for beveled or scooped corners. The new CSS corner-shape property provides a native, performant way to transform UI elements like ribbon badges and product cards. Ahmad Wael explains how to implement this Chromium-exclusive feature using progressive enhancement and modern CSS layers to clean up your codebase.
Stop Guessing: Mastering Scalable z-index Values
Stop using “magic numbers” in your CSS. Senior WordPress developer Ahmad Wael explains why chaotic z-index values break UIs and how to build a scalable, token-based layering system using CSS variables, calc(), and proper stacking context management to ensure your modals and tooltips never disappear again.
Building Dynamic Forms in React: Schema vs. Component approach
Building dynamic forms in React often leads developers toward a choice between React Hook Form + Zod or a schema-driven engine like SurveyJS. While RHF is excellent for simple CRUD, complex logic often belongs in a data schema. Learn the architectural differences and which approach fits your project’s long-term maintenance needs.
Select html in CSS: Senior Dev Guide to Root Selectors
There are several ways to select the html element in CSS, each with different specificity levels. From the standard :root pseudo-class to modern :scope and structural hacks like :not(* > *), Ahmad Wael breaks down which selectors are best for performance and which are just technical curiosities.
JavaScript Bookmarklets: The Forgotten Power Tool for Devs
JavaScript Bookmarklets are the forgotten power tool of senior developers. While modern extensions and complex dev tools are popular, a simple, well-crafted bookmarklet can solve debugging hurdles in seconds—especially on mobile. Learn how to build encapsulated, CSP-compliant scripts and use the CSSOM to automate your workflow without the bloat.
Popover API vs Dialog API: Which One Should You Actually Use?
Confused between the Popover API vs Dialog API? Senior dev Ahmad Wael breaks down the technical differences, accessibility benefits, and the specific “war stories” that determine when you should go native for tooltips or stick to the Dialog API for modals. Learn the correct implementation for your WordPress site today.