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.
CSS Grid Areas
Going Deep into CSS Grid Areas — We’re seven years into widespread support for CSS Grid,...
https://www.figma.com/community/plugin/1373362852131056921/wcag-plugin
WCAG Plugin: A Figma Plugin to Enhance Accessibility — Helpful for accessibility teams that need to...
PatternPad - Create beautiful patterns for presentations, social media or branding.
PatternPad: An Online Tool to Create Beautiful Patterns — Patterns are downloadable as SVG, PNG, or...
matcha.css | Drop-in semantic styling library in pure CSS
matcha.css: A Drop-In Semantic Styling Library in Pure CSS — Designed for simple sites and prototypes,...
maska v3 docs
Maska 3.0: Zero-Dependency Input Mask Library — There are several demos on the homepage. Lightweight and...
Design GUI - AI Browser Extension for managing colors in CSS Variables
Design GUI: Browser Extension for Managing Colors in CSS Variables — Lots of features in this one...
The Pitfalls of In-App Browsers – Frontend Masters Boost
The Pitfalls of In-App Browsers — Some apps opt to use an in-app browser to browse...
Readability: The Optimal Line Length – Articles – Baymard Institute
Readability: The Optimal Line Length — The length of text lines substantially impacts their readability. Here’s...
Alternative text in action – Accessibility in government
Alternative/alt Text in Action — Some sound, considered advice from the accessibility team behind the United...
How not to use box shadows
So You Think You Know Box Shadows? — Or, perhaps, “How not to use box shadows.”...
CSS Stuff I'm Excited After The Last CSSWG Meeting | CSS-Tricks
CSS Stuff I'm Excited About After the Last CSSWG Meeting — We’ve seen plenty of advances...
How to make complex Chrome extensions: a zero gravity guide—Martian Chronicles, Evil Martians’ team blog
How to Make Complex Chrome Extensions — Spinning up a quick, simple browser extension isn’t a...
WorkOS — Your app, Enterprise Ready.
WorkOS: Start Selling to Enterprises with Just a Few Lines of Code — WorkOS is a...
A new path for Privacy Sandbox on the web
Google's 'New Path' for Privacy Sandbox on the Web — If you’ve seen stories about Google...
GitHub - liriliri/eruda: Console for mobile browsers
Eruda 3.1: A Console for Mobile Browsers — If you’re in a situation where you have...
CSS Selectors | CSS-Tricks
CSS Selectors — A thorough, complete guide/reference covering all of the various methods we have to...
Seamless SVG copy-paste on the web
Seamless SVG Copy-Paste on the Web — Support has been added to Chromium browsers for SVG...
Figma for Developers: Using Constraints, Auto Layout, Components & CSS Variables Generation
Figma Isn't Just for Designers — Steve Kinney shares how devs can leverage Figma to bridge...
@property: Next-gen CSS variables now with universal browser support | Blog | web.dev
@property: Next-Gen CSS Variables Now with Universal Browser Support — The @property rule, part of the...
Private Browsing 2.0
Private Browsing 2.0 in Safari — First included as a feature in Safari almost twenty years...
An update on invokers: Invoker commands in HTML | utilitybend
An Update on Invokers: Invoker Commands in HTML — An overview of this experimental syntax which...
Dialog dilemmas and modal mischief: a deep dive into popovers and how to build them
▶ Dialog Dilemmas and Modal Mischief: A Deep Dive into Popovers — A talk from the All Day...
ViteConf
ViteConf is Back! — ViteConf will be returning to the virtual stage on October 3rd. Get...
Utility First CSS Isn’t Inline Styles | Sarah Dayan | CSS Day 2024
▶ Utility First CSS Isn’t Inline Styles — A 52-minute talk on the comparison often made between...
Embracing Functional CSS: Have we moved on? - Browser London
Embracing Functional CSS: Have We Moved On? — A look at the positives of utility-first CSS,...
JPEG History: Compressing It Down, Keeping The Essence
JPEG History: Compressing It Down, Keeping the Essence — How the JPEG file — and the lossy...
CSS Grid Generator
CSS Grid Generator — A handy browser-based tool that can create custom CSS grid layouts. The...
Start Building Your Application
Stop Worrying About Your Auth. Let FusionAuth Handle It — Flexible deployment. Advanced features like MFA,...
GitHub - dy/linefont: Font for rendering line chart data
Linefont: A Typeface for Rendering Line Chart Data — A one-of-a-kind font that’s part of Google...
GitHub - mnater/Hyphenopoly: Hyphenation for node and Polyfill for client-side hyphenation.
Hyphenopoly 6.0: A Polyfill for Client-Side Hyphenation — Hyphenates text if the user agent does not...
GitHub - unplugin/unplugin-turbo-console: 🚀 Improve the Developer Experience of console
unplugin-turbo-console: Improve the Developer Experience of console.log() — Part of UnJS’s Unplugin ecosystem, this enhancement to...
https://behdad.org/text2024/
State of Text Rendering 2024 — A highly detailed look at free and open source fonts,...
Interop 2024 mid-year update | Blog | web.dev
Interop 2024 Mid-Year Update — As we head into the second half of the year, Rachel...
The Stack Overflow Podcast - Stack Overflow
Want to Dive Deeper into Stories of the Software Industry? — The Stack Overflow Podcast is...
Batman-Comic.CSS
Batman-Comic.CSS — A fun caped crusader comic library that allows “children to play with HTML and...
Font Interceptor
Font Interceptor: Download the Fonts in Use on a Target Site — Enter a URL and...
GitHub - evoluteur/braille-tools: CSS and Javascript to display Braille grade 1 in web pages (for sighted people).
Braille-Tools: CSS and JavaScript to Display Braille — Designed for displaying English Braille Grade 1 for...
GitHub - anh-ld/nho: 📌 1KB Web Component Abstraction
Nho: Tiny JS Library for Easy Web Component Development — A simple solution for kickstarting your...
SpeedCurve | 15 page speed optimizations that sites ignore (at their own risk)
15 Page Speed Optimizations That Sites Ignore (at Their Own Risk) — Optimizations to put in place,...
The Magic of Clip Path
The Magic of Clip Path — This post sets out to “inspire you and show you...
YouTube Embeds are Bananas Heavy and it’s Fixable – Frontend Masters Boost
YouTube Embeds are 'Bananas Heavy' and It’s Fixable — A good performance PSA worth remembering.
Are web components worth it? - Off The Main Thread
▶ Are Web Components Worth It? — Jake and Surma chat about web components, why they were...
"If" CSS Gets Inline Conditionals | CSS-Tricks
"If" CSS Gets Inline Conditionals — Distilling some thoughts on the potential if CSS conditional, along...
CSS One-Liners to Improve (Almost) Every Project
CSS One-Liners to Improve (Almost) Every Project — A collection of handy, simple one-line CSS solutions...
How Keyboard Navigation Works in a CSS Game – Frontend Masters Boost
How Keyboard Navigation Works in a CSS Game — You may recall a few issues ago...
Zoom, zoom, and zoom
Zoom, Zoom, and Zoom — A post exploring the intricacies of the three types of browser...
Optimizing bug reproduction workflows with StackBlitz
Optimizing Bug Reproduction Workflows — Join our live stream later today where we’ll cover practical ways...
Script Integrity – Frontend Masters Boost
Script Integrity — This web platform feature (the integrity attribute on script and link elements) can...
Exploring the challenges in creating an accessible sortable list (drag-and-drop)
Exploring the Challenges in Creating an Accessible Sortable List — The accessibility team at GitHub consider...
GitHub - fabricjs/fabric.js: Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
Fabric.js 6.0: A SVG-to-Canvas and Canvas-to-SVG Library — Provides an interactive object model on top of...
