DEV Community: Kev Quirk

Core Web Vitals and WordPress

Kev Quirk — Wed, 08 Sep 2021 11:01:39 +0000

Google recently announced Core Web Vitals and it worries WordPress site owners everywhere. There’s no need to be worried; I get a perfect 100 across the board and it’s relatively simple to do.

Here’s how…

Yes, dear reader, it is possible (and relatively easy) to get a perfect score on Core Web Vitals on a WordPress site. This site is built on WordPress and I get a perfect score.

What is Core Web Vitals?

First things first, let’s take a quick look at what CWV actually is. If you go and test your site, its performance will be measured against three attributes.

Largest Contentful Paint (LCP) – This is the time it takes for the largest piece of content to appear on screen.
First Input Delay (FID) – This is how long it takes for your website to respond to the first interaction. For example, clicking a menu button.
Cumulative Layout Shift (CLS) – This measures how much your website jiggles around while it loads.

Each attribute is graded on a traffic light system:

If we look at the CWV performance results for my homepage, here’s what they look like:

Note: Total Blocking Time in the image above is equivalent to FID.

Now you know what Core Web Vitals are, let’s take a look at how I’ve managed to get such a score with WordPress.

My recent post on how to speed up WordPress goes into some of the basic things you can do at a high level, but this post will talk about the specific things I’ve done to get those magical green orbs.

Use a good host

I spoke about this in my previous post, so I won’t go into detail here. Forget about shared hosting and get either a Virtual Private Server (VPS) or managed WordPress hosting.

I personally use a VPS from Ionos to host this site. I have the Medium package, which costs £6/month – not much more than shared hosting.

If you have no interest in managing a server yourself, managed hosting is the way to go. I’d recommend Cloudways for this.

Get a well coded theme

I was previously using a theme that I had built myself. It was lightweight and highly optimised, but I had heard good things about GeneratePress. So I tried them out and have since flipped over to their theme.

You don’t need to get buried in the weeds of code with GeneratePress, but you can if you wish. The best thing about it is that it’s extremely well written and my site is actually smaller using GeneratePress than it was with my old theme. I’d highly recommend GeneratePress if you’re in the market for a new theme.

I would also recommend staying away from themes that try to be everything – they look good on the surface, but because they try to do so much, they just end up being a bloated mess.

WP Rocket

WP Rocket is the secret sauce that underpins everything. I have a fast server, a well coded theme and now WP Rocket comes in and caches everything so it’s served really quickly.

To add some extra juice to WP Rocket, I also sprinkle some BunnyCDN fairy dust on top to help serve the static assets of my site all over the world.

If you don’t want to shell out for WP Rocket, Jetpack Boost is also a great caching plugin that’s free.

Conclusion

To run such a stack is fairly expensive, but I feel the performance it provides is worth it. The result of my investment is a website that is highly performant and easy to manage.

The price I pay isn’t actually that much more than some crappy shared hosts. For example, BlueHost’s awful shared “Pro” hosting is nearly £20/month and your site would be orders of magnitude slower!

So there you have it, folks. It’s fairly simple to have a highly performant site on WordPress.

If you’re running WordPress and want some help improving its performance, please feel free to contact me and I’ll see what I can do to help.

The Hunt For Better WordPress Hosting

Kev Quirk — Fri, 03 Sep 2021 15:44:46 +0000

I’ve recently been trying to improve my WordPress hosting workflow, and the related costs involved. It hasn’t been a great success so far.

Before we get into the meat of the post, let me take a minute to set the scene here, dear reader. I have what I would consider a fairly complicated and expensive stack for a personal website such as this.

Here’s the details of the parts that make up my WordPress hosting stack and the associated annual cost:

Line item	Annual price ($)
VPS hosting	$105.00
Yoast Premium	$123.00
Newsletter Glue	$76.00
WP Rocket	$49.00
Updraft SFTP Plugin	$16.50
Bunny CDN	$12.00

Annual total:	$381.50
Monthly total:	$31.79

So all in, this site costs me approximately $380.00/year, or $30.00/month. That’s around £275.00/year, or £22.00/month for my fellow brits. 🇬🇧

What isn’t factored in here is my time. Since i use a self-hosted VPS with Ionos (highly recommend them by the way) I have to maintain the OS and application stack. Maintenance is made way easier by running Plesk on the server, but it’s still an overhead nonetheless.

I consider this stack to be very expensive for what basically equates to a hobby. Now I could get my WordPress hosting way cheaper, but as a result of my investment, I get a perfect lighthouse score.

My perfect lighthouse score

I’m very fortunate to have a well paid job, but this is still a lot of money. There had to be a better way…?

The hunt for WordPress hosting

Recently I’ve been looking at Andy Bell’s most excellent learn Eleventy from scratch; and I have to say, it had me seriously thinking about yet another switch in blogging platform.

But after a week or so of playing around with it in my spare time, it became apparent that it would be a time sink, just like when I ran Jekyll previously and ultimately switched back to WordPress.

I didn’t want to be in that same boat again, plus I love the WordPress writing workflow. Gutenberg is a joy to use and I’ve got my whole workflow down at this point.

So I started hunting for WordPress hosting that would continue to be performant, yet save me a few quid and hopefully, some time too.

Managed WordPress hosting

I decided that managed WordPress hosting was probably a good way to go. As there’s no server, OS or application stack for me to manage. Plus, they often come pre-optmised so I can do away with WP Rocket and Bunny CDN.

Cloudways

My first attempt at managed WordPress hosting was Cloudways, who are basically an intermediary between users and VPS providers, like Digital Ocean and Linode.

They build a VPS and manage all the stack automatically. It’s a great service and lighthouse tests show that it’s gets pretty much perfect scores too. My performance score dropped from 100, to around 97. So still very happy with that.

Because Cloudways servers are optmised out of the box, and use their free Breeze plugin for caching, I would no longer need a WP Rocket subscription. Having said that, they recommend a 2GB VPS, so their service would cost me $22/month.

That’s more than double the price of my current VPS. So anything I would save by ditching WP Rocket would be off-set by the hosting charges. Therefore, in the long run I’d be around $100 worse off every year:

Line item	Annual price ($)
Cloudways hosting	$264.00
Yoast Premium	$123
Newsletter Glue	$76.00
WP Rocket	$0
Updraft SFTP Plugin	$16.50
Bunny CDN	$12.00

Annual total:	$491.50
Monthly total:	$40.96

EasyWP

Cloudways was great, but too expensive. So next up I decided to try EasyWP by Namecheap. I had used them in the past and seemed to remember them being pretty good.

I signed up for the Turbo account as the site said it had more resources, plus SSL and CDN services thrown in. All this for around $35/year (first year is discounted by 50% so full price is $70/year) – almost too good to be true!

If something looks too good to be true, it usually is.

A very wise person.

I was surprised that a free SSL certificated is touted as a selling point these days, with services like Let’s Encrypt being commonplace these days. Anyway, what I was really looking for here was the performance and CDN combination.

I set everything up and migrated my site over to EasyWP using a temporary domain, but I had no option to claim my free SSL certificate. I contacted support, only to find that there was a prerequisite where the domain in use had to be managed by Namecheap.

