Faulty logic

Ain’t this the truth: It’s like when you’re learning a new language. At some point your brain goes from translating from your mother tongue into the other language, and instead starts thinking in that other language. I don’t speak any other language besides English, but I’ve heard that’s true. Wit..

CSS-Tricks Chronicle XXXXI

Ya know, I used to do one of these posts after making a few podcast appearances I hadn’t had a chance to link up yet, so I could share them. As fate would have it, I haven’t been on many podcasts (other than my own) lately. One exception! I was on Episode 33 of That Tech Show a few months back where..

Shadow Palette Generator

Josh’s Shadow Palette Generator is a fantastic tool. The premise is that box-shadow pretty much always looks better when there are multiple layered shadows that are a bit tinted. It reminds me of how gradients almost always look better when eased. The generator does that, but also does three levels ..

Embrace the Platform

So what is the one thing that people can do is to make their website better? To answer that, let’s take a step back in time … The year is 1998, and the web is on the rise. In an attempt to give a high-level overview of the architecture of the WWW, Tim Berners-Lee — yes, that Tim Berners-Lee — publi..

Ship a Full-Stack App in Days with AWS Amplify Studio

(This is a sponsored post.) Amazon has a vision with AWS Amplify. First, a premise: As browsers have become faster and more powerful over the last decade, front-end developers are building web apps that are more feature-rich and performant for both desktop and mobile devices. To implement these fe..

Why would a business push a native app over a website?

I wanted to write down what I think the reasons are here in December of 2021 so that we might revisit it from time to time in the future and see if these reasons are still relevant. I’m a web guy myself, so I’m interested in seeing how the web can evolve to mitigate these concerns. I’m exclusively..

Using Position Sticky With CSS Grid

Say you’ve got a two-column CSS grid and you want one of those columns to behave like position: sticky;. There is nothing stopping you from doing that. But the default height for those two columns is going to be “as tall as the tallest content in either column” because the default behavior for grid ..

Standardizing Focus Styles With CSS Custom Properties

Take two minutes right now and visit your current project in a browser. Then, using only the Tab key, you should be able to navigate between interactive elements including buttons, links, and form elements. If you are sighted, you should be able to visually follow the focus as it jumps between elem..

Eye Droppin’

Quick hits! There is a new web API called EyeDropper: if ('EyeDropper' in window) { const eyeDropper = new EyeDropper(); try { // This has gotta be triggered by a user interaction, // so consider this pseudo-code. const result = await eyeDropper.open(); const colorHexValue = result...

Some notes on using esbuild

This is a fantastic article from Julia Evans about duking it out with modern front-end tooling. Julia was made a bunch of Vue projects and typically uses no build process at all: I usually have an index.html file, a script.js file, and then I do a and that’s it. Which I t..