Chances are, you’ve likely visited a website whose design incorporates the full width of the browser. You may have noticed the content wasn’t easy to digest as your eyes scanned the full width of the page. It’s actually a well-known readability and user experience (UX) issue. Research in typography…

I’ve been thinking a lot about how the web is changing. Here’s Nilay Patel: There’s a theory I’ve had for a long time that I’ve been calling “Google Zero” — my name for that moment when Google Search simply stops sending traffic outside of its search engine to third-party websites. When I first…

Buy the Killer Proposals template Proposals can also be effective selling tools, answering clients’ questions and encouraging them to hire you. Your goal should be to create trust and show that you understand their problems and know how to solve them. In other words, you want the client to see you…

The hunt to find more use cases for local variables. Allie Paschal 8 min read· Dec 8, 2023 -- At this point in 2023, almost all UX UI designers who use Figma should know about one of Figma’s biggest features of this year, local variables. Something I have continued to struggle with since its initial…

July 29, 2024 indieweb blogging webweaving What’s going on, Internet? This one has been bouncing around my head for months now, and I’ve had this draft open for the past three weeks. It’s time to get it out of my head and onto the web. Recently, on our forums, community member Manatee asked, “What…

29 July 2024 Last Sunday I took a break from being a designer to play in the tennis men’s open singles finals. Sadly, not Wimbledon. Just at my local club in North London. Here’s how it went: I lost the first set 4-6 I won the second set 6-3 I lost the final set 1-6 Even though I lost, I was happy.…

Daily Tips I absolutely love static site generators. But their biggest weakness (when using them for clients and non-technical folks) is their lack of integrated CMS. There are a lot of third-party options. I’ve found a few that I think get the job done. But candidly, I haven’t found any that I…

29 July 2024 – Baldur Bjarnason From Burnout to Balance: AI-Enhanced Work Models for the Future Nearly half (47%) of workers using AI say they have no idea how to achieve the productivity gains their employers expect. Over three in four (77%) say AI tools have decreased their productivity and added…

I just updated the footer of this site. This is how it looks now. I'm going all corporate and legally official and stuff. Yeah — I hate it, too. You probably don't pay attention to footers and licenses. That's okay; neither do I. Previously, my site's footer included a meaningless Copyright © 2024…

Knowledge HubCompare Center November 18, 2024 2 min Three modern CSS properties your website must have MSMojtaba SeyediContent Writer 1. Scroll-margin Ever used an anchor link on a webpage, trying to find something, but got totally lost? It happens way too often. Usually the target elements like…

Our research shows that UX professionals can face severe communication challenges within their organizations, especially when collaborating with other teams or departments. These challenges are worse in organizations with low UX-maturity levels because such organizations tend to be oblivious to…

In this quick tip, we’ll show how easy it is to animate a background gradient with CSS. In a recent article, we showed how to set a background gradient on text. The CodePen demo below shows the result. See the Pen Text with left to right gradient by SitePoint (@SitePoint) on CodePen. Make sure to…

Collections and lists are a wonderful thing, and filters simply make them better. On this website, the first use case for a filterable collection was my whisky collection, and I’ve also added a filter to my /albums page in the meantime. Both lists are filterable by different criteria, but use the…

I know that HTML Tables should never be used as a layout tool, but thanks to the giant market share of e-mail clients that live in the past (and some that seem to be in zombie mode), I think it is fair to mention the HTML table as the most robust way to have a grid in email HTML world. I know, I…

Daily Tips A few weeks ago in one of my YouTube videos, I used the [hidden] attribute to hide and show some elements in the DOM. One of my subscribers mentioned that they hadn’t heard of that attribute before, and were glad I mentioned it. Because JavaScripts always has at least two or three ways to…

Daily Tips For years, advocates of the lean web have lamented that there’s no such thing as HTML imports—me included. But turns out, you probably don’t actually need them. Let’s dig in! JS and CSS have them. Why not HTML? In JavaScript, you can import one JS file into another using the import…

