Stuff Learned Through Updating My Website
So I decided that I wanted to actually use my website for...well...anything. I have a pretty long history with web development and a knack for privacy so I have a lot of old habits and tough limitations. For an example of the former, I did a lot of stuff during the XHTML days so I self-closed null elements which is no longer the norm it seems. An example of the latter is that I decided this main site would not use any scripting whatsoever so I had to use some tricks to accomplish a few quality-of-life elements.
I like knowing exactly how things work and having the highest level of control over them. This is the reason I don't use anything like Bootstrap and opt to do all of my own coding. Nothing against Bootstrap, I used it for a few things in college to speed up the process and it's incredibly useful and looks great; my site is an eyesore. But I know EXACTLY what Bootstrap is doing and could make a 1:1 replication of it given enough time or make a custom version but it's unnecessary for what I want to do.
Anyway, all that aside, there were a lot of things I learned in the year of 2023 when trying to get my website up to snuff with modern practices. I know it looks bad, but it's mechanically sound. I do plan on redesigning it at some point, but only time will tell when that happens. On to the stuff I learned...
Semantic Web
If you're like I was and thinking "The eff is semantic web?", trust me, I get it. As someone who came from tables being the norm, this was a weird one. For most of my adult web life, div was king, and it still is, it's just been expanded upon. Tags like nav, article, and section are used to be more clear about what each section is. They're block elements that work exactly like divs but help keep the layout of the page self-describing which assists both crawlers and assisting tools in understanding the layout of the page. The most difficult part was understanding the proper usage and what order they go in.
Tags and Order
I had a massive section that amounted to a bad tutorial on what semantic tags I use and how to use them that took up way too much of this post's length, so I removed it and will be more brief.
Once you realize header, main, footer, and maybe nav are your basic layout sections, all you need to do is figure out what constitutes an article and how to use section to break them into pieces if necessary. There are a ton of guides and resources out there not just for the basic tags that I use on my site, but other tags that can be used as well for more advanced or in-depth purposes.
No JavaScript
This should probably be the first section, but it was less of a thing than learning semantic web stuff if that makes sense. It was less of a concern mainly because I was already anti-JavaScript before updating my website. but there were a couple of things I wanted to include that are usually done using JavaScript. There are a lot of cool things with modern CSS these days and you can mimic a lot of stuff previously limited to JavaScript.
Mobile Navigation
One surprising statistic I learned this year was just how many people use their phones for surfing the web. I knew it was a lot...but I had no idea it was A WHOLE EFFING LOT. So, in the spirit of being more mobile-friendly, I wanted to add a mobile navigation menu. The only issue now is that I have such a small website that there's not much in it...but I did indeed find a way to do it without JavaScript (I found it on Google and tweaked it). I have a demo and a small how-to on my dev site, the link is below.
Light Mode
Another thing I wanted to add that seemed limited to JavaScript solutions was a dark and light mode button. I'm certain I'm nowhere near the first person to do this, but I did figure it out myself using the ideas from the mobile navigation solution. It is quite limited since it doesn't persist if you leave the page. That's okay, though, cause the way I implemented it is more so for usability as some people have issues reading white-on-black text. For a demo and how-to, check out the post on my dev site below.
Image Stuff
I like to have a pretty minimal setup and I know shouldn't use images because they're expensive for bandwidth and keeping costs down is ideal...but I like to use images sometimes. This led to one of the most subtly helpful discoveries of this whole adventure of bringing my site to the modern day.
WebP and SVG
Using efficient formats is very useful especially if you don't have a specific need for the highest resolutions or best quality. In comes WebP! I know WebP can be lossless, but I'm not doing anything at the time of writing this that would warrant lossless quality images...so we'll ignore that for now.
I'll admit it... I'm not the biggest fan of the WebP format. Mostly that's because if I save an image and it saves as a WebP, it doesn't work very well with my installed image viewer. Plus, I often want the highest quality versions of pics and I have no way of knowing if the image is the best version sometimes and may have to dig a bit more to find the original.
The second format that became part of my world was SVG. SVG is truly a godsend for icons. I don't really use them on this site...as I opted for less eye candy in favor of simplicity, but I do have a few (only one as of writing) tucked away in the mobile version of my navigation menu. But they are perfect for any version of your site as they scale perfectly since they are vectors rather than rasters. So no weird pixelation on higher resolutions.
Dynamic Resolution Loading
The most recent method of increasing efficiency that I learned was how to load different-resolution images based on the width of the device. This is important for speeding up page loads on slower networks, and keeping bandwidth costs down with many mobile visitors. The former is an interesting thing to think about as high-speed internet and mobile services are becoming more common and spreading throughout the world. But as someone who's lived in rural and remote areas, sometimes the speeds and availability just aren't there. If a site has a hi-res image on their page and it takes forever to load, that sucks to have to deal with. Even though I don't usually use many images, I wanted to add this tech for that exact scenario. Though, at the time of writing, it is implemented backward on this site but will end up fixing it after I post this. On my dev site, I have a demo and how-to and it's very simple. I'm sure there's more to it but that's what Google is for.
Accessibility
Honestly, everything from the previous sections could fit into this one. I'm remorse to say that accessibility wasn't the primary thought I had when updating my site. Therefore, putting it here after all of that above is very fitting to my frame of mind throughout the process. I'm not saying I'm in the right...just saying how it happened. As someone who struggles with hearing loss, I fully understand how important accessibility is and now strive to make things as accessible as I can.
Semantic web components not only help web crawlers find the important parts of your website, but screen readers often use them to help people with low or no visibility navigate through the site. Jump to a navigation section, that's nav. Go to the next section of the article, that's section. Read out a list of blog posts, well that list of articles is composed of multiple article tags.
As stated above, using efficient images helps visitors on slower networks or those with prepaid plans which are more accessible for parts of the world where modern and costly tech isn't prevalent.
The more subtle parts have to do with the general layout, sizing of things, spacing of things and colors of things. Those were such an afterthought but I've been on sites where I complained about not being able to read things easily because the designer used dark on dark or light on light. Also, sometimes it's tough to hit the right button or close that damn ad with the tiniest little x. I used tools to help me figure out which parts of my site needed addressing and I check it every so often to make sure things are easy to see and use.
Extras
There were a few other things that I ended up addressing at some point that don't quite fit into the previous sections. Well, maybe the first one does for some accessibility things...but I don't know for sure. Either way, I still want to address them before closing out this post.
Search Engine Optimization (SEO)
I never really cared that much about SEO for something like this because I'm never really trying to appeal to like...the big, broad set of eyes. If I was doing this for a job or was trying to grow an audience, I would certainly have had this be a primary concern because good SEO can make or break a business when it comes to the web. But it still helps to do some of these things to put your website at the top of results for your name which was a goal of mine. Things like meta tags and correct order of semantic tags fall into this category and I try to remember them but it's so easy to overlook them.
Cache Busting
This was unfortunately the last thing I learned about before the year was over and it's unironically the most crazy helpful piece. With such a small website that's being served statically, storing it in cache is VERY easy to do and I always had issues with CSS not updating properly since I use external stylesheets because it's cleaner. I found out that changing the file name tended to work well, but hated having to do that every time and searched for a better solution. Now, if you look at my source, there's a version query at the end and that causes cache to refresh since it's looking for a different version. Incredibly nice to be able to update my style and it reflects without having people reload their cache to see the latest changes on my site.
Where to go from here?
Honestly, with all this knowledge, and seeing some cooler and more simple but effective designs of others' websites, I do want to redesign everything and go for a whole new look. But that will have to be later on in the year for sure when things calm down a bit. I read a post lately by Robb Knight called The Web is Fantastic and it made me want to keep doing this kind of stuff and posting more because I do miss how the old web used to be and I want to see a resurgence of people being cool and posting stuff they like. If I end up posting more often, I may take Robb's advice and add RSS, but time will tell.