Highlights,
Featured deep dives into semantic HTML5, modern CSS architecture, and clean JavaScript engineering.
-
Conditional Parent Styling with the CSS has Relational Pseudo-Class
Styling parent containers and sibling elements based on child state focus or presence using the CSS :has() relational selector. -
Taming Stylesheet Specificity with CSS Cascade Layers and at-layer
Organizing reset base component and utility stylesheets into explicit priority tiers using native CSS @layer rules. -
Preparing Design Systems for CSS Container Queries
Shifting from viewport-coupled media queries to modular container-aware components using CSS container-type and @container rules.
-
Understanding Tabulation and Dynamic Programming with the Knapsack Problem in JavaScript
Transitioning from exponential recursion to bottom-up 2D and 1D tabulation arrays for the 0/1 Knapsack optimization problem in JavaScript. -
Eliminating Scrollbar Layout Shifts with CSS scrollbar-gutter
Reserving stable space for classic scrollbars when dynamic content expands or modal overlays lock body scrolling using scrollbar-gutter stable. -
Cleaner Collection Access in JavaScript with Array at and Object hasOwn
Simplifying negative index array lookups and safe own-property checks with ES2022 Array.prototype.at and Object.hasOwn. -
Dynamic Palette Generation in CSS with color-mix and Perceptual Color Spaces
Blending design tokens and generating hover tints directly in the browser using CSS color-mix in srgb lch and oklab color spaces. -
Declarative Focus Trapping and Background Locking with the HTML inert Attribute
Removing background DOM trees from tab order pointer events and the accessibility tree simultaneously when a modal drawer opens using inert. -
Building Fast Autocomplete Search with a Prefix Trie in JavaScript
Implementing a character-by-character Prefix Trie in JavaScript for O(L) dictionary lookup and instant typeahead suggestions. -
Conditional Parent Styling with the CSS has Relational Pseudo-Class
Styling parent containers and sibling elements based on child state focus or presence using the CSS :has() relational selector. -
Accessible Inline Form Error Messaging with aria-invalid and aria-errormessage
Connecting form validation feedback to assistive technologies using Constraint Validation API events aria-invalid and live error summaries. -
Native Deep Copying in JavaScript with structuredClone
Cloning nested objects Maps Sets Dates and circular references natively with structuredClone without JSON serialization data loss. -
Taming Stylesheet Specificity with CSS Cascade Layers and at-layer
Organizing reset base component and utility stylesheets into explicit priority tiers using native CSS @layer rules.
More posts can be found in the archive.