Distinctive Quality blog

Things You Won’t Need A Library For Anymore

2025-12-21T00:00:00Z

A good overview of things you can now do with just HTML and CSS that you no longer need a Javascript library for.

Design your website like a nice restaurant

2025-12-14T00:00:00Z

'The best of these restaurants have a distinct character that enhances your dining experience.”…”But despite their differences, we always manage to find a table, order food, eat, go to the bathroom, and pay our bill.'

When to use forms in email

2025-12-03T00:00:00Z

;Read article

How to be more agentic

2025-12-01T00:00:00Z

Court rejection, seek real feedback, increase your surface area for luck, and assume everything is learnable.

The updates formula

2025-11-29T00:00:00Z

;Read article

Multi-step form without the overhead

2025-11-19T00:00:00Z

;Read article

Glaze

2025-10-30T00:00:00Z

'Glaze is a system designed to protect human artists by disrupting style mimicry.'

AI for generating truth

2025-10-12T00:00:00Z

AI and large language models continue to improve. Many use cases are behind the scenes. The more visible use cases, are however, still problematic. And it’s because the tech implies to do what it actually can’t seem to get quite right: output factual truth, and generate any kind of human truth, as art. But can it get there?

Collating information

Search is one way AI is being used at scale. The reason it makes sense is because bots scraping content is how search engines worked even before AI. AI’s natural language processing is able to provide summarized versions of results that you would normally have to browse and read through.

But it often falls short with inaccurate information at best, and completely made up information at worst. Studies have shown it to be wrong as much as half the time. So if you’re using AI search results for research, you’ll have to double-check its sources, and then keep digging for the parts it makes up. Is the potential effort saved worth using it at all?

And this collating applies to other areas, like summarizing documentation, or notes for a meeting. What happens when it gets those wrong? Apps are starting to embed similar tech. In these cases, you would have a tough time verifying what it gets wrong. Can you trust the app’s results at that point?

Facts seem like something that the technology can get better at. But there is no understanding from generative AI. It doesn’t know the difference between having melted cheese on pizza and a joke that you can use glue for cheese.

Art for expression

Art is another form of truth that’s not fact-based (though it can be), but provides human truths through its expression. AI is already problematic in generating any kind of art since it uses sources without credit, neither via permission, nor payment to artists. With services like Apple Music available that splits royalties with artists, why can’t AI companies do the same thing?

So far, the only AI art that seems to be gaining any traction are Sora video clips, which are basically just memes that are made for fun, the same way we have GIFs, or images with a text caption. Memes count as art because the prompts are made by humans. And they seem safe from copyright infringement because of the way we freely share memes.

Art comes from human experience. And memes, even with copyrighted material, could be considered a form of parody, in a similar way South Park is able to use Donald Trump’s face. Is there a difference between using generative AI tools to produce something in a few minutes and South Park using a small production team with computers to make an episode within 6 days?

It’s ultimately about taste. And it’s tough to qualify good taste vs bad taste. Plenty of court cases in the past have tried to do this with all forms of art. It’s really a balance between how the artist decides to produce their art and what their audience chooses to accept.

But there is a difference between good art and bad art. Good art resonates with someone on a deeper level, where bad art just feels like slop. It’s easy for AI to generate slop, but even slop can be a form of entertainment for people. There’s always been a lot of slop on TV, and online. We individually have to figure out our own method for filtering through the art that is meaningful to us.

Simplify

2025-10-09T00:00:00Z

'...web developers are constantly being gaslit into thinking that complex over-engineered solutions are the only option.'

Essential metadata for sharing a page

2025-10-08T00:00:00Z

;Read article

Starter page components theme

2025-08-27T00:00:00Z

;Read article

Discovery through links

2025-08-24T00:00:00Z

;Read article

Listing essentials

2025-08-14T00:00:00Z

;Read article

New Research Reveals How AI 'Thinks'

2025-08-09T00:00:00Z

How AI thinks: it doesn’t.

Article content essentials

2025-07-28T00:00:00Z

;Read article

Process Matters

2025-07-16T00:00:00Z

Writing notes by hand and rephrasing them is more valuable to than relying on AI tools.

Feature content essentials

2025-06-26T00:00:00Z

;Read article

Apple design talks

2025-06-22T00:00:00Z

Apple's WWDC event took place recently. Along with all the updates announced for their operating systems, there are also various talks for developers. Most talks relate directly to the updates, but some are a little more on the philosophical side and offer some good design insights.

Videos of the talks are freely available online, and every year for the past few years I've been going through them. Here are highlights of some good ones:

Design foundations from idea to interface - structure, navigation, and content
CarPlay design system - how a design system comes together
Principles of spatial design - environmental design that utilizes our natural senses
Writing for interfaces - the importance of writing in UX design
Design an effective chart - outputting data visually

Explore prompt design & safety for on-device foundation models

2025-06-18T00:00:00Z

A good overview video of AI prompts and how to work within their limitations, from Apple’s WWDC sessions.

Duplication Is Not the Enemy

2025-06-09T00:00:00Z

The right time to abstract isn’t when you see duplication — it’s when you understand the pattern.

How-to: website navigation

2025-05-29T00:00:00Z

;Read article

Close to the metal: web design and the browser

2025-05-27T00:00:00Z

;Read article

Website navigation essentials

2025-05-27T00:00:00Z

;Read article

The indie web

2025-05-10T00:00:00Z

;Read article

The benefits of walking

2025-05-04T00:00:00Z

;Read article

Modern form validation

2025-05-01T00:00:00Z

;Read article

Email signature essentials

2025-04-02T00:00:00Z

;Read article

Figma’s not a design tool — it’s a Rube Goldberg machine for avoiding code

2025-03-19T00:00:00Z

Architects don’t just sketch fantasy structures and expect engineers to figure it out.

Can You Fool A Self Driving Car?

2025-03-16T00:00:00Z

Any reading of a car’s surroundings needs Lidar to work properly.

