Site journal

This page is an ongoing record of the evolution of my website. I began keeping this ‘site journal’ in March, 2017 when I decided to ditch WordPress as the software powering my personal blog and instead learn how to code a website for myself, but the story has evolved since then.

Getting philosophical

4 December, 2017

Today I made a Site Philosophy page. The idea is to briefly explain my working philosophy behind the site and why it is the way it is.

The original idea of having such a page comes from Patrick Rhone and Garrick van Buren and is simply that software (and websites) should have a file explaining the thinking that drives the design and implementation of that software or website.

I agree, partly because it causes you to actually consider what is your thinking on why you’re doing things the way you are doing them. Also I think it helps a visitor to orient themselves with respect to how the site owner has set up the flow of information within the site.

SEO / Google tinkering

1 December, 2017

I have a free SEMrush account and it sends me weekly reports from their Position Tracking tool on the state of my site in terms of search postion for keywords I have set (currently this is simply my name). Generally these reports don’t tell me anything useful so I tend to ignore them but the other day I clicked through to my SEMRush Dashboard out of curiosity to see if I had set things up correctly when I opened my account several years ago then sort of forgot about it.

What I discovered is that to get useful information from their tool I needed to link it to my Google Search Console and that this was broken because my site was not verified with Google. This is because when I dumped WordPress I has a big purge and threw out everything so I could start with a clean slate, this also included the site verification file from Google.

