Big Site Updates

Dwayne Harris   ·   About 2,051 words

I make code changes to this website very consistently. Since the beginning of November 2020, I’ve deployed 41 releases. Of those, one was a major update (v6.6.3 to v7.0.0), 5 were “feature” updates, and the rest were 0.0.x point updates (mostly bug fixes and small design changes… but some features in some of those too).

On December 2nd, I deployed version 7.0.0, which was a huge visual and architectural redesign (which I did while keeping all URLs and content intact btw). I meant to write a big blog post about it but then I just… kept working on different things around the site instead. This has been a regular problem for me lately.

I used to at least make small changelog posts after every update, but I stopped when it seemed like people weren’t really interested. I’m thinking about doing it every once in a while again. At least, I’ll do this summary of some of the bigger changes I’ve made over the past two months.

The site is currently at version 7.5.6 7.5.8 (I actually did two deployments since I started the article).


Latest Updates

Mobile Enhancements (v7.5.3 - Jan 23rd)

Refreshing the page and watching the button change color.

Up until this point, in the mobile design, you had to reach up to the top right corner of the screen to hit the menu button that shows the site navigation sidebar. I like being able to use my thumb to do stuff. Having to use another hand to get around the site is ridiculous and has bothered me ever since I first deployed the design.

So now there’s a second menu button at the bottom of the page. It of course follows the general site design and is randomly assigned one of the 15 site themes on each page load. I’ll be adding some animations and making general improvements very soon.

And considering I try to think about accessibility whenever I work on any features, (and the fact that I’m left-handed) the position of the new menu button is configurable1 at the site’s settings page.


Bookmarks/Links (v7.5.0 - Jan 22nd)

I don’t actually use bookmarks/favorites all that much. I have a few things saved (like 10 - 15) between Safari2 and Firefox. The bookmarks I have saved in Safari are synced to my phone (iOS), and the ones in Firefox are synced to my gaming PC. So I just kind of loosely maintain two lists of links and it’s not ideal.

So I decided to add bookmark handling for myself into the website. I wanted to make sure I can share them publicly too, and I remembered someone on twitter at some point (I can’t find the tweet now) promoting the idea of bloggers adding a /links page to their sites that shows off their favorite links or shoutouts or whatever.

So I mark some of my bookmarks as public, and I added a /links page that will randomly pick 5 of them to show at a time. I’m gonna try to add links pretty regularly.


RSS Reader (v7.5.0 - Jan 22nd)

This was a big one.

I still like RSS a lot. I’ve used it as a news source for many years. I was a pretty big Google Reader (Reader existed from 2005 to 2013) user and I switched to using Twitter as a replacement when Google killed it. Once I setup this server I was actually pretty excited to self-host something similar to Reader and not rely on Twitter for news (and not have my list of feeds and interests tracked so easily). So I’ve had Miniflux installed on this server since pretty early on, and I used Reeder on macOS and iOS to connect to the Fever API at this endpoint.

At some point after having Miniflux installed and set up, I also added a What I’m Reading page, that used the Miniflux Go client library to have the server basically connect to itself and grab the latest articles. I figured it would be very fast since the API request didn’t really have to go anywhere.

It was not fast.

Actually, the What I’m Reading page was way too slow and really the only page that had any perceptible delay in loading (at least as far as I could see) so it really bothered the shit out of me ever since I deployed it. I added caching not long after (and throughout the site of course) to help, but it was still slow when the cache expired so I noticed anyway.

So that - plus some of the other changes I wanted to make that involved my RSS feeds - made me actually decide I had to fix the problem. So I completely uninstalled Miniflux and wrote all my own RSS feed parsing/processing code. And since I was already diving into that effort, I figured I would complicate things even more and also remove the RSS formatting library I was using for my own articles and write that code myself. I had other real reasons for doing that, but I’ll explain in another post specifically about this.

But anyway, I was able to remove two libraries and the entire Miniflux service from my server and replace it with my own very clean and efficient RSS processing code and feed reader interface. I replaced the What I’m Reading link in the sidebar with the Reading List link, where you’ll get a (finally) paginated list of the latest articles from some of the feeds I’m following.

Check out the reader here

