~frontendfocus | Bookmarks (292)

'Doom' Scroll — A neat demo of @scroll-timeline — a new CSS property that allows animations to be driven by a container’s scroll position. YMMV on browser support here.

Handling the Indentation of a Treeview Component — How should you approach building a UI that contains nested components, with an increasing indentation for each one? Ahmad looks at solving it with CSS.

Reaction-Diffusion Compute Shader in WebGPU — A look at how to use WebGPU compute shaders to create some rather wild looking patterns. Support is limited right now, but it’s a neat effect.

Passkeys: A Shattered Dream? — William, who has his own web auth project, shares some concerns and growing disillusion with passkeys.

DesignSystemHunt: A Curated Collection of Design Systems from Popular Brands — Currently includes links and info on 140+ different design systems from various startups, brands, tech companies, etc.

extension.js: Zero-Config, Cross Browser Extension Dev Starter — The goal is to make it as simple as a npx extension create my-extension to get started with building your own browser extension. GitHub repo.

Popicons: A Set of Free Figma/SVG Icons in Line, Solid & Duotone Styles — Designed in Figma and you can download the whole lot or go directly to the searchable gallery and copy the SVG code directly.

Only <Spans>: Each Element on This Page is a SPAN — A silly what-not-to-do experiment that demonstrates the fact that every element on a page can be an HTML <span> element but modified for different roles using CSS.

Fluid for Tailwind CSS — A fluid clamp() plugin for Tailwind that works with every utility. Repo here.

JSON Generator: An Intuitive Tool for Crafting Complex JSON Structures — Includes 40+ “template tags” (or functions) that you can incorporate into the JSON template so you can generate specific types of content for use in testing, mocking, teaching, and so on.

An Alternative Proposal for CSS Masonry — Last week we shared WebKit’s thoughts on how to approach creating masonry type layouts in CSS. Now the Chrome team has weighed in, stating that “implementing it as part of the CSS Grid specification [..] would be a mistake”, and they think it should be its own separate layout method defined using display: masonry or something similar.

Here's a Simple Video API for Your Next.js Application — Integrate a video player into your Next.js applications! Learn about HTML5 video tag, video.js library, and how you can unlock more functionality and performance with the ImageKit Video API. Deliver an optimized, buffer-free video stream every time.

The Popover API is Here — The Popover API now has broad support, and as such Chris gives us a brief overview of how it differs from <dialog> and how we may want to approach using it.

Printing Music with CSS Grid — The author notes (pun very much intended) that music notation on the web should be as accessible and fluid as text is - but how do we go about fixing it so musicians don’t have to fumble pinch-zooming a PDF during a gig? Lots of good examples here and a reminder of just how far you can take CSS!

▶  Optimizing INP: A Deep Dive — A good step-by-step instructional video on digging into responsiveness issues in Chrome’s Performance Panel (29 minutes).

Upgrading jQuery: Working Towards a Healthy Web — Yes, jQuery is still pretty much everywhere, so considering its staying power here’s what work is being done to ensure jQuery users stay up to date. This online tool can tell you if the version you’re running is out of date.

▶  A Conversation with Una Kravets: The Rapid Evolution of CSS — An interview with Una, the Web UI DevRel lead at Google, discussing web development, the progression of CSS over the years, and how layout/style ideas end up a reality.

Long Alt — Keep your image alternative text brief, devoid of special characters, empty of URLs, and ideally in one language.

Quill 2.0: A Powerful Rich Text Editor for the Web — This is a major release for the popular open-source WYSIWYG editor, and represents a significant modernization of things. Here's the announcement post outlining what's new in 2.0 post, and the repo too. Not tried it before? There’s a playground.

Wedges: A Collection of UI Components for React — A well thought out, aesthetically pleasing set of UI and Tailwind CSS based components. You can also download a Figma file of them to use when mocking up layouts. GitHub repo.

MarkdownDown: Convert Any Web Page to Clean Markdown with Images Downloaded — Just enter a URL and choose from optional settings to remove non-content elements, link vs. download for the images, and apply further instructions to customize the code via GPT-3.5.

Mastodon Embed Timeline Widget — Easily embed a Mastodon timeline on your site. No dependencies, no trackers, cross-browser, WCAG compliant and fully responsive. Demo here.

The Frontend Developer/Engineer Handbook 2024 — An in-depth, detailed, and free guide to the current web development landscape. It's a superb resource (by way of Frontend Masters) for getting up to speed on everything from code editors, CSS, UX, UI, the command line, popular tools and frameworks, performance, accessibility, testing, AI, and much more. One to bookmark/share.