Bookmarks (269)

REVERB: A Simple Color Palette and Gradient Generator — Lets you save generated palettes and gradients and make collections with no login required.

On Ratings and Meters — Ponders how to go about creating a web component for star ratings (★★★★★) in a semantically appropriate way.

outline Is Your Friend — Some quick advice on customizing focus styles, noting that we shouldn’t rely on properties like background-color or box-shadow alone.

HTML is All You Need to Make a Website — In our circles, HTML-only websites are often deemed “controversial and divisive”. But why?

system.css: A Design System for Building Retro Apple Interfaces — A fun little CSS library based on Apple’s classic 80s monochrome OS look.

image-element: A Repository to Collect Best Practices for Web Images — Covers everything HTML-related including image formats, media queries, the sizes and srcset attributes, attributes for better perf, and more.

Bedrock UI: A Foundational UI Library for Building a Design System — You can browse the components here, all of which are minimal with sensible defaults, and built with TypeScript and Sass.

▶  Creative CSS Layout & The Flexible Web — An hour-long talk looking at the changing CSS 'toolbox' and the creativity a range of new and upcoming features unlocks (things like aspect-ratio, clamp functions, and custom properties). It’s a good overview of some modern CSS layout techniques, with some demonstrative use cases too.

An Interactive Guide to Color and Contrast — This is an excellent, comprehensive guide for exploring and learning pretty anything and everything about the theory, science, and perception of color and contrast. A great resource with plenty of links out to related reading.

Learn from Devs at Leading Tech Companies Free — Get lifetime access to five popular Frontend Masters courses. No credit card required, and no catch.

Designing a Better Back Button Experience — When it comes to the humble ‘back’ button, users often get confused, frustrated or apprehensive (“will I lose my data?”). Here’s a look at how to design a better back button UX and where to put such buttons in our interfaces.

CSS Grid and Custom Shapes — How to use grid techniques along with CSS clip-path and some mask magic to create fancy, complex image layouts using “just about any shape you can imagine”.

The Impact of Removing jQuery on the Web Performance of Official UK Web Sites — The UK government’s digital team have been sharing details of their journey to culling jQuery from the massive GOV​.UK site. Here’s the 'why' behind the decision — and now this latest post looks at what performance difference it has made for users.

The Infinite Marquee — Shares how to create a responsive looping marquee-style animation using HTML and CSS. There’s a few demos and examples to check out too.

Resolve Front-End Errors with Datadog UX Monitoring — Simplify front-end performance monitoring by analyzing UX data and resolve errors faster with full context - no query language required.

Do You Know About overflow: clip? — You probably know overflow: hidden, overflow: scroll and overflow: auto, but do you know overflow: clip? It’s a relatively new value for the overflow property.

🛠 Core Web Vitals Tools to Boost Your Web Performance Scores — A collection of tools to help you identify, compare, analyze and fix your Core Web Vitals scores and boost the performance of your sites.

Participate in Our Dev Tools Survey and Win $25 Gift Card — Help us solve the right problems and create better products! If you are part of the software development world, fill our survey on developer tooling, it should take you less than 10 minutes. The first 400 respondents will win a $25 gift card.

The Hidden History of Screen Readers — The author spotted a Hacker News thread in which an engineer asked: “I’m going blind, how should I prepare?” — in researching how to answer, Sheon delved into the topic, and wrote this piece as a result. It highlights the work of pioneering blind programmers who have been at work creating the tools their community needs for decades.

Best Practices for Inclusive Textual Websites — This a lengthy guide to making simple and inclusive sites that are focused on content before form.

Forms in Modals: The UX Case — Some thoughts on why you should “think twice before putting forms (especially complex ones) inside modal windows”.

Nativefier: Make Any Web Page a Desktop App — A basic Node.js-powered tool for creating a desktop ‘app’ for any Web site using Electron as the webview. For Windows, macOS and Linux.

Astro 1.0: A Web Framework for Building Fast, Content-Focused Sites — This popular framework, used by the likes of Google, IKEA, and The Guardian, and well known for its 'islands architecture' approach, has just hit 1.0, with image optimization improvements, MDX support, an upgraded build engine, and more. There’s a lot of praise for the project from the wider community here too.