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.
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...
GitHub - tagconcierge/consent-banner-js: A zero-dependency, lightweight (~3kB), consent platform agnostic, cookie banner for any website.
consent-banner-js: A Zero-Dependency, Lightweight Cookie Banner — Comes in at just ~3KB, consent platform agnostic – pretty straightforward.
i.j / Mastodon embed timeline widget · GitLab
Mastodon Embed Timeline Widget — Easily embed a Mastodon timeline on your site. No dependencies, no...
MarkdownDown
MarkdownDown: Convert Any Web Page to Clean Markdown with Images Downloaded — Just enter a URL...
The Ultimate CSS Shapes Collection
The Ultimate CSS Shapes Collection — Single-element implementation. Lots to choose from, including some rather novel...
Wedges — Open-source UI components for React • Lemon Squeezy
Wedges: A Collection of UI Components for React — A well thought out, aesthetically pleasing set...
Quill - Your powerful rich text editor
Quill 2.0: A Powerful Rich Text Editor for the Web — This is a major release...
Long Alt
Long Alt — Keep your image alternative text brief, devoid of special characters, empty of URLs,...
F-Shape Pattern And How Users Read — Smashing Magazine
The F-Shape Pattern and How Users Read — When users consume your content they will be...
Don’t use the maxlength attribute to stop users from exceeding the limit
Don’t Use the maxlength Attribute to Stop Users From Exceeding the Limit — “the maxlength attribute...
HTML attributes vs DOM properties
HTML Attributes vs. DOM Properties — They’re completely different, but often coupled. Jake outlines the the...
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...
Upgrading jQuery: Working Towards a Healthy Web | Official jQuery Blog
Upgrading jQuery: Working Towards a Healthy Web — Yes, jQuery is still pretty much everywhere, so...
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...
Naming things needn’t be hard
Classnames: Find Inspiration for Naming HTML Classes, CSS Properties, or JS Functions — This little resource...
Anchor position tool
Anchor Position Tool — CSS anchor positioning is on the way, and one rather neat layout...
iOS404
iOS404 — An overview of all of the missing web features in iOS. There’s over 60,...
Modern CSS patterns in Campfire
Modern CSS Patterns in Campfire — Advancements in CSS, such as :has(), oklch(), and others allow...
Optimizing WebKit & Safari for Speedometer 3.0
Optimizing WebKit & Safari for Speedometer 3.0 — Speedometer 3.0 was introduced back in March, and...
New in Chrome 124: setHTMLUnsafe, streams in WebSockets, and more
▶ New in Chrome 124: setHTMLUnsafe, Streams in WebSockets, & More — Plus here's a run down...
A Crawl-Walk-Run Approach to Interactive Developer Documentation
🗓️ Building Interactive Docs with the WebContainer API and StackBlitz SDK — Join StackBlitz's live stream later...
CSS in React Server Components
CSS in React Server Components — An exploration of compatibility issues between React Server Components and...
Gap is the new Margin
Gap is the New Margin — Chris highlights how the use of the margin property is...
What if you had real control over Light Mode / Dark Mode on a per-site basis?
What if You Had Real Control Over Light Mode / Dark Mode on a Per-Site Basis?...
Displaying HTML web components
Displaying HTML Web Components — A brief look at using display: contents to work around the...
Things That Can Break aspect-ratio in CSS
Things That Can Break aspect-ratio in CSS — Three things that may break, or cause unexpected...
CSS text fragment selector (please)
CSS Text Fragment Selector (Please) — What could syntax for a CSS selector to jump to...
DevTools Tips & Tricks
Some DevTools Tips and Tricks — Most devs barely scratch the surface of what DevTools can...
My favourite animation trick: exponential smoothing
My Favorite Animation Trick: Exponential Smoothing — Something as small as tweaking the acceleration curve of...
SVG Encoder
SVG Encoder: A Simple Tool to Convert SVG Into Different Formats, Ready for Use in CSS...
275 CSS Gradients Collection - CSS Pro
CSS Gradients: A Gallery of 275 'Click-to-Copy' CSS Gradients — Includes quite a few unique examples...
Layer Cake
Layer Cake: A Graphics Framework for Svelte — This library gives you a baseline for creating...
Interior & Exterior Angles - Beyond the Hexagon
Interior & Exterior Angles: Beyond the Hexagon — Sharing this as the page has a series...
Going beyond pixels and (r)ems in CSS - Absolute length units - iO tech_hub
Going Beyond Pixels and (r)ems in CSS: Absolute Length Units — The last in a series...
Understanding Interaction to Next Paint (INP)
Understanding Interaction to Next Paint (INP) — INP provides a much better representation of real-world performance...
Penpot 2.0 release is out now! CSS Grid Layout, Components and a new UI
Penpot 2.0 Release Is Out Now — Version 2.0 of this open-source design tool (for both...
GitHub - firecmsco/neat: Neat allows you to build awesome gradients for your website, using 3d shaders
Neat: Create 3D Animated Gradients Powered by Three.js — After you install the package, you can...
barba.js
Barba.js: For Smooth Visual Transitions Between Pages — Well, you certainly can’t say the project’s homepage...
faces.js - A JavaScript library for generating vector-based cartoon faces
faces.js: A JavaScript Library for Generating Vector-Based Cartoon Faces — The end results are somewhat reminiscent...
Introducing Jpegli: A New JPEG Coding Library
Introducing Jpegli: A New JPEG Coding Library — It claims to compress images 35% more than...
https://counterscale.dev/
Counterscale: Scalable Web Analytics You Can Run on Cloudflare — A simple web analytics tracker and...
Asking users for their pronouns: A guide for UX designers
Asking Users for Their Pronouns: A Guide for UX Designers — “Designing a pronoun selector isn’t...
On disabled and aria-disabled attributes
On disabled and aria-disabled Attributes — What’s the difference between these two, and when should you...
The ADA Now has Regulations for Accessibility of Web Content and Mobile Apps - TPGi
The ADA Now Has Regulations for Accessibility of Web Content and Mobile Apps — The first...
The Things Users Would Appreciate In Mobile Apps — Smashing Magazine
The Things Users Would Appreciate In Mobile Apps — Pointers on things like forms, search, navigation,...
Using AI-powered Autofix to fix your broken code
Using AI-Powered Autofix to Fix Your Broken Code — Join Sentry live on April 25th, to...
Don’t get scammed by fake performance experts and apps
Don’t Get Scammed by Fake Performance Experts and Apps — This post exposes some of the...
Folding the DOM
Folding the DOM — No, you can’t fold a DOM node in two, but Josh runs...
The View Transitions API
The View Transitions API — Want to scratch the surface of what the View Transitions API...
