Using issues more like a backlog and less like a dumping ground.| www.abeautifulsite.net
My latest approach at preventing FOUCE when loading custom elements.| www.abeautifulsite.net
An open reply to Ryan Carniato's post entitled 'Web Components Are Not the Future'| www.abeautifulsite.net
I've been struggling with the idea of reflecting attributes in custom elements and when it's appropriate. I think I've identified a gap in the platform, but I'm not sure exactly how we should fill it.| A Beautiful Site
In the Web Component world, attribute reflection is commonly used to style custom elements both internally and as public APIs for consumers. If you're not familiar, attribute reflection occurs when an attribute in the DOM is updated due to changes in a corresponding property.| A Beautiful Site
In a SemVer world, major releases are those which contain incompatible API changes. We often see software projects anchor themselves to major versions for long periods of time, usually with the promise of stability.| A Beautiful Site
It's hard to put a value on a design system. It's a lot easier to add up the costs of said design system, especially in terms of salaries and development time. It's even easier to target a design system as the thing that's holding up a product from getting delivered.| A Beautiful Site
They say there's no such thing as bug-free code. When problems arise, creating a minimal reproduction will give you the best chance of a speedy resolution.| A Beautiful Site
I often worry about framework churn. A lot. But using a framework isn't a bad thing. After all, they save time. They help you build things faster.| A Beautiful Site
Let's build a button that accepts one color and calculates its hover and focus states automatically. For this experiment, we'll use CSS Custom Properties, color-mix(), and OKLCH to ensure that tints and shades are perceptually uniform.| A Beautiful Site
Web Component authors already know how powerful slots are, but what if you could do even more with them? Here's an interesting technique to use (or abuse) slots in your custom elements. I've been calling the pattern dynamic slots.| A Beautiful Site
I recognize the need for all users, regardless of ability or device, to have undeterred access to the websites and applications that are created with my software. This is an important goal of my projects.| A Beautiful Site
I needed to convert a URL object to a plain object yesterday. You might have used it before. It's pretty handy for working with URLs!| A Beautiful Site
You've likely heard the term "headless component" tossed around. The idea is you get solid, accessible components without any styles. A clean slate to style from scratch! But the structure (bones) and logic (head) are there. You're mostly adding styles.| A Beautiful Site
It's been three years since I broke ground on Shoelace 2.0. Between then and now, the project has amassed over 300 million monthly hits on jsDelivr and, as of today, it is jsDelivr's 73rd most popular project.| A Beautiful Site
Although Shoelace is a web component library, it ships React wrappers that lets you use the library idiomatically in React. This video shows you how to install Shoelace in a brand new Create React App.| A Beautiful Site
Similar to how every custom element must contain a dash, I like to pretend that every custom event must also contain a dash. This removes all ambiguity between native events and custom events.| A Beautiful Site
The topic of custom element event names comes up every now and then, especially from Shoelace users who get confused when events of the same name are emitted from different components.| A Beautiful Site
It's been more than two years since the beta release of Shoelace 2.0, which was the first version of the project to ship Web Components. What started off as a fun side project has quickly grown to become one of the most recognized Web Component libraries in the world. As of today, Shoelace receives more than 100 million monthly CDN hits on jsDelivr, and that number continues to grow.| A Beautiful Site
In the early days of Web browsers, it was extremely common to see user agent checks in JavaScript. Sometimes, you'd write the same code in two or three different ways to support various browsers. Code such as that shown below allowed webpages to work in browsers like Netscape Navigator and Internet Explorer, who didn't always agree on how features should be implemented.| A Beautiful Site
There's a post from 2016 entitled Buttons shouldn't have a hand cursor that's been making its way around social media this week. While the author is correct in his statement that operating system buttons don't have hand cursors, the pattern has become ubiquitous and somewhat expected on the Web.| A Beautiful Site
I recently added this to Shoelace's contribution guidelines, which sums up my position on AI-generated code.| A Beautiful Site
Buttons are one of my favorite components. On the surface they seem simple, but in practice, they tend to be much more involved. In a post by Nathan Curtis entitled And you thought buttons were easy?, he demonstrates how costs can quickly skyrocket to $1,000,000 when one arm of the organization isn't aware of what the other is doing.| A Beautiful Site
In a previous post, I explored valid names for CSS parts and discovered that there are very few restrictions in what you can call them. The purpose of that deep dive was to help identify a pattern for naming parts that lets me expose states and subparts, or parts exported as a result of composition.| A Beautiful Site
I was recently asked a really good question on Twitter: when shouldn't an element be a CSS Part?| A Beautiful Site
CSS Shadow Parts, colloquially known as CSS Parts, are used to expose elements inside a web component's shadow root so they can be styled by consumers with CSS. But what are we allowed to call these parts? What characters comprise a valid CSS part name? To find out, I had to dive into the spec!| A Beautiful Site
We live in a world where front end developers are fatigued from the framework wars. Most have settled into a niche — especially the React crowd — and they’re happy to not have to think outside that box. They are, by far, the hardest crowd to sell web components to.| A Beautiful Site
On the eve of February, I was inspired to tweet about web components. What started as a simple thought quickly turned into a series of tweets that folks seem to find useful. I've adapted the thread and I'm posting it here for prosperity.| A Beautiful Site
I've concluded that successful "makers" have one thing in common: luck.| A Beautiful Site
Web components are defined and registered with JavaScript. Depending on how and when you load the scripts that perform registration, you may see a brief flash of unstyled HTML where your custom elements should be when the page loads. This is not dissimilar to FOUC, which occurs when HTML is displayed before the stylesheet has loaded.| A Beautiful Site
Somewhere buried in my dusty basement lives a signed copy of Dan Cederholm's classic book Bulletproof Web Design. I purchased it during my first trip to An Event Apart in 2007. This book meant a lot to me back then, and almost 15 years later, many of its concepts still hold true.| A Beautiful Site
The question of whether or not component APIs should be locked down at the code level comes up quite a bit. For example, if a button spec only calls for primary, secondary, and tertiary variants, should we still expose parts and custom properties so users can make further customization as needed?| A Beautiful Site
The EyeDropper API has landed in Chrome and Edge 95! This is a simple promise-based API that lets you select a color from anywhere on the screen. Let's dive in and see how it works.| A Beautiful Site
Love them or hate them, web components ("custom elements") are making a huge dent in the world of front-end development. As of today, close to 18% of page views in Chrome are registering web components. That's an insane amount of usage!| A Beautiful Site
I stumbled upon a short post that intrigued me. In it, the author claims that the cure for boredom is superpowers. Not superpowers in the Superman sense, but ones that we can teach ourselves.| A Beautiful Site
One-off variations aren't uncommon, but they don't belong in your design system. You're design system isn't solving for every possible use case — it's encouraging visual consistency and efficient development. Use custom styles for one-offs.| A Beautiful Site
We recently had a design for an "alert" component with an actions slot. In the spec, only secondary buttons were allowed in it.| A Beautiful Site
I posted a tweet yesterday that was met with some controversy, so I thought it would be a good idea to unravel it.| A Beautiful Site
We tend to think of components as things that belong to a framework. After all, React has components, Vue has components, Angular has components…it's just how we've always used them.| A Beautiful Site
A great trick to find the closest element in the DOM that matches an arbitrary selector is Element.closest().| A Beautiful Site
The new :focus-visible CSS selector lets us remove unsightly focus rings that often result in developers adding this to their stylesheets:| A Beautiful Site
Let's say I have a web component with an open shadow root, like this one from Shoelace.| A Beautiful Site
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 use this to tone down (or turn off) transitions and animations in your stylesheet to accommodate users with vestibular motion disorders.| A Beautiful Site
You can get the focused element with document.activeElement but, if it's inside a shadow root, this will be the host element. This happens because of retargeting, but sometimes you might need access to the internal element that actually has focus.| A Beautiful Site
Over the weekend, I finished migrating Shoelace from Stencil to LitElement. Even though consumers of the library won't see much of a difference, this was a major overhaul of Shoelace's internals.| A Beautiful Site
I stumbled upon a great resource for free SVGs. They're currently boasting over 300,000 images. Check it out over at SVG repo.| A Beautiful Site
Postleaf — at least in its current form — has been discontinued. In the future, I'd like to bring it back as something different. Maybe an open source project. Maybe a SaaS product. I'm not sure at this point.| A Beautiful Site
JavaScript has a well-supported date/time formatting API called Intl.DateTimeFormat. Here's a tip — you can use it to generate localized month and day names without the need for a language pack! This is super useful if you're building, say, a date picker or a calendar app.| A Beautiful Site
I've been having a lot of fun with Stencil and web components lately. Back in January, I decided to use it to completely redesign Shoelace, an open source project I created a few years ago.| A Beautiful Site
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.| A Beautiful Site
Ten years ago, I launched DirtyMarkup to clean up dirty code. It was a fun little tool, but its best feature was that it was easy to use and didn't have intrusive advertisements.| A Beautiful Site
This morning was frustrating. I recently upgraded my VPS from the deprecated letsencrypt client to the newer cerbot client and generated new certificates for all my personal domains. I thought everything was fine — until I kept seeing intermittent SSL errors.| A Beautiful Site
Last November was the 10 year mark for Surreal CMS, a content management service I created to manage static (and mostly static) websites.| A Beautiful Site
I needed a way to identify all HTML elements with duplicate IDs. This is a seemingly simple task, but unfortunately, I didn't find anything out there that fit the bill.| A Beautiful Site
I was checking out the CashNotify app today and I noticed a beautiful style for highlighting text in their testimonials:| A Beautiful Site
I was working on an OAuth implementation the other day and needed to open a third-party auth page in a new window.| A Beautiful Site
Here's a bash script that will zip all folders in the current directory into separate .zip files:| A Beautiful Site
I spent some time last week working on a free CSS boilerplate I'm calling Shoelace.css. It's kinda like Bootstrap, but a lot leaner and pure CSS. You don't need a preprocessor like Sass or Less to use it, but it's still highly customizable with CSS variables.| A Beautiful Site
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.| A Beautiful Site
Nearly a decade ago, I launched my first SaaS application. It was a new take on content management — a hosted CMS that reads/writes directly to a web server and uses class attributes to define content regions.| A Beautiful Site
I use Spotlight more than I like to admit, usually for launching apps. Recently, some of my apps and files stopped appearing — even ones I access frequently.| A Beautiful Site
Some time ago, a user asked about Google AMP support. At the time, I didn't know much about AMP aside from it made pages load faster on mobile devices. It sounded neat.| A Beautiful Site
JSON Feed is a lot like RSS, except instead of XML it's formatted with JSON. It's a rather new spec, introduced just last week, but it's been getting some major coverage and a number of applications have already started supporting it.| A Beautiful Site
It's been about nine months since Postleaf debuted as a simple, beautiful, open source, PHP blogging platform. The initial version was well-received, landing an article on TechCrunch and making its way to #1 for the day on Product Hunt. (Thank you so much, everyone!)| A Beautiful Site
Uploads management is a concept I've always struggled with in Postleaf, but it's a necessary evil. Users have to be able to view and delete files they upload; but at the same time, I've never felt that it should be an integral part of the app.| A Beautiful Site
When I first started using Sass, there was one thing that drove me crazy about it compared to Less. For some reason, including a plain CSS file just wasn't something the compiler wanted to do:| A Beautiful Site
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. Here's a little trick to get a globally available reference to your app's root directory.| A Beautiful Site
The bcrypt library on NPM makes it really easy to hash and compare passwords in Node. If you're coming from a PHP background, these are roughly equivalent to password_hash() and password_verify().| A Beautiful Site
I've never really bothered with ORMs before, as feelings for them tend to be mixed. I've heard that you can spend twice as long learning an ORM as you can coding raw SQL. 🤷🏻♂️| A Beautiful Site
I recently wrote about using an ORM and how it allowed me to support five different database platforms with minimal effort. There is, however, one feature that even Sequelize couldn't tackle for me: full-text search| A Beautiful Site
The first version of Postleaf was written in PHP and lives on as Leafpub. It's a beautiful piece of software that I'm very proud of, but I decided to move the project to Node.js for a few important reasons. This is by no means a knock on PHP, which will always have a special place in my heart, but more of a changing with the times realization.| A Beautiful Site
For me, upgrading to MacOS Sierra broke a lot of things that use SSH, including Transmit, Sequel Pro, and a handful of other apps. In fact, it seems to break any app that uses an SSH key with a passphrase. 🤔| A Beautiful Site
To my awesome users:| A Beautiful Site
Back in 2011, I released the first version of SimpleImage for PHP — an open source project for working with images.| A Beautiful Site
It wasn't long after launching a major open source PHP project until I started hearing things like this:| A Beautiful Site
For as long as I can remember, comments have been a staple of blogging software. After all, what's a good blog post without a relevant discussion to accompany it?| A Beautiful Site
As a web developer, your code is often visible to anyone who wants to review it. If you're like me, you might get stressed out about the thought of people looking at your work and critiquing or criticizing your app's design.| A Beautiful Site
How many times have you seen something like this in a config file?| A Beautiful Site
Need to update your version of Node.js? Here's how you can upgrade or downgrade from the command line using npm.| A Beautiful Site
Here's a cheat sheet for working with virtual hosts on an Ubuntu server. The instructions assume you're not logged in as the root user. Change example.com to your own domain/subdomain.| A Beautiful Site
Last week, I launched Particle on Kickstarter. Today, I pulled the plug and canceled the campaign. We had 50 backers and were 5% funded. So why would I do this with 25 days left to go?| A Beautiful Site
One of the objectives Matt Mullenweg has for WordPress is to democratize publishing, which is excellent. But the very same article states another objective is to "capture the 75 percent of the internet that WordPress doesn't already manage."| A Beautiful Site
If you need some tasty CSS hamburger icons that animate in fantastic ways, here you go.| A Beautiful Site
Here's the best way to flush DNS cache on macOS:| A Beautiful Site
Here's a nice way to fade your pages in using CSS and a bit of JavaScript. The solution is clean and smooth, with no flickering on load. If JavaScript is disabled, the page will still load but the fade effect will not occur.| A Beautiful Site
Those default box shadows that appear inside of your input elements on iOS can be pretty annoying, especially if you're going for a flat or subtle look. Here's how to remove them.| A Beautiful Site
Have you ever needed to send a PHP variable, array, or object to JavaScript? It can get complicated trying to escape the output properly. Here's a way that always works—no escaping necessary.| A Beautiful Site
Years ago I showed you how to force a file to download with PHP. Now with HTML5, you [almost] don't have to do that anymore.| A Beautiful Site
I stumbled across a tweet the other day and it's been resonating in my mind ever since. Mostly because it's something I tend to have a problem with.| A Beautiful Site
Some thoughts I had after conversations with a friend who has a terrible manager. This isn't nearly a comprehensive list, but it highlights many of the problems they were experiencing. Maybe my friend's manager will stumble upon it some day.| A Beautiful Site
Feedback is critical to an app's success. How will you know what to fix or improve on if your users don't tell you? It seems obvious, but here is something I should have been asking my users from the start.| A Beautiful Site
I stumbled across a post today (that unfortunately no longer exists) and I was almost convinced that I had written it myself. Many of the points in it hit home, so I hope it helps people better understand how developers think and what they go through when interruptions arise.| A Beautiful Site
Back in 2012, I wrote an article called Down with the "Share" Widget. In it, I talked about why plastering social sharing buttons all over your website is completely ineffective. This morning, Smashing Magazine all but confirmed my theory.| A Beautiful Site
I've had my head buried so deep in code that I hadn't even noticed this existed. It's a simple way to reference the current text color when writing CSS. Works in modern browsers, including IE9+.| A Beautiful Site
Last week I started using spaces to indent code instead of tabs. It's something I swore I would never do, but I'm glad I finally did.| A Beautiful Site
Here's something exciting from the CSS world: shapes!| A Beautiful Site
For ultra lightweight projects where a framework is overkill, I tend to use Eric Meyers' CSS reset. And since I'm not a glutton for punishment, I also throw in the tried and tested box-sizing fix popularized by Paul Irish. Instead of searching for and combining these snippets every time I need them, here's a paste-ready version for convenience.| A Beautiful Site
The reason I use Lit instead of vanilla custom elements.| www.abeautifulsite.net
A true story about using Web Components in a $400M+ organization.| www.abeautifulsite.net