newsonaut
Turning inner space into outer space
Monday, August 3, 2026
Introducing, Font Lonesome
On the one hand, there are plenty of HTML entities that can be used as icons on your blog. On the other hand, just try finding them!
I wrote about this recently when I pointed out that there is indeed unicode for the magnifying glass commonly used for search. It’s just not called that.
There are others like that. For example, a bulleted list icon that could be used to represent categories does exist, but it’s the mathematical symbol for colon equals. Another example would the hamburger menu. It’s there, too, but you need to know it’s the I Ching trigram for heaven.
So anyway, I rounded up a bunch of them and made a mini site called Font Lonesome. So called because you can use them all by their lonesome without a third-party service.
I use HTML entities exclusively for icons on Newsonaut, and so far it has worked well for me. It’s also kind of a fun challenge.
Over at thriftmac, though, I need a variety of icons to represent the app categories. For that, I turn to Font Awesome, which has a good selection of free icons.
Edit: I had to make a few changes after discovering some of them render as emojis in Safari. D'oh!
More posts in the Coding category
Sunday, July 26, 2026
A website from over 20 years ago is preserved in a folder of text files
While looking for something else, I came across a folder on my Mac called “free for X”. In it were a bunch of plain text HTML files which together made up a Mac freeware website that was the predecessor to thriftmac.
So I uploaded it to a server, opened the home page and sure enough there it was — an entire website from over 20 years ago still fully functional. The links to outside websites mostly don’t work, but that’s on them.
So, yes, proof that plain text not tied to an app does stand the test of time. This is especially true if you keep the files safe and sound on your own computer.
Looking back on it, the main thing I would have done differently today would be to use server-side includes for the head section and the navigation. On the other hand, I was using BBEdit, which has multi-file search and replace, so I might have been content with that method.
I don’t think I knew about Emmet back then, but it definitely would have come in handy for marking up lists and paragraphs.
I notice that I also availed myself of a third-party service for search. All I had to do was sign up and paste in the provided script. Somehow this survivor from a bygone era — Free Find — is still in business.
This points to a big advantage of hand coding — lots of flexibility. I used an editor called FeedMe to create my own XML for an RSS feed.
What we now know as static site generators didn’t exist back then. If the site had grown much larger with lots of linking, an SSG might have been helpful. For a site this size, though, it would have been overkill.
Markdown would have been fairly new at the time, although similar systems have existed since the early ’90s. I’m pretty sure my attitude then, as now, would have been that I don’t need it.
The HTML, as you can see by clicking on the badge in the sidebar, validates with only two errors. The images don’t have an alt. I’m not sure why I didn’t put them in, considering they would have been required even in those days. It seems to have taken me a while to come around to the idea that they are indeed useful.
The button for the validator contains the site’s former URL, which was free space provided by Shaw, my internet service provider at the time. I didn’t have to pay anything extra to have my own website — a big incentive for me to get started on learning to code for the web.
The CSS for the site shows some interesting choices. To create a two-column layout, I made the left div 67% wide and floated it to the left. The leftover space was the right column. For desktop this was fine. I didn’t worry about phones back then.
The navigation is a bulleted list with the bullets removed and replaced by a 1 em border on the left, highlighted as yellow if it is the active page.
At the bottom of the style sheet is a class called “greek”. I can’t find any reference to it in the HTML, and so it will forever remain a mystery.
More posts in the Coding category
Sunday, July 19, 2026
Markdown makes learning HTML less scary
#julyreply
A post by Adam Newbold about how to ensure your website is portable had me thinking about how I sometimes do exactly what he advocates — upload HTML files to a server.
Hardcore IndieWeb: Run your own website 100% independently for only $0.01/day
The idea is that you always have a copy of the site on your computer. So if the host shuts down for some reason, you can upload it to to a different server.
I do this for a website I created for the local tai chi club that consists of only six pages. Why add the complexity of a platform just for that?
But here’s the thing. You have to learn HTML. Adam insists that it’s easy, but I know a lot of people are going to nope right out at the thought of any kind of coding.
For those people, I suggest markdown. This is a system of marking up text for the web that hides the code. Instead, you use asterisks, hash marks, dashes and underscores.
If you want a bulleted list, for example, you put a dash in front of each item.
You don’t even have to remember that much, because it’s all covered in the apps under their Format menu.
A good app start with on the Mac is called MacDown, which is totally free. A new document gives you markdown on the left and formatted text on the right.
(Sorry, I don’t know of a free split-screen equivalent for Windows or Linux. Send me email if you have a suggestion.)
When you have your page looking the way you want, go to File > Export > HTML... And be sure to uncheck the box for Include styles. You want plain HTML. When you’ve learned CSS, you can add your own styles.
Once you have the export done, you can upload it to the server. If it’s the main or home page, make sure to change the file name to index.html.
Yes, that’s all it takes to have your own web page.
Still, you should at least gradually learn HTML. Take a look at the exported file and see if you can figure out how the tags work. The paragraphs, for example, all have <p> tags. There — you’ve learned your first HTML.
More posts in the Coding category
Friday, June 19, 2026
My 11ty experiment has turned into a time travel story
I took another stab at creating an 11ty site, and this time succeeded. Not only that, but I’ve decided to grow the Neocities blog I made into a work of fiction complete with story and character arc.
There are many 11ty tutorials, but the one that caught my eye was this one from Flamed Fury:
Create A Static Site Using 11ty & Deploy to Neocities (2026 Refresh)
Along with some help from Claude and a few other tutorials, I got the site up and running on Neocities. It’s pretty close to the way I want it, but there will likely be more tinkering. The design, for example, is still not far off from the one in the tutorial.
Would I recommend 11ty? If you’re into coding and don’t mind a challenge, I would say it’s worth a look. I think WordPress gave databases a bad reputation in terms of security, so the flat file system in static site generators has been gaining popularity. On the other hand, PHP/MySQL alternatives to WordPress do exist. I’ve been using Textpattern for 20 years without any problems.
Anyway, the fun part is the site I created — Misfit Gentleman. It started as a way to put in some filler content, but the more I did it, the more I became attached to the character I had created. I wanted to give him a background.
Soon I realized that he had a problem. And a character with a problem creates tension that needs to be resolved through the telling of a story.
His problem is that he has travelled 200 years into his future and our present. And he would like to go back, but doesn’t know how.
This will be chronicled through blog posts, but there will also be updates to other pages — home, about, links and contact — as he learns more.
My goal is to wrap this up by the end of the year. After that, Misfit Gentleman can stand alone as a story, sort of like a book on a shelf.
More posts in the Coding category
Sunday, May 24, 2026
It’s Boop vs. the bots
It used to be when you wanted to send an email to Newsonaut, you’d go through gmail.com. I recently switched to a newsonaut.com address, but it didn't take long for bots to scrape it and start spamming me.
My solution was to convert all the characters in the address to HTML entities. These are bits of code that are meant to help browsers decipher special characters such as a copyright symbol, but are available for every letter in the alphabet.
The idea is that bots won't bother with deciphering them and will move on to greener pastures.
There are plenty of online services that do conversions for free, but you have to wonder what they’re getting out of it. Maybe it’s ad revenue or maybe they’re hoping someone will be foolish enough to input their email address.
The solution is a free app called Boop. Download it to your Mac, and you have the ability to do a plethora of text conversions. Plus, with JavaScript, you can create your own. In this case, I chose “HTML encode all characters”. That’s as opposed to the more usual case where you only want to encode special characters.
Anyway, here’s hoping HTML entities keep those pesky bots off my lawn.
More posts in the Coding category
Monday, May 19, 2025
Thanks to an old tutorial, I finally made a WordPress site from scratch
Back in the day — we’re talking about 20 years ago — when I was exploring CMS’s, the obvious choice, then as now, was WordPress.
That wasn’t the choice I made, though, because I couldn’t figure out how to create a WordPress site from scratch. The common advice, even from a book I bought, was to install a theme and tweak it. Making your own design was apparently too difficult.
I never really gave up, though, which is why I bookmarked a blog post, also many years ago, with this promising title: Developing a Wordpress Theme from Scratch. It’s written by Tania Rascia, who has a digital garden well worth exploring.
Every once in a while I would see that bookmark and think about reading the article, but never had the time or incentive. Until now.
With working life behind me, I have time. And with the possibility of one of my old WordPress sites being revived, I have incentive. The site was using a tweaked third-party theme that I was never really happy with. I need to have complete control over a design.
Tania’s tutorial works by starting you off with a what she calls a template. But this could be pretty much any HTML-and-CSS design you can dream up. You take this design and chop it up into all the PHP pages that make WordPress what it is.
For me it made sense, and I was able to get the site looking exactly the way I wanted, with no compromises. I even made my own plug-in.
More posts in the Coding category
Monday, March 17, 2025
Look, Mom, a modal with no JavaScript
I found a way to do modals with HTML only — no JavaScript, thanks to some dude in Australia.
So now, if you tap on the About button, you get a nice modal instead of zipping down to the footer.
The method involves the <dialog> tag and the popover API, but I’ll let Harrison explain it.
More posts in the Coding category
Thursday, January 9, 2025
The best punch cards are the ones you don't have to punch
TLDR: I made virtual punch cards!
Back in the day at the tai chi club, we used punch cards to keep track of how many classes people attended. After 10 punches, you had to pay for 10 more classes.
Then they put me in charge.
I didn’t want to be rooting around a box of cards at the beginning of every class as I tried to keep track of who had shown up that day. My solution was virtual punch cards on a web page — designed to look old-timey with CSS and using names and numbers fed to it by JavaScript.
But that meant the unpleasant prospect of updating JavaScript after every class, so those cards sat idle for many months. Meanwhile, I looked for a way of keeping track of people taking classes that didn’t involve real punch cards.
My natural inclination was to turn to technology — maybe a spreadsheet or some kind of app. I went through a lot of ideas that were way more complicated than they needed to be. Then I learned about tally apps.
Tally ho
Do a search on “tally” in the App Store, and you will find yourself swimming in suggestions. A tally app basically just counts things for you, so of course it’s easy to develop, and there is a plethora of them.
Still, counting was really all I needed to do. Each person attending a tai chi class is a tally in a list of tallies. If they show up, I tap the plus button beside their name, and thus update the number of classes they have attended.
After trying several tally apps, I settled on one called Tally, by Agile Tortoise, that rises above the rest. It does that with support for Shortcuts.
The Shortcuts app, which comes free with Apple devices, allows you to put together a series of actions which can be invoked with the press of a button.
Jason, meet JSON
The shortcut I made uses one of the Tally app’s own actions to get the tai chi club’s list of tallies. Other actions convert this into a JSON file and save it to iCloud Drive. This is a handy spot for a file because I can easily access it with my Mac.
It needs to formatted as JSON, so I can upload it to our website’s server where JavaScript uses it to spit out virtual punch cards with the correct names and numbers. Yes, it really is just a bunch of names and numbers, but I wanted these names and numbers to be displayed in a way that feels familiar. And punch cards are familiar.
I did this with the magic of JavaScript, but there was still one piece missing. I didn’t want to have to upload the JSON file after every class. It would be more work, and what if I forgot?
The solution was more automation.
I needed a way to take the JSON file from iCloud Drive and upload it the server. If the JSON file is updated by the Shortcuts app, that means that tallies have been updated, and the virtual punch cards also need to be updated.
That syncing feeling
A good old app called FreeFileSync came to the rescue. I showed it where to find the JSON file on iCloud Drive and where to find the equivalent file on the web server. With this information, it created something called a batch run that keeps the two files in sync — double-click it, and it runs.
I didn’t want to have to remember to double-click it, so I created an Automator script that does this for me. Automator is yet another automation app that comes free with your Mac. Again, though, that would mean clicking the script to run it. So I went deep into the bowels of Terminal and instructed a daemon called launchd to watch the JSON file. If it detects an update, it executes the Automator script, which in turn executes the FreeFileSync batch run.
I wish I could have skipped the intervention of Automator, and had FreeFileSync work directly with launchd. Alas, this was taking way too long, and Automator was the easy way out.
The only catch is that the Mac has to be awake in order for launchd to work. It’s a small price to pay, but as an incurable tinkerer, I may yet find a workaround. (Edit: Looks like pmset is the most reliable way of waking your Mac on a recurring schedule.)
To top things off, this whole chain of automation is fired off by a setting in the Shortcuts app that makes the shortcut run when I close the Tally app on my iPhone.
Nerd creds
It seems like there should be an easier way. Ideally, you should be able to do all this from the Shortcuts app on the iPhone. There is a Shortcuts action that is supposed to connect to a server and run a script to upload files, but I could not make it work. None of ChatGPT’s suggestions panned out. Questions left in Apple and Reddit forums went unanswered.
The system I came up with could only be appreciated by an automation nerd, but it works.
More posts in the Coding category
Tuesday, April 9, 2024
How to include HTML files on web pages the good, old-fashioned way
Server-side includes have been around for as long as I can remember — and that goes back to the days of dial-up. After all these years, I finally feel good about using them.
Let me explain.
First of all, SSIs are an easy way to include one html page in another html page. So, for example, if you have a navigation bar that’s the same on all pages, you can create it once in a separate html file, then include it on all the other html pages.
Here’s what the include code looks like:
<!--#include virtual="/nav.html" -->
That way, if you have to make a change to the navigation, you only have to do it in one place, instead of laboriously going through every page copying and pasting.
But there was always a catch, and I never liked it. You had to change the file extensions of all your pages to shtml. I guess the “s” stands for “server-side”.
Anyway, it’s annoying and looks weird.
So what changed for me at long last? I learned about these directives in the htaccess file!
You can add lines to htaccess that make html and htm files act like shtml files.
AddType text/html .shtml AddHandler server-parsed .shtml Options Indexes FollowSymLinks Includes AddHandler server-parsed .html .htm
Before you do that, though, make sure it’s OK with your hosting service. As far as I can tell, the worst that could happen is that it simply wouldn’t work. But you never know. In my case, the service provided the instructions so I knew it was OK.
While I appreciate all the YouTubers patiently showing how to do includes with JavaScript, I can’t help but feel that something coming straight from the server is going to be a faster, more seamless experience for visitors.
More posts in the Coding category
Tuesday, October 27, 2020
Prettier, prettier good
The thing about code is that computers don't care what it looks like. That's why you can get away with "minifying" it into a single grey line that extends to forever.
That doesn't work for the average human being. We have indentations, syntax colouring and a few other tricks to help us better understand what's going on.
What this formatting looks like is a matter of person preference, but certain conventions have become accepted. You could ignore them, but others would silently judge you as either a heretic or a newbie.
People working on the same team sometimes agree on using the same conventions, making it easier to understand one another's code. Because it can be hard to agree, a convention might even be imposed by management.
A neutrality has grown around a plug-in called Prettier that is available for many code editors. It is, as they say, opinionated — meaning that in the vast majority of cases it refuses to give an inch on how it decides code should be formatted.
That means almost zero customization, which was almost a deal breaker for me.
For example, Prettier forces you do use <br /> instead of the more modern <br>. This is meant to be a compromise for people coding XML, where <br /> is required. For HTML, it is recommended.
There are a few other things that grated on me, such as putting paragraph tags on their own line if the paragraph's content goes over one line. Also, it puts classes and attributed within a tag on their own lines if they get to be long.
As with a lot of things in life, if you use something long enough you get used to it. That means when Prettier doesn't work — which can happen if you make an error — the code looks downright ugly.
It makes me wish Prettier were more forgiving of my mistakes.
More posts in the Coding category
