~frontendfocus | Bookmarks (252)

Master Performance and Speed Up Your Site — This detailed video course shares the fundamentals of web performance, covering key Core Web Vitals metrics such as Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP). You'll learn how to best use Lighthouse, WebPageTest and other tools in order to make your site lightning.

Importing a Frontend JavaScript Library Without a Build System — Julia explores how to import a JS library when taking a no-build-system approach.

Pinpoint Flaky and Failing Tests with Codecov Test Analytics — Stop digging through logs and re-running your CI. See why tests are failing and which are flaky, right in your PR.

Creating an ASCII Shader Using OGL — This is an incredibly cool effect, not to mention great tutorial on getting started with shaders and using OGL, a minimal WebGL library that’s a lot lighter than Three.js.

▶  Nerd Show and Tell: Meet Zach Leatherman — Zach talks about the “rollercoaster ride of building Eleventy”, why owning your corner of the internet is more important than ever, and how platforms like Eleventy could be “the ticket to a new wave of web independence”.

SVG to Font 6.1: Read SVG Icons and Output a Font File — Both a CLI tool and Node.js library that can read in SVG documents and output WOFF2, WOFF, EOT, TTF and SVG fonts. Useful for generating a Web font from a set of icons, say, as in this demo.

lite-youtube Web Component v1.6 Released — The latest version of this web component that quickly renders YouTube embeds adds auto-pausing, custom CSS properties, named slot thumbnails, and more.

Troubleshoot Frontend Issues with Digital Experience Monitoring — Learn how Datadog provides a single source of truth for frontend monitoring so teams can troubleshoot issues faster.

SmarkForm: A Library for Creating Markup-Driven and Extendable Forms in Web Apps — This allows you to add advanced features to forms, like JSON import/export, hotkeys, along with other interactive enhancements. Try some examples here.

Coding Font: A 'Game' to Find Your New Favorite Code Font — This is a fun idea. It throws over 25 popular developer-oriented fonts into a ‘tournament’ and you then pick your favorites until you’re left with a winner. (It was Cousine for me.)

Monicon: A Universal Icon Library for Any JavaScript Framework — The project itself is not new, but provides quick access to 200,000+ icons from popular sets and works with most frameworks and build tools.

How overflow: clip Works in CSS — This is a solid look at using the well-supported clip value alongside the overflow CSS property — with some good example use cases, particularly around art direction.

The State of HTML 2024 Results — The results from this year’s State of HTML survey dropped late last week, and Patrick Brosset (of the Edge team) sums up where things stand in his conclusion:

Meet Angular v19 — The latest version of this popular web app framework is here — to mark the release ▶️ here’s a video running through what new features you can expect.

alt Text: Don’t Just Describe Images — Advice for writing alt text that communicates an image’s purpose without repeating page content — chiefly focus on meaning rather than visual description.

How to Create an Organic Text Distortion Effect with Infinite Scrolling — Here’s a live demo of this striking, if disorienting, effect.

Pagefind: Add a Search Feature to Your Static Sites — A fully static search library that aims to perform well on even large sites, while using as little of your users’ bandwidth as possible, and without hosting any infrastructure (you can use it with any static site generation system). Version 1.2.0 landed last week.

Product for Engineers: A Newsletter Helping Flex Your Product Muscle — Product for Engineers is dedicated to sharing the skills and strategies product engineers need to succeed.

Action Table: A Native HTML Web Component for Adding Sorting/Filtering Functionality to Tables — Uses custom styles that you can override for branding and there's a rather epic demo with examples to fiddle around with including a 1000-row paginated table to give you an idea of its performance. GitHub repo.

Storybook 8.4 Released — The popular frontend component workshop gets a minor release but it’s “one of our most feature-packed minor releases ever” with one click component testing, Svelte 5 support, React Native Storybook 8, and other niceties.

🗺️ Tiny Static Map: A Simple Map Rendering Element — A very small library for putting a static map onto a page centered on a specific lat/long of your choice. It uses OpenStreetMap. Note the GPL 3 license, however.

ska-tailwind-editor: Edit Tailwind HTML As WordPress Blocks — This is an online editor that looks like the WordPress block editor with its various options, except this one allows you to edit the HTML using Tailwind classes.

(Up-) Scoped Scroll Timelines — Chris continues his exploration of just what can be done with scroll-driven animations, this time quickly looking at how we can get elements on a page to ‘listen’ to a scroll (or view) timeline of a totally different element.

How a BBC Navigation Bar Component Broke Depending on Which External Monitor It Was On — Some interesting spelunking into a very odd little bug (with a fairly simple fix) related to external monitor positioning. The lesson being that “browsers have an interoperability issue in how they represent screen coordinates in multi-monitor set ups” — a quirk you likely won't run into much, but...