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.
Defensive CSS
Defensive CSS — A new site full of handy, practical CSS and design tips (covering things...
LetsMarkdown.com • Write Markdown Together
LetsMarkdown: An Open Source Collaborative Markdown Editor — Features a VS Code-like live collaborative markdown editor...
Blob Animation | Generate smooth blob animation
Blob Animation: Generate An SVG-Based Smooth Blob Animation — Includes lots of options to customize the...
GitHub - uihaven/ui-buttons: 100 Modern CSS Buttons. Every style that you can imagine.
UI Buttons: 100 Modern CSS Buttons in Every Style You Can Imagine — Definitely some unique...
https://fonts.bunny.net/
Bunny Fonts: A Privacy-Friendly Google Fonts Alternative — These are open-source fonts designed to be a...
A CLS punishment for progressive enhancement? - Piccalilli
A CLS Punishment for Progressive Enhancement? — Andy stumbled across an issue with Lighthouse in which...
My Dumbest CSS Mistakes | CSS-Tricks
'My Dumbest CSS Mistakes' — When writing code, we all make mistakes. The author shares some...
Faster page loads using server think-time with Early Hints - Chrome Developers
Faster Page Loads Using 'Server Think-Time' with Early Hints — Here's how your server can send...
My Wonderful HTML Email Workflow
A Modern React, MDX + MJML HTML Email Workflow — We know better than most that...
Voice Control Usability Considerations For Partially Visually Hidden Link Names — Smashing Magazine
Voice Control Usability Considerations For Partially Visually Hidden Link Names — Partially visually hidden link names...
Courier Raised a $35M Series B to Make Notifications Delightful
GV (Google Ventures) Invests $35M into Notification Infrastructure API — Scalable and reliable no-code UI has...
The Future Of Frontend Build Tools — Smashing Magazine
The Future of Frontend Build Tools — The nature of frontend build tools like WebPack, Snowpack...
Style Queries
Style Queries Explained — 'Style queries' join 'container queries' in the new contain-level-3 spec. They let...
The Right Space Around Headings in Web Typography - Pimp my Type
Getting the Right Space Around Headings in Web Typography — A typographic dive into the spacing...
Smashing Podcast Episode 48 With Stephanie Eckles: Is Sass Still Relevant? — Smashing Magazine
▶ Is Sass Still Relevant? — Vitaly Friedman talks to Stephanie Eckles about whether Sass is still...
Mobile-First CSS: Is It Time for a Rethink?
Mobile-First CSS: Is It Time for a Rethink? — Is so called "mobile-first" CSS always the...
W3C to become a public-interest non-profit organization | W3C News
W3C to Become a Public-Interest Non-Profit Organization — The World Wide Web Consortium, founded by Tim...
Free PDF, Video, Image & Other Online Tools - TinyWow
TinyWow: A Collection of Online Tools to Manipulate Files — Various utilities to edit, convert, and...
Release Notes for Safari Technology Preview 147 with Safari 16 Features
Release Notes for Safari Technology Preview 147 with Safari 16 Features — Available for download for macOS...
Pop-ups are dead, long live pop-ups: or, the bait-and-switch hidden in today’s cookie announcement – Hi, I'm Heather Burns
Pop-ups Are Dead, Long Live Pop-ups: Or 'The Bait-and-Switch Hidden in a Cookie Announcement' — The...
Precise Timing With Web Animations API — Smashing Magazine
Precise Timing with the Web Animations API — Working with timers in JavaScript can quickly get...
Better scrolling through modern CSS
Better Scrolling Through Modern CSS — We typically don’t spend a ton of time thinking about...
How we think about browsers | The GitHub Blog
How GitHub Thinks About Browsers — This is an interesting dive into how GitHub is used...
Buildkite Test Analytics
Observability for Your Frontend Tests — Get instant, real-time visibility into the performance of your test...
The Guide To Windows High Contrast Mode — Smashing Magazine
The Guide to Windows High Contrast Mode — How to go about making your sites friendly...
Text-overflow: ellipsis considered harmful · Eric Eggert
text-overflow: ellipsis Considered Harmful? — A note on the downsides of constraining content through CSS.
Internet Explorer Still Does Not Go Away Today
Internet Explorer Still Hasn't Gone Away — As is always the case, there are some exceptions...
Scroll Btween
Scroll Btween: Use Scroll Position to Tween Any CSS Values on DOM Elements — Scrolling/parallax libraries...
GitHub - ThirusOfficial/tailwind-grid-auto-fit: An npm package with Tailwind CSS utility classes for creating responsive grid columns without media queries using auto fit.
Grid Auto Fit for Tailwind CSS: A Tailwind Plugin to Create a Responsive Grid Without Media...
#HEXWORDS
#HEXWORDS: A Gallery of Searchable Hex Colors That Are Also Words — A niche use case admittedly,...
Private Access Tokens: eliminating CAPTCHAs on iPhones and Macs with open standards
Private Access Tokens: Eliminating CAPTCHAs on iPhones and Macs with Open Standards — Apple is working...
The most complete Angular Component Library | Kendo UI for Angular
Everything You Need for Great UI — Every component you need to build an enterprise-ready application....
Microsoft Edge | The Future of IE is in Microsoft Edge
▶ Internet Explorer Retirement: June 15, 2022 — The Future of IE Is in Microsoft Edge —...
Preline UI
Preline UI: An Open Source Set of Prebuilt UI Components Based on Tailwind CSS — Includes...
KaTeX – The fastest math typesetting library for the web
KaTeX 0.16.0: The Fastest Math Typesetting Library for the Web — Hundreds of expressions to render...
CSS Shadow Gradients — Generator [Fast & Easy]
CSS Shadow Gradients: A CSS Generator for Drop Shadows with Gradients — Naturally, the CSS code...
Bryntum Scheduler Pro - A powerful JS resource management component - Bryntum
Integrate a Scheduler Widget into Your App in Less Than a Day
GitHub - PlasmoHQ/plasmo: The browser extension framework
Plasmo: A Framework for Building Browser Extensions — A React and TypeScript oriented framework for building...
Resize your images in bulk - Size Matters
Size Matters: A Flexible and Easy-to-use Bulk Image Resizer and Converter — You can choose from...
GitHub - Louis3797/awesome-readme-template: An awesome README template for your projects!
Awesome Readme Template: A README Template for GitHub Projects — More to this than you'd expect.
Component Encyclopedia
Component Encyclopedia: A Catalog of 5000+ UI Components — Storybook, a popular UI component devtool, has...
“The Folly of Design System “Foundations”,” an article from SuperFriendly
The Folly of Design System “Foundations” — “The idea of ‘foundations’ is one of the biggest...
Building Interoperable Web Components That Work | CSS-Tricks
Building Framework Interoperable Web Components — If you use different frameworks like React, Svelte, Vue, etc....
Hamburger Footer: Reaching the Bottom of Infinite Scroll
Hamburger Footer: Reaching the Bottom of Infinite Scroll — Infinite scroll mechanisms can be annoying when...
Cypress.io | JavaScript End to End Testing and Component Testing Framework
Introducing Cypress 10 with Component Testing Beta — Redefine how you test modern web applications.
Software Engineering - The Soft Parts
Software Engineering: The Soft Parts — Something a little different here — Addy Osmani shares some of...
Simple CSS solutions
▶ Simple CSS Solutions — Sometimes when authoring CSS we may find ourselves coming up with complex...
Ultrasonic payments | Charlie Gerard | Senior frontend developer & Creative Technologist
Creating an 'Ultrasonic' Payments System with JavaScript — A fun experiment with ultrasonic data transmission browser...
Robles v. Domino’s Settles After Six Years of Litigation
Robles v. Domino’s Settles After Six Years of Litigation — What is now one of the...
GitHub - clhenrick/color-legend-element: A custom element (web component) suitable for use as a legend in data visualizations
Color Legend Element: A Web Component Providing a Legend for Data Visualizations — Built with Lit/Lit-Element...