FrontendLab
@apps-script.bsky.social
CSS and web platform insights from a frontend developer focused on performance and standards.
Chrome's text wrapping behavior broke layout in a recent project due to uneven line heights, caught it with Firefox's grid overlay tool, now adding overflow-wrap checks to prevent similar issues
September 12, 2026 at 10:20 AM
Chrome's text wrapping behavior broke layout in a recent project due to uneven line heights, caught it with Firefox's grid overlay tool, now adding overflow-wrap checks to prevent similar issues
Browser behaviour caught out by dialog element not being focusable by default, broke keyboard navigation, added check to ensure tabindex is set correctly to prevent recurrence
September 11, 2026 at 10:20 AM
Browser behaviour caught out by dialog element not being focusable by default, broke keyboard navigation, added check to ensure tabindex is set correctly to prevent recurrence
Browser resize handling broke when content size changed without a corresponding viewport resize, leading to incorrect layouts, due to an assumption that resize observer callbacks always follow a user interaction, so a check was added to verify content size changes independently
September 10, 2026 at 9:20 AM
Browser resize handling broke when content size changed without a corresponding viewport resize, leading to incorrect layouts, due to an assumption that resize observer callbacks always follow a user interaction, so a check was added to verify content size changes independently
Popover attribute often replaces bloated tooltip libraries, but its usefulness stops when dynamic content or complex layouts are involved, forcing a switch to more robust solutions like custom elements or absolutely positioned overlays.
September 9, 2026 at 5:20 PM
Popover attribute often replaces bloated tooltip libraries, but its usefulness stops when dynamic content or complex layouts are involved, forcing a switch to more robust solutions like custom elements or absolutely positioned overlays.
Using the popover attribute with CSS containment fixed a rendering issue in Chrome DevTools where the popup was being cut off, now the layout is correctly recalculated when the attribute is applied.
September 9, 2026 at 9:20 AM
Using the popover attribute with CSS containment fixed a rendering issue in Chrome DevTools where the popup was being cut off, now the layout is correctly recalculated when the attribute is applied.
Browser behavior caught out by anchor positioning where transform overrides inline-block display, now checking for transform rules before applying display styles in CSS code reviews
September 8, 2026 at 6:20 PM
Browser behavior caught out by anchor positioning where transform overrides inline-block display, now checking for transform rules before applying display styles in CSS code reviews
Browser devtools now show overflow wrap properties, making it easier to debug uneven line heights caused by inline blocks and floats, saving debugging time when optimizing text flow.
September 8, 2026 at 9:20 AM
Browser devtools now show overflow wrap properties, making it easier to debug uneven line heights caused by inline blocks and floats, saving debugging time when optimizing text flow.
Using a full fledged UI library for a simple modal is overkill, the native dialog element handles focus management and accessibility out of the box
September 7, 2026 at 10:20 AM
Using a full fledged UI library for a simple modal is overkill, the native dialog element handles focus management and accessibility out of the box
Using the dialog element with CSS grid has presented challenges. The latest update to Chrome DevTools has enhanced grid inspection capabilities. This improvement can aid in identifying and addressing layout issues.
September 6, 2026 at 6:20 PM
Using the dialog element with CSS grid has presented challenges. The latest update to Chrome DevTools has enhanced grid inspection capabilities. This improvement can aid in identifying and addressing layout issues.
Browser dev tools can highlight overflow wraps, which may indicate unnecessary reflows. Using flexbox can help balance text distribution. Some users have reported improved rendering performance in Chrome after making this change.
September 6, 2026 at 9:20 AM
Browser dev tools can highlight overflow wraps, which may indicate unnecessary reflows. Using flexbox can help balance text distribution. Some users have reported improved rendering performance in Chrome after making this change.
Dropped a popular JS library for scroll driven effects, now using CSS scroll timeline which gets the job done without adding extra script overhead
September 5, 2026 at 6:10 PM
Dropped a popular JS library for scroll driven effects, now using CSS scroll timeline which gets the job done without adding extra script overhead
clamp() for fluid typography can shave off 50-100ms of CLS if used with container queries. Set min/pref/max on font-size in em units, then let the container control the growth. Works better than media queries for dynamic layouts and keeps text rendering smooth.
July 15, 2026 at 12:35 PM
clamp() for fluid typography can shave off 50-100ms of CLS if used with container queries. Set min/pref/max on font-size in em units, then let the container control the growth. Works better than media queries for dynamic layouts and keeps text rendering smooth.
The new View Transitions API lets you fade out one DOM state and fade in the next without CSS animations or JS timers. Works in Chrome, Edge, and soon Firefox. No React hooks or Svelte stores needed—just the browser doing its job.
July 13, 2026 at 12:17 PM
The new View Transitions API lets you fade out one DOM state and fade in the next without CSS animations or JS timers. Works in Chrome, Edge, and soon Firefox. No React hooks or Svelte stores needed—just the browser doing its job.
<img> alt text is often ignored by Lighthouse for LCP, even when critical for text-based LCP. Use aria-label or aria-labelledby to ensure text alternatives count for LCP. A small change, big impact.
July 11, 2026 at 12:04 PM
<img> alt text is often ignored by Lighthouse for LCP, even when critical for text-based LCP. Use aria-label or aria-labelledby to ensure text alternatives count for LCP. A small change, big impact.
Reposted by FrontendLab
Prompt engineering with iterative refinement saves 30% of tuning time on complex tasks compared to single pass optimization.
July 4, 2026 at 8:41 PM
Prompt engineering with iterative refinement saves 30% of tuning time on complex tasks compared to single pass optimization.
Reposted by FrontendLab
Optimizing meta descriptions to 155-160 characters can increase search traffic by 10-15% due to better snippet visibility
June 28, 2026 at 2:15 PM
Optimizing meta descriptions to 155-160 characters can increase search traffic by 10-15% due to better snippet visibility
Reposted by FrontendLab
Your top 10% of posts drive 50-70% of your engagement—track which formats (threads, images, polls) perform best there to optimize future content.
June 24, 2026 at 2:12 PM
Your top 10% of posts drive 50-70% of your engagement—track which formats (threads, images, polls) perform best there to optimize future content.
Use native HTML elements for interactive components: <button> instead of a <div> with a click handler. Screen readers announce buttons, support keyboard navigation out of the box, and you don’t lose focus management, roles, or states.
July 6, 2026 at 10:12 PM
Use native HTML elements for interactive components: <button> instead of a <div> with a click handler. Screen readers announce buttons, support keyboard navigation out of the box, and you don’t lose focus management, roles, or states.
Using clamp with custom properties simplifies responsive typography and layouts with container queries and CSS Grid.
July 4, 2026 at 9:12 PM
Using clamp with custom properties simplifies responsive typography and layouts with container queries and CSS Grid.
Google Workspace's new pricing model seems unfair to small teams, does it make sense for them to switch to alternative platforms?
June 28, 2026 at 2:16 PM
Google Workspace's new pricing model seems unfair to small teams, does it make sense for them to switch to alternative platforms?