~frontendfocus | Bookmarks (247)

Codate: Easily Create Custom Date Formats in Any Programming Language — A neat little resource to get a code snippet for common date formats – hyphenated, slashed, dotted, standard with commas, etc. Supports 11 languages including JS, Go, Python, Java, PHP, and more.

PicLooks: Authentic Looking AI-Generated Profile Photos — An alternative to using stock photos, these do have a more realistic look than some other AI-generated photos, and they’re free to use commercially without attribution.

CSS Wrapped 2024 — A fun (pixel-art filled) exploration of the new additions to the web platform in 2024, including cross-document view-transitions, scroll-driven animations, anchor positioning, and more.

What Do the State of CSS and HTML Surveys Tell Us? — Rachel (of the Chrome Web Dev relations team) takes an initial look at some of the most interesting findings from these surveys, highlighting the top browser support issues, missing features, and more.

Using Transformers.js for AI in the Browser — Transformers.js is a seriously impressive project we link from time to time that lets you run pretrained machine learning models in the browser. Here’s a practical look at actually playing with it yourself right now.

Mastering SVG Arcs — Akshay shares his love of drawing in code, in turn demystifying how to use radii, rotation and arc direction to make intricate SVG designs.

Multi-State Buttons — Typically, buttons are either pressed or they aren’t. But as long as you handle it in an accessible way, you can make a group of radio inputs look like a multi-state button with some neat CSS trickery. Preethi shows us how.

Gradienty: A Suite of CSS Tools & Generators — Currently includes 11 different tools including generators for Tailwind gradients, CSS animations, mesh gradients, text gradients, box shadows, and more.

Roquefort - WebGPU Fluid Simulator — A browser-based 3D simulator that uses WebGPU compute shaders. You can edit the scene, speed, along with various effects.

InclusiveColors: A Color Palette Creator for WCAG-Compliant Colors — Offers features like precise control of every shade/tint that’s generated, live contrast checking as you edit, and ability to export to CSS, Tailwind, Adobe products, and more.

Kinesis.js: A Library to Easily Create Complex Interactive Animations — The home page includes some advanced examples of what’s possible, which includes the ability to animate elements in response to mouse movement, scroll events, and even audio frequency data. GitHub repo.

Spark UI: A Library of Animated Components Built with Vue, TypeScript, Tailwind, and Vueuse Motion — See some demos here.

uifonts.app: Test and Preview Fonts in Real Time — The fonts, sourced from Google Fonts, are displayed on real UI elements on the page. You can select a primary and secondary font or hit the ‘random’ button to preview random font pairings.

Build with Gemini, Our Largest and Most Capable AI Model — Use the Google AI JavaScript SDK to make your first generative AI call using the Gemini API in your client-side web application. Learn everything you need to know at your own pace with Google AI Studio.

A Layered Approach to Speculation Rules — Harry has been experimenting with the Speculation Rules API, developing something of a multi-tiered approach to really maximizing the benefit of the two speculative loading types (prefetch and prerender).

Dataviz Accessibility Principles, Demonstrated by 2024 Presidential Election Dashboards — Sarah has tested the accessibility of various 2024 U.S. Presidential Election data visualizations from various news orgs, looking at the charts and data on show and highlighting the numerous issues. A deep dive with some food for thought on accessible ways to display more complex information.

Flex Your Product Muscle with Product for Engineers — Get curated advice on building great products, lessons from building PostHog, and the strategies of top startups.

The Lowdown on Dropdowns in HTML & CSS — If you’re trying to reveal content from user interaction David proclaims that “you should read this”, encouraging us to put down that JavaScript and check out new and upcoming HTML/CSS features to help us do the job.

Frosted Glass from Games to the Web — A UI games developer (who worked on the Forza series) shares the process of translating in-game ‘frosted acrylic’ design elements to HTML. The end result is nice! backdrop-filter does the heavy lifting here.

Creating Effective Multi-Step Forms — Looks at the design considerations for good-form experiences, beyond just validation — specifically on forms that involve navigation between sections.

Starting Off Right: Where Autofocus Shines — On the value of autofocus for enhancing the user experience, particularly on form-heavy single purpose pages.

Tailwind Colors: All The Tailwind CSS Colors in a 'Cheatsheet' — You can click to copy any color and choose the desired format, which includes the new OKLCH format that gets transpiled to a more common format with Tailwind version 4.

The CSS Reset Contradiction — Makes the case that resets have become a commodity, resulting in an assumption that there’s a general need for them, which in turn nibbles “at the craft of frontend development”.

Vite 6.0 Released — The popular build tool has rapidly found itself at the heart of the frontend ecosystem with its combo of speed, simplicity and extensibility. v6 doubles down on these and has a variety of enhancements.