Redesigning the Website

I haven’t posted in a little while.

I’m mostly done with the next article I was supposed to post, which is about getting WebRTC working for video chats through the website. But before I could post it, I decided to redesign the whole site.

I’m partway through it right now, so I don’t have anything to show yet. I’ll write a series of posts about the redesign once it launches, but I’ll talk a little about the effort right now.

Backend

I use Go on the server for this project. I’ve been using Node (Javascript) on the backend for years whenever I did web projects, but I made speed/efficiency the highest priority for everything on this server, so I choose Go for my own code and Go projects for the other stuff I’m using (analytics, code repo, IRC server, etc).

But I wrote the first line of Go code back in January when I started the project (before I even knew all the stuff I wanted to add) and have been rapidly adding features since. I’m at 155 releases/deployments since January, and the site is on version 6.6.2 (I try to stick to semver even for this, so major.minor.patch releases).

At this point, the code is a complete mess.

Issues

Bad project architecture

Here’s a breakdown of the lines of code¹ for this web project:

───────────────────────────────────────────────────────────────────────────────
Language                 Files     Lines   Blanks  Comments     Code Complexity
───────────────────────────────────────────────────────────────────────────────
HTML                        99      5590      686         1     4903          0
JSON                        42     10927        0         0    10927          0
Go                          34      9565     1275        19     8271       1417
SVG                         33     61037        8        28    61001          0
CSS                         20      8096     1321       346     6429          0
SQL                         18       435       35         0      400          0
JavaScript                  11      7598      818       766     6014       1284
Plain Text                   2        58        9         0       49          0
Makefile                     1        27        7         0       20          0
Markdown                     1         7        3         0        4          0
gitignore                    1        71       17        21       33          0
───────────────────────────────────────────────────────────────────────────────
Total                      262    103411     4179      1181    98051       2701
───────────────────────────────────────────────────────────────────────────────
Estimated Cost to Develop $3,331,347
Estimated Schedule Effort 21.727494 months
Estimated People Required 13.621541
───────────────────────────────────────────────────────────────────────────────
Processed 14319092 bytes, 14.319 megabytes (SI)
───────────────────────────────────────────────────────────────────────────────

Most of the code is in one big Go package called “handlers”. Out of the 9,565 lines of Go, 9,487 of them are in the handlers package. 😕

Go Templates

Not only are the Go files a mess, but there are 99 html files in the project. 98 of them are in one templates directory. 😕😕

And I didn’t really know Go template best practices at the time so there is NO code reuse or partials or anything like that.²

Frontend

Like with the backend, I’m not using any frameworks or libraries on the frontend. Just raw CSS/Javascript (with a minor goal of having every single feature besides video chat work with Javascript disabled).

That part isn’t such a problem on the frontend, but the general design I’m using is.

When I started this in January, the only thing I knew for sure was that I was going to post articles and pictures. I hadn’t made the decision to do freelance development yet, I had no plans for user accounts, web tools, video chat, or anything else.

The design you’re seeing right now has been updated a lot this year, but the foundations are the same: A couple links at the top of the page, an ineffective list of “More Links” on the side of the home page, and a mostly one column layout for everything else.

But this design has existed through the introduction of the following features:

• Comments (and comment administration)
• Video chat (with chat requests from users)
• Liked posts
• Utils/Reference pages
• Web/IRC chat
• Freelancing services
• Notes/Link shortener service (these are just for me)
• User accounts and user management
• Financial contributions

Clearly a new design is needed.

Other Frontend Issues

• I really like the monochrome theme. It works well in both light and dark modes. But it’s time for some color and theme flexibility.
• I also like the animations on the site, but they aren’t good enough. This is a good opportunity to make them even better.
• I think the site is relatively accessible (especially since I’m not relying on Javascript for things), but I need some better HTML structure and semantic tag usage to make this even better.

Progress

As of this writing, I’ve completely rewritten the backend (the page routes and queries and everything are the same, so functionality should HOPEFULLY be exactly the same) to be clearer, more organized, and more efficient.

Now I’m working through the frontend. I’m in the middle of rewriting pretty much every template files. And I basically deleted all of the CSS so I can start over.

Here are the lines of code right now:

───────────────────────────────────────────────────────────────────────────────
Language                 Files     Lines   Blanks  Comments     Code Complexity
───────────────────────────────────────────────────────────────────────────────
Go                         120     11828     1662       264     9902       1370
HTML                       104      5611      693         1     4917          0
JSON                        42     10927        0         0    10927          0
SVG                         33     61037        8        28    61001          0
CSS                         19      5965      918       217     4830          0
SQL                         19       547       39         1      507          0
JavaScript                  11      7598      818       766     6014       1284
Plain Text                   2        58        9         0       49          0
Makefile                     1        27        7         0       20          0
Markdown                     1         7        3         0        4          0
gitignore                    1        71       17        21       33          0
───────────────────────────────────────────────────────────────────────────────
Total                      353    103676     4174      1298    98204       2654
───────────────────────────────────────────────────────────────────────────────
Estimated Cost to Develop $3,336,806
Estimated Schedule Effort 21.741015 months
Estimated People Required 13.635374
───────────────────────────────────────────────────────────────────────────────
Processed 14321306 bytes, 14.321 megabytes (SI)
───────────────────────────────────────────────────────────────────────────────

Some interesting things I’ve noticed so far:

• Estimated cost to develop/people required³ hasn’t changed much (which makes sense considering the project size/effort is the same).
• Go code files went from 34 to 120(!!!), but the actual lines of code only increased by like 1,631 (8,271 to 9,902). This is good!! This means I’m using Go packages way more effectively.
• HTML files increased because I started adding partials and splitting up some of the files that were too big. But I didn’t finish actually using those partials so the actual lines of HTML haven’t changed much. I expect there to be a lot less HTML code when I’m done.
• Some third party HTML/CSS/Javascript is included in this count (the IRC web client I’m using). Even with those included, you can still see the effect of me deleting all my CSS to start over. Total lines of CSS went from 6,429 to 4,830.

That’s it for now. I’ll write another breakdown closer to release. I’m gonna dive back in now and get this done.