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.
Announcing FusionAuth 1.52.0 - Passkeys for Everyone!
Passkeys for Everyone! Make Your User Login Simpler with FusionAuth — FusionAuth just added passkeys to...
Introducing @bramus/style-observer, a MutationObserver for CSS
Introducing style-observer, A MutationObserver for CSS — Bramus has created a MutationObserver for CSS. It, dubbed...
Reasonable Colors
Reasonable Colors: An Open-Source Color System for Building Beautiful, Accessible Color Palettes — Just drop in...
Why I Don’t Block AI Scrapers · Jens Oliver Meiert
'Why I Don’t Block AI Scrapers' — “let thieves do thief things until our justice system(s)...
Scroll-Enhanced Experiences | Carmen Ansio | CSS Day 2024
▶ Scroll-Enhanced Experiences — A 52-minute journey through the art of 'scrollytelling' with CSS, guiding you through...
Lazy loading isn't just lazy, it's late: we can do better.
Lazy Loading Isn't Just Lazy, It's Late: We Can Do Better — “We tend only to...
The Two Lines of CSS That Tanked Performance (120fps to 40fps)
Finding Two Lines of CSS That Tanked Performance — Upon launching the Learn Web Components site,...
Caching demystified: Inspect, clear, and disable caches #DevToolsTips
▶ Caching Demystified: Inspect, Clear, and Disable Caches — Dives into the different types of browser cache...
Apple appears to mislead UK Regulator over deceptive default browser user interface - Open Web Advocacy
Apple 'Appears to Mislead' UK Regulator Over Deceptive Default Browser User Interface — Looks like Apple...
Button Stealer
Button Stealer: A Chrome Extension That "Steals" a Button from Every Website You Open — A...
Grid Builder - Learn and build Tailwind CSS grids with the grid builder!
Tailwind Grid Builder: Learn and Build CSS Grids with Tailwind — A simple tool to generate...
Avatars - a list of free and fun avatars for your projects
Avatars: A Collection of Diverse Free Avatar Images — Downloadable in PNG format, but also accessible...
The Dev Tools Performance Monitor Panel
The Dev Tools Performance Monitor Panel — In Chrome, if you open 'Dev Tools > More...
https://www.webdesignmuseum.org/
The Web Design Museum: The First Decade of Web Design — Exhibits thousands of unique old...
The secret inside One Million Checkboxes
The Secret Inside One Million Checkboxes — One Million Checkboxes is/was a site with one million...
The Ultimate Guide to Font Performance Optimization | DebugBear
The Ultimate Guide to Font Performance Optimization — This is quite the rabbit hole indeed, but...
Beyond the 10x engineer
Beyond the 10x Engineer — Incredible technical skills can’t save a product that no one wants....
Supporting AVIF in Google Search | Google Search Central Blog | Google for Developers
Supporting AVIF in Google Search — Image format AVIF is now a supported file type in...
GitHub - hoppergee/heic-to: Convert HEIC/HEIF images to JPEG, PNG in browser
heic-to: Convert HEIC/HEIF Images to JPEG or PNG In-Browser — HEIF is a modern container format...
State of CSS 2024
The State of CSS 2024 Survey — The increased pace of evolution in the CSS space...
How to make your web page faster before it even loads
How to Make Your Web Page Faster Before It Even Loads — Can we measure the...
Front-End System Design: Advanced UI, Performance & Architecture Techniques to Ace Interviews
Front-End System Design — Learn to create scalable, efficient user interfaces in this extensive video course...
Can you convert a video to pure css?
Can You Convert a Video to Pure CSS? — Can or should..? A highly detailed exploration...
blocking=render: Why would you do that?! – CSS Wizardry
blocking=render: Why Would You Do That?! — Harry stresses that unless you know you need this...
Custom Range Slider Using Anchor Positioning & Scroll-Driven Animations – Frontend Masters Boost
Custom Range Slider Using Anchor Positioning & Scroll-Driven Animations — It’s still a touch early to...
Spoiler Alert: it needs to be accessible | scottohara.me
🙈 Spoiler Alert: It Needs to Be Accessible — Here’s what Scott would expect from a...
Basic keyboard shortcut support for focused links
Basic Keyboard Shortcut Support for Focused Links — Turns out there’s a lot of different actions...
Double your specificity with this one weird trick
Double Your Specificity with This One Weird Trick — A bit of a hack, sure, but...
5 Wasm Use Cases for Frontend Development · Frontend Dogma
Five WASM Use Cases for Frontend Development — WebAssembly is gaining ground in frontend development, so...
Elastic Overflow Scrolling | CSS-Tricks
Elastic Overflow Scrolling — Creating a CSS-only “rubber band” scrolling effect.
GitHub - jcubic/tagger: Zero Dependency, Vanilla JavaScript Tag Editor
Tagger: Zero Dependency, Vanilla JavaScript Tagging Library — You can play with a live demo here.
Web Vitals - Chrome Web Store
Web Vitals: Chrome Extension for Instant Feedback on Loading, Interactivity and Layout Shift Metrics — Includes...
Replace Twitter Embeds with Semantic HTML
Replace Twitter (X) Embeds with Semantic HTML — A Python script for converting a public Tweet...
The Monospace Web
The Monospace Web — A well formed, minimalist CSS design exploration, featuring lists, tables, charts, ASCII...
GitHub - nolanlawson/fuite: A tool for finding memory leaks in web apps
Fuite 5.0: A Tool for Finding Memory Leaks in Web Apps — A CLI tool that...
Milkdown
Milkdown: Plugin-Driven WYSIWYG Markdown Editor Framework — A lightweight WYSIWYG Markdown editor based around a plugin...
Relative Color Syntax — Basic Use Cases – Frontend Masters Boost
Relative Color Syntax — Some Basic Use Cases — We now have broad support for the...
The Slab markup language
Slab: A Programmable Markup Language That Simplifies The Creation of HTML — An alternative to tools...
Inter 4.0: A Big Font Update for UI Design
▶ Inter 4.0: A Big Font Update for UI Design — Now with true italics, optical sizing...
GitHub - jln13x/tailwindcss-highlights: A plugin for tailwindcss to add highlights to your text
tailwindcss-highlights: A Tailwind Plugin to Add Highlights to Text — The term “highlights” here refers to...
A Node and Command Line Tool to Find Obsolete HTML · Jens Oliver Meiert
ObsoHTML: Node and CLI Tool to Find Obsolete HTML — ObsoHTML is a Node.js script designed...
typlr.app —
typlr.app: Create Fonts in the Browser — If you’ve never attempted to make your own font,...
The Dying Web | Matthias Endler
The Dying Web — A plea to us all to give Firefox a try, because open...
The anchor element: HeydonWorks
The Anchor Element — An informative look at the humble HTML <a> anchor element, explaining what...
font-size Limbo - Sebastian Laube
font-size Limbo — Some nuanced thoughts on what font-size we should be reaching for as a...
HTML Web Components Can Have a Little Shadow DOM, As A Treat | Scott Jehl, Web Designer/Developer
HTML Web Components Can Have a Little Shadow DOM, As A Treat — Scott notes that...
Japanese web design: weird, but it works. Here's why
▶ Japanese Web Design: Weird, But It Works. Here's Why — “beneath the overwhelming user interface lies...
Start over-engineering your CSS | Kevin Powell | CSS Day 2024
▶ Start Over-Engineering Your CSS — An interesting talk from the recent CSS Day conference about purposely...
How Google handles JavaScript throughout the indexing process – Vercel
How Google Handles JavaScript In Its Indexing Process — At one point if you wanted Google...
Announcing Official Puppeteer Support for Firefox – Mozilla Hacks - the Web developer blog
The Puppeteer Browser Control Library Announces Official Firefox Support — As of version 23, the Puppeteer browser...
