~frontendfocus | Bookmarks (231)

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.

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...

(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 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.

Beautiful Focus Outlines — Thomas notes that focus outlines are often seen as a purely technical requirement, but suggests we should treat them as essential design elements that can help create “interfaces that are both beautiful and inclusive”, noting how they are fundamental to an accessible web. Also looks at a multi-colored striped approach, and a proposed native way to handling just that. Plenty...

A Recap of Google's Web AI Summit 2024 — Google recently held a summit specifically about the use of machine learning models directly in the browser, specifically by developers creating new, rich experiences for users. It’s interesting to see how things are progressing here and you can watch some of the talks on YouTube.

An Official Logo for CSS — After hundreds of votes, CSS now has its own logo, moving beyond the shield and number combo of the CSS 3 era. We’ve got a main rebeccapurple version (pictured), along with a dark and light version.

New CSS That Can Actually Be Used in 2024 — Yep, the amount of CSS changes and additions in the last two to four years has been staggering, as such this page (published earlier this year) is a good cheatsheet reminder, of sorts, for newer things we can do with CSS.

Fluid Everything Else — An exploration of how we can apply the concept of 'fluid typography' to realize layouts that change with the size of a parent container, without the user noticing any transition.

Penpot Plugins Contest: Build a Plugin and Win Up to $1,000! — Got amazing plugin skills? Penpot, the free open-source tool for design & code collaboration, has launched its plugin system — join the contest (Nov 15-Dec 15), share your plugin, and win.

Should Masonry Be Part of CSS Grid? — As the conversation around just how best to add Masonry layout to CSS continues, Ahmad explores the leading options and shares his take. This post looks at both masonry as both a part of CSS Grid and as its own display type. As is typical with Ahmad’s work, there's lots of good code examples and visuals...

The Details and Summary Elements Are Getting An Upgrade — A quick look at proposed changes to make the <details> element more customizable and interoperable between browsers.

Eleven HTML Best Practices for Login and Sign-up Forms — Andrey notes that “even popular sites fail to implement” the best practices highlighted in this recently updated article (such as autocomplete, focus states, validation, etc). There’s a quick checklist towards the end here.

Web Visual Editor: A VS Code Extension to Edit HTML Files Visually — Works similar to the browser devtools, providing a live preview of visual changes with element selection, copy/paste elements, zoom in/out, drag elements, and more. A key difference to the well known Live Preview is that changes in the preview then reflect back in the code.

Orbit: A Framework to Create Radial Interfaces with CSS — Includes various CSS classes and Custom Elements for designing ‘radial’ or circular graphics and designs. The docs includes plenty of examples for this niche framework.

VS Code Theme Generator: An Online Tool to Generate and Customize VS Code Themes — The UI lets you preview the theme as you work and you have the ability to have granular control over the tokens in the syntax highlighting.

A Friendly Introduction to Container Queries — It’s been a couple of years now since the “biggest missing piece in the CSS toolkit” first started landing in browsers, but despite container queries being a highly requested and now well supported feature, Josh opines that we aren’t really using it all that much (however...). Here he goes into why take up may be low, reintroduces...

Exploring the Browser Rendering Process — A technical look at what actually occurs between typing a URL in your browser and the moment a page is displayed. It’s a solid explainer of the browser rendering process (told in an interactive way).