This Reading List has an “Expanded” view with article contents, a page for each feed, a page for each Tag that I use, and individual article pages that are rendered using this site design. It checks for feeds every 10 minutes so it should always be very recent.

I use this for myself instead of Reeder now (I uninstalled it). It’s still my personal RSS Reader, and I’m the only one who can manage the feeds, but it’s publicly available for anyone who wants a look into what I’m reading about at any given time.


Start Page (v7.5.0 - Jan 22nd)

Me opening a new tab to this new Start Page and using my Wikipedia shortcut.

Another feature that’s mostly for me, but available for anyone else to use too. I created a Start Page!

I don’t actually remember the reason why I considered doing it in the first place. I thought about doing it a few weeks ago, but it didn’t seem worth the effort at the time so I started working on other things instead. But then something made me start thinking about doing it again so I put a few days of thought into it.

One thing I knew it would need was to show news articles on it like all the other start pages do, so this was part of the motivation for me to fix the Miniflux situation. Once I did, I ended up with a page that shows me RSS articles, bookmarks, the most recent notes (I already have Note handling built into the website for myself), and site notifications. For anyone not logged in as me, it shows a subset of those things.

But the search bar was the fun part.

At first I just hard coded some “commands” for myself (like “s term” searches DuckDuckGo and “wiki term” searches Wikipedia) and figured I would add more whenever I needed. But then 2 minutes after I deployed it, I realized I should have added a feature dynamically manage those shortcuts through the site’s admin section. So I did that too.

Like the rest of these last few features, parts of this work only for me, and parts for everyone. Some of the shortcuts I’ve added (like search and wiki) are public, and some only work for me. Either way, the autocomplete in the search bar shows you the shortcuts you have access to, so you can discover them if you want (although I’m not actually expecting this to be used by anyone by myself most of the time).


Portfolio (v7.2.0 - Dec 31st)

My Portfolio page.

I’ve had the Resume section up for a while, but my Portfolio is newer. My Resume is a text based description of my work history, mostly focusing on full-time, employer/employee based work. My Portfolio is more visual and is freelance/client based.


Resume Section Updates (v7.0.0 - Dec 2nd)

The React/Redux page of my Resume.

I updated my Resume along with the site redesign and added the ability to use Skills as “tags” on my work history entries. I’ve also written descriptions for each Skill so you can see how I feel about each of the technologies I’ve used for development while filtering the results for it.


Settings Page (v7.0.0 - Dec 2nd)

I also added a Settings page so visitors can easily adjust theme and animation settings. Because overuse of Javascript (and it’s effect on general web accessibility) has been a topic in the web development community over the last few months, I wanted to call out my attempt to respect the user’s browsing settings and have my designs and features adapt to them.


Admin/Misc Features

Besides the features that are visible to all users, I made a lot of admin related features to make my life easier and manage all this stuff more effectively:

  • Themes3: The different themes you see in each section of each page on the site are controlled by a theme editor I designed and implemented from scratch.
  • Uploaded Files: I use Digital Ocean for hosting, and they have an Amazon S3 like service for file storage called Spaces. I wrote an admin interface for that so I can upload and manage files directly through this site when I need to.
  • Things: I didn’t know what else to call this feature, and I don’t know how to easily show it off here, but I built a pastebin like feature into the website too (and literally called it Things). It has support for links that self destruct after viewing. I love it.

  1. I thought really hard about making the default position for the menu bar on the left instead of the right. Because I’m left-handed and stubborn. But I decided against it. ↩︎

  2. I feel like Safari’s bookmark handling is terrible. It only supports folders, when labels/tags are obviously better for something like this. And the “Edit Bookmarks” interface itself is just kind of… non-standard and not good. ↩︎

  3. I’ll talk about the site Themes more in another article about the redesign, but the technical solution for this is very interesting and allows me to instantly adjust theme colors in the editor and have it reflected immediately across the site with proper CSS file caching. It’s dope. ↩︎

Feedback
2 Likes   ·  
Last Updated

Contribute

Was this post useful to you? Want to support this website? Learn more. Thanks for reading!

Comments

No comments yet.

Add Comment

Add a Code so you can edit or delete this comment later. Using the same Name and Code for multiple comments will link them together. Learn more.
By posting a comment, you are agreeing to the Terms of Use.