Apple Intelligence Delay Isn't a Failure — The Problem Is Bigger Than Apple

2025-03-14T00:00:00Z

This is the right take on AI right now.

X, Meta, and the great social media meltdown

2025-03-05T00:00:00Z

Brands must invest in direct channels like websites, apps and email to regain control over customer relationships.

Blocks Edit for websites

2025-03-04T00:00:00Z

Use the visual theme editor to turn your HTML design into a content management system and collaborate on pages via drag and drop inline editing.

Email newsletter list

2025-03-02T00:00:00Z

;Read article

How to prepare for the future of SEO

2025-03-02T00:00:00Z

Nice overview of the state of search engines and how they're adapting to AI-generated content.

Why I Like Designing in the Browser

2025-03-01T00:00:00Z

Using design software for web design can often feel like a waste of time. Going straight to HTML and CSS provides a more accurate representation of design limitations.

Blocks Edit update: instant editing

2025-02-26T00:00:00Z

;Read article

A more natural way to organize website folders

2025-02-23T00:00:00Z

In an attempt to keep files organized for a website to grow, there seems to be an obvious standard way to go. But I’ve decided on a different approach this past year that so far has worked better for me. Let’s take a look at the two approaches.

Folders for assets

The most common approach I’ve seen, and have used since I can remember, is to create folders for different asset types and keep them all in one place. Images in an ‘img’ folder, CSS in a ‘styles’ folder, Javascript in a ‘js’ folder.

So as pages are added, they can all reference the same paths from the root across the board. Additionally, I would keep all web pages in the root directory, with a server htaccess file that manages the friendly URL’s for them.

Over time, I’ve found that there is an inherent struggle that comes with this approach for large sections of the site that require their own specific assets. Keeping their images in the global images folder just feels wrong and over time gets messy. I have tried a system of subfolders but that also ends up going off the rails eventually.

Folders for pages

So I (finally) decided to rethink my entire approach and came up with a bottom up model: instead of each asset type, each page gets its own folder, with an index file in it for the page code. And all assets needed for each page go within its folder as well (with global assets going in the root). So now each page is essentially considered a section on the site.

This creates a friendly URL by default without any special server setup required. And if a page does turn into a larger section with subpages, they would get their own subfolders and be treated the same way, creating a natural branching.

So far I’ve been finding this to feel much more simple to manage as a site grows. From making decisions of how to separate CSS and Javascript code easier, to being better at cleaning up unused assets.

Modern form design

2025-02-19T00:00:00Z

;Read article

Form essentials

2025-02-12T00:00:00Z

;Read article

Blocks Edit update: editable form fields

2025-02-05T00:00:00Z

;Read article

Visual design rules you can safely follow every time

2025-02-02T00:00:00Z

Good rules to have on hand as a reminder of the details your design should take into consideration.

Every token is a feature

2025-02-02T00:00:00Z

How technical debt can accrue in something as small as how you define and use CSS variables.

Build for the Web, Build on the Web, Build with the Web

2025-01-27T00:00:00Z

Every layer of abstraction made in the browser moves you further from the platform, ties you further into framework lock-in, and moves you further away from fast.

Modern email design

2025-01-23T00:00:00Z

;Read article

Creator guides

2024-11-29T00:00:00Z

;Read article

Recovering failing SEO sites with the kitchen sink method

2024-11-29T00:00:00Z

If you think your SEO can use a refresh, this article covers everything you should look at.

Even Apple can't figure good use cases for AI features

2024-11-29T00:00:00Z

A good take on Apple's initial AI features and how they seem to be for 'the stupid ones.'

The design of a design system

2024-11-11T00:00:00Z

;Read article

Rolling out your design system

2024-11-04T00:00:00Z

;Read article

Prototyping magic tricks and software

2024-11-03T00:00:00Z

An example of the value of prototyping, where you don’t have to figure everything out beforehand.

Good forms

2024-11-03T00:00:00Z

A good list of the qualities of a good website form and links to additional design considerations.

A primer on design systems

2024-10-21T00:00:00Z

;Read article

A composable CSS layout primitive

2024-10-05T00:00:00Z

A good approach to adding space between components, in context, instead of on individual components.

The landing page approach

2024-10-01T00:00:00Z

;Read article

The indie web in action

2024-09-22T00:00:00Z

This past year I’ve been working on taking Indie Aisle from concept to usable product. The latest release represents an example of the full idea in action: a website template for building a static site, in a format that works as a hub for other platforms.

The overall idea of Indie Aisle is a combination of two aspects: simplifying the variables for making a website to their most essential form; and making the process as easy as possible for creators to build their online presence independent of any platform.

In practice, this consists of three parts: HTML templates made for the Blocks Edit visual editor to easily build out static pages; a-la-carte services for any needed dynamic functionality like form submission or order handling; and straightforward guides to help educate how to manage assets in a way the creator has full control over.

Templates, tools, and guides

The new HTML template is open source, focused on creators presenting themselves and their work and allowing their fans to connect with them directly. It encourages setting up a home to point their fans in from online platforms. Where they control their content and their connection to their fans, instead of the platform companies.

The initial dynamic services available are: submitting a form to their email, while blocking form spam, and with simple, private stats. This is often all a basic website needs. Future releases will include a feed of posts (and RSS), email list subscribing, and digital order handling.

Guides offer approaches for staying independent while using the web to publish and promote work. A few of the initial guides include setting up a domain name, hosting, and a custom email address, the best way to use creator platforms, and having an email newsletter.

The HTML template includes the initial services built-in. Using Blocks Edit allows building pages and updating content via point and click editing. And the creator can export directly to any static hosting option via Blocks Edit’s FTP integration. And the guides show how to setup the infrastructure to make it all work on their own.

Indie web, taken to its full extent

All of the above includes best practices of the modern web: semantic, accessible HTML, and modern CSS techniques. It takes into account lean web methods, by eliminating variables to stay nimble and portable, and as future proof as possible. And the IndieWeb is a part of it, by encouraging POSSE practices, and with microformats baked in.