Namecheap is my domain registrar, but I use ClouDNS for all my DNS services. So I begrudgingly changed the Name Servers back to Namecheap so I could setup the SSL certificate.

Limping along

I could now claim my free SSL, but found that this would take “a few hours” to process. Considering Let’s Encrypt takes less than a minute to provision, this surprised me. Anyway, 3 hours later I had my SSL working – time to get the CDN sorted.

After reading Namecheap’s how to guide on setting up the CDN with EasyWP, it quickly became apparent than the CDN offering was a basic one that needed to be upgraded for anything over 50GB of traffic/month.

This site uses way less than 50GB of traffic/month, so not the end of the world. But I felt like it was a poor show from Namecheap that their CDN offering was Billy basic.

After setting it all up, I had issues with caching and not being able to clear it. I spoke to support and they manually cleared the cache for me, but they couldn’t fix the issue. So they logged a ticket with L2 to have the problem sorted long-term.

Finally I was limping along, but all these little niggles left a bad taste in my mouth. I did a lighthouse test and it returned scores of mid-80s for performance, and my best practices score was somewhere in the high 70s.

It seems the EasyWP caching isn’t as good as that of WP Rocket or Cloudways. So after all that work, my performance had dropped fairly significantly.

The WordPress dashboard was where I really noticed the reduced performance. On my current server and on Cloudways, the wp-admin dashboard was snappy and responsive, but on EasyWP is felt bloated and lethargic for some reason.

I had lost a fair amount of time, and saved little money. So I decided to ditch EasyWP too.

What now?

Well, I’m back on my original setup and nothing has changed. Performance is still great, but my fairly significant financial outlay remains.

There’s a fair amount of time left on my various contracts with my hosting provider and plugins, so I can afford some time to think about what I’m going to do long-term. But at the moment, I feel like the best WordPress hosting solution for me is…drumroll please… what I have now! 🤦‍♂️

To save some some cash, I don’t think I’ll renew my Yoast Premium subscription. I’ve used their free plugin for years, and wanted to contribute back to the project, but the only Premium feature I use are redirects which can be easily achieved using .htaccess.

That’s a total saving of $123/year over what I have now. So it’s certainly something. I don’t know, this whole thing is a minefield; but I still have plenty of time to decide what I’m going to do with my WordPress hosting.

In the meantime, if you have any recommendations as to what I should do, please use the reply button below to send me an email.

How To Restore The Default PiHole Block List

Kev Quirk — Wed, 14 Jul 2021 21:55:50 +0000

PiHole is awesome. I use it on my Synology via Docker and it’s been working great for years. But what if you get a little too trigger happy with the block list and end up with too many? In this post I’ll show you how to restore the default PiHole block list.

Psst… if you’re not interested in all my pre-waffle, click here to skip to the solution.

The reason I’m writing this is because I’ve done this exact thing. I went bat shit crazy with PiHole block lists and ended up with over a quarter of a million domains blocked.

That sounds great in principle, right? Woooh! No more ads! Well, yeah, kinda. But it also had the undesired effect of constantly causing issues on my network.

I was finding that I had to regularly disable PiHole to troubleshoot connectivity issues. Shock horror, 90% of the time my ridiculously large block lists were to blame.

Why restore the default PiHole block list?

I started using a number of additional PiHole block lists a few months ago, and since then I’ve noticed occasional connectivity issues when on my home network.

However, I’ve been using PiHole for a couple of years now and never had any issues when using the standard block list (which still has over 80k domains at the time of writing this).

My PiHole dashboard

I decided it was time to ditch all the additional block list and use the default PiHole block list alone. Problem is, I had no idea which list was the default!

Which is where this post comes in…I did some research and worked out which is the default list.

Restoring the default PiHole block list

The first thing you need to do, is login to your PiHole’s dashboard, then navigate to Group Management > Adlists.

Once you’re in the Adlists page, you should see a list of all the adlists you have added to your PiHole. It will look something like this:

Now, you may have removed the default Adlist, or it may still be there, buried in the depths of your many block lists. The default PiHole block list is as follows:

https://raw.githubusercontent.com/StevenBlack/hosts/master/hosts

All you need to do is look for this in the list, and delete everything else. If you removed the default list, just re-add it by pasting the URL above into the Address field on the Adlists page.

I would also recommend adding a comment to the default PiHole block list so you know which is the main one in the future. Once you’re done, it should look something like this:

The final step is to update Gravity, which is the cumulative list of blocked domains. To do this, navigate to Tools > Update Gravity. Then click on the Update button.

PiHole should now parse the default block list and remove any domains that aren’t on it.

That’s it, you’re done! Congratulations, you just restored the default PiHole block list. Not that difficult, is it?

Final thoughts

I’m going to continue running the default PiHole block list on its own for a while to see if there continues to be connectivity issues on my network.

Once I’m happy, I’ll probably add individual lists, one at a time, then re-test for a while. With a bit of luck, this will help me identify any problematic lists.

There are tonnes of block lists out there, but if you want a list of additional block lists in all kinds of categories, check out The Firebog.

Are you using a million and one block lists with your PiHole? If so, are there any you would recommend?

A Sombre Goodbye To Linux

Kev Quirk — Sat, 10 Jul 2021 21:27:13 +0000

I recently wrote about why I think complaints about the stability of Windows are unfounded. Since then, I’ve actually said goodbye to Linux on all my machines and I now run Windows 10 exclusively. Here’s why…

The TL;DR is that I became sick of the many little issues with Linux. I just want my OS to get out of the way so I can crack on and get shit done.

My frustrations with Linux

I was running Kubuntu on both my laptop and my desktop, but I’ve used a number of other Linux distros over the years too. Ubuntu, UbuntuMATE, Xubuntu, Fedora, KDE Neon and many more.

My biggest frustration with pretty much all of the distributions I had run was the sheer number of ways to install applications. I had some that were DEBs, others were Snaps, a couple of Flatpaks and an AppImage to finish it all off.

I didn’t use the various mechanisms for installing software by choice. Either applications were only available on some of these platforms, or they had issues, so I had to defer to another way of installing.

On Windows, whether it’s an EXE or an MSI, it’s all the same process. You download the package, click next > next > finish and you’re done. No issues, no fuss. Just done.

I don’t have to waste time troubleshooting a package that isn’t integrating with the system properly, or looks like it’s straight out of 1995 because no theming is applied for some unknown reason.

Example of Inkscape with no theming applied

Sure, there’s no package manager in Windows, and their store is nothing short of atrocious. But I don’t use their store, and all the apps that I use on Windows have an update mechanism within them, so they don’t stagnate.

Time is precious

I first started using Linux in 2010. Back then I had lots of free time to tinker with my system and learn new stuff. It was exciting. If I came across an issue, I could afford the time to troubleshoot and fix it.

Fast-forward 11 years and things have changed dramatically. I now have a stressful job, a wife and 2 kids. My computers need to just work. I don’t have the time to piss around with them.

Let me give you a couple of scenarios that explain how thing can go today…

Scenario 1

It’s Saturday afternoon. I’m about to go for a walk with my wife, kids and dog. I’m doing a bit of work and need some notes that I recorded on my phone using Standard Notes. To save time flipping between mobile and desktop, I decide to quickly install the Standard Notes desktop app.

