A Beautiful Site

We recently had a design for an "alert" component with an actions slot.

One-off variations aren't uncommon, but they don't belong in your design system.

I posted a tweet yesterday that was met with some controversy, so I thought it would be a good idea to unravel it.

We tend to think of components as things that belong to a framework.

A great trick to find the closest element in the DOM that matches an arbitrary selector is Element.closest(). // Starts at el and walks the DOM until it finds a parent element // that matches the selector.

The new :focus-visible CSS selector lets us remove unsightly focus rings that often result in developers adding this to their stylesheets: /* Please don't do this */ button:focus { outline: none; } While unsightly to mouse users, a clear focus indicator

Let's say I have a web component with an open shadow root, like this one from Shoelace.

By now, most devs are familiar with the prefers-reduced-motion media query that tells whether or not a user prefers, well, reduced motion.

You can get the focused element with document.activeElement but, if it's inside a shadow root, this will be the host element.

Over the weekend, I finished migrating Shoelace from Stencil to LitElement.

I stumbled upon a great resource for free SVGs.

Postleaf — at least in its current form — has been discontinued.

JavaScript has a well-supported date/time formatting API called Intl.DateTimeFormat.

I've been having a lot of fun with Stencil and web components lately.

In a world where designers use Sketch, Photoshop, and other apps to create wireframes, I'm here in my corner holding this old fashioned pencil and a stack of dot paper.

Ten years ago, I launched DirtyMarkup to clean up dirty code.

This morning was frustrating.

Last November was the 10 year mark for Surreal CMS, a content management service I created to manage static (and mostly static) websites.

I needed a way to identify all HTML elements with duplicate IDs.

I was checking out the CashNotify app today and I noticed a beautiful style for highlighting text in their testimonials: Most textual highlights use a boring rectangle background color, but this stands out and looks gorgeous.

I was working on an OAuth implementation the other day and needed to open a third-party auth page in a new window.

Here's a bash script that will zip all folders in the current directory into separate .zip files: for i in */; do zip -r "${i%/}.zip" "$i"; done I had to do this to 75+ folders today and this definitely saved me some time.

I spent some time last week working on a free CSS boilerplate I'm calling Shoelace.css.

I recently needed to download a bunch of files from Amazon S3, but I didn't have direct access to the bucket — I only had a list of URLs.

I use Spotlight more than I like to admit, usually for launching apps.

Nearly a decade ago, I launched my first SaaS application.

JSON Feed is a lot like RSS, except instead of XML it's formatted with JSON.

Some time ago, a user asked about Google AMP support.

It's been about nine months since Postleaf debuted as a simple, beautiful, open source, PHP blogging platform.

Uploads management is a concept I've always struggled with in Postleaf, but it's a necessary evil.

When I first started using Sass, there was one thing that drove me crazy about it compared to Less.

Determining your app's base dir (or document root if you're from a PHP background) isn't as straight forward as you'd think in Node.

The bcrypt library on NPM makes it really easy to hash and compare passwords in Node.

The first version of Postleaf was written in PHP and lives on as Leafpub.

I recently wrote about using an ORM and how it allowed me to support five different database platforms with minimal effort.

I've never really bothered with ORMs before, as feelings for them tend to be mixed.

For me, upgrading to MacOS Sierra broke a lot of things that use SSH, including Transmit, Sequel Pro, and a handful of other apps.

To my awesome users: I've been taking some time to reimagine what Postleaf should have been.

Back in 2011, I released the first version of SimpleImage for PHP — an open source project for working with images.

It wasn't long after launching a major open source PHP project until I started hearing things like this: I [...] immediately drop interest in a project when I see that it is implemented in PHP.

For as long as I can remember, comments have been a staple of blogging software.

As a web developer, your code is often visible to anyone who wants to review it.

How many times have you seen something like this in a config file?

Need to update your version of Node.js?

Here's a cheat sheet for working with virtual hosts on an Ubuntu server.

One of the objectives Matt Mullenweg has for WordPress is to democratize publishing, which is excellent.

Last week, I launched Particle on Kickstarter.

If you need some tasty CSS hamburger icons that animate in fantastic ways, here you go.

Here's the best way to flush DNS cache on macOS: sudo dscacheutil -flushcache; sudo killall -HUP mDNSResponder; say cache flushed Notice that last part — that's why this is the best method.

Here's a nice way to fade your pages in using CSS and a bit of JavaScript.