I tend to refer to a more general “indie web” term because even though it includes a lot of IndieWeb core philosophy, it doesn’t fully include all IndieWeb tech. Though there is potential for adding more of it in the future, it will need to be done in a way that’s easy for creators to setup and use.

Indie web practices work together hand in hand with being a truly independent creator. And should always go together to staying independent beyond the shifting of online platforms and apps. And we're going to continue building on Indie Aisle tools and resources to help make that possible for indie creators!

The micro guide to microformats

2024-08-24T00:00:00Z

The idea of Microformats is to tag content pieces in a semantic way to allow for search engines and browsers to easily read as data. For example, a product, or an event. While browsers recognize certain snippets, like an address or email, microformats allow for grouping multiple snippets that make up certain categories of items.

While sites actually using them to pull in content is currently limited, it doesn’t hurt to have something in place for the ones that do. They’re pretty painless to implement as they work as simple properties around HTML elements. And there are actually a few microformats that do have pretty wide implementation!

rel tags

rel-me is probably the most widely used of all microformats. Mastodon and other social media platforms use it to verify the links you add to your profile. We use it with Indie Aisle to verify users’ domain names.

Another big one, rel-nofollow is used on a tags as a way to tell search engines that a link on a page goes to an untrusted site. And some blog platforms use rel-author for author details and rel-tag for tagged articles.

h-card

h-card is for people and organizations, like your profile overview:


  
  Ovi Demetrian Jr
  Follow

h-entry and h-feed

h-entry is for “episodic or datestamped content”, like blog posts:


  The micro guide to microformats
  Why you should use microformats and some examples of how they work.
  
    ...
  
  Originally published August 24th, 2024

And related to it, h-feed is for listings of h-entry posts:


  
    The micro guide to microformats
    Why you should use microformats and some examples of how they work.
    8/24/2024
  
  ...

It's also worth using rel-bookmark for any link listings.

Additional examples worth mentioning are products, events, and misc items. If you want to learn about more, here's the full list of microformats currently available.

Blog posts vs. social posts

2024-09-02T00:00:00Z

“Whereas the inertia for a social post quickly losses steam as the algorithm prioritizes novelty, blog posts slowly build steam...”

Diagram of the different kinds of indie web

2024-09-02T00:00:00Z

A great visual showing the different kinds of indie websites and how they connect to each other, each linked with more details.

Pages indie creator theme

2024-08-11T00:00:00Z

;Read article

Don't forget - you're making web pages

2024-08-10T00:00:00Z

“Strive to produce code that is valid and only as complex as it needs to be.”

Let's take back the web!

2024-08-04T00:00:00Z

“...our lives are full of shitty ads, we’re being tracked wherever we go and someone else is controlling the content we see...”

Don't lie to me about Web 2.0

2024-08-04T00:00:00Z

How Web 2.0 is typically viewed as an evolution of Web 1.0 vs how it should actually be viewed.

5 core landing page techniques

2024-08-02T00:00:00Z

;Read article

Simple stats

2024-07-06T00:00:00Z

We’ve decided to design something simpler, narrowing down stats to just a few key metrics that we believe are all that are needed.

My approach to alt text

2024-06-30T00:00:00Z

Some good tips, and ideas for providing context for images through their alt text.

What the internet looked like in 1994, according to 15 webpages born that year

2024-06-30T00:00:00Z

“The earliest web pages are a far cry from today’s cyber wastelands.”

Finding the indie web is hard

2024-06-28T00:00:00Z

How connections on the web work and how we can help connect indie websites to each other.

The time for designers to learn to code is now

2024-06-28T00:00:00Z

“The thing to remember about learning HTML and CSS is that they are web standards and will long outlive Figma, Adobe XD and Sketch.”

Emails with landing pages

2024-06-27T00:00:00Z

;Read article

AI needs better interfaces

2024-06-15T00:00:00Z

Apple recently held their yearly World Wide Developer Conference where they announce new features across their software platforms. As a surprise to no one, they focused a large portion of their keynote on AI. Not Artificial Intelligence, but what they called Apple Intelligence. It was a way to separate themselves from the ways that AI is being done wrong for other companies.

The ethics on where Apple sources its generative data from is still iffy. Its official stance is that it’s from the public (which translates to what’s accessible on the web), along with licensed content which they don’t provide any details on. But unlike companies like Google and its AI-based search, it does not attempt to use the data to replace the sources of the data.

AI tech is an evolution, not a revolution

Part of the features Apple presented were an extension of Siri, allowing Siri to do what you would expect from a virtual assistant. Many people seem to be getting ahead of themselves for what they want AI to do. What Siri does makes sense in connection to what the previous version did, while having guardrails around what is currently possible with AI, and with a glimpse towards future potential.

All the feature examples showcased were more grounded, working around aspects of what we currently do on our phones. In fact, most of their features only focused around personalized functionality that utilized machine learning and generative AI to allow natural language interaction within a given context. For example, it can generate text that sounds more “friendly”, “professional”, or “concise”, but it only does it based on your own already written text.

How we interact with AI is a work in progress

My biggest takeaway from the event is what I also feel is the biggest problem with AI: how we interact with it. Writing a prompt as an interface to have it do something is the result of design by engineers, programmers that use command line to do everything. It may work for some things, but not for everything. Or for everyone.

Apple’s features have specific interfaces for specific things that you’re doing. For writing an email you get proofreading, enhancement of your writing, and summarization of text. It uses image generation for what is essentially modern-day clipart by providing categories for ideas, and limited style options. You can ask Siri questions based on what is currently on your screen.

These interfaces make me actually want to use generative AI for day to day tasks which I have yet to do by using current generative AI prompt writing. It finally feels like AI has a bright future for us humans.

Publishing AI slop is a choice

2024-05-24T00:00:00Z

Google has chosen to erode the trust that they have built up in search just so they can avoid accusations that they’re “behind”.

Starter page boilerplate

