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.
igloohome Smart Locks & Lock Boxes | Keyless access solutions
Go Keyless with Award-Winning Smart Locks. Protect What’s Important
Free svg background generator
BGJar: Free SVG Background Generator — This interactive site lets you customize existing backgrounds (dimensions, colors,...
marcysutton/no-mouse-days
No Mouse Days: A Package to Disable The Mouse Cursor — Why would you want this?...
Zoomstock: free stock photos organized visually
Zoomstock: Free Stock Photos Organized Visually — This is a little different. A free stock photo...
Stitches
Stitches: The Modern Styling Library — Another CSS-in-JS solution, this one offering high performance, SSR, theming,...
glaze
glaze: CSS-in-JS Microlibrary for Making Design Systems Approachable with React — Another CSS-in-JS option, this one...
‘Read Me: Magazine’ by Readymag Templates | Readymag
Read Me: An Essay on Reading on the Web — An expressive, visual, and detailed piece...
Chapter 4: Search | CSS-Tricks
The History of Web Search — The fourth entry in Jay Hoffmann’s excellent and comprehensive Web...
An Introduction To Running Lighthouse Programmatically — Smashing Magazine
An Introduction To Running Lighthouse Programmatically — A brief introduction to Lighthouse (a popular tool for...
Introducing Source Order Viewer in the Microsoft Edge DevTools
Introducing Source Order Viewer in the Microsoft Edge DevTools — Edge 86 has introduced a feature...
Is the web getting slower? | DebugBear
Is The Web Getting Slower? — A detailed look at how devices and the web have...
How to use CSS masking
How to Use CSS Masking — CSS masking gives you the option of using an image...
How CSS Perspective Works | CSS-Tricks
How CSS Perspective Works — Amit Sheen explains the concept of perspective in CSS animations, starting...
Navigating Navigation - Designing in the Browser
▶ Navigating Navigation & Keyboard Accessibility — A 12-minute video looking at accessible navigation, achieved via things...
30 Developer Resources to Diversify Your Skill Set
30 Developer Resources to Diversify Your Skill Set — Identify the most important, high-impact developer skills...
GOTO 2020 • You Really Don't Need All That JavaScript, I Promise • Stuart Langridge
▶ You Really Don't Need All That JavaScript, I Promise — If you have twenty minutes, you...
Giving users and developers more control over focus
Giving Users and Developers More Control Over Focus — Chrome 86 introduces two new features that...
A WCAG Overview — Web Content Accessibility Guidelines (WCAG) 2.1 and 2.0 Explained
▶ Web Content Accessibility Guidelines 2.1 and 2.0 Explained — In this 15-minute video Eric provides an...
Managing several displays with the Multi-Screen Window Placement API
Managing Several Displays with The Multi-Screen Window Placement API
Inspect – The new standard for mobile web DevTools
Inspect: The 'New Standard' for Mobile Web DevTools — A new developer tool (currently in early...
web-padawan/vanilla-colorful
vanilla-colorful: A Tiny Color Picker for Modern Web Apps — See a demo here. It’s built...
Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs | CSS-Tricks
Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs — David Atanda digs...
The Essential Guide to Building Analytic Applications| Logi Analytics
The Essential Guide to Building Analytic Applications — What are best practices when designing the UI...
Designing With Reduced Motion For Motion Sensitivities — Smashing Magazine
Designing With Reduced Motion For Motion Sensitivities — Thanks to the wide support of the prefers-reduced-motion-media...
Working with JavaScript Media Queries | CSS-Tricks
Working with JavaScript Media Queries — Yep, when I think of media queries I’m thinking of...
Here's a new way to save on home & car insurance
Front End Development Leader — Wanted: A Front End Developer to lead a group of young...
Comparing Browsers for Responsive Design | CSS-Tricks
Comparing Browsers for Responsive Design — A look at the various specialist dev browsers that are...
Mozilla CEO Mitchell Baker urges European Commission to seize ‘once-in-a-generation’ opportunity – The Mozilla Blog
Mozilla CEO Urges European Commission to Seize ‘Once-in-a-Generation’ Opportunity — In the open letter, Mitchell Baker...
Virtual Square Unboxed
Virtual Square UnBoxed 2020 — 2020 gave us 🍋, app devs are helping business owners make...
Accessible Color Standards - Designing in the Browser
▶ Accessible Color Standards — Covers what the A, AA, and AAA conformance levels mean and how...
Is There A Google-Free Future For Firefox?
Is There A Google-Free Future For Firefox? — Firefox is said to be exploring subscriptions and...
What is the Value of Browser Diversity?
What is the Value of Browser Diversity? — Considered thoughts on the seemingly increasing dominance of...
How to Organize and Sync SVG Files with Iconset
▶ How to Organize and Sync SVG Files with Iconset — A look at how the cross-platform...
Getting Started With Chrome and Firefox Developer Tools
Getting Started With Chrome and Firefox Developer Tools — A decent guide for beginners to learn...
Web Brutalism, Seamfulness, and Notion | Viget
Web Brutalism, Seamfulness, and Notion — An essay on brutalism in web design and how note...
10 Tips to Improve Productivity using Chrome Dev Tools
Ten Tips to Improve Productivity When using Chrome Dev Tools
Everything Developers Need To Know About Figma — Smashing Magazine
Everything Developers Need To Know About Figma
How to Simplify SVG Code Using Basic Shapes | CSS-Tricks
How to Simplify SVG Code Using Basic Shapes
345Tool.com | Best Productivity Web Tools
345Tool.com: Tools for Formatting, Minifying, and Converting Code — This is a collection of coding-related tools...
JSchallenger
JSchallenger: Learn JavaScript by Solving Coding Exercises — I like that the homepage shows the “most...
10 lesser-known Web APIs you may want to use
10 Lesser-Known Web APIs You May Want to Use — Includes the likes of the Performance...
Creating an SVG path drawing animation.
Creating an SVG Path Drawing Animation — The end result here is pretty neat.
Semantic markup - Designing in the Browser
▶ Accessibility in Design: Semantic Markup — A sub-15 minute video looking at how semantic markup can...
Cumulative Layout Shift, The Layout Instability Metric
Cumulative Layout Shift: The Layout Instability Metric — A look at the Layout Instability API and...
Help users change passwords easily by adding a well-known URL for changing passwords
Help Users Change Passwords Easily by Adding a 'Well-Known' URL for Changing Passwords — By redirecting...
Release snowpack@2.10.0 · pikapkg/snowpack
Snowpack Version 2.10.0 Released — The latest version of this popular frontend build tool now supports...
d3/d3
D3 6.0: The Data-Driven Document Library — The popular data visualization library takes a step forward...
