About Onno's Electronics Page

The beginning

In the year 2000, I decided to publish an electronics website of my own after I had rediscovered my fascination for electronics in 1999. I had been dabbling a bit with HTML before and I had already found out that building a website requires a lot of work. I had seen a number of sites of electronics hobbyists and collectors of quasi antique electronic equipment and I wanted a place on the Internet for my own modest collection and achievements.

Design philosophy

On the technical level, I wanted to stay in control of the HTML code as much as possible, to be able to make lightweight, elegant pages that could be viewed on -ideally- any browser. The browser wars had not yet ended and I hated the banners on many websites saying “Runs Best On Browser X”. I have always been a believer in open standards, so I thought I would serve the world best by making a standards compliant website, not a website that would stimulate the use of some specific browser. Having had some experience with the monstruous HTML code that some HTML generators produced, I did not like the idea using one of those. They would introduce syntax errors and browser-specific features in my pages and result in bloated code. OK, I suppose there are tools that produce neat browser-independant code, but I wanted to be in control. So I wanted to use tools that would allow me to stay close to the HTML.

On the content level, I wanted to design a page-lay-out that would be easy to read, pleasant to look at and yet not too stern. I wanted to come up with a format that would allow me to tell an interesting story on every page and spice the stories with nice illustrations and photographs. I looked around for ergonomic guidelines and design rules, and tried to apply those rules as much as I could. Though I don′t pretend to be a professional designer, I do like pretty things that work and are robust.

First edition

I set out to write HTML pages in a plain text editor. I tried to catch as much style aspects in CSS learning from W3C and the definitive guide on html and css at Handleiding HTML

I didn’t like the limited possibilities of the free text editors that come with Windows. But then I discovered that there was such a thing as Vim, a DOS port of vi/ex. As you will know, ex is an extremely versatile editor that was packaged with UNIX since the beginning of (its) history and vi is the full-screen front-end for it. The only problem with vi/ex is that its commands seem to be designed for martians, not humans. But those who have mastered it, can make it do virtually anything. Today, you would probably use Perl or Python.

Using Vim, I was able to write scripts to make changes to the common elements in the pages. But this turned out to be an error-prone approach.

Some time later, I discovered HTML-kit, a versatile freeware HTML editor. This helped me to write better HTML, but not to apply and change the templates over all the pages of my site.

The design of my site consisted of a low-contrast background image that suits the content of the page, blue headers and footers and a text on a yellowed paper colored background. Site navigation was through 4 clickable icons on top of each screen. A number of these elements have survived.

HTP for templates

As the number of pages grew, and I was working from a template to make each new page, it was getting harder and harder to make overall changes to the site. I wanted to change the common navigation elements. I felt I needed some kind of content management system (CMS). But I wanted to keep things simple, and my hosting provider of the time did not provide a CMS yet.

At the end of 2003, I found out about HTP, a HTML preprocessor. This gave me the chance to separate between templates and content and to make clever text replacements, even to generate automated tables of content. After mastering HTP and writing a number of scripts to have HTP process multiple files, I was able to manage my site the way I wanted.

Uploading the html files remained a tedious task, though. I wondered if it weren't a better idea to use PHP on my webserver to do the things that I now did on my PC at home. The possibility of using PHP only came years later, when I moved my site to my own domain on glowbug.nl. I haven't done so, yet.

Meanwhile, in 2012 I ported the scripts to Linux and started to use the Linux/Posix version of HTP. I had to improve the syntax of some pages as Linux and the Linux/Posix version of HTP are fussier about syntax than the Windows version.

Making pictures

For my first pages, I used the snapshop function of a digital camcorder to make photographs. That wasn't really good enough. The lens caused some distortion and the pictures had a pink tinge in artificial light. A practical annoyance was the awkward and slow procedure to transfer the pictures to my computer.

I also used some scans of conventional photographs I made with my Canon A-1 camera. Some of these were very good, such as the picture of the 6AU5 valve, taken with a 1-second shutter time to profit from the orange/yellow light emanating from the heater and show how the light reflected from the magnetic shield around the CRT of my 545B scope. With my first digital cameras this kind of picture was out of reach, as long exposure photographs became too dark and the camera had problems with infrared light. Using photographic film was the best way to show the colors of glowing objects but it is expensive and time consuming.

In spring 2003 I bought a Sony DSC-P71 digital compact camera. After this, I could make pictures quickly and transfer them to my computer instantly.