2024-05-20T00:00:00Z

;Read article

Blocks Edit for landing pages

2024-05-14T00:00:00Z

You can now use the visual editor for editing and building static pages, with the same simple interface and collaboration features.

Form submit to email

2024-05-13T00:00:00Z

;Read article

Apple’s momentary lapse of reason

2024-05-12T00:00:00Z

A good summation of Apple’s Crush ad from Ken Segall, a former ad creative of some classic Apple ads.

Starter email components theme

2024-05-07T00:00:00Z

;Read article

Web forms for everyone

2024-05-07T00:00:00Z

What designers and developers can do to make their forms accessible and improve everyone's user experience as consequence.

Figuring out the best page container width

2024-05-06T00:00:00Z

For mobile devices, there isn’t really a decision to be made on the main container for our content. For the most part, it just needs to fill up the screen width. For larger screen sizes however, we need to limit our container width.

The reason has to do with how we read text. If the line of text we’re reading is too long, it becomes difficult for us to read and focus on the content. According to accessibility guidelines, a line of text should be no larger than 80 characters in length. This should be what we base our container width on.

CSS ch (character) unit

This is where the ch unit comes in. It scales relative to the width of a single character, or more specifically, the width of the 0 (zero) character. And given the length of text we know to stick within, it makes it easier to set our container width based on using the ch unit.

Here are some examples:

For this site, I use a starting body font-size of 18px with a container width of 95ch; however, for a single column of text, I reduce it by two columns in size to be narrower (at around 55ch)
For the Blocks Edit promo site, I use a body font-size of 22px and my container width is 80ch, which comes to 979px
And for Indie Aisle, I decided to go with a body font-size of 18px and a narrower container of 70ch, which is 701px wide

What about screen resolution?

The original desktop standard container width used to be 960px. This was based on a desktop screen resolution of 1024x768px. As monitors and screen resolutions got larger, the 960px width stuck, primarily because people would tend to keep their browsers in a smaller window instead of fullscreen. Laptops also started to grow in use which had smaller screens.

Now monitors have considerably higher screen resolutions, the minimum at 1366x768px, and the most popular at 1920x1080px. You can still make an argument for browsers still being used in a window, but even then, chances are good that they’re open at a larger size than they used to be.

The right container width

So what container width is ideal? The good old 960px standard. I’m joking. Sort of. If you go with a font-size of 20px and an in-between of 80ch for the container width, it comes to 890px, pretty close to the old standard! So it can still be used as a good desktop starting point (anything above 800px screen resolution width). Just adjust the font size and container width according to your design.

And account for larger screens. You can do it by only adjusting your body’s font size since having a ch unit set on the container would adjust it automatically. This is what I use for both this site and Indie Aisle, and it’s part of my Starter boilerplate template:

body {
  font-size: 1.125rem; /* 18px */

  @media (min-width: 1100px) {
    font-size: 1.25rem; /* 20px */
  }
  @media (min-width: 1200px) {
    font-size: 1.375rem; /* 22px */
  }
}

1200px feels closer to an actual new standard. You can go further from there if you’d like. You’ll also need to adjust font-size for your heading text and other text elements as well.

The AI hype is about how we dream to interact with our tech

2024-05-05T00:00:00Z

Generative AI buzz is at an all-time high, with new gadgets, and companies continuing to push AI into their products. Machine learning is a big step in technology to be sure, but it’s nowhere near its potential yet. Just like self-driving cars are still years away from getting right, so is AI.

The promise

A lot of what products are promising AI to be are at best a disappointment, and at worst potentially harmful. They focus on processing large language models to allow for asking questions in a more natural way, and having the computer respond in a more natural, human-like way.

And their features are around multimodal interaction with the world by being able to understand what it “hears” through your voice and “sees” through photos and video. Google released a concept demo of where we could be in a few years.

The reality

But we are not there yet. And some companies are realizing that. Google has AI tech that it’s releasing mainly to developers, not as consumer products yet. And Apple is showing off its tech in the form of research articles.

The thing is, many hyped AI features are already available, and on our phones. We can ask Siri for information, and Google Lense allows for getting information about certain things we see. And they do a much better job.

We’re trying to get to the science fiction promise of being able to talk to our computers and have them answer back as if we’re talking to another person. And we’re willing to give current tech a huge benefit of the doubt because it sounds convincing. But all we’re doing is anthropomorphizing our computers.

CSS button styles you might now know

2024-04-30T00:00:00Z

A great short dive into all button options including touch action for mobile devices.

Newsletter email essentials

2024-04-25T00:00:00Z

;Read article

Creator economy trap: why building on someone else's platform is a dead end

2024-04-24T00:00:00Z

The reason I decide to (re)launch Indie Aisle. I would add that you should use tools, resources, and other people to help develop your site. Work with a designer, a developer, a template, a system. BUT understand how it all works together and how you can make changes if you need to.

Form spam blocking

2024-04-23T00:00:00Z

;Read article

How to handle spacing between components

2024-04-14T00:00:00Z

The use of space is a big part of any design. Translating spacing to CSS in your HTML can get tricky. These are the rules I follow for setting up spacing for my layouts.

Layout spacing

For your overall layout, using CSS grid will go a long way to simplify your spacing needs as you’ll be able set a gap between elements. This takes care of a lot of requirements among components by separating layout spacing from the components themselves, allowing them to be self-contained without any margins set.

Where to place space

How do you decide where to place margins for elements that aren’t using CSS grid gap for spacing? My rule of thumb is to always add margins at the end, on the right if needed, and at the bottom. And then take out the extra margin if it’s not needed, like for the last element in a component. You can use :last-child to do this:

.component {
  margin-right: 20px;
  margin-bottom: 20px;

  &:last-child {
    margin-right: 0;
    margin-bottom: 0;
  }
}

For components that need space within them, padding should be used. For example, a component with a title, and paragraph text should have padding defined at the top and bottom, and left and right. However, the title and text elements themselves should have margins set for their own spacing.