I start with the Snap package. Once I run the application, I get a weird error message about the Ubuntu key-chain and local storage.

I spend an hour or so troubleshooting the issue, admit defeat and log an issue on GitHub. I end up installing the AppImage to get around it, but now I’m having issues with launching the AppImage and having it integrate with my system.

Another hour or so passes and I find that I need to install the AppImage Launcher package to get it to work correctly on my system.

Approximately 2.5 hours later I have Standard Notes installed and I’m good to go. It’s now too late to go for a walk as we will be having dinner soon. Afternoon with the family wasted. 😥

Scenario 2

Same thing, except this time I’m on Windows. I download and install the Standard Notes EXE. It works as expected and 2 minutes later I have the app working on my desktop.

I finish my work and go and enjoy a lovely afternoon walking around the countryside with my family.

Big difference, huh?

Ultimately, I’d much rather be spending time with my family than wasting it troubleshooting issues. I bet right now you’re probably thinking something along the lines of…

Kev! This is a problem with the Standard Notes package, not Linux!

Linux folk everywhere

You’re absolutely right, Linux folk. But this scenario is by no means unique. By way of a quick list off the top of my head, here are a few of the I’ve had to work around while using Linux:

Massive system tray icons for various applications.
No theming on certain snap packages.
Having to install certificates to get Citrix receiver working.
Firefox crashing pretty much every time I open it.
Spell check not working on Typora.
Having to install a separate package for spell checking in Ghostwriter, once I realised I couldn’t get Typora working properly.

Yes, these may all be application issues, but they’re issues that simply don’t exist in Windows.

Privacy (or lack of)

Yep, privacy is an issue now I’m using Windows 10. I’m aware of that, but I’d rather sacrifice some personal data and be able to spend precious time with my family, than be completely private and miss that time.

Windows 10 can be made more private relatively easily. It will never be as private as a Linux distribution, and that’s regrettable, but for me the balance of getting shit done vs messing around with my systems is worth it.

Closing thoughts

I’m sure I’m going to get a lot of heated responses to this post. I get it, Linux is better than Windows in a lot of ways. But, as much as I hate to admit it, Windows is better than Linux in many ways too.

I still run Linux on my servers, so it’s not like I’m completely ditching Linux. Lets be honest, there’s no comparison between Linux and anything else in the server space.

I may come back to Linux at some point, and I’ll certainly try various distributions in VM/live environments whenever time permits. But for now, I’m a Windows guy.

Have you replaced Linux with Windows for similar reasons? Or do you find Linux to be hands down the best OS out there? I’d love to hear your thoughts.

Online Conversations & Website Engagement

Kev Quirk — Sat, 03 Jul 2021 12:33:53 +0000

I was reading a post on online conversations by Manu last night, and the whole thing resonated with me. So I wanted to jot down my thoughts about online conversations and why I think it’s broken.

I’ll keep saying it till the day I die, or until someone invents something better: private conversations via email. If you care about discussing something with someone, like genuinely care, try contacting them directly, in private, via email.

Manu Moreale

A couple of years ago, I removed all comments from this site. It’s a WordPress site, so enabling comments is trivial. However, I found that the vast majority of the comments I was getting were along the lines of this:

If it wasn’t my pal Some Internet Guy it was spam comments, usually about viagra, or sometimes trolls wishing me dead. Which is always nice. 😍

Luckily for me Akismet caught most of the spam, but I still had to wade through Some Internet Guy and his ilk’s useless comments on a daily basis.

I still wanted online conversations

Problem was, despite all the useless comments, I still wanted the engagement from genuine readers, as that’s the main reason I write content. So I replaced the comment form with a simple button that said Reply via email , which linked to my email address.

You can still find that button at the bottom of this (and every other) post on this site!

At first I wasn’t sure it would work. But a couple years on, I’m happy to report that it has. I’m sure I miss many useful comments, as a lot of people are less likely to send an email than write a comment. Mainly because there’s more involved in the latter, I think.

But that’s precisely why it has worked (I think). You see, this very small barrier of having to click a button, compose an email and send it just to me means many don’t bother. Those that do aren’t looking for traffic to their site, like Some Internet Guy. They’re genuinely interested in the subject of the post, and just want to discuss it further.

I’ve had email conversations last weeks, and some people who have emailed me have kinda become friends off the back of it. I don’t think that would have happened if I was still using comments.

I emailed Manu after reading his post, and we had a nice little conversation. He checked out my posts and we had a short chat about some stuff on this blog that he had thoughts on. It was a great connection, as are many of the engagements I have as a result of people emailing me.

And don’t get me started on how much time it has saved me by not having to wade through useless comments every. Single. Day.

Closing thoughts

I’m really happy I decided to remove comments from this site. If you have comments on your site, and you’re having similar problems to me (or if you’re using the horrendous Disqus) maybe consider doing the same?

I’m not saying it will definitely work for you, but it has for me, and it seems to have done the trick for Manu too.

Are you all in on comments on your site? Or do you have nothing at all? Please do let me know your thoughts using the — you guessed it — email button below. 😁

Chasing Visitors – The Web Analytics Rabbit Hole

Kev Quirk — Fri, 25 Jun 2021 15:27:49 +0000

When I check my web analytics the response is often frustration, or even mild anxiety. I’m in a perpetual cycle of thinking it’s not enough! This obsession isn’t healthy, so what’s the point?

Picture the scene – I publish a new post on my blog and share it on social media. Maybe even Hacker News and Lobste.rs too. I leave things a few days, then check my analytics.

The post did fairly well. It garnered a 1,000 or so visits and my site is averaging thousands of visits every month. Life is good.

But then I read a post that’s akin to “How my post went viral and I got 20,000 new subscribers in a week!” I know they shouldn’t, but these posts really deflate me.

I start to ask myself why my post didn’t do better. Why did theirs do so well and my post only got 1,000 visits? Was it a bad post? Am I bad writer? Is the UX of my blog not up to scratch?

The web analytics rabbit hole

At this point I head straight to my web analytics tool of choice, Plausible, and start diving into my traffic. Instead of focussing on my successful posts, I immediately focus in on the posts that I feel aren’t doing well.

I then start searching for ways of improving engagement, improving my writing, just improving.

The fact of the matter is, 10,000 visits in a month would be a bad month for me. And those 1,000 visits to my post is a lot of people. That is successful!

When I first started out, I wanted to get to 100 visits/month. Then it was 1,000. Then my approach flipped and I started looking at why my blog wasn’t performing as well as I wanted it to.

But it was performing as well as I wanted it to!

It’s the same story with my newsletter. It has around 700 subscribers and the last issue had an open rate of approximately 37%. That’s rubbish! I thought. But the fact is, that’s really good, as the average newsletter open rate is around 20%.

What can I do?

I started this blog because I enjoy writing. If anyone reads my drivel, that’s a bonus. I need to remember that.

So I’ve decided to go with the time tested mantra of ignorance is bliss. My Plausible Analytics subscription was due to renew in July. I won’t be doing that, in fact, I’ve removed all analytics from this site.

My hope is that by doing this, I won’t have the data available to go down the web analytics rabbit hole, even if I want to.

I must stress that I’m not unhappy with the service Plausible provides. They offer an amazing service that is a privacy respecting alternative to Google Analytics. The problem is me – I like numbers, but my compulsion with analytics isn’t healthy.