The Sony camera gave 3-megapixel images and better colors. But to get good colors, I found out I had to watch lighting conditions with every individual photo shoot that I do. And it gave a purple tinge when I tried to photograph hot glowing objects such as the cathode of a valve. Many photographs on the site now (2008) are from this camera.

In October 2008 I bought a digital SLR camera, a Nikon D60. This one gives even better photographs. With this camera, I can control speed and aperture as I want to, and its sensor makes much better photographs of glowing objects. I tried it on an EF80 being tested in a tube tester. But for most pictures, the main obstacle to good pictures still is good lighting.

Since 2010 I also used my smartphone to make pictures for the ePage. But most pictures are from the Nikon camera.

Graphic, photo editing

Over the years, I have used different software packages to edit photographs and make graphics. Because I only use these programs every now and then, I didn't want to invest a lot of money.

At first, I used a trial version of Paint Shop Pro. That worked fine, but the trial version didn't last long. I also used a free Microsoft photo manipulation program that came with Office 2000. I had it on my laptop from work, but not at home. I used it to produce the background graphics and buttons for the first version of E-page. At home, I installed Windows XP and Office XP in early 2002. The Microsoft Photo Editor program that came with it, was less powerful than its predecessor. Frankly, it was a bummer. It uses a primitive algorithm for image scaling, that causes moiré effects and its sharpening procedure causes a lot of speckles. I started to use HP Photo Editor, that came with my HP printer. That gave much better scaling options and allowed me to correct white balance a bit. I also tried the photo manipulation software that came with Nero 7. That was even better, but the user interface was a bit awkward.

Finally, I was tipped by a colleague about a brilliant open source, freeware photo and graphics editor called GIMP. I was warned that the user interface was a bit clunky. But that was more than outweighed by the excellent photo manipulation algorithms, different options to manipulate and correct colors, the possibilities to correct perspective faults and perform operations on selected areas. I quickly learned how to imprint watermarks on pictures. The GIMP has a lot more possibilities that I will learn. It can also be used to draw graphics to further spice up the pages.

Drawing circuits

Schematic diagrams are the most important type of graphics on a website on electronics. I have always found it awkward to draw them on the computer. On a number of pages, such as the home-built M13 regulated high voltage supply I used scans of hand-drawn schematics and polished them a bit. At work, I used Visio a lot to make diagrams. It proved to be possible to use Visio for electronic circuit diagrams, but I had to design my own library of symbols. I have drawn the Eddystone 870 schematic using Visio, but that was quite a lot of work. Visio turned out to be a bit akward for this type of work, as it just refused to keep my components on a 1 mm grid and it made a lot of errors when converting a diagram to a bit-map output format.

I didn't want to spend big money on a CAD software package and tried using Microsoft Paint, which was prohibitively awkward. Good freeware software to draw schematics was hard to find, but finally in November 2008 I found TinyCAD, a freeware schematic capture program available for Windows. I have first used it to draw the “Principle of Operation” circuit for the Heathkit V-7A VTVM and found it was quite easy to draw schematics with it. Though the component libraries that came with it, are a bit of a hodge-podge, it is easy to edit the library symbols and make them into something that approaches ISO electronic symbols. I will certainly be using TinyCAD for more diagrams.

Later on, I switched to KiCad. The schematic of the Gilson high voltage supply has been drawn using Kicad.

Renew - no tables

Striving for perfection, though admittedly fallible, I'm more than a bit sensitive to arguments by real purists that certain concepts in computing should be used in the way they are meant to be.

Therefore I wanted to replace the table based lay-out of my early site by a lay-out that was totally controlled by CSS positioning. That turned out to be harder than I expected.

In 2005, when I moved my site to glowbug.nl, I changed the icons on the top of the page to buttons, whose appearance was controlled by CSS. But I still needed tables for the main lay-out and for the lay-out of figures with accompanying text.

I did a lot of searching, and from a number of sources, some of which are: ValidWeb.nl, Digital Web magazine, The noodle incident CSS guide, WebsiteTips.com, I learned just enough to use CSS positioning and make it work across different browsers.

On 2008-07-20 I published the new home page and a new chapter of the site, Intricate Instruments. At the same moment, I published the slightly adapted versions of the pages under Projects and Neon. Because the main text area for the pages had become a bit narrower, I had to check all of the pages to make sure the alignment of photographs and diagrams was OK, and none of the photographs was too wide. In September and October I finished the task of converting all pages to the new design. A lot of older pages, especially the ones describing radios and scopes, did't yet have an introduction paragraph and were not adapted to the standard layout for a figure with a caption.

