~frontendfocus | Bookmarks (267)

SVGEdit: A Powerful Browser-Based SVG Editor — A fast, web-based, JavaScript-driven SVG drawing editor that works in any modern browser. You can try it live here or host it for yourself.

Sticky Headers and Full-Height Elements: A Tricky Combination — Philip warns that sticky elements often don’t play nicely if they have to coordinate with other elements to make up a combined height (such as 100vh). This post explores why this happens and offers up a solution.

Brand New Performance Features in Chrome DevTools — A helpful look into Chrome’s updated Performance Panel and all the different metrics it shows off to help you improve the performance of your site.

[Workshop] Fix Your Front-End: JavaScript Edition — Learn practical tips to make debugging more tolerable. Join our JavaScript team live for a masterclass on Sept 24.

Anchor Positioning Quirks — Dives into the various potential ‘head-scratchers’ that you may come up against when working with anchor positioning, breaking them down so you’ll hopefully have an easier time when you come to use them.

A Release Note for the Web Platform — Details of a community-driven effort to create an index of all features across the entire web platform, which will track their availability, and share the latest information via release notes.

Time Travelling CSS with :target — A fun look at how you can achieve a kind of ‘primitive version of client-side routing’ solely through the behavior of :target. A fun one.

svg.wtf: An SVG Playground to Learn How to Write SVG Code — Includes some useful code-related features like tooltip info on hover, to help understand the different elements, attributes, etc.

Redirect Checker: A URL Redirect Analysis Tool — Includes numerous features to help analyze your redirects, like providing a detailed path analysis, bulk redirect checking, custom user-agent selection, among others.

📱  Web Inspector: An iOS/iPadOS App to Expand Mobile Safari with Extra Development Tools — Similar to a desktop browser’s DevTools, this lets you inspect elements, edit styles, run commands in a console, view network requests, and more.

CSS Display Contents — Ahmad takes a a look at how best to use 'display: contents' in order to build more fluid layouts. As ever with Ahmad’s work, there are plenty of code examples and use cases to help our understanding.

The Undeniable Utility of CSS :has — Josh has spent the past few months rebuilding his blog using modern CSS techniques, including the :has pseudo-class. Here he reflects on just how useful it is by way of some real-world use cases and some ‘mindblowing’ experiments.

The Frontend Masters Knowledge Quest Sale Is Going on All Week! — The Frontend Masters Knowledge Quest sale is now on! There's four new learning paths (including JS performance and code architecture) with more epic courses on the way throughout 2024 and beyond.

CSS Triggers — If you want to write more performant CSS, then understanding how things are rendered (layout, paint, and composite) across the three main browser engines is always going to be handy knowledge. This site brings together findings across a series of CSS properties.

A Complete Guide to Beginning with JavaScript — A rather epic article packed with background knowledge, context, and third party resources for starting a modern JavaScript learning journey.

The Ultimate Guide to Font Performance Optimization — This is quite the rabbit hole indeed, but a useful one to go down if your site is using custom fonts and you’re serving them up directly yourself. Of course, step one is to consider sticking to system/web-safe fonts.. ;-)

Beyond the 10x Engineer — Incredible technical skills can’t save a product that no one wants. That’s why engineers should care about non-technical product skills. To help you figure out which of these skills matter, we wrote about the ones we look for (and use) at PostHog.

The Web Design Museum: The First Decade of Web Design — Exhibits thousands of unique old website designs from the early 90s to mid-00s. A fun way to discover forgotten trends in web design.

Finding Two Lines of CSS That Tanked Performance — Upon launching the Learn Web Components site, Andrico discovered one of its animations caused a sharp drop in performance on Firefox. Here’s what he discovered and how he fixed it.

Lazy Loading Isn't Just Lazy, It's Late: We Can Do Better — “We tend only to fetch more content as the user scrolls it into view or navigates to the next page, which isn’t just lazy: it’s often late and an awful user experience”. This post suggests a more proactive approach.

Introducing style-observer, A MutationObserver for CSS — Bramus has created a MutationObserver for CSS. It, dubbed style-observer, allows you to attach JavaScript callbacks to changes in computed values of CSS properties.

Passkeys for Everyone! Make Your User Login Simpler with FusionAuth — FusionAuth just added passkeys to their free tier, which is a paid feature for almost every other auth provider. Try it out yourself.

Button Stealer: A Chrome Extension That "Steals" a Button from Every Website You Open — A funny way of 'collecting' an inspiration gallery of buttons, which the author has done and you can view here.

The Secret Inside One Million Checkboxes — One Million Checkboxes is/was a site with one million global checkboxes on it where checking (or unchecking) a box changed it for everyone on the site, instantly. This fun post-mortem digs into how the internet (and, specifically, a group of smart teenagers) played with the project to reach ends you'd never expect..