I’m probably going to unsubscribe from the “grow your blog” blogs I read. Honestly, most of them are spammy and I use very little of the advice they produce.

I’ll probably write an update at some point to let you folks know how I’m getting on without my precious analytics. My hope is that I’m more focussed on writing content and engaging with those people who get in touch than worrying about whether I’m getting enough readers. I get more than enough readers!

Do you have web analytics on your site? Please do let me know your thoughts on the topic – I’d love to hear other people’s opinion on this one.

Building A Self-Hosted Journal

Kev Quirk — Sat, 19 Jun 2021 15:45:56 +0000

My wife keeps a journal, and I’ve been thinking about doing the same. Being the nerd that I am, I wanted something techie, so I built a self-hosted journal.

The idea of keeping a journal interests me. My wife says she finds it cathartic to spend a few minutes at the end of each day reflecting and writing her thoughts down.

But having my innermost thoughts in a book that anyone can pickup and read concerns me. It’s not that I have secrets at such (even though we all have something to hide), but I feel that if it is trivial to pickup and read the book, I may subconsciously censor what I write.

Goodness knows my grey matter needs some organisation, so I wanted to plough on start journaling, albeit without a book.

I needed a technical solution…

Technical journaling options

I recently heard about Automattic (the company that owns WordPress among other things) acquiring Day One. I didn’t know anything about Day One, but assumed it would allow me to sync my journal anywhere.

Unfortunately that’s not the case. All I could have done with Day One was sync to their proprietary platform. If I’m not prepared to have a book in my home with my grey matter drivel inside it, there’s zero chance I’m going to store it on a random server somewhere.

There were other options, but they were all similar to Day One in terms of storing my journal. They were a non-starter too.

I needed a self-hosted journal…

Self-hosted journal options

A quick search showed some reasonable options for my journal, this one being the most promising. Problem is, I would have needed to faff around with infrastructure to run my journal on.

I didn’t want to spin a dedicated server just for my journal, and even though I can use Docker on my Synology, like I did with Pi-Hole, I’m not familiar enough with it to host something like a journal.

So I went with what I know best… WordPress!

I can easily run WordPress on my Synology and with the WordPress app on my phone/tablet, it would be trivial to add posts every day. Originally I wasn’t going to expose my journal to the Internet, but if I wanted to use the WordPress app, I needed to. Plus, being able to add entries to my journal from anywhere is really helpful.

Instead of exposing the entire thing to the Internet, I installed a couple of plugins that lock down my self-hosted journal and make it work how I needed it to.

Protecting my journal

First thing I needed was to password protect my journal. That’s easy, I installed and activated the Force Login plugin and hey presto! My journal required a login to see any of the site. To add an extra layer of security, I added the Two Factor Authentication plugin to, you know, add multi-factor auth to my journal (that’s very important).

I also wanted to change the login screen slightly, so I installed the ColorLib Login Customiser so I could make some tweaks to the login page. After 5 minutes playing around, here’s what the homepage (or any page if you’re not logged in) looks like:

My self-hosted journal theme

I wanted something really sparse for the actual theme of the site. My journal doesn’t need pages, contact forms, comments or any of that jazz. I just need a list of journal entries and a simple way of adding more, should I want to do so via my browser.

I have a GeneratePress Pro lifetime license, so I went with the GeneratePress theme. That’s what the theme on this site uses, so I know it’s lightweight and easy to customise. Lucky for me this simple, self-hosted journal didn’t need much customising.

After 30 minutes or so, I had something I was relatively happy with. It’s just a simple white site with grey serif text. All nice and simple:

The navigation menu has a link to the home page, and a button to add a new entry. I also installed the Hide Admin Bar plugin as I don’t need the WP admin bar on the front end.

That’s it, I was done. In total it took me around 40 minutes to go from absolutely nothing to a site that was ready to accept my brain farts.

A week in…

I’ve been writing my journal for around a week now and the process is working well. I’ve mostly written entries using the WordPress app on my iPad during the evening, but there have been a couple of occasions where I’ve written entries from my web browser. So it’s working well.

I don’t think I will need to fiddle with the theme as my journal won’t have any visitors, except me. It’s more a way to accept content, rather than consuming it. As long as the reading experience is pretty good and content-focussed, that’s all I need.

Closing thoughts

Now you may think I’m mad putting my journal online, when I was concerned about it being in a book in my house. What if my site gets hacked? Honestly, I don’t think it will get hacked. WordPress is very secure if you keep it updated and take some simple precautions. The case for WordPress is very compelling in my opinion.

I could have gone with markdown files, or a note taking app like the brilliant Standard Notes. But I wanted something that was dedicated to the job of taking my journal entries and displaying them. Shoehorning them into a note taking app didn’t feel right.

Markdown files would have probably worked, but adding images to journal entries would have proven difficult from a mobile device. I needed the process to be really simple, or I know I would be less likely to stick to the habit of writing my journal.

All in all, I’m really happy with my little self-hosted journal. I think I can call this little project a success.

Do you write a journal? If so, I’d love to hear about what platform you use for writing yours.

Building A Self-Hosted Journal is original content by Kev Quirk.

Internet Cold Callers & Their Link Sharing Emails

Kev Quirk — Wed, 16 Jun 2021 13:54:22 +0000

I regularly get emails from site owners asking me to link share with a post on their site. But one link sharing request I got recently was a doozey…

I received an email from the “Chief Editor” at WPCity (wpcity[.]com) asking me if I’d be interested in sharing a link to a post on their site within my Gutenberg custom colour palette post. The email said the following:

My link sharing reply

Now, this kind of email grinds my gears at the best of times, but this one took the biscuit. Mainly because the author has not only bothered to put the most basic of info in there, but also tried to fob me off with adding a link to my site in some random URL as a thank you.

I’m mean, c’mon! I don’t expect him to have researched my life story, but at least use my bloody name!

Most of the time I ignore these emails and move on, but this time around was different. I click on the reply button as fast as my index finger will allow, and hit our mate Jarrod up with a response to his “kind” request. Here’s what I said:

It’s a one-way street

A couple of weeks ago I asked a question on the Blogging for Devs Community about responding to these kind of queries. There was some good discussion on there (sorry it’s a private community, so I can’t share the link – you should join though ) which centred around this all being a one-way street.

You see, it kinda goes like this:

Person A (in this case our pal Jarrod) reaches out to the site owner of a site that usually has more presence than theirs, asking for a link to be added to their site.
As a thank you, Person A will share your link on their social media channels which usually adds little value.
Person A gets a link on a site that has more impact, thus improving the reputation of their site in Google’s eyes.
Person B gets absolutely nothing from the transaction.

Now this isn’t always the case, of course. There are times where sharing links with Internet compadres makes sense. These can be mutually beneficial; but like I said at the top of this post, I receive multiple emails similar to Jarrod’s every day. Of all those emails, there have only been a couple of occasions that I’ve felt there would be anything in it for me.

Closing thoughts

So my amigo Jarrod hasn’t bothered to respond to my email (shock horror). I think I’ll continue to go about my business and not worry too much about him.

If you’re an internet compadre and feel the need to reach out to other site owners requesting a backlink, here’s some Quirky Top Tips™ :

