I found some ‘lost’ blog posts

One of my goals with this blog is to keep a record of my thoughts, ideas, plans and actions for posterity (whatever form ‘posterity’ actually takes). In this sense there are some blog posts that I’m keeping primarily because they record something about my life at the time they were written rather than due to their literary quality. I’ve noticed as I pick through old Facebook status updates that there are things I want to keep simply because they are small incidents from actual life which are not particularly significant in themselves but strung together these snippets do tell a story of me and our family.

For this reason I was delighted to find an old blog backup file from January 2015 which contained about 30 points which were not already on this site so I’ve imported them and are working through them to keep the good stuff. As I look at each one I recall some were never published at the time and had sat in my drafts folder for months (I have a bad habit of half-writing blog posts, a habit I’m trying to break out of). I’ve already tidied a couple of these up (minor spelling and grammatical changes so they make sense) and published them with the dates when they were last saved (both in 2014). Some others were just ideas thrown into text which I am going to do some more work on and post soon. Those which had publication dates I’m posting with those original dates.

Another useful thing about this backup file is that it gives me another data point for a post I’m piecing together mapping out the various web hosts I’ve used over the years. I’ve made so many hops from one hosting company to another that I thought it would be useful to me at least to map these out and also include what I can remember of why I made the choices I did along the way.

Moving house

I have decided to move this website to WordPress. This may seem like no big deal, but it actually means a significant change to how I am approaching and using this site/blog.

My intention for the 2017 incarnation of my website was to use it as a tool for learning html and CSS by coding the site by hand. In some ways I did partly achieve this goal – I have learned a lot. However, I also found that I wanted to use the site as an ongoing repository and record of my writing, plus to find a way to syndicate it with social media feeds as I move away from using Facebook, Instagram or Twitter as the place I post thoughts and instead write first on my own site. I have an inherent distrust of companies that make their money off the data gleaned from the users of their services, and I hate all the advertising that I’m barraged with on the big social media channels.

Recently I stumbled across the ‘IndieWeb‘ folks who embrace a similar ideal of pushing for an open web as opposed to the ‘walled gardens’ of Facebook, Twitter, and other social media companies. Many of the people behind this movement are programmers who code their own solutions to enable interaction with other on the open web and I’m certainly not in that sort of league. But they have also created tools to make life easier for average bloggers like myself, tools such as WordPress themes and plugins – stuff that I am able to implement (if I use WordPress to drive my site).

Discovering these plugins and themes added additional weight to a problem I was facing in having a completely static website; how to notify people of new articles posted on my site. The typical mechanisms to do this are via RSS feeds or email lists, both of which are tricky (as in not possible for me) to implement using html and CSS, the only development tools I have mastered enough to do anything useful with. I did try using a flat-file CMS called Grav last week, but after a lot of fiddling to move my files across to it found that it is still not straightforward to use as a non-programmer.

Another factor in favour of WordPress is that having used it for many years now it takes hardly any thought for me to maintain a blog with it and I really want to put more focus into actual writing and creating content, not spending most of my efforts in trying to get my site simply functional. The articles I had on my static version of the site were mostly ones I had written in the past and I found that there was some good stuff in amongst the trivia I have written over the years. This is the big advantage of cultivating a discipline of regular writing – if I write a lot there will end up being something good produced occasionally. I want to get back to this.

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)

A personal blog

Blogging is dead, why blog? From my perspective, the short answer is, ‘because I want to’. As a longer answer I will give some backstory and explain why I am starting a personal blog.

Over the years since the end of 2009, I’ve had a number of blogs on various platforms (WordPress.com, WordPress.org, Squarespace and Ghost) in combination with half a dozen hosting providers.

My enthusiasm for blogging and frequency of posting has waxed and waned over the years. For a while I published new posts three times a week, more recently it has been less than once in six months. Four months ago I made a deliberate choice to take a complete break from blogging or even thinking about blogging for at least three months, with no expectation of returning to it. The idea behind this was to give myself a break from the blogging mindset in order to assess whether it was truly something I wanted to do or if I was just feeling obligated to maintain the blog I already had.

During that time I also managed to change jobs from one that was exacting a heavy toll on both me and my family to one that is much less stressful and has better working hours. Now that my head has had a chance to reboot I’m finding a rekindled desire to express myself in writing and so the motivation to keep a blog has returned.

Several significant mental shifts have occurred for me during the time I stepped away from blogging. I’ve recovered from a severe and prolonged period of depression, and I’m no longer actively job seeking. Both of these had a large impact on what I thought and what I was willing to publish. Now I’m thinking more positively and am not worried about what a prospective employer might read on my blog so I can feel free to write about any weird oddball topics I want to. One of my ambitions in life is to be an eccentric old man so I need to start practising!

Having had time to consider what I want to write about and whether to simply pick up one of my two existing sites to move forward with, I’ve decided to make a clean start. This will be a blog with no niche, posts will be about whatever I feel like writing or is taking up my brain space at the time. This is a personal blog, the connecting theme is stuff I am personally interested in, no other criteria needs to be met. And because I am entering a new phase of life myself it seems appropriate to start fresh here and let the rest of the story emerge as we go.