In that course, I have also replaced more than three quarters of the photographs, making new renditions of the original files. Some of the pictures were too wide. Others I found too small, not showing enough details. There were also a lot of photographs that had ugly colors, caused by bad lighting. Most of those could be improved using GIMP. Finally, I decided to add a watermark to all of the photographs I had re-rendered. After some experimentation in HP's Photo Editor, Nero and GIMP, I found out how to quickly make watermarks from a template using GIMP. Some of the photographs still carry one of the early watermarks.

On 2008-10-19, I finished converting all of the pages to the new lay-out and improving more than half of the pictures using GIMP. Since, I have added yet more pages. But the site will never be complete. I have at least 20 more collectibles that deserve a page of their own. And improvement will continue. If you think you have suggestions, please don't hesitate and go to the contact form.

Pausing

From 2016 until late 2024, I didn’t add any more pages. There were several causes. My work was quite busy. Still I kept on dabbling with electronics and starting projects.

I was getting a bit annoyed with HTP. Writing content required using a template that limited my freedom. The syntax looks like HTML but most HTML tools get confused by the HTP syntax. I didn’t get the level of separation of presentation from content that I wanted. And, without getting into details, the production process for my web pages was a bit awkward. Also, I wanted to update the site from HTML 4.01 to HTML 5.

Around 2018 I discovered Markdown, a new markup language to write content that can be converted to any document format, including HTML, PDF and LaTeX. It promises the highest level of separation of content and presentation. But what tools to use?

I tried to use the Atom editor annex SDE to write Markdown and convert it to HTML. But I found the possibilities for customisation too complex. It was ok to write using Atom, but for conversion I needed something else.

To get used to Markdown, I started to write pages for new projects and objects in Markdown, without publishing them yet. Among them the QUAD repairs and the Gilson high voltage supply.

Step to Pandoc

Somewhere in 2022 I discovered Pandoc, a universal document converter that supports almost any document format. I was able to set up an HTML template to convert Markdown content to ePage web pages. Pandoc goes well with the unix make utility to convert pages consistently, to a coherent website. I also designed a new and more minimalistic and HTML 5-based design for the site. Pandoc was helpful for this.

But how to convert the existing content to Markdown? Pandoc does not understand HTP. Also, my HTP-files were riddled with ePage-specific style features which makes conversion to flat content difficult. In HTP, I used a number of metadata variables for the pages, e.g. in what chapter a page belongs, the publication date etc. I decided to use a two-step conversion:

1. First, the HTP files were converted to a very basic HTML-version of the content, leaving out headers, footers and navigation bars and extra containers. The metadata was copied one-to-one into HTML header fields.
2. Secondly, pandoc was used to convert the flat HTML-files to Markdown.

This resulted in Markdown files that needed minimal rework.

In the meantime, I read about new developments on static site generators. I recognised the concept of a static site generator as the holy grail I was searching to find using HTP and Pandoc.

I tried a few static site generators, such as Hugo, Pelican and Jekyll. These do work well, but I wasn’t satisfied:

1. I wanted to keep to the navigational structure of ePage, including the directories. The purpose is, not to break any links from other websites to my site.
2. I wanted to keep the resulting HTML as simple as possible. Unfortunately, most static site generators generate complex HTML with lots of scripts. I felt like loosing control.

So things slowed down. In the end of 2024 when I wanted to publish a page on the Bush VHF81 I reverted to using HTP for this page and I used it for a number of other new pages after.

In 2026 I was cleaning up the files on my laptop. Dusting off the results of the different innovation trials I decided that the Pandoc solution was the best way to choose. I checked my previous work and decided to complete the design I had made in 2022.

I started with a number of new Markdown files I had written between 2018 and 2024. I made the set-up to convert them into pages and start the new Awesome Audio chapter. This worked well. Awesome Audio and three other new pages in the new lay-out were introduced on 2026-08-26.

Converting the existing content to Markdown and preserving the overall structure of the site was a bit more challenging. I had to refine and repeat the conversion process to finally get good results.

Still, I needed to quickly check the lay-out of every page to see if the new format is working well. Most of them did but some needed correction. Some unwanted by-effects of the conversion from htp via html to Markdown I could correct using the unix sed utility.

On 2026-09-09 I uploaded the new version of the Projects chapter followed by the homepage and related pages. I continued to convert the other pages to Markdown and to html with Pandoc and check the results.

On 2026-09-20 I finished the work and uploaded the final Pandoc-converted pages. This concludes the transition to the new site format. There are some remaining cosmetic issues caused by the new wider page format. These will be fixed in due time.