Do some research on the site owner and, you know, use their name.
Make sure your link is in the same field as they are, and that you can actually add value to them in some way too.
Don’t try and scam them out of a backlink by offering up an obvious spammy domain. 🤣

If you’re on the flip side of that coin, or are relatively new to blogging, you’re likely to start seeing these kind of emails hit your inbox at some point. So as word from the ~~not so~~ wise – just be careful as they’re unlikely to benefit you all that much. Plus, if you get it wrong it can seriously hurt your search rankings.

If you have ever had a good experience after receiving one of these emails, I’d love to hear about it. Use the button below to get in touch.

Internet Cold Callers & Their Link Sharing Emails is original content by Kev Quirk.

Is Windows Unstable? Here Are My Thoughts

Kev Quirk — Thu, 20 May 2021 15:15:20 +0000

I hear lots of people in the Linux community say that Windows is really unstable, but how unstable is it really? Here’s my opinion on the matter…

I asked the community over on Fosstodon what they thought about the stability of Windows. I was expecting a lot of responses, but goodness me, there were LOADS of them! You can read the entire thread here.

Even though there were a tonne of responses, most of them fell into one of the following issues:

Blue screen of death (BSOD)
Updates randomly rebooting the machine
Poor performance
Bad privacy practices
Bundled software

Some of these I agree with, but not all of them. A few of them don’t actually relate to the stability of Windows at all. So I wanted to spend a bit of time writing out my thoughts on whether Windows is actually stable or not.

Is Windows actually unstable?

So looking at those 5 buckets again, it’s only really BSOD and the updates that pertain to the stability of Windows, in my opinion. Yes, the others are problems, but they don’t affect the stability of the OS.

Personally, I think the feedback around updates rebooting the machine automatically and BSOD is quite outdated. Probably as a result of many of the people providing feedback being Linux users for a long time. Or, dare I say it, a certain level of bandwagonsim maybe?

Blue screen of death

This is purely anecdotal, as I can only draw on my own experience, but I don’t remember the last time I saw a Windows 10 BSOD. I have a Windows 10 installation on my desktop computer, and my Wife’s laptop runs Windows 10 too. I’ve never seen either of them BSOD. Not a single time.

Further, I also have Windows 10 on my work laptop, and my work virtual desktop. Plus, all of the machines in work run Windows 10 too. There’s hundreds of them in my office and I have never seen a BSOD on anyone’s machine. I’ve never even heard someone complain about it.

Surely if the BSOD was as prevalent as the Linux community makes out, we would hear Windows users shouting about it at least some of the time?

Updates causing a reboot

Again, I’ve simply not experienced this. Now, back in the Windows 2000/XP days, yeah I think we all experienced this. However, for many years now, I’ve not seen this happen.

The user experience I’ve had is a notification to say that there are updates pending, then a little orange bubble on the shut down icon to remind me that I need to reboot to install updates.

Again, if this was a common as the Linux community makes out, how would anyone on Windows get any work done?

Poor performance

Let me say this first – poor performance doesn’t mean that Windows is unstable. That aside, I don’t think Windows 10 actually performs poorly.

I’m in the privileged position to have a relatively powerful desktop, but I have to say I don’t notice any performance difference between Linux (I’m currently running Kubuntu 20.04) and Windows 10.

Windows 10 is certainly more RAM hungry than Linux though. For example, I’m currently running at around 8GB RAM used, whereas on Linux, running similar applications is around 6GB RAM.

But using more RAM doesn’t equate to poor performance unless you’re actually running out of RAM. I have 32GB RAM on my desktop, so I’m good with 8GB RAM being used. Overall, Windows performs just as well as Linux for me.

Bad privacy & bundled software

While I agree with this wholeheartedly, once again it doesn’t equate to instability in Windows. There are things you can do to make Windows 10 more private, and I strongly recommend you do them if you’re running Windows 10.

Unfortunately, there’s no way I’ve found to get rid of all the rubbish software that Microsoft bundle in, other than perusing the add/remove programs screen after the OS has been installed.

Very annoying.

Linux isn’t innocent of this though either. A lot of distributions bundle a number of software applications that I don’t use. Luckily for me though, the Ubuntu devs have solved this for me by offering a minimal install option.

If only Microsoft did the same…

I don’t think Windows is unstable

Yes, Windows has its problems. But in my experience (and I must stress again – this is all based on just my own experience) Windows 10 is not unstable.

In fact, I would go one further and say that Windows 10 is actually a really good operating system. Once you’ve sorted the privacy concerns and uninstalled all the junk.

I use Windows 10 on my desktop 90% of the time now, mainly because I can’t connect to my corporate network in Linux. Because of this, I’ve built a pretty solid workflow in Windows 10 and, much like Linux, it just gets out of my way.

My Windows 10 desktop

Also, Windows 10 is pretty much a rolling release, so I’m unlikely to need to reinstall any time soon. Bearing all this in mind, I’m seriously thinking about ditching the Kubuntu 20.04 installation from my desktop and just having Windows 10. I will continue to use Linux on my trusty ThinkPad, however.

Have you ditched Linux in favour of Windows? Do you think Windows is unstable? I’d love to hear your thoughts.

What’s The Difference Between Padding And Margin?

Kev Quirk — Wed, 07 Apr 2021 15:19:12 +0000

The difference between padding and margin is a bit of a quandary for CSS newcomers. This post explains the difference between them.

If you’re into web design, like me, then you will have likely wanted to increase or decrease the spacing between elements on a page. But should you use padding or margin? Actually, what’s the difference between them?

I’ve had this post in my list of drafts for some time now, because I struggled with this too when I first started out. Someone asked this very question on Fosstodon recently, so I thought it was a good time to finally write this post.

The difference between padding and margin

To best explain the differences between padding and margin, I’m going to use a fake navigation menu. I’m using a nav menu as they tent to need both padding and margin, especially if you want to make the menu items look like buttons.

So here’s what the menu looks like by default. Not much of an actual menu, but rather an ugly string of text instead, right? That’s where our padding and margin comes in.

What is padding?

To demonstrate padding, let’s start by adding a red dotted border around each menu item, and a yellow background:

Next we’re going to add some padding to each menu item. If we look at each item, padding would be the space inside the red dotted border. So by adding padding, we’re basically making the inside of the box bigger.

Because padding is applied inside the box and the box has a yellow background, the addition of padding makes the yellow background larger. Here’s what our menu looks like with some padding added:

What is margin?

We’ve added padding and our yellow boxes have increase in size, but the space between our boxes is still tiny and it looks weird. That’s where margin comes in.

So if padding is the space inside our box, margin is the space outside of it. Our menu items look a bit like buttons now, so let’s add some margin to increase the spacing between each of the “buttons”:

Now that we’ve added both padding and margins, things look a lot more like a traditional navigation menu. It’s a really ugly menu, but it’s looks like a menu nonetheless.

Where can padding and margins be applied?

Both padding and margin can be added to the top, bottom, left and right of an element and they can be expressed using a number of units of measure. Some people like px, others like em. I personally like rem as it’s a dynamic measurement that is based off of the font in use. Here’s some examples of margin and padding in use:

