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.
State of HTML 2023
The Results of State of HTML 2023 — You may recall late last year we shared...
GitHub - dominickp/gall: Generate simple HTML/CSS Masonry galleries for local image albums.
go-masonry-gallery: A CLI Tool to Generate a Simple HTML/CSS Masonry Gallery from a Local Folder —...
Color Picker
🎨 Color Picker: Pick Colors by Clicking on Any Image — Upload an image then use an...
Index – WyW-in-JS
WyW-in-JS: A Toolkit for Zero-Runtime CSS-in-JS Libraries — Meaning “Whatever-you-want-in-JS”, it allows developers to build their...
Home | DOM Projects
DOM Projects: A Collection of Projects to Learn Frontend Development — Mainly for beginners, this serves...
https://campaigns-linkurious.cleverstory.io/reasons-to-use-a-javascript-graph-visualization-library
Adding Customizable Network Visualization Capabilities to Your Apps — Find out how JS libraries can help you...
Studio by WordPress.com
WordPress Studio: A Local App for Running WordPress in Dev — There have long been unofficial...
Manifesto for a Humane Web
Manifesto for a Humane Web — In an age of trackers, bots, and generative AI, Michelle...
Hardest Problem in Computer Science: Centering Things
Hardest Problem in Computer Science: Centering Things — “Even if it’s hard. Even if tools make...
I’m worried about the tabbing behaviour, rather than the syntax and name of CSS masonry
I’m Worried About the Tabbing Behavior, Rather than the Syntax and Name of 'CSS Masonry' —...
The Modern Guide For Making CSS Shapes — Smashing Magazine
The Modern Guide for Making CSS Shapes — A comprehensive guide with modern techniques for creating...
Your background images might be causing CLS
Your Background Images Might Be Causing CLS by Salma Alam‑Naylor — In this post, learn how...
The Times You Need A Custom @property Instead Of A CSS Variable — Smashing Magazine
The Times You Need a Custom @property Instead of a CSS Variable — Demonstrates where custom properties...
Introducing the CSS anchor positioning API | Blog | Chrome for Developers
Introducing the CSS Anchor Positioning API — With anchor positioning built into the browser, you’ll be...
Announcing the Web Platform Dashboard | Blog | web.dev
Announcing the Web Platform Dashboard — The ‘Web Platform Dashboard’, announced at Google I/O, is a...
10 updates from Google I/O 2024: Unlocking the power of AI for every web developer | Blog | Chrome for Developers
10 Updates from Google I/O 2024: Unlocking the Power of AI for Every Web Developer —...
Icônes
Icônes: An Icon Explorer with Instant Search for 100+ Icon Sets — The app is powered...
Introducing "Unleash the power of Scroll-Driven Animations" | Blog | Chrome for Developers
▶ Unleash the Power of Scroll-Driven Animations — This new 10-part video series should equip you with...
Why don’t we talk about minifying CSS anymore?
Why Don’t We Talk About Minifying CSS Anymore? — Salma notes that minification of CSS is...
23 CSS features you should know (and be using) by now
▶ 23 CSS Features You Should Know (And Be Using) by Now — Adam Argyle joins Kevin...
Using the Popover API for HTML Tooltips – Frontend Masters Boost
Using the Popover API for HTML Tooltips — Chris continues his exploration of the Popover API,...
Misconceptions about CSS Specificity
Misconceptions About CSS Specificity — Clarification on how CSS specificity is calculated and what does and...
Should we rely on browser detection? – Hello my name is Niels Leenheer
Should We Rely on Browser Detection? — The User-Agent string is something that web developers should...
Angular image & video upload
Handling Images & Videos in Angular? This Practical Guide Is for You — Implement drag-and-drop uploads, progress...
Faster websites with the Picture element
Faster Websites with the Picture Element — An overview of the various wins to be had...
Combining CSS :has() And HTML <select> For Greater Conditional Styling — Smashing Magazine
Combining CSS :has() and HTML <select> For Greater Conditional Styling — An interesting technique here for what Amit calls the...
Noah Liebman | Making room for long list markers with `subgrid`
Making Room for Long List Markers with subgrid — By default lists (ul and ol) give...
A Brief Note on Highlighted Text
A Brief Note on Highlighted Text — Specifically on how to give any styled highlighted text...
GitHub - missive/emoji-mart: 🏪 One component to pick them all
Emoji Mart 5.6: A Customizable Emoji Picker for the Web — This is a popular and recently...
GitHub - tinyworldmap/tiny-world-map: tinyworldmap is a tiny world map for offline-first and low-bandwidth web apps
tinyworldmap: A World Map Solution for Offline-First & Low-Bandwidth Web Apps — Designed to be used...
Can I email…
Can I Email..? Support Tables for HTML and CSS in Emails — It’s like Can I...
Popover API is Here
The Popover API is Here — The Popover API now has broad support, and as such...
Adding video player in Next.js
Here's a Simple Video API for Your Next.js Application — Integrate a video player into your...
An alternative proposal for CSS masonry | Blog | Chrome for Developers
An Alternative Proposal for CSS Masonry — Last week we shared WebKit’s thoughts on how to...
Fluid for Tailwind CSS
Fluid for Tailwind CSS — A fluid clamp() plugin for Tailwind that works with every utility....
https://onlyspans.net/
Only <Spans>: Each Element on This Page is a SPAN — A silly what-not-to-do experiment that...
JSONGenerator.io - Create Random JSON Data
JSON Generator: An Intuitive Tool for Crafting Complex JSON Structures — Includes 40+ “template tags” (or...
https://codepen.io/cobra_winfrey/pen/oNOMRav
'Doom' Scroll — A neat demo of @scroll-timeline — a new CSS property that allows animations to...
Popicons | Bring life & personality to your projects.
Popicons: A Set of Free Figma/SVG Icons in Line, Solid & Duotone Styles — Designed in...
Extension
extension.js: Zero-Config, Cross Browser Extension Dev Starter — The goal is to make it as simple...
https://www.designsystemhunt.com/
DesignSystemHunt: A Curated Collection of Design Systems from Popular Brands — Currently includes links and info...
Firstyear's blog-a-log
Passkeys: A Shattered Dream? — William, who has his own web auth project, shares some concerns...
Reaction-Diffusion Compute Shader in WebGPU | Codrops
Reaction-Diffusion Compute Shader in WebGPU — A look at how to use WebGPU compute shaders to...
Handling The Indentation of a Treeview Component
Handling the Indentation of a Treeview Component — How should you approach building a UI that...
Optimizing INP: A deep dive
▶ Optimizing INP: A Deep Dive — A good step-by-step instructional video on digging into responsiveness issues...
Printing music with CSS grid
Printing Music with CSS Grid — The author notes (pun very much intended) that music notation...
Detect JavaScript Support in CSS
Detect JavaScript Support in CSS — A way to provide alternative CSS rules depending on whether...
A conversation with Una Kravets: The rapid evolution of CSS and hobbies outside of work
▶ A Conversation with Una Kravets: The Rapid Evolution of CSS — An interview with Una, the...
The (Frontend||UI||UX) Developer/Engineer Handbook 2024
The Frontend Developer/Engineer Handbook 2024 — An in-depth, detailed, and free guide to the current web development...
Help us invent CSS Grid Level 3, aka “Masonry” layout
Help Invent CSS Grid Level 3, Aka “Masonry” Layout — Masonry style layouts (above) see content laid out like...
