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.
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...
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,...
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...
Chilled Out Text Underlines – Frontend Masters Blog
Chilled Out Text Underlines — Shares a nice treatment for styling underlines. Worth keeping in mind...
Frontend Practice | Become a better frontend developer.
Frontend Practice: A Practice Ground for Improving Frontend Skills — A collection of real sites each with...
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...
Design systems need a colour space
Design Systems Need a Color Space — “Software developers and designers have been able to ignore...
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...
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...
LoaderShip
Loadership: An Interactive Tool to Build and Customize Pure CSS Loading Animations — Click any of...
Oxbow UI - Tailwind CSs Gradient Generator
Tailwind Gradient Generator: Create CSS Gradients for Tailwind Projects — Select to preview any of the existing...
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...
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...
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...
CSS Relative Colors
CSS Relative Colors — Another excellent guide from Ahmad exploring the syntax behind CSS relative color....
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...
https://www.coderabbit.ai/
How to Do Thoughtful Code Reviews? — Good code reviews start with empathy and clear communication....
Delaying the shipping of CSS @function from Chrome 136 to 139 | Blog | Chrome for Developers
Delaying the Shipping of CSS @function From Chrome 136 to 139 — A few issues ago we...
Prompt Engineering for Web Development — SitePoint
Prompt Engineering for Web Development — Kevin has been tinkering with code generation for a couple...
Dive Into WebGPU—Part 1 (Tutorial)
Dive Into WebGPU — If you’re curious about creating modern 3D graphics in the browser then...
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...
Validate your SaaS idea while building an audience
Validate Your SaaS Idea While Building an Audience — Learn how to communicate directly with potential...
Super Crispy SVG Icons
Super 'Crispy' SVG Icons — This is a solid and meticulous look at the various design...
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...
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....
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...
Usability testing with disabled users is a good investment
Usability Testing with Disabled Users is a Good Investment — …and will highlight accessibility barriers missed...
GitHub - addyosmani/filter: Filter - Web Image Editor
Filter: A Powerful, Web-Based Image Editor for Quick Image Edits and Filters — A tool from...
MotifyX
MotifyX: A Curated Collection of Modern, Customizable CSS Backgrounds — You can choose from six categories...
I18n Code - Translate JSON files and blog posts into multiple languages
I18n Code: Translate JSON Files and Blog Posts Into Multiple Languages — Enter your content in...
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 - Jonghakseo/chrome-extension-boilerplate-react-vite: Chrome Extension Boilerplate with React + Vite + Typescript
Chrome Extension Boilerplate: Create Chrome/Firefox Extensions using React and Typescript — Boasts faster build speeds and...
Functions in CSS?! | CSS-Tricks
Functions in CSS? — We can’t use custom CSS functions in production just yet, but this...
Freesound
Freesound: A Collaborative Collection of 670,000+ Free Sounds — Downloadable in WAV format, possibly useful for...
The Case For Minimal WordPress Setups: A Contrarian View On Theme Frameworks — Smashing Magazine
The Case for Minimal WordPress Setups: A Contrarian View on Theme Frameworks — Kevin thinks modern...
Chrome on Android edge-to-edge migration guide | CSS and UI | Chrome for Developers
A Chrome on Android Edge-to-Edge Migration Guide — Bramus shares an update regarding edge-to-edge display support...
Fixing rowspan=0 on tables on WebKit. - otsukare
Fixing rowspan=0 on Tables on WebKit — Curious as to how a browser bug gets fixed?...
A CSS-Only Star Rating Component and More! (Part 1) | CSS-Tricks
⭐️ Building a CSS-Only Star Rating Component — A tutorial you’ve no doubt seen countless times, but...
CSS Meets Voxel Art: Building a Rendering Engine with Stacked Grids | Codrops
CSS Meets Voxel Art: Building a Rendering Engine with Stacked Grids — Another great tutorial from...
Instrument, monitor, fix: a hands-on debugging session
Instrument, Monitor, Fix: A Hands-On Debugging Class — Join us for a hands-on session where you’ll...
Trusting AI with my images wasn't easy
Trusting AI with My Images Wasn't Easy — We shared last week how Dries was experimenting...
Truth, Lies and Progress Bars
Truth, Lies and Progress Bars — Yeah, sometimes loading/progress indicators lie because demonstrating some amount of...
Everything you need to know about Invoker Commands | London Web Standards
▶ Everything You Need to Know About Invoker Commands — command and commandfor attributes are a brand...
Views on views
Views on 'Views' — Discussions are underway to potentially change the definition of a ‘web page’...