nav a {
  padding-top: .5rem;
  padding-bottom: .5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

nav a {
  margin-right: 1rem;
}

Take a look at the padding in CSS above. Four lines of CSS to add padding to all 4 sides of an element is pretty inefficient, right? Lucky for us there’s a short hand way of doing it, like this:

nav a {
  padding: 1rem .5rem;
}

This snippet of shorthand CSS tells your browser to apply 1rem of padding to the top and bottom of the element, as well as .5rem of padding on the left and right. If you want to use a single line, but set different padding on every side, you can do so like this:

nav a {
  padding: 1rem .5rem 0 2rem;
}

The padding declarations start at the top side of the element and work their way around clockwise. So the code above is adding 1rem to the top, .5rem on the right, nothing on the bottom and 2rem on the left. You can use the same methods with margin too.

Putting it into practice

If you want to have a play around with padding and margin on my fake navigation menu, feel free to play around with a CodePen I created. You can edit it here.

Conclusion

Hopefully this post has helped you to not only identify the differences between padding and margin, but also given you some practical tips on how to implement it into your own CSS stylesheets.

If you did find this post useful, please do let me know and I’ll start doing more little snippets like this.

If you want to see more content like this, give me a nudge on Twitter.

How To Speed Up WordPress

Kev Quirk — Wed, 17 Mar 2021 15:40:00 +0000

WordPress has a reputation for being really slow, but that isn’t true. This post talks about how I speed up my WordPress site to get a perfect 100 on Google’s PageSpeed Insights & Lighthouse speed metrics.

Honestly, there no magic involved here. Speeding up a WordPress site is really simple, it just requires a little bit of forethought and a few quid invested from your wallet.

Why is WordPress slow?

Before we look at ways to speed up WordPress, it’s important to understand the problem we’re trying to fix. The fact of the matter is, WordPress is not inherently slow ; while slowness can come from multiple sources, it’s usually caused by one (or both) of the following issues:

Rubbish hosting.
Bad code.

That’s really all it boils down to, folks. If you’re hosting your site with a shitty shared host, like BlueHost or HostGator, then you’re going to have problems.

Conversely, if you have bundled 20+ plugins into your WordPress site so that it does everything except cook your breakfast, then again, you’re going to have performance problems.

Same goes for themes. If you have a theme that tries to cater for every possible design permutation possible, there’s going to be a tonne of wasted code you’re not using.

A typical “multi-purpose” WordPress theme

How fast should a site be?

It’s all well and good talking about speeding up WordPress, but what constitutes a fast site? Is a 10 second load time ok? What about 5 seconds? That’s pretty quick, right? 3 seconds? Now we’re talking, surely?

Well, some clever boffins did some research and established that if your site takes more than 3 seconds to load, 57% of visitors will leave before it’s done loading (source).

So the answer is a MAXIMUM of 3 seconds , but make it as quick as possible. For example, this site is running WordPress and according to GTMetrix it loads in 0.6 seconds. I’m happy with that.

Speeding up WordPress

So now we have an idea of what causes WordPress to be slow, let’s look at some solutions, shall we? My recommendations for speeding up a WordPress site are 7 fold:

Choose a high quality host.
Pick a theme that doesn’t try to do everything.
Be picky with the plugins you install.
Cache all the things.
Use a Content Delivery Network (CDN).
Forget web fonts.
Optimise your images.

1. High quality hosting

As I mentioned earlier, $5/month shared hosting providers are utterly useless. I can’t stress this enough, folks. DO NOT USE SHARED HOSTING. They’re generally over-subscribed – meaning too many customers share a single server – which directly impacts the performance of all sites using that server.

Instead, get a Virtual Private Server (VPS). These are servers that are much more powerful than shared hosting because they have a minimum guaranteed amount of resources that no-one else can hog.

I personally recommend Ionos which is who I use to host this website. What I love about Ionos is that they offer a free Plesk license with all their VPS packages, so it’s just as easy to manage as one of those shitty shared hosts running cPanel.

I’m using the Medium VPS package from Ionos, which costs just £6/month (~$8.50/month). Considering that BlueHosts basic shared hosting package is £6.44/month ($9/month), the Ionos VPS is actually a lot more power for less money.

2. Consider your theme

I’m going to keep this high level as there are literally thousands of themes out there that you can use. If you’re running a simple blog like me, you probably don’t need a great deal of functionality, so is it worth buying an all-singing, all-dancing theme? Probably not.

I run a slightly customised version of WordPress’ default Twenty Twenty-One theme. It’s simple, looks good and doesn’t have any extra functionality that I don’t need.

The best advice I can give you is to stay away from page builders and “multi-purpose” themes. They try to cater for too many uses and end up being incredibly bloated as a result.

3. Be picky with plugins

I have 11 plugins on this site, all of which add something that I need for this site to function. For example, my plugins add functionality like 2 factor authentication, backups and advanced SEO features.

I do not have plugins that add front-end “features” like lightbox on images, or social sharing buttons. It’s all just extra code that isn’t really needed and is unlikely to be used by most visitors.

By reducing the amount of plugins you have installed, you’re literally reducing the number of lines of code your site needs to run. Therefore your site is smaller and quicker to load. Poorly coded plugins can also introduce security vulnerabilities, so please be really picky about which plugins you install.

4. Cache all the things

The single biggest impact you can have on speeding up a WordPress site, aside from hosting, is caching. It’s massively important.

I compared a number of common caching plugins recently and while they all had a positive impact on my website’s performance, I chose to go with WP Rocket.

WP Rocket is superb. I’ve been using it for a little over a year and a half now and I’m very happy with it. There are other caching plugins available, obviously. If you don’t want to pay for WP Rocket, I’d recommend taking a look at my comparison post and picking a free alternative.

5. Use a CDN

A Content Delivery Network (CDN) basically copies the static parts of your site to servers located all over the world. So if your server is in London, and someone visits from New Zealand, that data needs to be transmitted right around the globe.

With a CDN, there would be a local server, in Australia for example, where your static content will be served from. This means your site would load much quicker.

My CDN traffic plotted on a map

I personally use and recommend BunnyCDN. Their service is excellent and they’re really cheap. For example, the CDN charges for this site cost me around $1/month.

WP Rocket makes using a CDN very simple, as do many other caching plugins. So teaming up WP Rocket and BunnyCDN will have a dramatic impact on your site’s performance.

6. Don’t use web fonts

Web fonts can be used to give your site a unique look. They are served from your server, or a service like Google Fonts. However, font files are really big, so they add a lot of size (and therefore load time) to your site.

Instead, think about using a local font stack, which is a list of system fonts that most operating systems have installed, so they’re loaded immediately from the local computer.

But Kev, I don’t want my site to use ugly local fonts. People hate them and it will make my site look rubbish!

— Website owners everywhere

Well, I hate to burst your bubble, dear website owner, but the only person who cares about your custom fonts is you. Question – do the fonts on this site look rubbish? What about on GitHub or on Google? How about Twitter?

All of the fonts on the sites listed above look fine, right? You may not think “Gosh, these fonts look amazing!” But you don’t give it a second thought either, I bet.

Well, all of the sites above use local font stacks!

So stop using services like Google Fonts, and serve up a local font stack instead. Here are some example font stacks you could use:

# Sans-Serif font stack
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif

# Serif font stack
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

# Monospace font stack
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

7. Optimise your images

Images are generally the single largest element on a web page. So it’s really important to optimise them. For this, I would recommend the ShortPixel image optimiser service.

The ShortPixel plugin will take your images as you upload them to WordPress, and optimise them to reduce their size dramatically.

With ShortPixel you get 100 free optimised images per month, which is fine for most people’s usage. If that’s not enough though, they also have the option to upgrade to paid plans that are relatively cheap.

They also have the option of buying one-off bulk image credits, which are useful for going back and optimising all the images on your site.

As you can see from the image above, I my image sizes are reduced by an average of 62% using ShortPixel. This has equated to a huge 1.25TB of bandwidth that’s been saved!

Optimisating your images is a crucial part of speeding up a WordPress site.

Conclusion

All of my recommendations above are relatively simple to implement and don’t require you to be some kind of web dev genius. By implementing some, or all, of the recommendations above, you will speed up your WordPress site significantly.

Now, there’s always more you can do and if you’re that way inclined, this post probably doesn’t cut the mustard for you. But if you’re a set it and forget it kind of person that just wants a fast WordPress site that you don’t need to worry about, this post should leave you in relatively good shape.

Do you think I’ve missed something? If so, please let me know and I’ll be happy to add it.

Getting started With Git – A Simple Beginner’s Guide

Kev Quirk — Sun, 14 Mar 2021 11:14:40 +0000

I’ve been using Git for around a year now and over the course of that year, it has become a crucial part of my workflow. But getting started with Git is difficult – there are lots of getting started guides out there, but I’ve found many of them to be too verbose for a beginner.

So I decided to write a simple getting started with Git guide that covers just enough for you to get started and no more. Let’s get going, shall we?

I’m not going to mess around with pre-waffle here, like what is Git? and all that jazz. Fact of the matter is, if you’re on this page I’m confident that you probably know what Git is already.

The aim of this post is to give you enough to do the basics with Git and get going. From there you can continue to learn more if you need it.

The rest of this post will assume you’re using GitHub for your remote repositories, but all of the Git commands are the same no matter which service you use.

Git clone
Working locally with Git
- Adding files to Git
- Committing changes
- Pushing changes
Pulling updates with Git
Working with branches
- Changing branches
- Merging branches
Reverting a change
You can now get started with Git

Git clone

This first thing you need in order to get started with Git, is to clone a repository locally. This will be a local working copy of your data, which you will manage.

So let’s say we have a repository on GitHub called example (inventive name, I know), log into your GitHub account and navigate to your example repository so we can clone it.

To clone the repository, click on the green Code button and copy the link.

Note: in the example below I’m using SSH to clone my repository. By default GitHub uses HTTPS. I personally prefer SSH as it’s generally regarded as more secure. If you want to do the same, follow this guide.

Copy the clone link for your repository and head over to a terminal window. First, cd into the directory that you wish to store your local copy of the repository, then run the git clone command followed by the link you copied:

cd ~/GitHub
git clone git@github.com:kevquirk/example.git

This will then clone the repository to your local machine. The output should look something like this:

kev@thinkpad:~$ cd GitHub/
kev@thinkpad:~/GitHub$ git clone git@github.com:kevquirk/example.git
Cloning into 'example'...
remote: Enumerating objects: 6, done.
remote: Counting objects: 100% (6/6), done.
remote: Compressing objects: 100% (4/4), done.
remote: Total 6 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (6/6), done.

Working locally with Git

Fantastic! We now have our example repository cloned locally and we can start working on it. From here you can do pretty much anything you like – you can add, change or delete the contents of the repository and nothing will be changed at GitHub until you do a git push

So let’s fire up a text editor (I personally use Atom) and start working with the example repository. At the moment, the repository is looking pretty sparse, as it only contains a README.md file:

Adding files to Git

Next thing we’re going to do is add a file to our example repository. Create new file called about.md and populate it with some text. Once you’re happy, save the file.

If you now go back to your terminal window and run a git status on the example repo, you should see something that looks like this:

kev@thinkpad:~/GitHub/example$ git status
On branch main
Your branch is up-to-date with 'origin/main'.

Untracked files:
  (use "git add <file>..." to include in what will be committed)
    about.md

nothing added to commit but untracked files present (use "git add" to track)

Git is telling us here that we have added the about.md file, but it is untracked. This means that our new file hasn’t been staged, so isn’t tracked by Git. Let’s stage about.md so that it’s tracked:

git add about.md

If we run another git status the output should now have changed to something like this:

kev@thinkpad:~/GitHub/example$ git status
On branch main
Your branch is up-to-date with 'origin/main'.

Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
    new file: about.md

So about.md is no longer listed as untracked, but Git is now telling us that we need to commit the changes that we have staged.

Note: if you have multiple files to add to your Git repo, use git add * instead. This will add all untracked files within your repository.

Committing changes

We’re really getting started with Git now, aren’t we! The next thing we need to do is commit our changes to Git.

But what does ‘committing changes’ mean, Kev?

— Pretty much everyone

Yeah, I get it. The technical verbiage that Git uses can be confusing. But the process basically goes like this:

Create a new file that is untracked.
You add the file to the repo so it’s now tracked. This is called “staging”.
The staged file is committed to the local repository, which effectively writes that change into the history of the repository.
Finally, changes are pushed to the remote repository. In our case that’s GitHub.

Ok, with that digression out of the way, let’s get back to getting started with Git. We now need to commit the about.md file to our repository:

git commit -m "Added about.md file"

The -m flag allows us to add a commit message. This is very important as it allows us to look back over the history of changes (if needed) so we can make sense of what they were.

The output of the git commit should look something like this:

kev@thinkpad:~/GitHub/example$ git commit -m "Added about.md file"
[main e5fc6eb] Added about.md file
 1 file changed, 5 insertions(+)
 create mode 100644 about.md

Pushing changes

The only thing left to do now is push the changes to GitHub so they are available not only as a kind of backup, but also for anyone else who may be working on this repository.

git push

Once again, the output of your git push command should look something like this:

kev@thinkpad:~/GitHub/example$ git push
Enumerating objects: 4, done.
Counting objects: 100% (4/4), done.
Delta compression using up to 4 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 898 bytes | 898.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To github.com:kevquirk/example.git
   53837c4..e5fc6eb main -> main

If we now flip back to GitHub and take a look at the example repository, we should see that the about.md file has been added:

You will also notice that we can see the commit message next to about.md too. This helps when reviewing files as it will allow you to see which files where pushed with which commit.

Pulling updates with Git

Let’s say that someone else has contributed a new file to our example repository and you want to pull down that contribution.

If we look on our GitHub page, new-file.md has been added, but we don’t have that in our local repository:

To get the latest changes from GitHub, we simply run the following command:

git pull

This will pull down the latest changes from the example repository on GitHub and the output will look something like this:

kev@thinkpad:~/GitHub/example$ git pull
remote: Enumerating objects: 4, done.
remote: Counting objects: 100% (4/4), done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), 749 bytes | 749.00 KiB/s, done.
From github.com:kevquirk/example
   e5fc6eb..7a042b1 main -> origin/main
