Frontend Development
CSS cascade layers let you plan precedence before specificity takes over
Use CSS cascade layers to give resets, components and utilities an explicit order, and understand why an unlayered rule can still win unexpectedly.
SOFTWARE · SECURITY · DESIGN
Journal
Frontend Development
CSS subgrid lets nested items share the parent’s tracks
Use CSS subgrid when nested content needs to align with parent tracks, and distinguish that shared sizing from an independent nested grid.
Front-End Practice
Use a container query when a component needs to respond to its own space
Container queries let a component adapt to its available inline space. Use a small card example to see how they differ from viewport-based media queries.
Front-End Practice
Try Content Security Policy in report-only mode before enforcing it
CSP report-only mode reveals potential policy violations without blocking them. Use reports to test real workflows before enabling enforcement.
Web Development
Using ResizeObserver when an element changes size
Use ResizeObserver when a component changes size without a window resize, and avoid callbacks that continually resize their own target.
Web Engineering
An HTTP ETag gives a cached response a version to check
An ETag lets a browser ask whether its cached representation is still current. Follow a simple conditional request without confusing validation with an error.
Practical Web Development
Inputmode suggests a keyboard; validation still needs its own rules
HTML inputmode helps browsers choose a keyboard, but it does not validate data. Design mobile fields with labels, suitable types and server-side checks.
Web Development
Read a dialog’s returnValue without treating it as saved form data
A native HTML dialog can return a choice string without saving anything. Reset the value on opening and handle cancellation separately from persistence.
Front-End Details
Reserve image space with CSS aspect-ratio before the file finishes loading
Reserve the right image proportions before loading finishes, and avoid a layout jump caused by a placeholder that changes shape.