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.
10 Weird HTML Hacks That Shaped The Internet
Ten Weird HTML Hacks That Shaped the Web — A curious history lesson looking back at...
GitHub - sindresorhus/request-animation-frames: Use requestAnimationFrame as an async iterable, in any JavaScript environment
request-animation-frames: Use requestAnimationFrame Anywhere — The latest library from the one-man module powerhouse, Sindre Sorhus. The...
Trace Pixels To Vectors in Full Color, Fully Automatically, Using AI - Vectorizer.AI
Vectorizer.ai: Convert your JPEG and PNG Images to SVGs with AI — The web app is...
GitHub - rvanwijnen/spectral.js: Spectral.js is a paint like color mixing library.
Spectral.js: A Painterly Color Mixing Library — If you have two colors to transition between, just...
JavaScript Barcode Scanning Library
🎹 Fast, Reliable 1D/2D Barcode Scanning for Web Apps with Strich — You don’t need a...
ai2html
ai2html: Turn Adobe Illustrator Files into HTML — We noticed this tool being used to share...
Animotion — Visual CSS Animation Maker
Animotion: A Visual CSS Animation Builder — Allows you to create animations by dragging, sizing, rotating,...
Resource Loading at the Cutting Edge | Robin Marx | performance.now() 2023
▶ Resource Loading at the Cutting Edge — An hour-long chat, with real-world examples, that will give...
CSS { In Real Life } | Preventing Scroll “Bounce” with CSS
Preventing Scroll “Bounce” with CSS — When you scroll rapidly to the top or bottom of...
Webflow: Create a custom website | Visual website builder
Build and Style Your Site Exactly How You Want — Drag in unstyled HTML elements, control...
Web Components Eliminate JavaScript Framework Lock-in | jakelazaroff.com
Web Components Eliminate JavaScript Framework Lock-in — Jakes notes how web components can “dramatically loosen the...
The `hanging-punctuation` property in CSS
The hanging-punctuation Property — Browser support is quite limited, but Chris shares this “no-brainer” CSS treatment...
Hollow text hover effect with only three lines of CSS
A Hollow Text Hover Effect in Three Lines of CSS — Made possible thanks to a...
A Few Ways CSS Is Easier To Write In 2023 — Smashing Magazine
A Few Ways CSS is Easier to Write in 2023 — Geoff notes that we’re living...
How to identify and fix Render-Blocking Resources
Identifying and Fixing Render-Blocking Resources — Fixing render-blocking JavaScript and CSS helps improve page load times...
Psychology of Speed: A Guide to Perceived Performance - Calibre
Psychology of Speed: A Guide to Perceived Performance — What’s the gap between measured and perceived...
https://www.figma.com/community/plugin/731310036968334777/a11y-focus-order
A11y - Focus Order: A Figma Plugin to Add Accessibility Annotations — Useful for handing off...
An Interactive Guide to CSS Grid
An Interactive Guide to CSS Grid — CSS Grid is a powerful and almost universally supported...
Postman Collections: Organize API Development and Testing
Clear and Comprehensive Automated API Documentation — Postman automatically generates machine-readable API documentation for any collection...
An Attempted Taxonomy of Web Components—zachleat.com
An Attempted Taxonomy of Web Components — A collection of open-source web components (and lessons learned...
CSS Nesting
CSS Nesting — A good opportunity to brush up on all things native CSS nesting here,...
Getting started with CSS container queries | MDN Blog
Getting Started with CSS Container Queries — Fresh on MDN is a dive into the practicalities...
Your Website’s URLs Can and Should Be Beautiful - Opus
Your Site's URLs Can, and Should, Be Beautiful — The key to making a 'beautiful' URL...
The AI Engineer Path
The AI Engineer Path Just Launched 🚀 — Supercharge your web dev skills with this JS...
Totally remdom, or How browsers zoom text - Manuel Matuzovic
Totally remdom (or How Browsers Zoom Text) — A quick look at how various operating systems...
591: Cascade Layers, CSS Functions, and more CSS with Miriam Suzanne - ShopTalk
▶ Cascade Layers, CSS Functions, and More CSS with Miriam Suzanne — Miriam joins Dave Rupert and Chris...
Release 5.0.0 · hakimel/reveal.js
Reveal.js 5.0: The HTML Presentation Framework — A long-standing way to build presentations using standard Web...
Colour Contrast Checker
Color Contrast Checker: Check Different Combinations Against WCAG Standards — An interactive tool where you can...
Postman
Speed Up Your API Workflows With Collection Templates — Get up to speed with API basics...
GitHub - JustinBeckwith/linkinator: 🐿 Scurry around your site and find all those broken links.
Linkinator 6.0: A Tool to Find a Site's Broken Links — Both a Node.js API and...
AutoDraw
AutoDraw: An Online Drawing Tool That Guesses What You're Trying to Draw — Includes standard drawing...
GitHub - webdiscus/html-bundler-webpack-plugin: Uses HTML template as entry point. Resolves source files of scripts, styles, images in HTML. Renders Eta, EJS, Handlebars, Nunjucks templates "out of...
HTML Bundler Plugin for Webpack — A plugin that renders HTML templates with referenced source files...
HTML Web Components
On HTML Web Components — “With web components, you might even say React’s component model is...
A faster web in 2024 - rviscomi.dev
A Faster Web in 2024 — The responsiveness metric Google uses in the Core Web Vitals...
CSS Generators: Ribbon Shapes
Ribbon Shapes: A Gallery of 100+ Pure CSS Ribbons — You certainly won’t need all of these...
Free HTML Templates for Websites & Landings on HTMLrev
HTMLrev: A Directory of Categorized Frontend Templates, Free for Commercial Use — The site doesn’t hold...
Intro to Sentry - 15 min. Live Product Tour
Simplify Your Releases and Debug Faster — Monitor deployments, fix issues, and automate app and error...
GitHub - flackr/scroll-timeline: A polyfill of ScrollTimeline.
scroll-timeline: A Polyfill for the Scroll-Driven Animations API — More specifically, this covers the ScrollTimeline and...
perfect-freehand
Perfect-Freehand — Your results may vary here depending on just how good you are at free-handing...
URL explained - The Fundamentals
The URL, Explained — A quick breakdown of the different parts that make up the URLs we...
Modern frontend testing with Vitest, Storybook, and Playwright - Defined Networking
Modern Frontend Testing with Vitest, Storybook and Playwright — A look at why frontend testing is...
Moving back to React
Moving Back to React (from Preact) — Preact felt like a logical, lightweight choice to this...
Unlocking Growth: Why A Low Friction User Signup Process Is Crucial For Your Business
Why a Low Friction User Sign Up Process Is Crucial for Your Business — This article explores...
HTML DOM — Phuoc Nguyen
Mastering DOM Manipulation with Plain JavaScript — A mega collection of hundreds of examples of doing...
Surprising Facts About New CSS Selectors
Surprising Facts About New CSS Selectors — Scott digs into how the :is() selector and its...
Designing Web Design Documentation — Smashing Magazine
Designing Web Design Documentation — Highlights the importance of good documentation for safeguarding best practices across...
CSS Projects Deep Dive | Practice Layouts & Responsive Design with Jen Kramer
Tackle Any HTML & CSS Challenge — Join Jen Kramer for this video course to practice...
SENTRY LAUNCH WEEK
📞 Calling Frontend Devs! Sentry Launch Week is Coming — Tune in daily on YouTube for...
Minimalist Affordances: Making the right tradeoffs • Lea Verou
Minimalist Affordances: Making the Right Tradeoffs — When aesthetics trump usability and form overrules function, it’s...
AI as a UX Assistant
AI as a UX Assistant? — An overview of how those working in UX are using...