Therefore, today has seen a bunch of small SEO housekeeping tasks being done:

  • Listing all versions of my site with Google, including https, http, www, and non-www.
  • Selecting which version I prefer (https://mikemcarthur.nz, secure and without www).
  • Generating a sitemap. I used a Free Online Sitemap Generator which seemed to do the job OK, I may need to figure out a more effective solution to update it regularly.
  • Adding the sitemap to my site and then directing Google to it’s location.
  • Authorising SEMrush to access my Google Search console data.

In theory my site is small enough and well enough linked that a sitemap is not strictly necessary according to Google. However, they do mention that if a site is new (and this version of mine is), submitting a sitemap can trigger the crawling of the site sooner than waiting for it to be found via other sites linking to it. Currently I’m not aware of any links to my site from anywhere else on the web so it could sit in isolation, un-crawled by googlebot for a long time.

Fixing links

30 November, 2017

After finally finishing my Giant List of Books to Read with its numerous (non-affiliate) links to Amazon, I decided to run a check for broken links in case I’d messed some of them up – a likely problem in a file with so many links. I used a tool I have on my Mac called Integrity which found 360 problem links. Some of these were broken, a few were 301 redirects and a lot were empty links with a hash # in place of a url which were part of the site template I am using.

While none of these were harming my site, I chose to fix all the 301 redirects before they eventually turned into 404s and to finally get rid of all the empty placeholder text which contained the non-existent urls. Obviously, with a static site this entails opening every single html file and editing it – this is why I’d put off removing the placeholders, and also because initially I needed the example formatting to help my avoid screwing everything up.

It took a while but the site currently has only good links in it (that may only last for a week!) and in the process I discovered a bunch of other errors which arose from re-using certain pages as templates for others without changing information such as dates, what navigation menu item is active, and inconsistent footer formatting. So a worthwhile exercise to do occasionally.

Static again

7 November 2017

Moved back to a static site using Amber template

I realised that I miss the fine-grained control you get by hand coding everything, and that trying to make any cohesive story of all the random stuff I’ve ever published is a recipe for insanity. So now I’m back to a hand coded site based upon a theme template that I’m gradually adapting to fit my own needs.

Moved back to WordPress

26 July 2017

At the beginning of July 2017 I switched everything back to WordPress because I was tired of having to update every change on multiple pages by hand. Over the next month I collected everything I had ever posted on my various blogs over the years together on the one site to create a central ‘internet home’ with a long-term goal of minimising my use of commercial social media sites.

This collecting together of all my material was a major task and WordPress was a good platform to use due to the ease of importing other blogs and bulk editing of posts. While this particular experiment did not last very long, it was a useful exercise to gather everything into one basket to assess what I want to keep and what was junk. To some degree that assessment is ongoing as I reformat content from that site and add it to this one. A tedious job, but to me worthwhile in its slowness as I can mull over each ‘piece of content’ (terrible term) and decide if it is really worth keeping.

A working contact form!

30 May 2017

For weeks I’ve been wanting to get a contact page set up on this site since that will be the only feedback I’m likely to get without having comments working. Today I found a very good tutorial based on the Bootstrap framework that I now have working successfully on the site. This is a big milestone for me, giving at least some possibility of interaction with anyone who reads the site and hopefully also a way for any problems I don’t know about to be brought to my attention.

The tutorial is on the Bootstrapious website, written by a guy named Ondrej. The tutorial was easy to follow, logical and had demo files all ready for download. In fact this tutorial made the process so easy it feels a bit like cheating. But this is an important thing for me to get right, especially the php and javascript parts which I’m not at all familiar with yet.

Other stuff I’ve been working on over the last week is adding more actual content to the site, in particular lists of the poems I have read and books I read in 2016.

I have also been using Bootstrap 4 CSS for new material I add to the site. There remain a couple of formatting glitches which I want to resolve before changing everything to Bootstrap 4, this is why you may notice the nav bar changing colour as you move from page to page; the dark nav is Bootstrap 3, the light grey one is the latest version. Obviously the actual colour is a trivial thing, it just makes it easy for my to know at a glance which style sheet each page is using. What makes the transition between the two a little complicated is that the classes do not match exactly between them so the html has to be changed to use the new CSS classes, some of which I’m still figuring out.

Bootstrap

22 May 2017

The website template I am using for this site uses the bootstrap framework. This is very complex to my beginner’s eyes, but does all that I want to be able to do, and a whole lot more. Over the last couple of days I’ve been trying to learn about what all the CSS classes within Bootstrap do and realising that many of them are not useful to me. So toay I began eliminating some stuff that I will not be likely to use. Then I discovered that I have been working on version 3.3.7 which uses a grid system, but there is in fact an alpha of version 4 available which uses flexbox. Having seen how useful flexbox is, I’m going to try to use this on my site, even though it is still at alpha stage and so could have plenty of bugs in it yet.

Stuff I’m removing:

  • Carousel; I don’t foresee a need for this and they do not comply with accessibility standards.
  • Modal box; These annoy me on other sites and I have no immediate use for them.
  • Progress bar styles: no immediate use.

By removing stuff I don’t need I reduce the size of the file and potentially speed up how quickly the site loads. I also have to learn about each CSS class before I decide if it is needed or not. If I delete something important I will learn from the mistake, and if I need something later on that I have removed it is not difficult to add it back in.

A brief fling with WordPress

16 May 2017

Over the weekend just gone I caved in to temptation and had a naughty weekend affair with WordPress

I had been adding some of my old blog posts to the site and quickly tired of needing to update multiple pages each time I added a new page to the site. The reason why most modern sites use a content management system (CMS) becomes obvious when you have to manually update or add links to new content in multiple places. Tools like WordPress make this so easy that I have never given much thought to how many internal links my blogs have had (internal links are good, just tedious to do by hand).

In theory I could use a static website generator to build this site which would cut out a lot of that tedium, but unfortunately none that I know of can be installed on the Chromebook I use at home, and at work I do not have full Admin access to my computer so cannot install them on there either. If I really wanted I could put a request in to IT to install a site builder such as Jekyll on my work machine, but then I’d be restricted to only being able to make updates to the site from there, whereas the way I currently have things set up I can even use my phone to make minor changes if I want to.

So, I did get to wondering if perhaps just using WordPress would be easier – it is. However, it also massively slowed the site down. I know there are ways to improve the performance of WordPress sites, but the difference in response compared to this plain old static site amazed me, and also my reason for building the site this way is to learn. So it was only a brief affair and it is over now, I have returned to html and CSS.

Reset rabbit hole

3 May 2017

Trying to position the site header and navigation on my test page I found there is about a 10px gap between the two of them which I don’t want but this is not due to any margin that I’ve set. Tried a universal reset of * {padding: 0; margin: 0;} but this mushes the entire page together (I guess it overrides all margins and padding). So now I’m heading down the rabbit hole of CSS resets and how the universal selector works.

After becoming convinced tha the universal selector is not the best way to go and reading about CSS resets, I fiddled around with my own styles using the Safari Web Inspector and Chrome Developer Tools (different names for the same sort of thing really) and narrowed the main problem down to <p> margins being set by the browsers at about 8px, accounting for the irritating gap between elements in my page header.

To resolve this, and other potential annoyances, I have set the margins for paragraphs and headings to 0. This is a commonly used reset according to a series of three articles by Michael Tuck, starting with The History of CSS Resets.

Footer problem

1 May 2017

I’ve encountered a small problem, on my ‘Test’ page – the footer is moving up the screen as I scroll down the page on desktop (Safari 9.1.3). Oddly, this is not happening on mobile Safari so I didn’t notice it over the weekend while checking the site on my phone.

Solution: I had added a <main> div to enclose the article, it’s heading and it’s footer, leaving the main page heading, footer and site navigation outside of this div. This caused the site footer and navigation to adopt the <body> styling. To fix the issue I added a <div class=”container”> as an overall page wrapper. Currently the only styling this div has is {display:block;}.

Beginning with basics: Typography

28 April 2017 to 2 May 2017

I am currently reading a lot about basic website design principles, fonts, typography and such like. Expect the site to regress to a very basic layout in the near future as I play around with getting a good readable font and making the text layout optimal. To me this is one of the really important aspects of a good website, it should be easy to read and easy to navigate, with no distractions. Time will tell if I can master this!

I have set the max width of the main content (text) column on my test page to 40em, which equates to 640px as this gives in the region of 15 to 20 words per line which is a comfortable reading length.

A ‘cheat week’

20 to 27 April 2017

Got frustrated with fiddling around with layout issues so found a blog template to use so that I can focus on publishing some real content for a bit rather than having pages full of ‘Lorem ipsum’. I’ve been using a template called ‘Blog Home’ and ‘Blog Post’ from Start Bootstrap, written by David Miller. While a useful way to quickly make the site useable, this setup is more complex than I need or understand currently so will not remain in place for long.

‘Internetting is hard’ tutorials

3 to 14 April 2017

Working through the excellent tutorials written by Oliver James over at InternetingIsHard.com, especially the ones on layout and flexbox. Working through the exercises here made me aware of why using an external CSS style sheet is much easier and cleaner than including the styles at the top of my html files.

Tidying up

31 March 2017

Today’s progress:

  • Used RealFaviconGenerator to make better favicon, Apple icon and icons for Android and Windows devices.
  • Added more comments to my code to make it easier for me to follow
  • Made all pages the same CSS style

Flexing CSS

30 March 2017

Learning about CSS flexbox and grid layouts

Today’s progress:

  • Started with a simple layout of CSS3 Flexible Box from w3schools.com
  • Once I understood the ideas behind flexbox, changed to a layout from Jake Archibald on About and Home pages.
  • Created and uploaded my own favicon and Apple icon images

Becoming responsive

28 March 2017

Learning about CSS media queries to make styling of index page more responsive on small screens.

Today’s progress:

  • Adjusted CSS to provide different styled views for screens that are larger than 600 pixels wide.
  • Added CSS styling to Journal page.

Centered, shadowed and rounded

23 March 2017

Learned how margins, padding and centering works in CSS and html. Used an example by Kroc Camen to create a cool shadowed box on my homepage with rounded corners.

Semantic elements

22 March 2017

Learning about Semantic Elements in HTML5. These make better sense to me than the old generic <div> element.

Today’s progress:

  • Added <header> and <footer> elements to index page
  • Learned a way to display < and > without them being interpreted as code
  • Added margins around body element
  • Began adding some CSS styles to text elements

Small tweaks

21 March 2017

Today I did some reading to get a better handle on some of the html tags I’m using and the ways to organise my site file structure.

Today’s progress:

  • Put the file for this page in the correct place!
  • Link the two pages of the site together
  • Inserted the script and code for Google Analytics

Hello world

20 March 2017

This website is an experiment. I am using it as a way to learn html and CSS and whatever other web coding takes my fancy.

The idea of creating a site like this, hand coded without relying on software like WordPress, has been on my mind for quite some time, but I would like to credit Tom Bennet and a post he wrote called Hand Coding A Personal Website which gave me a final nudge to make this happen.

I am using a basic template (HTML5 Boilerplate) as a quick way to get me started. I am only using parts of the code that I actually understand, so currently there is not much functionality to the site. This is very much a work in progress!

Today’s progress:

  • Organised webhosting
  • Changed nameservers for my domain
  • Created an index page
  • Created a ‘Site Progress Journal’ page (this page)