~frontendfocus | Bookmarks (247)

TinyJS: A Lightweight Library to Easily Generate and Customize DOM Elements — Includes a jQuery-like syntax for element selection, iteration, and appending content and adding properties to elements. Nothing you couldn’t do with vanilla JS, but a much simpler API.

What’s the Difference Between HTML’s Dialog Element and Popovers? — Whilst pretty similar in both look and functionality Chris highlights the important distinctions, differing APIs, and overall use cases.

How To Manage Dangerous Actions In User Interfaces — An exploration of different strategies we can use to prevent users from making mistakes (such as unintentionally sending an email, placing an order, hitting publish on something, etc).

How To Make a “Scroll To Select” Form Control — This is an interesting little experiment, turning the humble <select> element into a dial of sorts, kinda like the scrollable date picker often seen on iOS. You select an option by scrolling it into position.

▶  Fundamentals of Frontend Architecture — A free video course that covers “everything you need to know to build robust and scalable frontend applications”. It covers architectural drivers, documentation, decision making, prototyping, implementation, and more.

SVG Coding Examples: Useful Recipes for Writing Vectors by Hand — Explores the basics of hand-coding SVGs, how to leverage JavaScript along the way, plus practical examples to demystify the inner workings of common SVG elements.

CrUX Vis — A new, experimental, browser-based Chrome User Experience Report (CrUX) tool to allow you to visualize CrUX History API data. This related blog post from Matt Zeunert explains what it does in more detail.

Eleventy v3.0 Is Now Available — A popular Node.js-based static site generator. This release is written in ESM with full ESM support, is 20% smaller, has 11% fewer dependencies, and installs faster. The Eleventy Image utility hit v5 too.

tailwind-to-inline: A Tailwind CSS to Inline Styles Converter — The target use case is email template creation. Quickly craft the templates using Tailwind CSS, but then inline everything for the final version.

OctoPalm.js: A Lightweight JavaScript Utility to Add Customizable Search Functionality to Your Apps — Includes features like animated results, customizable scrollbars for lengthy search lists, and real-time results as the user types.

Catching Up on the WordPress & WP Engine Situation — There’s been plenty of continued drama in the WordPress world between Automattic and WP Engine — and this post attempts to bring us up to speed. More has happened since including ▶️ Matt Mullenweg sitting down with Theo Browne for a chat about the situation, and some new terms have been shared.

The HTTP QUERY Method — A draft spec for a new QUERY HTTP method, a “safe, idempotent request method that can carry request content”. It’s said to be desirable “when the data conveyed in a request is too voluminous to be encoded into the request’s URI”. It's not quite GET, but it's not quite POST..

Build a Native App Experience with PWAs — Join Maximiliano Firtman for a detailed video course exploring how to create installable, offline-capable web apps. You'll learn how to create impressive Progressive Web Apps, explore various UI techniques, dig into how best to test and debug, and how to deploy your efforts to end users.

CSS Masonry & CSS Grid — As mentioned last week, steam is picking up on a formal CSS solution for masonry layouts, but with two competing proposals and lots of various opinions on both flying around, it’s good to take a high-level overview of where things stand — that’s what this is.

Interview With Björn Ottosson, Creator of the Oklab Color Space — A chat with the Swedish engineer who created the Oklab color space, covering how he approached developing an effective model, with good hue uniformity, while also handling lightness and saturation well.

How Josh W. Comeau Rebuilt His Blog, App Router Style — We’re huge fans of Josh’s blog (particularly its wealth of CSS articles). He’s just rebuilt it entirely using Next.js, MDX, Sandpack, and an array of other technologies, and gives a detailed, behind the scenes look at a modern React-driven frontend project.

Get Ready for Interop 2025: Your Chance to Shape the Web — An invite to “help shape the future of web interoperability”. Submissions for ideas/proposals are being taken now, with the deadline on October 9th. Here’s what 2024 has focused on.

A Redesign Case Study — Like Josh Comeau (above), Ahmad Shadeed, whose excellent frontend articles we often feature, has too recently rebuilt his website, though with a stronger focus on the design. This case study digs into his rationale and process.

The Frontend Treadmill — Some candid advice and musings on the frontend ecosystem, technical decisions, and wasted energies: “our current framework layer is working against the grain instead of embracing the platform”.

Monitor Your Local and Real-User Core Web Vitals Performance in Chrome 129 — The latest Chrome features a completely redesigned Performance panel landing page featuring a live view of your local Core Web Vitals performance.

Clever Polypane Debugging Features I'm Loving — A nice look at some of the handy features to be found in the stand-alone dev browser, Polypane.

Dark Patterns Hall of Shame: Learn About Dark Patterns and Unethical Designs — Real examples showcasing what not to do in UI design, with details/screenshots from real websites that have made such poor UI choices.

blocks.md: Generate Forms and Web Pages from Markdown — Not a free tool, but an interesting one to try out. It has its own syntax along the lines of something like Haml or Pug, and you can use it free locally.

The First Public Working Draft of CSS Grid Level 3 / Masonry Layout — This new draft represents progress on masonry layout as a built-in capability of CSS in two possible syntactic forms: a grid-integrated syntax, and a grid-independent syntax, both outlined as alternatives. The CSSWG has resolved to adopt fully mixed track sizing for this new layout model, allowing all the possible track listings...