Updating e5fc6eb..7a042b1
Fast-forward
 new-file.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 new-file.md

If we take a look at Atom again, we should now be able to see the new file:

If we then wanted to work on this file ourselves, we simply make changes then run the git add, git commit & git push commands again.

git add *
git commit -m "Updated new-file.md with new info"
git push

Working with branches

The info above is enough to get started with Git, but now we’re going to take our use of Git to the next level by introducing branches.

How the hell do trees come into this??

— All the people

Branches allow you to work on a copy of your main code in a safe environment. For example, I use Git to manage the theme for this website and I have 2 branches; dev and main. The main branch is the production branch that is used on the live site.

I use the dev branch for making changes to my theme on my staging site. So I play around and make changes to my staging site on the dev branch, then once I’m happy for them to go live on the production site, I merge those changes into main.

In the example above you will see that I have added home.md on the dev branch, then merged it into main. Let’s head back to our terminal and do that shall we?

Changing branches

The first thing we need to do is change to the dev branch. You do that with the following command:

git checkout -b dev

The -b flag here will create a new branch called dev and switch to it. The output on your terminal should be something like this:

kev@thinkpad:~/GitHub/example$ git checkout -b dev
Switched to a new branch 'dev'

From here we can make changes, additions and deletions as normal, but all this work will be done in dev, not main.

