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.
12 Modern CSS One-Line Upgrades | Modern CSS Solutions
01: Twelve Modern CSS One-Line Upgrades — Stephanie shared this list of a dozen CSS properties that...
CSS Grid Generator
CSS Grid Generator — This handy browser-based tool got plenty of you clicking — you can use...
Announcing Speedometer 3.0: A Shared Browser Benchmark for Web Application Responsiveness
Speedometer 3.0: A Browser Benchmark for Webapp Responsiveness — 2024 gave us a new major release...
Anchor position tool
Anchor Position Tool — CSS anchor positioning is on the way, and one rather neat layout...
The Front End Developer/Engineer Handbook 2024
10: The Frontend Developer/Engineer Handbook 2024 — This incredibly in-depth and detailed guide on the current web...
An Interactive Guide to CSS Container Queries
08: An Interactive Guide to CSS Container Queries — This is a detailed explainer on CSS container...
CSS Selectors | CSS-Tricks
07: CSS Selectors — A thorough, complete guide covering all of the various methods we have to...
The Magic of Clip Path
06: The Magic of Clip Path — This post sets out to “inspire you and show you...
How To Center a Div • Josh W. Comeau
05: How to Center a Div — The fact that so many of you tapped on this...
What You Need to Know about Modern CSS (2024 Edition) – Frontend Masters Boost
04: What You Need to Know about Modern CSS — A bookmarkable guide from this past Spring...
Inline conditionals in CSS? • Lea Verou
03: Inline Conditionals in CSS? — In the summer the CSS Working Group resolved to add an...
5 CSS snippets every front-end developer should know in 2024 | Articles | web.dev
02: Five CSS Snippets Every Frontend Developer Should Know in 2024 — Adam did this in 2023,...
The Complete React Course: Build an e-Commerce App with Hooks, Effects, and More! | Frontend Masters
Complete Intro to React v9: New Project, Modern Stack — Join Brian Holt in building a...
Multi-State Buttons – Frontend Masters Boost
Multi-State Buttons — Typically, buttons are either pressed or they aren’t. But as long as you...
The 2024 Web Almanac
🗓️ The 2024 Web Almanac — This comprehensive report on the state of the web returns to...
Pure CSS Halftone Effect in 3 Declarations – Frontend Masters Boost
Creating a Pure CSS Halftone Effect in 3 Declarations — Creating a halftone effect in pure...
WorkOS — Your app, Enterprise Ready.
WorkOS: Sell to Enterprises with a Few Lines of Code — The modern identity platform for B2B...
CSS Wrapped 2024
CSS Wrapped 2024 — A fun (pixel-art filled) exploration of the new additions to the web...
Solved By Modern CSS: Feature Image
Solved By Modern CSS: Feature Image — Ahmad shares how container queries and CSS :has() can...
Custom dropdowns just got a whole lot easier (finally!)
▶ Custom Dropdowns Just Got a Whole Lot Easier (Finally!) — A quick look at the upcoming...
My issues with shorthand properties | Håvard Brynjulfsen
'My Issues with Shorthand Properties' — A bold claim here, stating that the “removal of CSS...
Catching Flaky Tests Before It's Too Late - Codecov
Catch Flaky Tests Before They Break Your Build — Flaky tests waste time and erode trust....
What do the State of CSS and HTML surveys tell us? | Blog | web.dev
What Do the State of CSS and HTML Surveys Tell Us? — Rachel (of the Chrome...
Using Transformers.js for AI in the Browser
Using Transformers.js for AI in the Browser — Transformers.js is a seriously impressive project we link...
Mastering SVG Arcs — Smashing Magazine
Mastering SVG Arcs — Akshay shares his love of drawing in code, in turn demystifying how...
Gradienty - Tailwind CSS Gradient Generator
Gradienty: A Suite of CSS Tools & Generators — Currently includes 11 different tools including generators...
GitHub - Bercon/roquefort: Roquefort - WebGPU fluid simulator
Roquefort - WebGPU Fluid Simulator — A browser-based 3D simulator that uses WebGPU compute shaders. You...
InclusiveColors - Accessible color palette creator
InclusiveColors: A Color Palette Creator for WCAG-Compliant Colors — Offers features like precise control of every shade/tint...
Codate - Easily Create Custom Date Formats in Any Programming Language
Codate: Easily Create Custom Date Formats in Any Programming Language — A neat little resource to...
PicLooks | Free Profile Pictures
PicLooks: Authentic Looking AI-Generated Profile Photos — An alternative to using stock photos, these do have...
Tailwind Colors
Tailwind Colors: All The Tailwind CSS Colors in a 'Cheatsheet' — You can click to copy...
Frosted Glass from Games to the Web - tyleo.com
Frosted Glass from Games to the Web — A UI games developer (who worked on the...
The Lowdown on Dropdowns in HTML & CSS
The Lowdown on Dropdowns in HTML & CSS — If you’re trying to reveal content from...
Product for Engineers | Substack
Flex Your Product Muscle with Product for Engineers — Get curated advice on building great products,...
Dataviz accessibility principles, demonstrated by the 2024 presidential election dashboards. by Sarah L. Fossheim
Dataviz Accessibility Principles, Demonstrated by 2024 Presidential Election Dashboards — Sarah has tested the accessibility of...
A Layered Approach to Speculation Rules – CSS Wizardry
A Layered Approach to Speculation Rules — Harry has been experimenting with the Speculation Rules API,...
https://shortclick.link/w1yhg6
Build with Gemini, Our Largest and Most Capable AI Model — Use the Google AI JavaScript...
Kinesis
Kinesis.js: A Library to Easily Create Complex Interactive Animations — The home page includes some advanced...
uifonts.app
uifonts.app: Test and Preview Fonts in Real Time — The fonts, sourced from Google Fonts, are...
GitHub - selemondev/spark-ui: Experience The Magic Of Animated Components. Crafted With Vue, TypeScript, TailwindCss And Vueuse Motion ✨
Spark UI: A Library of Animated Components Built with Vue, TypeScript, Tailwind, and Vueuse Motion —...
Creating An Effective Multistep Form For Better User Experience — Smashing Magazine
Creating Effective Multi-Step Forms — Looks at the design considerations for good-form experiences, beyond just validation...
Starting off right: Where autofocus shines - HTMHell
Starting Off Right: Where Autofocus Shines — On the value of autofocus for enhancing the user...
Spoiled
Spoiled: A Realistic 'Spoiler' Component for React — The homepage is a live demo. A neat...
Make creative borders with background-clip border-area
Make Creative Borders with background-clip: border-area — Safari is first out of the gate with support...
Free HTML Website Templates on HTMLrev
HTMLrev: A Categorized Directory of Frontend Templates — We’ve featured this before, but it’s now home...
GitHub - shubhamjain/svg-spinners: Collection of open-source SVG spinners (CSS & SMIL based).
SVG Spinners: 100+ Open Source SVG Loading Spinners — You can view them all in action...
Tremor – Copy-and-Paste Tailwind CSS UI Components for Charts and Dashboards
📊 Tremor: React Components for Building Dashboards — Built with React, Tailwind CSS, and Radix UI, you...
How browsers REALLY load Web pages — Robin Marx
▶ How Browsers Really Load Web Pages — A deep dive into how browsers decide when to...
Designing (and Evolving) a New Web Performance Score – CSS Wizardry
📈 Designing (and Evolving) a New Web Performance Score — Harry has been working on a way...
Diff Text - Compare Text Online
Diff Text: A Simple Online Diff Checker Tool — Lets you compare by words, characters, or...