Suppose you want to be a good web citizen; you use semantic and accessible HTML. Elements "leading places" are a elements, your navigation lives in a nav element, buttons are ... well ... buttons, and your form controls are surrounded by a good old form. Using the correct elements gives your HTML…

Daily Tips Last week, I pushed a big update to the Lean Web Club that removed all JavaScript dependencies. While most of the platform was server-rendered HTML stuff, some things required JavaScript, including… The login form The password update form The buttons to mark items as complete or bookmark…

You know those One Time Password inputs? Typically 4 or 6 numbers, something like: Well I came across an article by Phuoc Nguyen about them called Build an OTP input field. I’d say all-in-all, Phuoc did a good job. The design and user experience was considered, like using the arrow keys to move…

Daily Tips AI is shit. There is no nuance to this for me. It steals other people’s work without permission, washes away copyright and attribution, and makes shit up. Most importantly, it uses an absurd amount of electricity and water to do the same things we could do before AI, but worse. AI is…

Over the last year+ I've seen AI quickly increase its dominance in the social feeds I follow. I know I'm in an echo chamber, but it feels like working on the web, you/we must understand how AI works and have some kind of integration in our products. It feels like it's being bulldozed by private…

Something that has always bugged me about CSS is the dullness of most gradients. You’d have this beautiful idea for your design, set up the gradient in your CSS, and when it rendered in the browser it

I went down a bit of a rabbit-hole recently learning about CSS Nesting , specifically regarding the new & selector. I heard that it behaves like the :is() selector, and in the course of researching, I

Daily Tips Last year, I wrote about how all web browsers kind of suck. Every single one has turned into an AI-and-ad-driven piece of garbage. Amazing garbage that does incredible things. But still garbage. In my article, I wrote… Vivaldi is alright, I guess, but made some weird UI updates just for…

Today on Mastodon, Nils asked how to detect support for @property. While in theory you could use @supports at-rule() for this, in practice you can’t because it has no browser support (😭). Thankfully,

Subscribe Blog RSS feed Notes RSS feed or Combined and follow Mastodon Bluesky Wednesday 3 Jul 2024 Play Synthesised Audio I listened to Mostly Technical episode 42 — great podcast btw — Aaron Francis talks about the struggles of sending an email newsletter. Google are quick to rate limit new…

A service worker is a special type of JavaScript file that acts like middleware for your site. Today, I want to talk about why every website and web app should have one. Let’s dig in! What a service w

I was watching Kevin Powell and Adam Argyle rapidfire through 23 CSS features. They are all cool tricks, but one stood out to me. Even as an extreme CSS connoisseur I hadn’t seen it before. It’s a jui

I remember feeling numb learning that my writing had been sucked up by OpenAI. It came out of nowhere and was done without my permission or consent. I have a lot of ethical issues with contemporary AI productization, notably notions around consent, ownership, and environment. These concerns have all…

Homepage Contact No No-JavaScript Saturday 22 Jun 2024 I’m blogging this quick tip because the old technique is so ingrained I keep forgetting there is a new way. You ever used that no-js class? The o

I’d wager that most of the developers who build modern websites and web apps don’t start off thinking… I’m going to make this as complex as possible. Most of the time, I hear stuff like… React/Vue/Ang

Daily Tips This week, I’ve written about classless vs. class-based CSS, and how I approach CSS architecture. I’ve also written a fair bit recently about how I’m starting to consider build tools and anti-pattern. This has led to a few conversations about how to structure CSS and and work with modular…

In response to Kai Pepler. If a screen reader user is navigating the page by landmark, then they are getting each landmark in sequence. Essentially the rotor exposes a serialized set of landmarks. They would move past the header landmark and then to the navigation landmark (whether or not it’s…

Day 104: animation with registered custom properties posted on 02.11.2023 It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve

The other day, I wrote about how every dependency is a potential vulnerability. While that article as about third-party libraries and frameworks, you can make a similar argument about infrastructure v