alan
LightNews LightNews
banner
alanwsmith.com
alan
@alanwsmith.com
860 followers 790 following 1K posts
my current thing is bitty. a free, open-source web component for making pages interactive without a framework: https://bitty.alanwsmith.com/
Posts Replies Media Videos
alanwsmith.com
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"
October 26, 2025 at 4:18 AM
alanwsmith.com
ah yes, there you are, SVG viewBox. I was wondering where my ol' archnemesis has been
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)
October 24, 2025 at 3:29 AM
alanwsmith.com
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
October 23, 2025 at 3:02 AM
alanwsmith.com
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.
October 23, 2025 at 12:20 AM
alanwsmith.com
(testing using SVGs as image uploads)
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.
October 23, 2025 at 12:05 AM
alanwsmith.com
I've been browsing The Met's open access collection of free art work. Picked "Illustrated Legends of the Kitano Tenjin Shrine" for my new terminal background. More details on the image here: www.metmuseum.org/art/collecti...
A computer terminal with a dim, black and white version of Illustrated Legends of the Kitano Tenjin Shrine in the background.
October 12, 2025 at 9:35 PM
alanwsmith.com
one of these days, my keyboard layout is gonna be perfect
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"
September 18, 2025 at 3:07 PM
alanwsmith.com
Movie you’ve watched more than six times with a gif. “Hard mode” no Star Wars, Star Trek, Lord of the Rings, or Marvel.
June 27, 2025 at 3:48 AM
alanwsmith.com
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.
June 21, 2025 at 4:29 PM
alanwsmith.com
been working on error messages for bitty (my reactive web component). Making them the best they can be is an explicit part of the project. Here's the current iteration

Adding the messages more than doubled the number of lines of code (from about ~130 to ~410). I'm more than happy to make that trade
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>
June 5, 2025 at 7:39 PM
alanwsmith.com
Still working on a tagline. This ain't a bad start
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
June 4, 2025 at 1:09 PM
alanwsmith.com
Further refinement to the color picker

I cut out the high-contrast modes. I'll have them as a customization, but browsers only have light/dark preferences right now. So, I'm going with that by default.
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.
May 23, 2025 at 11:44 PM
alanwsmith.com
a linter, but every time you open a file the whitespace is increased by one
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.
May 22, 2025 at 11:03 PM
alanwsmith.com
color picker is almost done. just gotta filter the output and add a copy button. (probably some spell checking too)
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.
May 20, 2025 at 2:13 AM
alanwsmith.com
I _think_ I've finalized the design for my color picker.

Working today on outputting the CSS to copy/paste into a site. That'll wrap up the first version.
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.
May 17, 2025 at 4:58 PM
alanwsmith.com
Dear New Programmers,

I've been slinging code for 30 years. I still do stuff like this

~~~~~~

Spoiler: This is JavaScript where three equal signs compares things. A single equal sign, attempts to assign one thing to the other. When you're trying to compare things, this is not helpful
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
May 16, 2025 at 1:59 PM
alanwsmith.com
making progress my color picker design

goal is to remove as much as possible for the initial experience

next step is to collapse the individual pickers under tabs (without that you end up having to scroll up and down too much which can make it hard to see the what you're changing)
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".
May 16, 2025 at 12:36 AM
alanwsmith.com
I saw the note from @pjpscriv.com about this being part of an overall test for comments. Based on the -75 vote count, it seems I'm not the only one who dislikes it

source: meta.stackoverflow.com/q/433817/102...
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
May 15, 2025 at 11:14 PM
alanwsmith.com
my quest to make a point and click color picker continues. still work to do, but it's shaping up nicely
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)
May 12, 2025 at 6:47 PM
alanwsmith.com
The urge to make these numbers match, even for just a moment, is strong
A screenshot of my profile's header which shows: 794 followers, 730 following, 758 posts.
May 1, 2025 at 2:40 PM
alanwsmith.com
I was going to write a quick python script. Unfortunately, my formatter is drunk.
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.
April 29, 2025 at 8:26 PM
alanwsmith.com
oh god.

I hit some weird hotkey and my terminal went to light mode.

It fine for now. The window's open and it's daylight outside. It's gonna be a problem come night though.
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.
April 29, 2025 at 7:20 PM
alanwsmith.com
Brain decided to riff on Clarke's Third Law

#showerthoughts
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.
April 23, 2025 at 2:57 PM
alanwsmith.com
Just started a new post. It's possible I'm manic, but mentally, I'm here.
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"
April 10, 2025 at 11:50 AM
alanwsmith.com
hard pass
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.
February 5, 2025 at 6:46 PM