meta – tabitha.computer

Colophon

Built with WordPress.
Typeset in a system-UI stack.

dotComputer

1780306993

Software	WordPress
Foundation	Community Theme
Environment	Windows / macOS
Typography	System UI Stack

dotComputer is a desktop environment for interface experiments and user-flow analysis.

✉ periodic newsletter

← Back

Your email is saved.

Pixel-Accurate Dithering

Sunday, May 31, 2026
I’ve seen dithering everywhere for a while now, I quite like the look and have used p5.Riso.js to make a webcam effect before.

Looking around, I found a client-side atkinson dithering script with an option to adjust the crunchy-ness of an image and maintain pixel ratio.

Following Chris Coyier breakdown on CodePen of Andrew Stephens web component dithering…

I fashioned a WordPress friendly method that converts an image block into a <as-dithered-image> web-component while still maintaining the <figure> wrapper to allow for captions and other block styling within Gutenberg.

Using pattern blocks, I can include the dithering script when needed and adjust images using .dither to enable the effect.

With no direct access to the web component from the editor, options are handled by classes for .crunch-("pixel", or a range from 1-4) which adjusts pixel size AND/OR .cutoff-(0-100) to adjust asset brightness into a float between 0 and 1.
```
.cutoff-0
```
```
default
```
```
.cutoff-100
```
<as-dithered-image> defaults are .crunch-auto and .cutoff-0.5, follow the usage and attributes for detailed specifics.

I modified the original script to handle transparency out of the box. So if an image has transparency, it will render as seen rather than defining color values. The modification works by ignoring pixel color values with alpha channel 0 (transparent) from being output as black, the default color.

It’s not perfect, as <canvas> elements with relative sizing can causes weird behavior, especially when maintaining absolute pixel-ratios for dithering. In the future I want to add the ability to maintain an images original color sampling (left) and perhaps, color filters, like sepia and adjust hue/saturation, would be fun to explore.

Feel free to view page source to inspect the dithering script this site uses. You can also view the dithered image, from the weblog, that inspired the addition of this feature.

Now, for fun, let’s crunch!
```
.crunch-1
```
```
.crunch-4
```
There is one important-major drawback to mention, the dithered items (because they aren’t images but rather canvas) will not appear if a visitor uses a reader. The <canvas> elements do not render. However, the original images appear as they would in the editor, in the RSS feed, and are delivered in their original un-dither-styled format. So, I would only use the dithering effect solely for aesthetic purposes.

Added, max crunching (4) results in an unappealing border in some browsers.
input field zoom paradox

Sunday, March 8, 2026
I believe this how the web “just” works when handling input fields: So, here’s the deal when I clicked a form input field my iPhone (in Safari) would zoom in on the page. It was driving me insane. Not sure where I stumbled on the “fix” or if I can even call it that, but any font size smaller than 16px on form inputs will cause the browser to zoom in.
- form fields need to be at least 16px to prevent the [annoying] page-zoom effect
install the plugin

Friday, January 9, 2026
I don’t want to create tech-debt. In the same vain, installing one plugin to do one thing that building out infrastructure for this instance is a time sink.

After spending a few hours writing PHP to add a previous post into a another post; I wanted to add a front-end component to allow easier selection of desired posts. However, through the block editor and trying to inject modules. It kept failing. I had to call it, and install the plugin
- added Query Post Selector

Colophon, Full Notes

Before WordPress, I experimented with Cargo. I also circled around other options like Astro, static site builders like Jekyll, but each leaned more towards setup and deployments. Or a reliance on automated actions to simplify the publishing process, and if faced with downtime it would strip time away from designing and writing.

After years of saying “NO” to WordPress from listening to naysayers about stability. I gave it a real chance. So far, it’s iterative and adaptable, almost limitless with a the right approach.

Apple notes drawing of a ball rolling down stairs.

Jump to philosophy ─ technology ─ design ─ workflow ─ typography ─ acknowledgments

Philosophy

From space and back NASA runs on WordPress, an open source web content management system. This website is my contribution to tradition by using the WordPress community theme, which is free for you and me. It is a freedom to publish independently with ease.

While in early phases, I defined that this site will not be overengineered in the backend nor did I want a software license cost or subscription dangling overhead. It is supposed to be fun! People I look up to, like Daniel Reetz, who engineered the book scanners used today globally, and Dave McKean, an artist who inspires me to think outside the box; Both have had long-standing unchanged WordPress websites for over a decade, that still function!

Technology

The current site runs on an auto-updating stable release of WordPress with the out-of-the-box yearly community theme. [It looks like there is no theme release for 2026, since WordPress is focusing efforts on AI.]

I use plugins sparingly, and usually for one-off tasks before being deactivated (e.g., creating a child theme.. i know a bit lazy). My aim is long-term stability without a mess of outdated/unsupported add-ons, keeping only utility plugins that support the vision I have in mind.

For the interface, PHP with plain HTML/CSS, enhanced with vanilla JavaScript. The draggable desktop framework is Frankenstein-ed together over months of refinement, written on VS Code and WebStorm, between Windows and MacOS. On hosting, I only ever mention which options to stay away from but if you must know, a quick search will have you in the know.

Design Process

The design is content focused, CSS forward. My approach was lots of people are familiar with navigating around computers. The frames, like this Colophon notes-like pad, are built using the out-of-the-box blocks with classes added to customize the look and feel. You can test out the WordPress editor Gutenberg for yourself.

I did my best to emphasize my strongest trait: curiosity, as a focal point of the user experience, with randomized elements, whimsy discovery, and some nostalgic early 2000s from my childhood, like participating in:

Webrings & Alike

←

An IndieWeb Webring 🕸💍

→

Listed @ Web Desktops as dotComputer

Writing & Workflow

Some writings are backdated as they were published elsewhere first, but most entries come from notes, Obsidian, or long-standing drafts. I perform copy updates in the WordPress editor and are able to edit on a my phone even if it’s a pain at times. I am happy, as long as I can write in markdown.

Typography

Typeset is a system-UI stack that fallbacks to the next available font option:

-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons.

I didn’t want to choose just one. The browser picks something sensible based on the users device, and that’s good enough to me.

Acknowledgments

Are.na deserves mention, the explore section highlighted creative tools and ideals, I would not have stumbled onto through my typical browsing habits. Such influences impact how I continue to interact with the world, ad infinitum.

Pictograms sourced from emojipedia, old windows icons, Windows 98 Icon Viewer, the icon browser, and macOS icon are directly from system files and/or this OS X Yosemite Pack.