I’ve created a file called home.md so lets stage, commit and push that change to dev. This time though, our push command will be a little different as we want to tell GitHub we’re pushing to dev:

git add *
git commit -m "Added home.md"
git push --set-upstream origin dev

The output of the new dev push command should look something like this:

kev@thinkpad:~/GitHub/example$ git push --set-upstream origin dev

Enumerating objects: 4, done.
Counting objects: 100% (4/4), done.
Delta compression using up to 4 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 404 bytes | 404.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
remote: 
remote: Create a pull request for 'dev' on GitHub by visiting:
remote: https://github.com/kevquirk/example/pull/new/dev
remote: 
To github.com:kevquirk/example.git
 * [new branch] dev -> dev
Branch 'dev' set up to track remote branch 'dev' from 'origin'.

Now we’re working in the dev branch on GitHub too. So if you want to push additional changes, you only need to use the standard git push command.

Merging branches

So we’ve been doing lots of work on the home.md file and we now want to merge it into main. There’s a couple of ways of doing this, but the easiest is to do it from a terminal.

All you need to do is flip back to the main branch, then run the merge command to merge changes from dev to main. Finally we push the changes to GitHub:

# Switch back to main branch
git checkout main

# Merge changes from dev
git merge dev

# Push changes
git push

Notice how we didn’t use the -b flag to switch back to the main branch here? That’s because the main branch already exists. We only need -b when flipping to a new branch. If we want to flip back to dev at this point, all we need to do is run git checkout dev as we have already created this branch previously.

If we now take a look at our main branch on GitHub, we should see our new home.md file:

Reverting a change

So let’s say you’ve been working away on your Git repository and you commit a change that adds some text to about.md. Problem is, you’ve now decided you no longer want that text to be on the page.

Now you could just delete the text do another git push, but if you’re working with code and there are multiple changes, reverting an entire commit may be a better solution.

In the image above I’ve added a string of bold text below the title and committed it to my example repository with a commit message of Added new text.

In order to revert this change, we need to find the hash of the commit. To do that, we head to a terminal window and run the following command:

git log --pretty=oneline

The output of the git log command will look something like this:

kev@desktop:~/GitHub/example$ git log --pretty=oneline
371015469f5303244fd4096f7189898e60547f1a (HEAD -> main, origin/main, origin/HEAD) Added new text
afbbee514a4e9148fd12644c3f24e7fcf92d2488 (origin/dev) changed home.md
0cdee70d3457e4d07ef549e9fd1ead94eb09f8bd Added home.md
7a042b1bfad0db6050732992255c7a08c595c4a0 Create new-file.md
e5fc6ebc43c4984cb735df824e42a6cfbac46b84 Added about.md file
53837c4f72d32b56bedbdf2b492c28465c4f0811 Update README.md
e6db6b162289487d31becdbd11688305d8df97f0 Initial commit

The last commit we did is at the top of the list and is shown by the commit message Added new text. This commit has a hash of 371015469f5303244fd4096f7189898e60547f1a.

To revert the commit, take the first 5 characters of the hash and run the following command:

git revert <first 5 characters>

So the correct command will look like this:

git revert 37101

When you run this command you will be asked to provide a new commit message. Git defaults to “Revert [previous commit message]” which is usually fine. Once you’re happy with the new commit message your output should look like this:

kev@desktop:~/GitHub/example$ git revert 37101
[main d02c55c] Revert "Added new text"
 1 file changed, 2 deletions(-)

Now we need to git push the change back to GitHub and if we check the about.md file, we should see that the additional string of text is gone:

Ta da! We just reverted a commit. Good job!

You can now get started with Git

This should be enough to get you started with Git and give you an understanding of what the basics of using it are.

From here there are a tonne of other things you can learn to do in Git, like using GitHub Actions to add additional integrations. I’d strongly recommend taking a look at the official Git documentation if you want to learn more.

Hopefully this post will help some of you get started with Git. Please remember, this is just the bare basics – there’s a tonne more to learn!

Now go forth and become a Git experts, my intrepid explorers!

If you liked this post, please consider following me on Twitter for more.

DEV Community: Kev Quirk

Core Web Vitals and WordPress

What is Core Web Vitals?

Use a good host

Get a well coded theme

WP Rocket

Conclusion

The Hunt For Better WordPress Hosting

The hunt for WordPress hosting

Managed WordPress hosting

Cloudways

EasyWP

Limping along

What now?

How To Restore The Default PiHole Block List

Why restore the default PiHole block list?

Restoring the default PiHole block list

Final thoughts

A Sombre Goodbye To Linux

My frustrations with Linux

Time is precious

Scenario 1

Scenario 2

Privacy (or lack of)

Closing thoughts

Online Conversations & Website Engagement

I still wanted online conversations

Closing thoughts

Chasing Visitors – The Web Analytics Rabbit Hole

The web analytics rabbit hole

What can I do?

Building A Self-Hosted Journal

Technical journaling options

Self-hosted journal options

Protecting my journal

My self-hosted journal theme

A week in…

Closing thoughts

Internet Cold Callers & Their Link Sharing Emails

My link sharing reply

It’s a one-way street

Closing thoughts

Is Windows Unstable? Here Are My Thoughts

Is Windows actually unstable?

Blue screen of death

Updates causing a reboot

Poor performance

Bad privacy & bundled software

I don’t think Windows is unstable

What’s The Difference Between Padding And Margin?

The difference between padding and margin

What is padding?

What is margin?

Where can padding and margins be applied?

Putting it into practice

Conclusion

How To Speed Up WordPress

Why is WordPress slow?

How fast should a site be?

Speeding up WordPress

1. High quality hosting

2. Consider your theme

3. Be picky with plugins

4. Cache all the things

5. Use a CDN

6. Don’t use web fonts

7. Optimise your images

Conclusion

Getting started With Git – A Simple Beginner’s Guide

Table of contents

Git clone

Working locally with Git

Adding files to Git

Committing changes

Pushing changes

Pulling updates with Git

Working with branches

Changing branches

Merging branches

Reverting a change