Continuing the short series on what went behind building BitcoinTop250.com, I conceded that in order to get the site up in a relatively brief amount of time, I needed to hack together a way to conform the data into html tables that I could paste into WordPress’ backend.
While that took some time, it was actually easier than the CSS piece. That was more of a challenge and one I needed to go to AI to for help.
The first problem I ran into was that the theme I chose was a block-based WordPress theme so instead of using WordPress PHP functions as I had previously done years ago, I was now working with a newer shortcode. I came away liking it but it took me a while to get there.
I made a simple mistake early on. I had set the website up with Cloudflare so that it would perform well but I had not enabled Developer Mode. This meant that as I made changes in the CSS file, I would not see those changes in the live site. To make matters worse, I confused myself by pulling up Google Developer Mode, making those changes in Inspector, and seeing them appear instantly. I eventually remembered I had to go into Cloudflare before making site changes so once I had that squared away, I had a green a light to go.
The Tankathon site is simple but incredibly effective and I think a big part of that is logos. Thankfully, I pinged ChatGPT to ask how best to add company logos into my tables. That’s when I learned about logo.dev. You get a free API key, add a header or footer attribution link to logo.dev, and start working those logos into your website. I was able to hotlink to logo.dev for 90-95% of the logos I needed.
For the rest of them, I used software called FastStone ImageViewer. This is old school shareware for Windows devices where there are handy keyboard shortcuts for optimizing, re-sizing and batch-editing images. In my past life, I worked with thousands of images and grew to love this free software so I used that for editing individual logos that I had to obtain on my own.
Once I had the logos in place and worked those into my HTML tables, I ran into another challenge of how to display a table with a lot of words, data and several columns on both desktop and mobile devices. Mobile devices reign supreme these days but is suboptimal for a project like this. So I needed to drop my least important columns for mobile devices. I also included a message at the top of each page advising site visitors to “Tilt your phone” which will reveal extra columns.
Other than that, styling was somewhat breezy with an AI companion like ChatGPT. In my past life, I had Google Developer Mode to aid me but I would still run into some roadblocks. Now, I had a web developer tutor/helper for the first time alongside me as I built a website. (oh, what could have been back in 2014!!).
The meat & potatoes are done but I still have some CSS work to do. I don’t love how the menu is displayed on mobile devices so out of interest of being able to put the project down for a bit, I added a “Menu^ note directly below the links. I need to surround the menu with top and bottom borders but only for desktop. I’ll get there.
But I’m really proud of what I ended up with which is a site that displays some of the most accurate information for a “normie” audience that is interested in how Bitcoin is held and adopted by large institutions and companies today.
Now that the site is initially launched, I can re-focus back on reading, learning, compiling and publishing more data. And hopefully soon, fine-tuning and developing even more technical skills as I progress through 2025.