Frontend Focus
Feed since 17 Mar 2019This feed covers HTML, CSS, WebGL, and other associated technologies. Frontend Focus shares news, articles, tutorials and code examples for those interested in web browser technology and the web platform generally. See: http://frontendfocus.co/
To subscribe to and get updates from Frontend Focus in your feed stream, sign up, or see the rest of our feeds.
CASCII
CASCII: A Web-Based ASCII and Unicode Diagram Builder — Imagine something like MS Paint but for...
GitHub - microsoft/playwright-mcp: Playwright Tools for MCP
An MCP Server for Playwright and Browser Automation — MCP (Model Context Protocol) servers enable certain...
Best Practices for Cognitive Accessibility in Web Design
Best Practices for Cognitive Accessibility in Web Design — Lots of good practical advice here, covering...
Previewing Content Changes In Your Work With document.designMode — Smashing Magazine
Previewing Content Changes in Your Work with document.designMode — A look at several use cases for document.designMode...
Layered Text Headers – Frontend Masters Blog
Layered Text Headers — Applying a stroke effect to text across all browsers is possible, but...
The bare minimum you need to enable View Transitions on your website
The Bare Minimum You Need to Enable View Transitions on Your Site — View transitions are a...
StringTune: The JavaScript Library Born from a Design Agency’s Workflow | Codrops
StringTune: The JavaScript Library Born from a Design Agency’s Workflow — A look at how to make...
Fancy Components
Fancy Components: A Growing Library of Ready-to-Use Animated React Components — Includes a whole slew of...
GitHub - deoostfrees/Parvus: An open source, dependency free image lightbox with the goal of being accessible.
Parvus 3.0: Accessible Lightbox with No Dependencies — I love how it says not to use...
The HTML presentation framework | reveal.js
Reveal.js 5.2: The HTML Presentation Framework — Brings elegant presentations to anyone with a Web browser....
Konva - JavaScript Canvas 2d Library
Konva: A JavaScript 2D Canvas Library — The native API for Canvas elements is pretty good,...
https://x.com/boltdotnew/status/1900197121829331158
Introducing Figma to Bolt — Turn Figma designs into pixel-perfect full stack apps in one click.
The <select> element can now be customized with CSS | Blog | Chrome for Developers
The <select> Element Can Now Be Customized with CSS — There’s now an accessible, standardized way to...
How to think about Baseline and polyfills | Articles | web.dev
How to Think About Baseline and Polyfills — Despite polyfills not being included as part of...
Support Logical Shorthands in CSS
Support Logical Shorthands in CSS — The CSS Working Group recently resolved to add a size...
Minding the gaps: A new way to draw separators in CSS
Minding the Gaps: A New Way to Draw Separators in CSS — Explains CSS gap decorations,...
Revisiting CSS border-image | CSS-Tricks
Revisiting CSS border-image — A deep dive into the powerful border-image property and how it can...
GitHub - antfu/shiki-stream: Streaming highlighting with Shiki. Useful for highlighting text streams like LLM outputs.
shiki-stream: Generate "Streaming" Syntax Highlighted Code — Based on the popular Shiki syntax highlighter, this will...
Frontend Practice | Become a better frontend developer.
Frontend Practice: A Practice Ground for Improving Frontend Skills — A collection of real sites each with...
A Deep Dive into the Inline Background Overlap Problem – Frontend Masters Blog
A Deep Dive into the Inline Background Overlap Problem — If you want to get a...
Introducing command and commandfor | Blog | Chrome for Developers
Introducing command and commandfor — Chrome 135 (and preview versions of Firefox and Safari) add support...
Mobile Payments SDK
New: Secure In-Person Payments for Mobile Apps — Square's new Mobile Payments SDK is PCI-compliant, free...
Buying browser extensions for fun and profit
🕵️♂️ Buying Browser Extensions for Fun and Profit — An interesting look into the shadowy world of...
Styling Counters in CSS | CSS-Tricks
Styling Counters in CSS — A guide to styling counters, going from the most basic ways...
Self Gap
Self Gap — Some thinking on how best to control a custom gap between some flex...
Breadcrumbs Are Dead in Web Design | Web Designer Depot
Breadcrumbs are 'Dead' in Web Design — Once a clear staple in web design, the author...
Design systems need a colour space
Design Systems Need a Color Space — “Software developers and designers have been able to ignore...
Chilled Out Text Underlines – Frontend Masters Blog
Chilled Out Text Underlines — Shares a nice treatment for styling underlines. Worth keeping in mind...
Styling an HTML dialog modal to take the full height of the viewport
Styling an HTML Dialog Modal to Take the Full Height of the Viewport — Simon encountered an...
Web Components Vs. Framework Components: What’s The Difference? — Smashing Magazine
Web Components vs. Framework Components: What’s the Difference? — A comprehensive comparison between Web Components and framework components,...
Unlock exciting use cases with the Document Picture-in-Picture API | Blog | Chrome for Developers
Use Cases for the Document Picture-in-Picture API — A way to open a floating, always-on-top window...
But how to get to that European cloud? - Bert Hubert's writings
But How to Get to That European Cloud? — A thoughtful take on a pressing need...
Oxbow UI - Tailwind CSs Gradient Generator
Tailwind Gradient Generator: Create CSS Gradients for Tailwind Projects — Select to preview any of the existing...
LoaderShip
Loadership: An Interactive Tool to Build and Customize Pure CSS Loading Animations — Click any of...
GitHub - addyosmani/enhance: Enhance and upscale your images using AI - right in your browser
Enhance: Enhance and Upscale Your Images Using AI — Yet another single-purpose image editing tool from...
GitHub - yWorks/svg2pdf.js: A javascript-only SVG to PDF conversion utility that runs in the browser. Brought to you by yWorks - the diagramming experts
svg2pdf.js: SVG to PDF Conversion in the Browser — There’s an online playground to give you...
CSS Relative Colors
CSS Relative Colors — Another excellent guide from Ahmad exploring the syntax behind CSS relative color....
Super Color Palette - Shift hue, saturation, lightness, and more!
Super Color Palette: A Color Palette Generator for Shifting Hue, Saturation, Lightness, and More — Lots...
GitHub - addyosmani/filter: Filter - Web Image Editor
Filter: A Powerful, Web-Based Image Editor for Quick Image Edits and Filters — A tool from...
GitHub - zh-lx/code-inspector: 🚀 Click the dom to open your IDE and position the cursor at dom's source code location! 点击页面 dom 来打开 IDE 并将光标自动定位到源代码位置!
code-inspector: Click a Page Element to View Its Source Code — Once installed, use ALT+SHIFT to...
Usability testing with disabled users is a good investment
Usability Testing with Disabled Users is a Good Investment — …and will highlight accessibility barriers missed...
New in Chrome Q1 2025: CSS text-box, file system access for Android, Baseline updates and more! | Blog | Chrome for Developers
▶ New in Chrome Q1 2025: CSS text-box, File System Access for Android, Baseline Updates and More...
Grouping Selection List Items Together With CSS Grid | CSS-Tricks
Grouping Selection List Items Together with CSS Grid — CSS Grid can be used to visually group selected items in a list....
View Transitions Applied: Smoothly animating a border-radius with a View Transition
View Transitions Applied: Smoothly Animating a border-radius with a View Transition — Bramus shows us how...
Super Crispy SVG Icons
Super 'Crispy' SVG Icons — This is a solid and meticulous look at the various design...
Validate your SaaS idea while building an audience
Validate Your SaaS Idea While Building an Audience — Learn how to communicate directly with potential...
How to make web videos way smaller in 2025 using the AV1 codec—Martian Chronicles, Evil Martians’ team blog
How to Make Web Videos Way Smaller in 2025 with AV1 — Here’s how the AV1...
https://www.coderabbit.ai/
How to Do Thoughtful Code Reviews? — Good code reviews start with empathy and clear communication....
Cool native HTML elements you should already be using · Harrison Broadbent
Cool Native HTML Elements You Should Already Be Using — Even experienced developers can be dazzled...
