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.
display: contents considered harmful
An FYI — display: contents Considered Harmful — “The erratic nature of how the declaration actually...
Brief Note on Popovers with Dialogs
A Brief Note on Popovers with Dialogs — When it comes to popovers and dialogs Adrian...
How to draw any regular shape with just one JavaScript function | MDN Blog
How to Draw Any Regular Shape with Just One JavaScript Function — Mozilla/MDN has a (relatively)...
How to Optimize Development Efficiency When You’re Building a Super App | blog {callstack}
How to Scale a Complex React Native App? — Discover how to optimize development efficiency with...
Announcing the second Compute Pressure origin trial - Chrome Developers
Announcing the Second 'Compute Pressure' Origin Trial — This new origin trial from Chrome allows web...
Scroll-driven Animations
Scroll-Driven Animation Examples — There’s a bunch of neat demos here to show off scroll-driven animations...
Bootstrap 5.3.0
Bootstrap 5.3.0: The Reponsive Sass-Based Frontend Toolkit — “a monumental effort to revamp our codebase for...
GitHub - loeffel-io/ls-lint: An extremely fast directory and filename linter - Bring some structure to your project filesystem
ls-lint 2.0: A Fast File and Directory Name Linter — Written in Go but aimed at...
Vue.js UI UX DX Library
Inkline 4.0: A Customizable Vue.js 3 UI/UX Library — A design system and numerous customizable components...
GitHub - meodai/color-names: Large list of handpicked color names 🌈
Color Names: Large List of Handpicked Color Names — This goes beyond just the obvious choices like...
BlockNote - BlockNote - Javascript Block-Based text editor
BlockNote: A 'Notion-Like' Block-Based Text Editor — Flexible and presents an extensive API so you can...
Mastering CSS Blend Modes
Mastering CSS Blend Modes — CSS mix blend modes provide an easy, yet powerful way to...
Error-Message Guidelines
Error-Message Guidelines — Sound advice for designing effective error messages that deliver high visibility, provide constructive...
21 Awesome Web Features you’re not using yet
▶ 21 Awesome Web Features You’re Not Using Yet? — Runs through some of the “game changing...
300ms Faster: Reducing Wikipedia's Total Blocking Time
300ms Faster: Reducing Wikipedia's Total Blocking Time (TBT) — TBT is the sum of the blocking...
SupportsCSS
SupportsCSS: Feature Detection for Modern CSS — Inspired by Modernizr, this little script expands on the...
New in Chrome 114: text-wrap:balance, CHIPS, Popover API and more!
▶ New in Chrome 114: text-wrap:balance, CHIPS, Popover API and More — Version 114 of Chrome is...
with Tailwind CSS, HTML & Astro.build..
Windstatic: A Set of 170+ Components & Layouts Made with Tailwind and Alpine.js — Categorized under...
Picyard - Beautiful Backgrounds for Images And Mockups from Screenshots
Picyard: Create Screenshots and Mockups with Beautiful Backgrounds — Has lots of different ways to customize...
GitHub - wooorm/starry-night: Syntax highlighting, like GitHub
Starry Night: GitHub-Like Syntax Highlighting — GitHub’s own syntax highlighting approach isn’t open source, but this...
Strawberry - Zero-Dependency, Build-Free JavaScript Framework
Strawberry: Zero-Dependency, Build-Free JavaScript Framework — A tiny frontend framework positioned as an “alternative to vanilla...
Introducing the popover API - Chrome Developers
Introducing the popover API — There’s a new set of declarative HTML APIs for building popovers...
11 HTML best practices for login & sign-up forms—Martian Chronicles, Evil Martians’ team blog
Eleven HTML Best Practices for Login and Signup Forms — Andrey notes that “even popular sites...
Learn Full-Stack Web Development | Course by Jem Young | Frontend Masters
Full Stack for Front-End Engineers with Jem Young (Netflix) — Learn what it means to become...
WebKit Features in Safari 16.5
WebKit Features in Safari 16.5 — This version of Apple’s browser contains a handful of new...
Why we're bad at CSS
'Why We're Bad at CSS' — “We want our styles to be generic enough to reuse...
Using linear() for better animation
Using linear() for Better Animation — A good look at using the linear() easing function with...
https://www.chrbutler.com/the-rhythm-of-your-screen
The Rhythm of Your Screen — Thoughts on scrolling, holding attention, information architecture, and achieving a...
Be Careful Using ‘Menu’
Be Careful Using ‘Menu’ — Some cautionary advice on the use of the word ‘menu’ in...
How We Built Our Documentation On Docusaurus
We Built Our Documentation Using Docusaurus, React, and Vercel — It requires effort to produce great documentation....
Add Opacity to an Existing Color - Chris Coyier
Add Opacity to an Existing Color — Let’s say you have your brand color, and you...
The New dialog HTML Element Changes Modals Forever
▶ The New dialog HTML Element Changes Modals Forever — This 12-minute video highlights how the dialog...
The button case - Using custom properties for a smart button system | utilitybend
The Button Case - Using Custom Properties for a Smart Button System — A look at using...
Updating my website from my iPad! | Daniel Diaz's Website
Updating My Website from My iPad — A look at using GitHub Codespaces to both develop...
Stop Rewriting Your CSS! Use :not() Instead
▶ Stop Rewriting Your CSS. Use :not() Instead — Useful stuff to know, especially as :not is...
CSS Pattern: Fancy backgrounds with CSS gradients
CSS Pattern: Fancy Backgrounds with CSS Gradients — A collection of nice background patterns, now 100...
Scroll Btween
Scroll Btween: Use Scroll Position to Tween CSS Values on DOM Elements — Scrolling/parallax libraries tend to...
Conditional CSS with :has and :nth-last-child - Ahmad Shadeed
Conditional CSS with :has and :nth-last-child — Highlights a few practical examples of combining the CSS...
shaper
Shaper: A Generative Design Tool for UI Interfaces — An interactive tool to explore design variations...
CSS HD Gradients
CSS HD Gradients: Interactively Build and Customize Gradients — The gradients are built using modern color formats...
PeepsLab - Create your own peep
PeepsLab: Create Your Own "Peep" (i.e. "People") Avatars — You can randomize just about any part of...
GitHub - Rich-Harris/headless-qr: A simple, modern QR code library
headless-qr: A Simple, Modern QR Code Library — A slimmer adaptation of an older project without...
How Google tried to fix the web — by taking it over
How Google Tried to Fix the Web — By Taking It Over? — An interesting look...
What’s new in web animations
▶ What’s New in Web Animations — A talk from the recent Google I/O conference covering view...
Scoped CSS is Back
Scoped CSS is Back — Back, and better than before, the W3C spec is stable, and...
What's new in CSS and UI: I/O 2023 Edition - Chrome Developers
What's New in CSS and UI: I/O 2023 Edition — Yes, more from I/O. This time...
Spotlight on: Passkeys - Discover - Apple Developer
🔑 Spotlight On.. Passkeys — Three early adopters (from Kayak, Robinhood, and Instacart) share their thoughts...
Introducing Baseline
Introducing Baseline — A new initiative (announced at Google I/O) to help you quickly see whether...
Dynamically Filtering the Kendo for Angular Grid From Code
How to Dynamically Filter Angular Grid From Code — While the Kendo UI for Angular Grid comes...
SpeedCurve | A Complete Guide to Performance Budgets
A Complete Guide to Performance Budgets — If you’ve invested a lot of time to make...
