New Website

Finn Who?

My name is Finn (pirateFinn on IRC and many other things)! You may have seen this ginger haired British/German self if you were at London Perl Workshop 2016, FlossUK 2016, YAPC/TPC 2017 or FreenodeLive 2017. As you can see, while new to the office, I have been definitely keeping myself busy within it too. There is already an article on me present here, so I won't go too far into detail about myself and rather focus on the thing that is much more important.

Old Website, new skin grafting

But wait, the website seems all different now! That's because it is. In an error of actually listening to what Mark Keating says, three weeks ago I was tasked with the redesign of the existing website, while retaining the Perl mechanics that generate many pages and code underneath. I had already known that this would be an arduous task, as the website was over 10 years old and littered with the code of its age to match, with the occasional redesign over the years, but never implementing a framework. After some use of Bootstrap 4 alpha & beta in community projects as of late to simplify our design process, it was decided we implement the rather brand spanking new Bootstrap 4 beta framework. The main goal was to remove as much legacy HTML and CSS code as possible and replace it with Bootstrap elements and design. Plus it would actually be sane to view on a mobile device, which it really was not.

Files, files and more files

One of the first things I did was investigate the file structure of the website that I was working with and implementing Bootstrap into it sensibly. This, as you may expect, had me puzzled for a while. So much so, I put many relevant CSS and various other files into a more sensible file structure for consistency. As an example, many CSS files were old unused ones, so they were placed into a folder called "old" in my spark of intense creativity. Bootstrap had also its own folder for the minified CSS file and the javascript dependencies in the JS folder. Thus, once Bootstrap was imported into the layout page where everything fits into, the import was done for the CSS and javscript files into the layout.html page. This is because the Shadowcat website uses similar replace tactics that jQuery made widespread in replacing the middle contents of a page while retaining the same layout HTML and so forth. Except rather than digging the hole further in the same way, we used a shovel known as Perl and the use of HTML::Zoom, which our very own Matt Trout (mst) made.

Time for some wörk!

Now, I was rather aimlessly told to implement it, so I had to find work to do and improve. The only real main goals I was given was to replace as much as I could with Bootstrap and rip out all the old code no longer needed. The first things I did was correct a header typo and one where there was meant to be "Contact", not "About", among other typos. I dread to think how old those typos are, some Git blames show they are at least 4 years old in age. A small apple tree will have born fruit to pick from a purchaseable 1 year old nursery root in that time. Along with that, I managed to throw together a shell script from various stackoverflow searches that spits out a list of images completly used in any HTML and so forth, along with directories. The code can be seen below.

#!/bin/bash

MYPATH=$1

find "$MYPATH" -name *.jpg  > /tmp/patterns
find "$MYPATH" -name *.png  >> /tmp/patterns
find "$MYPATH" -name *.gif  >> /tmp/patterns

for p in $(cat /tmp/patterns); do
    f=$(basename $p);
    grep -R $f "$MYPATH" > /dev/null || echo $p;
done

Replacing custom CSS with Bootstrap

A thing to bear in mind is that at that point, there was a main.css file being used with 1566 lines and several off-shoot independent CSS...of which seemed to feature mostly repeated CSS as well. As such, many elements were moved from using the main.css definitions to what was already defined in Bootstrap, with possibly minor tweaks. Entire sections of CSS code of 10 lines roughly were being ripped out bit by bit, because it was trying to define what Bootstrap did already, bar usually colour. To give a spoiler of the end result, the main.css file is now at 171 lines of code and off-shoot CSS files have been completely removed.

The flow of what was removed and replaced went roughly like this:

1. Removing near all the CSS regarding headers.
2. Many boxes or "sectioned off" elements replaced with Bootstrap cards.
3. The navbar completely rewritten (with dropdowns!) to use native Bootstrap code, while also using a lot of the links generated previously in the footer.
4. Converted the in-site google search to be integrated in the navbar with a bootstrap search bar, rather than an awkward floating box. Mobile friendly!
5. Revamping the footer use the blog and social media links, along with endorsements and company information.
6. Replaced old archaic mailform with a new bootstrap card form, still using the same working angularJS.
7. Removed a number of image classes and inline styling, replaced with premade HTML::Zoom wizardry that makes image classes.
8. Rewrote style for blog post lists to use cards, move styling and repeated code to templates and gutted all blog page specific CSS.
9. Finally agreed on a good format (which began from the start with the navbar) for the top banner image.
10. Actually creating my own blog section, which was now made trivially easy.

Gosh, that's quite a list! So many changes. But how many? well according to git, "683 files changed, 5123 insertions(+), 10806 deletions(-)". Yep, that's a lot. Which is why the grit of these details will be further covered in the next several blog posts, such as this one covering the new navbar and footer, and then the next post which covers the Bootstrap cards used. However if all you wanted to know was that there is a new site, then you've got all the hot info right here!

Don't forget that you can join in this conversation by using the comments form below! Feedback is valuable!

---

Notes

[1] The excellent Polandball comic featuring Germanyball can be found here.

[2] The chainsaw web photoshop was something I tracked down to being on this page, so thank you Jophiel Silverstone for having just the image I needed.

---