What options do you have if you want the body background in a fixed position where it stays put on scroll? background-attachment: fixed in CSS, at best, does not work well in mobile browsers, and at worst is not even supported by the most widely used mobile browsers. You can ditch this idea completely and let the background scroll on small screens using media queries. Or get around it with a small fix. I suppose we could call it a “hack” since it’s a workaround in co..

• 0 Comment

When I think about what front-end development really is and feels like, this is at the heart of it: designing around a huge set of unknowns, and really embracing that notion as a strength of the web rather than a weakness or unfortunate truth we have to work around. Cathy Dutton digs into this with real code and examples over on A List Apart. A recurring theme is the idea that content (certainly an unknown, since content changes) can and should drive design decisions. It ..

• 0 Comment

The perfect link — Rian Rietveld defines them: “When you click on them, they take you somewhere else.” Not much code in here (we’ve got that), just a lot of practical accessibility advice. For example, the alt text for a linked image can allude to the fact that it is a link. Just an image: “A cherry tree in full bloom.” Link: “Wikipedia on cherry blossoms.”Google Announces Seismic Change to Docs — George Joeckel covers the unfolding news that Google Docs is ..

• 0 Comment

A question: If you copy a code sample that uses two-space indentation and you want to convert it to four-space indentation, what’s the *fastest* and easiest option?Matt Stauffer, Twitter I wrote about doing this in Sublime Text a few years back. It’s not terribly different in VS Code, I don’t think. But here’s another way: Use CodePen. Step 1: Copy and paste to CodePen Say you found some code elsewhere, just copy and paste it in: Step 2: Adju..

• 0 Comment

Today’s websites are overflowing with animations—often too many. They get in the way of the content and slow down our busy users. But at the same time: they’re wonderful. They bring websites to life, are fun to implement and can be incredibly impressive to show off. I think they’re great. Sorry impatient users. The way I see it, the problem isn’t necessarily that websites have too many animations, but that the animations don’t vibe with the content they’re pr..

• 0 Comment

This is a bit of advice for developers on Macs I’ve heard quite a few times, and I’ll echo it: go into System Preferences > General > Show scroll bars and set to always. This isn’t about you, it’s about the web. See, the problem is that without this setting on, you’ll never experience scrollbar-triggered layout shifts, but everyone else with this setting on will. Since you want to design around not causing this type of jank, you should use this setting yoursel..

• 0 Comment

(This is a sponsored post.) Free event hosted by Netlify coming up next week (Wednesday, August 25th): Architecting with Next.js. It’s just a little half-day thing. No brainer. Join us for a special event where we’ll highlight business teams using Next.js in production, including architecture deep dives, best practices and challenges. Next.js is the fastest-growing framework for Jamstack developers. With a compelling developer experience and highly performant results, ..

• 0 Comment

Solid is a reactive JavaScript library for creating user interfaces without a virtual DOM. It compiles templates down to real DOM nodes once and wraps updates in fine-grained reactions so that when state updates, only the related code runs. This way, the compiler can optimize initial render and the runtime optimizes updates. This focus on performance makes it one of the top-rated JavaScript frameworks. I got curious about it and wanted to give it a try, so I spent some ..

• 0 Comment

You can’t just do @media (prefers-reduced-data: no-preference) alone because, as Kilian Valkhof says: […] that would be false if either there was no support (since the browser wouldn’t understand the media query) or if it was supported but the user wanted to preserve data. Usually @supports is the tool for this in CSS, but that doesn’t work with @media queries. Turns out there is a solution though: @media not all and (prefers-reduced-data), (prefers-reduce..

• 0 Comment