alan

@alanwsmith.com

911 Followers 879 Following

non-stop music in the headphones. gonna get my camera back out one of these days. working on bitty (a little front-end framework for the web) in the mean time - https://bittyjs.com/

A black and white treatment of a Reuters photo focusing on a young black woman sitting in a D.C. Metro car. She's sitting by herself. The other passengers and men wearing white masks that cover the lower portion of their faces, sunglasses to cover their eyes and hats covering their heads with the flag logo from the white-supremacist group Patriot Front.
A photo looking down at a half dozen books on the shelf of a black book cart. The middle book is titled "DOOM".
A photo of a smooth, dark rock that's about the side of a grapefruit with googly eyes on it. It's resting in sandy dirt overlooking a canyon in the background. There's text above the rock that says 'There are no rules!'
A black and white photo of a tree in a cemetery. The tree is in the foreground. It's bare of leaves. The ground slopes down gently behind it to the left with visible tombstones. The truck of the tree grew in such a way that a tombstone is slightly embedded it it.
The Geordi La Forge meme where he's holding his hand up in a 'hold on there a minute' gesture with the words 'seize the means of production' beside him. In the lower half, he's pointing in a now you've got it gesture at the words 'seize the means of distribution'
the Netlify new site page interface with a "Build with an AI agent" box in the middle
A report from fast.com showing a download speed of 900Mbps and an upload speed of 1.6Mbps
A note card (that's actually an SVG iamge) that has written on it "Holy. Shit. The Concepts app has 3x5 note cards built-in" and then a little box in the upper right corner that says "game on"
A web page title SVG Scrubber. There's some text explaining it's a tool I use to prep SVG images for use on my site. The main part of the page has a hand draw box around the words "For Example, This One!" There's a blue box behind it that only covers about two thirds of the hand draw box (which is where the problem is)
A hand written note that reads: "Part of the reason I'm wary of AI/LLM coding tools is that I've done this long enough to have seen a thousand examples of little snippets of code that look fine at first glance and then explode into a ball of fire when they hit and exception case." on the right side and then "Code go Boom" in a larger text on the right side
hand written note that says: Yeah. I really want a tap interface for strudel so I can tool around with it on the iPad at the beach.
hand written text that says: Yeah. I really want a tap interface for strudle so I can tool around with it on the iPad at the beach.
A computer terminal with a dim, black and white version of Illustrated Legends of the Kitano Tenjin Shrine in the background.
A image with the headline "Mac Layout 3.0.152". The text under it says "Moonlander - You created this layout 5 years ago". Beside that is a big orange number that says "274 revisions"
A clip from the movie Tron where the titular character (who's in an outfit with vibrant blue lines reminiscent of circuitry) throws a disk at an enemy (who's in similar attire but with red highlights) that disintegrates them on impact.
a black and white photo of a small, hand carved elephant. The elephant is on a shelf with wood panels behind it. The photo was taken from slightly below. The elephant is facing to the left of it's image with it's trunk raised. The carvings add details to the ears and making it look like there's a blanket with flowers on it hanging over its back.
A view of an error message from a browser developer console. The text is below (fair warning that it's long). The text itself is followed by two messages showing the related elements. Here's the text (lines of hashtags have been removed to save space): A BITTY ERROR OCCURRED FINDING THE ERROR (message clipped to save alt text space) ELEMENT OUTPUTS Dumps of the <bitty-js></bitty-js> element and the element passed to the error function are in follow up console messages below. ERROR ID: 2 A <bitty-js></bitty-js> element is missing its 'data-bridge' attribute COMPONENT UUID The 'data-uuid' attribute of the <bitty-js></bitty-js> element associated with this error is: c0a3b9c2 NOTE: 'data-uuid' attributes are added dynamically. They should be visible in the 'Elements' view in your browser's developer console. ERROR ELEMENT DETAILS The element with the error is a BITTY-JS tag with a 'data-uuid' attribute of: c0a3b9c2 DESCRIPTION Every <bitty-js></bitty-js> element requires a 'data-bridge' attribute that connects it to a '.js' file that powers its functionality. The 'data-bridge' attribute is missing from the <bitty-js></bitty-js> element with the 'data-uuid' attribute: c0a3b9c2 RECOMMENDATION Add a 'data-bridge' attribute to the <bitty-js></bitty-js> tag with the path to its supporting '.js' module file. For example: <bitty-js data-bridge="./path/to/module.js"></bitty-js>
Light blue text on a light red (but not yet pink) background. Large text at the top says "bitty.js". Smaller text below it is split into three lines that say: small component, big reactivity, and vanilla js
A web page titled "Alan's Color Picker" in orange text on a dark blue background. There's a TD;DR section below it in light blue text explaining the steps to use the picker. The right side has three boxes: Mode, Background, and Colors. The Mode box has to options: Light and Dark. The Background has three sliders labeled l, c, and h. Below them is a checkbox labeled Isolate. The Colors back has four color tabs labeled c, l, h, and a. Below the tabs is a six by eight grid of the word set in different colors. The get light as the go from left to right and the color hue shift going down each row. Below the grid is a single slider labeled c. An Isolate checkbox is below it.
A screenshot of some JavaScript source code. There are line numbers on the left and then somewhere around ten spaces before the first line of text. The second line has the same number added again. The pattern continues back and forth as the lines of code progress. Some of the lines are almost half way across the screen.
A screenshot of my color picker. It has content on the left and a set of colorful controls on the right to adjust the way the content look.
A page titled "Alan's (prototype) Color Picker". It's has a middle blue background with a light goldish title an light blue text. The main content is the left two thirds of the page. Subheadings are a little more towards purple with pinkish underlines. The text includes a note saying I need to write more about it, some basic instructions, and a section called Random Filler Content which contains just that. The right third of the page has controls for picking colors. It starts with four buttons at the top for Light, High-Contrast Light, Dark, and High-Contrast Dark modes. Below that is a box labeled "Background" that has three sliders labeled "l", "c", and "h" in it (which stand for lightness, chroma, and hue) as well as an checkbox labeled "isolate". Below that is a box labeled "Colors", It's the main picker where you can select from a top set of tabs labeled "t", "l", "h", "s", and "a". The "t" is selected and shows the word "text" under it highlighted in the same light blue that makes up the text of the page. Underneath the "text" label is a six wide by eight tall grid with each cell consisting of the word "set". Each "set" has it's own color. From the top down, they hues shift across the color circle. From left to right, the colors start darker and get lighter. Below the set grid is a "c" slider (again for chroma), and an "isolate" checkbox.
A snippet of code showing a JavaScript 'if' statement with two checks in it. The first uses three equal signs. The second uses only one
A screenshot of my color picker. It's title Alan's (prototype) Color Picker. The background is light blue, the headline is middle brown. Secondary headlines are pickish. The main body text is a dark blue. The sidebar on the right has buttons for switching between "Light", "High-Contrast Light", "Dark", and "High-Contrast Dark" modes. There are three sliders labeled "l", "c", and "h" below them (which stands for lightness, chroma, and hue). Below that is a "Colors" section the consists of 6 by 8 groups of the word "set" in various colors. The first group has the word "text" over it. The second says "headline".
A screenshot of a Stack Overflow Meta page talking about the experiment. It's title Update May 15th, 2025 and shows a negative 75 vote count. The full page is here if you'd like to read it: https://meta.stackoverflow.com/q/433817/102401
A screenshot of a color picker with a blue/teal background. There are three sliders at the top labeled 'Background: Light Dark'. Dark is underlined. Below that on the left is a Yellow headline with the words "Welcome to Alan's Color Picker". There's some test text in an almost white font below it with a tinge of blue. The right two thirds of the page has three rows of color selectors. Each selector consists of 6 groups of colors gathered by hue. The selectors are labeled "primary", "secondary", and "accent". There are highlights around the color groups showing which colors are picked (which correspond to the colors of the text)
A screenshot of my profile's header which shows: 794 followers, 730 following, 758 posts.
A screenshot of some python code in an editor. There are a few lines at the top that are flush left with the line numbers on the site. A few lines below are two more lines of code that are tabbed over about a third of the way across the screen. Python is a language that uses empty space as part of the way it works. The two lines being shifted in the way they are means this code won't run.
A screenshot of my monitor. The left third has a web browser showing the preview of a post I'm working on about how long it takes me to write. The other two thirds of the screen are taken up with my text editor. It has the raw text of the post with a few smaller windows open to various process that build the site. All of it is black text on a white background.
An Aqua Notes notepad on which is written - Any sufficiently distributed technology is indistinguishable from nature. There are a few water droplets on from where I just got out of the shower.
A screenshot of a text editor. The document is titled "Website Manifesto". The text is: It's time for a revolution. Not of politics, but ownership, agency, and privacy. There's some metadata at the bottom that includes today's date and identifies the status of the document as "scratch"
A screenshot of a pop-up message in the Spotify app that say: "Missing Account Information - We are missing account information for your Spotify account. Please provide your full address including zip code within your account page." There are also two visible playlists for "Liked Songs" and "A.W.S. Single Songs To Loop" at the bottom.
a sceenshot of my desktop that's almost completely filled with "Screenshot" files. The main are is 12 columns by 14 rows
A black and white shot of an little metal elephant figurine. The elephant is a 2-3 inches tall but the fills the entire frame. It's on a shelf so the image was taken from below. You can see the wood behind it too from the shelving. There's a decorative patter that looks like a blanket thrown over the elephants body. The head and ears both have decorative lines on them. The right front foot is forward of the left and the back is bent down a little to raise its head. It's trunk is up as if the elephant is trumpeting.
a copy of The Communist Manifesto setting on the magazine rack at a book store surrounded by tech magazines
A black and gray Logitech MX mouse sitting on a wooden surface. The mouse is pointing towards the lower left corner of the frame. There's a hole in the thumb-rest where the plastic has been worn through.
Bender from Futurama photoshopped onto a photo of a mechanical bull. Bender is holding a beer in his left hand and a cigar in his right. He's blowing a puff of smoke. The mechanical bull is black and white with red lights for eyes. It's on a red padded surface. The background has been removed an replaced with a gradient going from a lighter shade of blue to a darker one. The image of bender is from: cocodoo.deviantart.com The image of the bull is from usamechanicalbulls.com
A screenshot of an ALT text entry window showing a GIF of Sadness from Pixar's Inside Out with two text fields below it. The first one is labeled "Original ALT Text" and contains: "A blue cartoon character with glasses and a scarf" Below that is another field labeled "My ALT Text" that contains: The character Sadness from Pixar's Inside Out. Her skin and hair are blue and she's wearing a white sweater. She's wiping her head with her left hand and going "whew" with a sense or relief.
Photo of a skull taped to what is clearly a photography lighting stand (called a "c stand") that's coming in from off the right side of the image to hold the skull above my keyboard (which is a split keyboard called a moonlander that looks kinda sci-fi). The keyboard and skull are sitting on a cherry stained wood desktop. They are in front of a monitor which is showing an image of a skull with a spine laying on a keyboard in the same manner I'm mimicking with my setup.
Photo of a plastic skull held above the keyboard in front of a monitor. On the monitor is a bluesky post with someone saying "Those big account mufos will follow me back eventually..." with a photo of a skeleton laying on a keyboard in front of a monitor. Above that is post from Kim Hu saying "I mean if you like like that... yeah."
A semi-close-up photo of a sheet of bubble wrap with the smaller size bubbles. You can see maybe 15 or so bubbles high. The thumb and pointer finger that are holding the bubble wrap are visible in the upper left of the image. The texture of the bubbles is made sharper by the window light that's illuminating it from the right side and a warm light source below the lower half.
Margo Robbie as Barbie. Looking down a little in a pause thinking about something then pointing fingers out and lighting up with an idea
Prince and two dancers in the Sexy M.F. video shaking their butts at the camera in front of a yellow bmw
Prince, shirtless, in his Sexy M.F. video. He's in front of a bright yellow BMW and walks towards the camera licking his fingers then tapping the camera lens.
Price in the video Sexy M.F. looking directly at the camera with shades on. He pulls the shades down a bit and looks over the top of them with a bit of a knowing look
The cover of Morphine's album Like Swimming. It's shot underwater with an overall blue coloring. There are two blurry hands just at the bottom of the image like they are sinking with a column of air bubbles raising to the surface between them. The word "Morphine" is in call caps at the top left in white with "Like Swimming" to its left in blue lettering
A screen recording of a prototype auto typing app. There are three windows on the screen. The left site has an empty VS Code window at the top and the auto typer app at the bottom (which has buttons for a few apps and one labeled 'Run'). The right side of the screen is taken up with an X Code window that has the 'script' that will be output. It contains lines that start with things like 'write' followed by the text to write. When the video plays the mouse cursor clicks the 'Code' button in the auto typer app, then run. A dialog opens and a 'vscode-test-script.txt' file is selected. When it is, typing starts in the VS Code window that outputs the contents of the script shown in X Code.
This clip starts by looking at a Bluesky profile page. The mouse moves over and clicks the "Settings" button. When that screen loads the mouse clicks the "Accessibility" link. When that page opens the mouse clicks the "Require alt text before posting" toggle to turn it on.
This clip starts by looking at a Bluesky profile page. The mouse moves over and clicks the "Settings" button. When that screen loads the mouse clicks the "Accessibility" link. When that page opens the mouse clicks the "Require alt text before posting" toggle to turn it on.
A Texas Instruments TI-99/4A computer. The photo is taken from straight on and looking slight down on the machine. It's a few inches tall with a brushed steel looking case. Black keys dominate the left site. A black slot that accepts a cartridge is on the right.
Jason Momoa as Duncan Idaho in Dune Part 1. It's a relative tight, side-view of Duncan that starts out with him down. He hears something and turns his head towards us looking toward the sound in an alert way
Duncan Idaho from Dune walking forward in a menacing way taking off a glove finger by finger
Keanu Reeves in Johnny Mnemonic sitting at a desk with a silver visor covering his eyes. He starts out with his hands flag on the desk in front of him wearing sci-fi looking gloves. He then rises his hands and moves them as he manipulates objects that we can't see, but that are in cyberspace
Keanu Reeves as Jonny Mnemonic from the film of the same name. The scene starts with a tight crop of his hands as he's putting on sci-fi looking gloves. It pans up to show his face where he pulls down a gray, wrap-around visor that covers his eyes.
A tight crop of Keanu Reeves as Johnny Mnemonic starting out looking down and then looking up with a kind of "I just had an idea" look
Keanu Reeves as Jonny Mnemonic shoving a bunch of junk off a desk. Shot from an angle level with the desk from the side looking back at Reeves
Dave from 2001 considering his options for what to do when Hal 9000 won't let him back in the ship
A video showing how to turn on the require alt text option by click on Settings - Accessibility - Require alt text before posting from a profile page
Photo of a 3x5 note card. Written on the card is "notable replies in bluesky history - This one - end of list" then a little smiley face followed by my name "alan". The photo was taking looking straight down on the card with a little bit of the wooden desk it's laying on bordering it.