.component {
  padding: 10px 20px;

  & h1, p {
    margin-bottom: 20px;
  }
  & p {
    &:last-child {
      margin-bottom: 0;
    }
  }
}

Units of measurement

As far as what unit of measurement to use for spacing, pixels can be used for your CSS grid gap, along with padding and margins for components, and text elements as well.

For additional examples, you can view source the CSS on this site. Or refer to this boilerplate template that I use for setting up my layouts.

The joy of incremental website improvements

2024-04-06T00:00:00Z

Making incremental website improvements give me warm fuzzies. It’s like each update fills in a piece of my being.

Modern email design for web designers

2024-03-30T00:00:00Z

Looking at most email code, you’ll find that it’s difficult to read at first glance. CSS is used primarily inline. And the worst part of it, tables are used for layout. This is because of Outlook for Windows, the Microsoft Internet Explorer of the email world. It also makes other things difficult, like using background images.

A more modern approach

However, Microsoft has announced this past year that it is finally replacing its Outlook for Windows rendering engine. Even though the transition may take a while, the percentage of Outlook for Windows users is already pretty low. It's only Outlook specifically on Windows that's the issue, on other platforms it uses newer rendering engines.

So at this point, it’s pretty safe to move away from supporting it. Plus you can do what people did during the Internet Explorer days: put up a note that’s only shown in Outlook for Windows to let your readers know to upgrade their email client. You can even include a link to a hosted version of your email that your readers can go to for proper rendering.

Coding and testing

With Outlook for Windows set aside, you can use div’s for layout the way you would for a website. And you can put all your CSS in the header of your HTML instead of inline within your HTML elements. You still can't use external CSS though. And no Javascript either.

Testing the rendering of your email also gets easier. Before, you would have to use specialized tools to test for various old versions of Outlook for Windows. Now, you can just sign up for an Outlook.com account since it's eventually what will be used across the board for all Outlook apps.

Another client to test for is Google Mail, which can be done with a Gmail.com account. And Apple Mail, on any Apple device. Apple Mail provides the best email rendering so you don't even really need to worry about it much if you're covering the other two. But these three make up the main ones you should test for. And for checking compatibility of specific code, caniemail.com is an essential tool to use.

If you'd like to see some example code that shows the difference between code that supports Outlook for Windows and more modern code, I use a boilerplate email template that comes in different versions. And the latest email template I worked on for Indie Aisle, is a fully modern example.

Engagement email essentials

2024-03-27T00:00:00Z

;Read article

Email updates

2024-03-23T00:00:00Z

;Read article

How to Favicon in 2024: Six files that fit most needs

2024-03-13T00:00:00Z

Straightforward favicons: classic .ico, homescreen graphic, and SVG version. Plus support for a PWA with a manifest file and a couple more PNG’s.

The internet isn't dying, it's changing

2024-03-12T00:00:00Z

“What we have now is an opening to allow smaller, decentralized communities to flourish.”

Web Independence

2024-03-11T00:00:00Z

“Every new thing that I add to my website works to regain my internet presence away from companies that do not have my interests at heart.”

Which CSS framework should I use?

2024-03-03T00:00:00Z

I feel the same way about CSS frameworks as in this post, they're all made up of too much code than I generally need.

Helpful email essentials

2024-02-22T00:00:00Z

;Read article

My page layout grid system setup

2024-02-18T00:00:00Z

Coding layout based on columns has always been a painful process using CSS. But now that there is wide support for CSS grid, it no longer has to be! Here is how I do it for my site.

I originally referred to Chris Ferdinandi's approach, but modified my version in a way that I felt was more flexible to work with.

Grid system

We start with our grid system, taking a mobile-first approach by only enabling a grid on non-mobile screen sizes:

.row {
  @media (min-width: 480px) {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr auto;
  }
}

This sets up a 12-column layout, each with one fractional unit. The grid-template-rows property defines a row with a minimum size of 1fr and an auto sized maximum.

You can also use column-gap to set a default gap between the columns, but I prefer doing it on specific areas on the site that it's needed.

Columns

We then define the columns we need to work with, setting how they span for different screen sizes:

@media (min-width: 480px) {
  .col-2, .col-3, .col-4, .col-5, .col-6, .col-7 { grid-column: auto / span 6; }
  .col-8, .col-9, .col-10, .col-11, .col-12 { grid-column: auto / span 12; }
}
@media (min-width: 800px) {
  .col-2 { grid-column: auto / span 2; }
  .col-3 { grid-column: auto / span 3; }
  .col-4 { grid-column: auto / span 4; }
  .col-6 { grid-column: auto / span 6; }
  .col-7 { grid-column: auto / span 7; }
  .col-8 { grid-column: auto / span 8; }
  .col-9 { grid-column: auto / span 9; }
  .col-10 { grid-column: auto / span 10; }
  .col-11 { grid-column: auto / span 11; }
  .col-12 { grid-column: auto / span 12; }
}

Here's an example of how it's used in the HTML for a two-column layout:


  Left column
  Right column

Column options

You can adjust how your column works using the grid-column property. For example, this offsets the column and limits how wide it goes:

grid-column: 3 / 11;

The column starts on the third unit and its width is limited until it gets to unit 11. This means the content area starts on column 3 of 12 and is 8 columns wide, ending on column 10. You can see an example of this on this blog post page, where the content column is narrower than the header and footer columns and appears centered.

For additional examples, here's a boilerplate template you can use that includes some column layouts.

The Apple Vision Pro is NOT what you think it is

2024-02-15T00:00:00Z

I’ve watched quite a few Vision Pro video reviews the last couple of weeks. This one’s probably my favorite.

How I organize my CSS

2024-02-10T00:00:00Z

There is now browser support across the board (for more recent versions), for both CSS nesting, and using variables. Both of these allow for a better way to structure your CSS and keep it more manageable while making changes to it.

Excited about the nesting support, I decided to refactor the CSS for a couple of the sites I make updates to regularly: the one you're reading this from, and the promo site for Blocks Edit.

Breaking things down and categorizing

I use a global CSS file for a website with separate files for website sections that have considerable additions, like a blog. Those added CSS files are called in only on those sections. I often consider the homepage as its own section, along with certain landing pages that have a good amount of design elements that are specific to it.

These are the general categories I break my CSS code down in:

Global - variables, any needed resets, and body options
Text formatting - including for titles, and link properties
Layout - container and CSS grid layout setup for columns
Utilities - design patterns, like image and video formatting, buttons, forms, notices, share links, code example formatting, etc
Header and footer - along with their navigation

I will also have an area in the global CSS file that has the styling for secondary pages that its used on a lot.

Additional details

One thing to consider with nested CSS is not overusing it, leaning towards a flatter structure, allowing elements to be more modular on their own.

Besides nesting my elements and classes, the biggest noticeable change I made along the way was putting @media declarations for both mobile and dark mode within individual elements instead of separating them into their own mobile and dark mode categories (which is why they're not on the list above).

Global variables I mainly use for the site's standard colors and fonts. If I need to use them at any point, referencing the variables makes it easier than searching for the correct values every time.

Keeping track of what CSS is being used (and where) and what isn’t can be tricky but I’ve found that the above format helps with this. When I make an update to a page, if I end up changing its design considerably, I end up first going to its section CSS where I can either modify currently used CSS, or remove it if I’m no longer using it.

For examples of this approach, here is the global CSS for this site. And the global CSS for the Blocks Edit website.

I've also been working on a boilerplate template that's on GitHub that you can refer to which follows the methods above as well.

Apple Vision Pro, a glimpse into the future

2024-02-09T00:00:00Z

Months back, my girlfriend, Nichole and I essentially decided to skip both Christmas, and birthday gifts for each other and pre-ordered a Vision Pro for us both to use. It’s been a week now and I’ve been enjoying what it has to offer, it really does feel like stepping into the future of how we will someday be using computers!

Unfortunately, I can’t wear it more than an hur or so before its weight gets to my head. But it seems to be fine for Nichole so far, and since you have a different head than me, it may work better for you too!

Why it’s so impressive

I first tried out the original Oculus VR headset back before Meta/Facebook bought the company. While I didn’t care much about VR tech at the time, once I tried it for myself at an indie game event, it sparked my interest to the extent that I’ve been following the tech as it’s been developing ever since. The head tracking made looking around an environment feel very natural.

A couple of years ago I decided to get a Quest 2, thinking it had improved enough that I would make it my new gaming system instead of getting a new Xbox. Besides having the same weight discomfort problem as the Vision Pro, I was disappointed by how it was very much the same as the version I had tried years back. Sure the graphics were a lot better, but it didn’t feel much different.

The Vision Pro does feel different though! It really seems like the true next step for VR/AR/spatial headsets. The way the Oculus got the natural feeling of movement right, the Vision Pro makes the experience of how we do things in the environment feel natural as well.

What makes it work

So what is it that makes it work better than other headsets? It’s a combination of technologies and details that are very thought out. There is a Quest Pro headset available that has the same basic tech as the Vision Pro: high-res displays, eye tracking, hand tracking, pass-through (being able to see the real-world in the headset). But it doesn’t even compare to how they all work together on the Vision Pro.

The Vision Pro has a lot of hardware tech crammed into it. It’s not there just for the sake of being better tech, it’s the right amount of tech to do what it does so well. The screens for your eyes are such a high resolution that everything looks life-like in its sharpness. And there are enough cameras and sensors to track your eyes and hands accurately, and to make the outside environment look and feel real.

It’s combined with an interface that takes into account our real world to make it feel like it’s a natural extension of how we would use our computers in our environment. Apple is best at making our interaction with computers follow our natural way of doing things. Like the mouse and GUI for the Mac, multi-touch for screens for iPhone, and now sight and hand motions for Vision.

Is it worth it?

As cool as it is, it does have its flaws. Of course it’s pretty heavy. The field of view isn’t ideal as you can see the outside of the goggles shape as you’re looking through it. Sometimes there are reflections that show. Sometimes it’s a little blurry when using the virtual display. It’s slightly dimmer than natural light of actual surroundings.

And there’s the question of what do you do with it? It has some great immersive experiences, a few fun games, 3D movies, and the fact that you can have any kind of screen, and multiple screens, anywhere you want!

As John Gruber points out, it’s three things in one: the best VR device (minus the games that are not yet available); the best TV watching experience, better than a home theater; and a spacial productivity platform that can replace all your monitors. If all of the above is what it is/becomes, then it seems pretty worth it even at its current cost!

Try it yourself!

Even if it’s not perfect, you can just feel that it works and it’s the way things will work from now on. The core is there and it’s only going to get better as it gets refined. Developers have a new platform to develop on and having their hands on it leads to ideas for what to do with it.

Apple is encouraging everyone try it out by making demo sessions available all the time. They know most people will not buy one at its current price, but they want as many people as possible to see what makes their headset so special for themselves. They believe that the experience is so good that people will talk about it. And they’ll spread the word on it to someone who will eventually buy it. And you could decide to get a later version!

And despite it not being for my head, they do have a variety of options and ways to make it as comfortable as possible. So it may potentially be a good fit for your head. And even if you don’t plan to buy it, checking out their demo is worth it for a glimpse into the future!

If you can't find it, it needs to be written

2024-02-05T00:00:00Z

A good way to think about your blog posts.

More than blogrolls

2024-02-04T00:00:00Z

How to help blog discovery beyond just having a blogroll.

Links page of what you follow

2024-01-28T00:00:00Z

Along with how social media platforms have a Follow option for being able to get your updates, there’s also a Following page that shows who you’re following. This is similar to how websites with blogs have blogrolls, a list of links to other blogs.

I decided to call my blogroll my Following page. Partially because it’s a familiar model, and also because I include more than just links to blogs on it.

What to include

On my Following page, I have:

Blogs, with direct links to their RSS feeds
Newsletters, with links to where subscribe to them
Podcasts, and links to their feeds
People I follow/recommend on social media
YouTube channels that I subscribe to

Similar to how you can have multiple things that people can follow you for, you decide on all the websites, content types, and platforms you want to recommend.

Going further

You can add an OPML export for your list of links. While technically the format works for displaying an outline of any kind of items, it's primarily used for people to import in their RSS reader to subscribe to all of the feeds you're following all at once. There’s even a way to customize its preview styling using XSLT, the same way you can customize your RSS feed.

A follow button for your site

2024-01-21T00:00:00Z

We’re all familiar with the Follow button used on social media platforms. They act as a way for people to get updates from you on their timeline. We should use the same concept on our sites, with a page dedicated to the options you have for your visitors to get your updates, like your RSS feed, email list, or the social media platforms that you're on.

Follow page

Having a Follow page allows laying out the ways someone can choose to get your updates in one central place instead of all over your site, like a link to your RSS feed on your blog pages, or your social media links in your footer.

It also declutters those other areas. No more social media icons taking up space in your footer, or trying to find a spot to squeeze in a form to fill out for your email newsletter sign up. A Follow page gives you the space to include all the details needed for each option. Including describing what your visitors can expect from each of the options you have available.

All the options

It’s also an opportunity to go all out with the things that people can follow you for. Do you have multiple RSS feeds that you break down for your posts? Do you manage a playlist of music you recommend that can be followed? Books that you’re reading? You can include them all without worrying about not having space to fit everything in.

Here’s my Follow page. And you can see the Follow button that links to it at the top of this article's page.

The art of hyperlinking

2024-01-14T00:00:00Z

Some great thoughts on linking etiquette: common ways links are shared and what to think about when sharing a link.

Promo/e-commerce email essentials

2024-01-11T00:00:00Z

;Read article

ChatGPT is a scam: a bad product, built unethically

2024-01-07T00:00:00Z

Since ChatGPT launched, it felt like some kind of magic technology. Like we were close to actual artificial intelligence, where we could talk to our computer the way we would another person and it would give us the answers to anything. But the more we use it, the more we are finding that it's not magic at all, it's barely a product we can use. With made-up results and ripped-off sources of information, it's a technology that was released too soon from the lab.

However, it goes beyond a poor product to being total lie, where its creators, OpenAI essentially cover up the extent of its flaws by building up AI hype and their role in it.

Hallucination is another word for bullshit

It starts with how the technology works, where its made known that there are so-called 'hallucinations' from the fact that the core of the technology is generating language which can include gibberish. But it does it so convincingly, that people keep being surprised by results that have been found to be completely fabricated.

And hallucinations appear to be part of the company's marketing as it presents itself as not just a tool, but a savior of humanity's future with AI. Experts believe we are years, if not decades, away from artificial general intelligence. Focusing on a nebulous future state seems like a great way to draw attention from where their product is today: a half-baked concept.

Too important to be questioned

This grandiose vision also covers up copyright infringement. OpenAI is currently being sued by the New York Times, and others, with more companies expected to join in. And their response seems to be that they know better. Because they are the selfless leaders that will get us through the scary road of our AI future, right?

I can understand wanting to push technology forward despite some flaws, and making the case for a shared range of knowledge to pull from. But OpenAI's flaws are harmful to how people use their tool. And their practices for sourcing their information is harmful to content ownership as they use their lawyers to twist the intent of copyright law. The company's CEO Sam Altman seems to follow the 'move fast and break things' motto, which in the case of ChatGPT, seems to equate to promising to build good AI in the future by building bad AI right now.

Reply by email

2024-01-03T00:00:00Z

An alternative method to having comments on your blog: a reply by email button to start a discussion via email.

The internet is about to get weird again

2023-12-30T00:00:00Z

The fallout of social media platforms is going to lead to a web reminiscent of the early days where people put up their own websites and blogs.

Sharing your code

2023-12-17T00:00:00Z

When presenting code on your site, like in an article like this one, you may want to break it apart into snippets to explain it. Here's a method for doing so, with color-coded styling and an option to copy code to the clipboard.

Formatting

Let’s start with how your code looks. Outputting code is typically done within the tag. Use the added

 tag around the  tag to allow for formatting of spaces used. When outputting HTML code, you’ll need to make sure to convert < and > to < and >.

  

Here's styling for using code within text:
code {
  display: inline-block;
  position: relative;
  top: -2px;
  margin-bottom: 2px;
  border-radius: 2px;
  max-width: 100%;
  background-color: #282828;
  padding: 2px 6px 0 6px;
  font-family: "Courier Prime", Courier New, Courier, Helvetica, Arial, serif;
  font-size: 18px;
  color: #eee;
  line-height: 1.2em;
  word-wrap: break-word;
}

And additional code for presenting it in a window.
pre {
  position: relative;
}
code.window {
  display: block;
  margin-bottom: 20px;
  border-radius: 5px;
  width: 100%;
  max-height: 210px;
  padding: 9px 15px 6px 15px;
  overflow-x: scroll;
}

If you want to color your code, the best approach to take is to use a Javascript library that will do it automatically. The one I use is Prism. It comes with predefined color options you can use, but allows modifying them via CSS so you can make it your own. This is the theme I use on this site:
.language-css {
  color: #ac80ff;
}
.token.cdata, .token.comment, .token.doctype, .token.prolog {
  color: #828282;
}
.token.punctuation {
  color: #eeeeee;
}
.token.namespace {
  opacity: .7;
}
.token.constant, .token.deleted, .token.symbol, .token.tag, .token.rule {
  color: #f43274;
}
.token.property {
  color: #59d9f1;
}
.token.boolean, .token.number {
  color: #ae81ff;
}
.token.attr-name, .token.builtin, .token.char, .token.inserted, .token.selector, .token.string {
  color: #a4e405;
}
.language-css .token.string, .style .token.string, .token.entity, .token.operator, .token.url, .token.variable {
  color: #eeeeee;
}
.token.atrule, .token.class-name, .token.function {
  color: #ac80ff;
}
.token.attr-value {
  color: #f5ee7f;
}
.token.css.value {
  color: #ac80ff;
}
.token.keyword {
  color: #f43274;
}
.token.important, .token.regex {
  color: #fd971f;
}


Copy code feature
If you want to add a button for readers to copy your code snippets, you can automate it using some Javascript. Here's a version of code by Rob O'Leary that I modified below that adds a copy code button to each code snippet:
let blocks = document.querySelectorAll("pre");

blocks.forEach(block => {
  let button = document.createElement("a");
  button.classList.add("codecopy");
  button.innerText = "Copy Code";
  block.appendChild(button);

  button.addEventListener("click", async () => {
    await copyCode(block, button);
  });
});

async function copyCode(block, button) {
  let code = block.querySelector('code');
  let text = code.innerText;

  await navigator.clipboard.writeText(text);
  button.innerText = "Copied!";

  setTimeout(() => {
    button.innerText = "Copy Code";
  }, 1000);
}

And the CSS below formats and places it in the corner of your code window:
.codecopy {
  position: absolute;
  right: 4px;
  top: -12px;
  border-radius: 3px;
  border: #282828 1px solid;
  background-color: #e2e2e2;
  padding: 2px 5px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.2em;
  text-decoration: none;
}
.codecopy:hover {
  cursor: pointer;
}

You can see how it all comes together here, on this page.

You can consider labeling each code snippet with the language of the code you're showing, if you feel it necessary.
Further, you can embed an iframe that previews how the code works. Using a widget like CodePen makes it easier to do this along with showing your code.
You can also offer downloading the code. Be sure to include a readme text or Markdown file to go with it. And there's GitHub for sharing the code via a repo.



Notification email essentials
2023-11-30T00:00:00Z
Before SMS and phone notifications, there were emails, and they are still the most effective way for your customers to get important, timely, notices.


The new CSS
2023-11-18T00:00:00Z
As CSS continues to evolve, designers are designing directly in CSS because of limitations with traditional design tools.


Subscription and payment email essentials
2023-11-15T00:00:00Z
;Read article


An RSS feed with a custom reading view
2023-11-12T00:00:00Z
A while ago, I decided to refactor my RSS feed code to using the newer Atom standard. An RSS feed is a good addition to having an email newsletter for getting your updates out. As I looked up the new code format, I also discovered a lesser-known browser feature for outputting RSS feeds in a human-readable format.

Atom RSS standard
Let’s start with looking at the Atom code. This is the header and meta info:



  distinctivequality.com:blog
  
  
  Distinctive Quality blog
  2023-09-24T03:29:39Z
...


The id element should be unique. To keep things simple, it can just be the URL to your articles' homepage. But in case that URL changes, you may want to use a different id format.

Here's an example entry for an article:

  distinctivequality.com:blog/rip-flash
  2017-08-28T00:00:00Z
  2017-08-28T00:00:00Z
  
  RIP Flash
  Recently, Adobe officially announced it is discontinuing support for its Flash browser plugin by 2020. You know, that thing you get bugged about updating. Or, perhaps you’ve already decided to stop installing it altogether.
  Flash has been dying a slow painful death ever since Steve Jobs wrote his infamous “Thoughts on Flash” letter in 2010 about why Apple decided not to include support for it on the iPhone and iPad. <Android soon followed suit. It’s too bad Adobe never figured out how to make it work.
  Flash has been around since the early days of the web. And since the web back then was pretty primitive, it’s capabilities really stood out and it quickly became something every website was using. During that time, I did quite a bit of client work in Flash. Even the website for my first business (over fifteen years old!) was made in Flash.
  But throughout the years, web technologies have evolved with better ways to do the things Flash used to only be able to do, like play video. And Flash began to lag behind. We also evolved in how we used the web and the flashiness of Flash’s animations and sound effects became tacky. We began using animation more purposely to enhance functionality and we decided sound effects were essentially unnecessary. The only thing Flash may still be good for is casual browser games. But even those are being replaced by casual mobile games as apps.
  For any interactive animation, it’s now typically coded using web standards HTML, CSS and Javascript or made with a tool like Hype which exports the code for you.
  It is the end of a web era. It’s a shame to lose so many great Flash creations of the past. Hopefully The Internet Archive can find a way to still view them after the plugin is gone from our computers.
  
    Ovi Demetrian Jr
    ovi@distinctivequality.com
  


The published element is actually not required, but the updated element is which can be used instead of published as well as for when any significant changes are made to an article. For the author element, you can optionally include a uri or an email element, or both.

And an entry example that is a link to an outside article:

  distinctivequality.com:blog/introducing-blocks-edit
  2017-10-02T00:00:00Z
  2017-10-02T00:00:00Z
  
  Introducing Blocks Edit, content management for email
  Blocks Edit is now live and ready for you to improve how you send out marketing campaigns.
  
    Ovi Demetrian Jr
    ovi@distinctivequality.com
  


Instead of the content element, there's a summary instead since there is no content provided for the entry.

For more details on each element along with additional optional elements you can include, take a look at the official W3C Atom doc

Custom RSS preview
By default, when clicking on an RSS feed link in a browser, it's either shown in it's raw XML code, or the browser will show an error prompt that it does not recognize the file format. However, there is an option to format the preview of an RSS feed using XSLT, which is a stylesheet for XML.



  
  
    
    
      
      
      <xsl:value-of select="/atom:feed/atom:title" /> RSS feed
      
    
    
      
         RSS feed
        Copy this URL into your preferred RSS reader:

          https://distinctivequality.com/blog/feed/
        
      
      
        
        
          
          Published 


        
        
      
    
  



The header area defines the code as an RSS feed stylesheet and template. It then turns into what seems like standard HTML. The main difference is that closing an element that's self-contained requires using />. You can even add custom content and use