Menu

Author: Kev Quirk

Hi, I'm Kev and I'm a cyber security professional from England. I use this site to share my thoughts and ideas from time to time.

WordPress Creator Vs The Jamstack

Matt Mullenweg Clarifies Jamstack Remarks

Two weeks ago, Matt Mullenweg made some pointed remarks in an article from The New Stack, calling Jamstack “a regression for the vast majority of the people adopting it.”

I read this post last night and found it really interesting. Especially since I’ve been exploring Static Site Generators again myself. Clearly Matt Mullenweg, the creator of WordPress, doesn’t think that SSGs will hold much weight in the future.

To be honest, I can see where he’s coming from – SSGs are great fun to play with, but as I alluded to in my SSG post (linked above), anything more than a simple site/blog and the thing can become convoluted very quickly. Hell, my VERY simple site is already fairly convoluted to maintain.

SSGs are great as a fun project for a developer, but for the vast majority of web users, I can’t see them taking off. Just imagine someone from the marketing team in a small company trying to update their company’s blog. With an SSG they would have to:

  1. Learn how to use Markdown.
  2. Learn how to use YAML and front matter to get the post’s metadata correct.
  3. Learn how to use Git so they can commit the changes.
  4. Write the post.
  5. Save the post in the correct directory within the website tree.
  6. Commit the changes to their Git repo.
  7. Hope the build triggers and the site updates.
  8. If they don’t have a builder, then they will need to then learn whatever SSG their dev implemented.
  9. Carry out a local build.
  10. Upload the built site using FTP.

Same person, same scenario, using WordPress:

  1. Login to WordPress.
  2. Click New > Post.
  3. Write the post using the WYSIWYG editor.
  4. Click Publish.

This is why I don’t think that static site generators will ever gain the market share that WordPress has.

And that’s fine, by the way – SSGs are really cool and super fun to play with – I’m really enjoying it on my side project; but I wish a lot of devs would stop touting about how amazingly simple they are, as it’s just not the case.

Making A Light Website 08 – Replacing Images With CSS

So My Light Website is looking pretty good at this point, but we can still improve things. In this post we will look at replacing the banner images with some CSS to make the site quicker and lighter.

When I first took you through the process of making a light website, I added a banner to all pages that was a basic image. That image looked like this:

My Light Website image banner

Images are great, and add an interesting dynamic to a webpage, but they add weight and can slow down the loading of a webpage. Plus, it means you have to edit every image if you want to change the look of your site.

So I decided it would be better to change the image with a nice formatted block of HTML & CSS. This will offer us much more flexibility if we want to change something at a later date. It also means that no additional images are loaded, making the site lighter and therefore quicker.

Here’s what the site looks like with the CSS banner implemented:

My Light Website CSS banner

Right, with all that pre-waffle out of the way, let’s get on with implementing the banner in CSS shall we?

Replacing the banner image

If you take a look at the source code of the website in step 7, you will see that the banner image is added to every page with the following line of code:

<img class="home-banner" src="images/home-banner.png" />

This line of code is inside the .main div. On the index.html page, it is line 26. Delete this line of code.

Once you have deleted the code for the banner image, add the code snippet below above the opening .main div.

<div class="banner">
  <h1 class="banner-text">MyLight<span class="logo_dot"></span>Website</h1>
</div>

/* Start of the .main div */
<div class="main">

If we were to take a look at the webpage now, it should look something like this:

That new banner doesn’t really look like much of a banner at the moment, does it? That’s where our CSS comes in so we can format things correctly.

Breaking down the HTML

Let’s start by breaking down what we’ve added with this snippet of HTML. First we add a new div with a class of banner:

<div class="banner">

</div>

Inside this new div, we’ve added a line of header text using the h1 tag. Again, we’ve given this header a class, which is banner-text, so we can apply formatting to this element only.

If we were to leave the banner-text class off and apply CSS to h1 only, it would apply it to every h1 tag on the entire site. So, adding a class means we only affect the banner text with the CSS we add later.

<div class="banner">

<h1 class="banner-text">MyLight<span class="logo_dot"></span>Website</h1>

</div>

Notice the <span> element in the middle of the header? We’ve applied a class to this element too, and we will use some CSS to create the blue dot in the middle of the banner text.

Adding CSS

Now you have an understanding of what the HTML is doing on this part of the light website, let’s start adding the CSS to format things. First we will format the .banner div with the following CSS:

.banner {
  background: var(--lighter);
  color: var(--main);
  text-align: center;
  margin-top: 2em;
  margin-bottom: 2em;
  border-radius: 8px;
}

We also need to add .banner to the responsive section of the CSS stylesheet, this is lines 13 and 22:

/* Make the website responsive */
@media screen and (max-width: 100%) {
  .main, .header, .banner, .footer {
    width: 800px;
  }
}

.main, .header, .banner, .footer {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

This ensures that the .banner div will follow the same rules as the other sections of the site, like the header, main body and footer.

If you don’t do this, the .banner div will not align with the rest of the site and will not respond correctly on mobile devices.

If we take a look at the light website now, it should look something like this:

That’s progress, but there’s no blue dot and the banner isn’t very tall. Let’s fix that, shall we?

Banner text

Next we will change the formatting of the .banner-text class. We will add some padding so that the banner’s background appears a little larger. We will also increase the text size slightly:

.banner-text {
  padding: 1em .5em;
  font-size: 2.5em;
}

If we take a look at the site now, we’re starting to have something that resembles a banner. However, there’s still no blue dot. Let’s fix that next…

Adding the blue dot

For this, we’re going to create a small circle purely in CSS and we will give that circle a blue background. Finally, we will add a small 2px margin so there’s some white space between the dot and the letters.

span.logo_dot {
  background-color: var(--accent);
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 2px;
}

If you want to change the size of the dot, simply change 8px on the width and height elements to decrease or increase the size.

Back to the website and…ta da! We finally have a light website that has a banner written purely in HTML/CSS:

What next?

That’s the banner on the homepage done. Now you can replace the image on the other pages with a similar piece of HTML that displays that page’s title.

For example, this is what the Getting Started banner looks like:

Here we are using the page title within the banner, and we have our familiar blue dot. The HTML for the banner on this page looks like this:

<div class="banner">

<h1 class="banner-text">Getting Started<span class="logo_dot"></span></h1>

</div>

Tidying up

Once you have replaced all of the banner images with the CSS banner, don’t forget to delete the actual image from your /images folder. Otherwise you’re just wasting space on your web server.

Finally, you need to delete the CSS that formatted the old banner image. To do this, delete the following lines of CSS from your stylesheet:

img.home-banner {
  padding-bottom: 20px;
  max-width: 100%;
  height: auto;
}

If you want to inspect the entire source code for this project, you can view it on my GitHub profile.

View MyLight.Website on GitHub

Conclusion

Designing and maintaining a website is a constant thing. It’s not something you just set and forget (well, it’s not for me at least). It’s important to keep trying to improve your site’s code and functionality.

With this update we have managed to make and already light website that little bit lighter. We’ve also been able to make maintaining it a little bit easier, as we don’t need to manage images for our banner.

I hope you found this post useful. If you think there are more improvements/additions I can make to the MyLight.Website project, please do let me know.

Static Site Generators Revisited

I’ve been a WordPress advocate for a while now, but I decided to use a static site generator for a new project. So, has my opinion on SSGs changed?

My wife and I recently adopted two young boys and I wanted a way of sharing that rare and unique experience online. I considered writing about it on here, but decided against it in the end as a lot of my readership are techies. So talking about adoption probably isn’t appropriate here.

I went away and setup a new blog called Dad’s Notebook for those posts. Before building the new blog, I took some time to think about what platform I was going to use.

Initially the decision was easy – I was going to go with WordPress. That’s what I use for this site, and it works really well. But in the end I decided to go for Jekyll as I wanted to learn something new. Plus, if I decided at a later date to migrate over to WordPress, it would be trivial to do.

Setting up Jekyll

I’d never used Jekyll before. Actually, I’d never used a static site generator of any kind, except for a few hours with Hugo one day.

I followed Jekyll’s relatively simple installation guide to get everything setup. Then I started the hunt for a theme, but there was nothing out there that I really liked. Besides, the point of this project was to learn about how static site generators work, so I wanted to get into the nuts and bolts of Jekyll.

Lucky for me they have a really good step by step tutorial on how to setup a site from scratch. So I followed that and spent a few days building my own theme too.

The result is a very basic, but effective blog. It’s still a work in progress, but here’s what it looks like at the time of writing:

Visit Dad’s Notebook

My thoughts on static site generators

Back in April, I wrote about why I don’t use a static site generator. Obviously that’s no longer accurate as I now use one for Dad’s Notebook, but the main message of the post is still the same for me.

I ran a test on a post from this site and Dad’s Notebook, both are around 500 words long and they each have a single image. This site is a little heavier as it has to load comments etc, so I was expecting this site to be a little slower.

The results were surprising as both sites loaded in the same amount of time. This goes to show how good WP Rocket really is, I think.

Page SizeRequestsLoad Time
This Site814KB140.9s
Dad’s Notebook358KB100.9s

If you want to see the test results, they are here and here.

Dad’s Notebook is hosted on the amazing Netlify using a free account, so the performance may be better if I were to pay for it, but I’m very happy with a load time of 0.9 seconds.

Static site generator workflow

One thing I love about WordPress is the ability to login, write a post and hit publish. It’s a joy to use.

With an SSG like Jekyll it’s not much more difficult to be honest, especially when hosting with a service like Netlify (GitHub Pages is also good).

When writing a post for Dad’s Notebook, I fire up my markdown editor and write the post. Once I’m done, I commit the changes to the GitHub repository for the site, and when Netlify sees a change to the repo it triggers a build and the site is updated.

So now Dad’s Notebook is all setup with Netlify, the publishing workflow isn’t much more convoluted than that of WordPress. However, WordPress still offers more in the way flexibility as I can write on the go if I choose.

I could install a Markdown editor on my iPad, but I’m not sure how I would carry out a git push from there. I’m sure it can probably be done, I just haven’t researched it.

Would I switch this site to a static site generator?

I’ve really enjoyed learning Jekyll and how it all fits together. I really like the simplicity of it, but I think that simplicity is due to the fact that Dad’s Notebook is a really simple site. A blog, about and contact pages, that’s it.

If I were to start implementing a lot of the more complicated features of this site, such as comments, a newsletter and some IndieWeb goodness, I think managing the site with Jekyll would become a lot of work.

I’m going to stick with WordPress for this site, but never say never. Having a simple site like Dad’s Notebook on Jekyll is fun, and it adds an interesting dimension to producing content, but I think moving a bigger, more complicated site like this would be too much like hard work.

Domain Squatters Are The Scum Of The Earth

I wanted to register quirk.uk, but arsehole domain squatters are getting in the way and making that almost impossible.

WARNING – this post contains swearing as I’m pissed off.

I have to confess, I love a good domain name and the shorter the better. For example, I own kevquirk.com but prefer kevq.uk for this website as it’s nice and short.

Owning your own domain name is very important and while kevq.uk is a good domain name, I want something that only uses my surname. So I can have kev@quirk.[tld] as an email address. This is then also good for other members of my family.

I already own quirk.cc and a number of other domains, but I’m not thrilled with the .cc TLD. So I went looking for something better…

Domain squatters are scum

I found that quirk.uk had already been registered, but was available for purchase. A .uk domain name costs around £8 ($10) per year to register. So I made an offer that I thought was more than fair – £100 (~$135).

Around 20 minutes later I get an email back to say my offer has been rejected. I went back and asked what they would accept and the domain squatters came back with a counter offer of £750 (~$1000).

Seven hundred and fifty pounds!

That doesn’t include VAT either, which is 20% here in the UK. Since then, the domain landing page had been updated with a slightly discounted price of £659 (~$880). Oh how kind!

quirk.uk for sale webpage

Are you for real?

If it isn’t obvious from this site, my name is Kev Quirk. It’s my personal name, and I wanted to use that domain for personal email hosting. That’s why I wanted the .uk and not the .co.uk domain. I’m not a company, so I have no way to financially gain from purchasing this domain.

Seriously, if you’re one of these domain squatters who makes their living this way, FUCK YOU!

I’d like to say an extra special, giant, FUCK YOU to NVA Online Advertising B.V. who have the audacity to rip off consumers like me all over the world. Fuckers.

I really wish there was a way for people like me, just Joe or Jane Bloggs off the street, to fight back against these wankers. If I can prove my name contains Quirk and I have no financial incentive, should that give me some rights to own the domain? I think so.

If it was being used legitimately, I’d have absolutely not problem with someone else owning the domain. But domain squatters are in it purely for profit and they really are the scum of the earth as far as I’m concerned.

Conclusion

I’m stuck with quirk.cc. It’s not the end of the world, and I realise this is very much a first world problem. But still, it’s shitty that all these fuckers are free to get away with this stuff.

If you know a way in which I can fight back to try and own this domain, more for a moral victory than anything else, please do get in touch.

Until then, I’ll climb back under my rock…

How To Setup Pi-hole On A Synology NAS

Using a Pi-hole on your network is a great way of blocking adverts and protecting you from tracking at a network level. In this post I’m going to take you through setting up Pi-hole on a Synology NAS using Docker.

I’ve been using Pi-hole on my network for a few weeks now and things are going great. I’m sure you can gather than from the name, Pi-hole was originally designed to run on the Raspberry Pi.

But I don’t like the idea of having something as crucial as DNS running on a RPi, so I run Pi-hole on my Synology (I have a DS218+). To get Pi-hole up and running, you could download the image, spin a container with the default settings and it will work.

However, you will end up seeing all the clients on your network bundled under a single 172.x.x.x IP address, which is the Docker gateway IP. This issue on Github talks about the problem in a little more detail.

Ad and tracker blocking will work with the default settings, but to get a true picture of what’s going on with your network, you need to see all the clients separately. So I’ll take you through what settings you need to tweak in order to make this happen.

Setting up Pi-hole on a Synology

Right then, let’s get to work, shall we? The first thing you’re going to need to do is install the Synology Docker app. So launch the Synology Package Centre, search for docker and click on the Install button.

Synology Docker install

Next, launch the Docker app, click on Registry from the left-hand pane and search for pi-hole. You should see the official Pi-hole at the top of the list.

Double-click on the official Pi-hole image to download it to your Synology.

Pi-hole Docker image

Setting up the folders

Now we need to flip to the Synology File Station app. Navigate to the Docker folder and create a new sub-folder called pihole.

Once you have your new pihole folder, create two more folders within it; one called pihole and another called dnsmasq.d. Once done, it should look something like this:

Pi-hole folder structure

Configuring the Docker container

Ok then, back to the Docker app we go. We’ve downloaded the Pi-hole image and we now need to setup the container correctly.

Select the Images tab from the left-hand panel and double-click on the Pi-hole image you downloaded earlier. The container configuration wizard should now launch.

In the first step, give the container a name; I personally went with PiHole, but you can use whatever makes sense to you. Leave Execute container using high privilege unchecked, then click on the Advanced Settings button.

Pi-hole config 01

Once in Advanced Settings, check the box the Enable auto-restart. This will ensure Pi-hole restarts if you ever need to reboot your Synology.

Next, go to the Volume tab and add the two folders you created earlier, mapping them to the following directories:

FolderMount Path
docker/pihole/dnsmasq.d/etc/dnsmasq.d
docker/pihole/pihole/etc/pihole

Once you’re done adding the folder mappings, it should look like this:

Pi-hole config 02

Next, go to the Network tab and enable the option to Use the same network as Docker Host.

Pi-hole config 03

The final step is to go to the Environment tab so we can add/change a few environment variables. There are three variables we need to add, and one we need to edit.

Let’s start with the new variables first:

VariableValue
WEBPASSWORD[your_pi-hole_password]
DNSMASQ_LISTENINGlocal
WEB_PORT8080

For the WEBPASSWORD variable, set this to whatever you want the Pi-hole login password to be. For WEB_PORT use any port you have available, 8080 should work for most people.

Next we need to edit the ServerIP variable. The default value is 0.0.0.0. You need to change this to your Synology’s internal IP address. For me, this is 192.168.0.2.

Pi-hole config 04

Finally, click on the Apply button and start your shiny new Pi-hole container.

Once it’s up and running, you should be able to navigate to http://<synology-ip>:<pi-hole-port>/admin (for me this would be http://192.168.0.2:8080/admin) to access Pi-hole.

Note: This will only be accessible on your local network. I wouldn’t recommend exposing Pi-hole to the Internet.

To login, use the password you created when you added the WEBPASSWORD environment variable. You should now see a dashboard similar to this:

Pi-hole dashboard

Next steps

Now you have Pi-hole up and running on your Synology, you will need to change the DNS settings on your router so that DNS points to your Pi-hole and not your router.

This process all depends on which router you have. So find the DNS/DHCP settings on your router and change the primary DNS server to the IP address of your Synology.

I would also recommend setting the secondary DNS as your router, or a service like Quad 9. So you will still be able to resolve DNS queries if Pi-hole goes down.

Once your client machines start getting new DHCP leases from your router, the DNS changes should take place and you will see the client numbers grow within Pi-hole. To speed up this process, disconnect and reconnect any devices from the network.

Finally, I’d recommend changing the default public DNS servers that Pi-hole uses. Pi-hole uses Google DNS by default and since I’m a de-Googled kinda guy, I don’t like this. Instead I set them to Quad 9.

You can do this by going to Settings > DNS:

Pi-hole DNS settings

Conclusion

You should now be setup with Pi-hole on your Synology NAS. No more ads, no more tracking, and no more ISP monitoring of your DNS. Pretty cool, huh?

In terms of performance impact on your Synology, there will be very little. On my network, the Pi-hole container uses around 30MB of RAM and the CPU usage doesn’t even register. So even if you have a fairly low powered Synology, you should still be fine.

Hosting Pi-hole on the Synology is much more robust than on the Raspberry Pi. While the Pi is great for hacking on, it’s not the right kind of hardware to be used as a server in my opinion.

Finally I’d like to quickly add that if you get use out of your Pi-hole instance, please remember to throw the project a donation. It will really help support this great project and keep it alive.

Removing Ads

You may have noticed that I’ve had an ad banner at the top of this site for a little while now. Previously I was using CodeFund, but since they went under I switched to EthicalAds.

Ethical ads on this site

I kept them for a month to see how well they performed, and the truth is, I made enough off the ad to cover my monthly costs and then some.

However…

Including the adverts has a couple of undesirable effects on my site.

Firstly, the site would load, then a fraction of a second later, the ad banner would appear and shift everything on the page down by a few pixels. This meant that links etc would all shift, so if you load the page and go straight to a link, that would shift down after half a second or so and you would miss the link. Annoying.

Secondly, and most importantly, the ads had a significant impact on my page load times. With the ad enabled, my Page Speed Insight score dropped from 98, down to the mid 70s. In total, it added around half a second of load time to the site. Ain’t no one got time for that!

I take my load times and optimisation seriously, so the advert had to go. My load times are back up to the high 90s on Page Speed Insights and there’s no more shifts after the page loads.

All in all, I’m a happy camper again.

On a side note, if you like what I do on this blog and want to buy me a coffee, I’d be ever so grateful. 🙂

How To Use Your Own Router With Plusnet Fibre Broadband

A while back, I wrote a post on how to use a TP-Link router with Sky Fibre broadband. Since writing that post, I’ve changed ISP to Plusnet.

That post has been pretty successful and has helped a lot of people, so I thought I would write another post on how to do the same thing, but with Plusnet.

Why did I switch to Plusnet fibre?

I didn’t really have any issues with Sky as such, but I decided I wanted to cancel my TV package, so thought it would be good to start hunting for a new ISP too.

I ended up settling on Plusnet for 2 reasons. Firstly, Plusnet officially allow its customers to use any router they like, whereas Sky don’t.

Secondly, Plusnet offer a permanent static public IP for a single payment of £5. This was a huge sell to me, as I have servers that I host at home. I’ve been with Plusnet for a couple years now and I’m very happy with their service.

Anyway, let’s get on with the instructions for using your own router with Plusnet fibre.

Choosing a router

My personal recommendation is the TP-Link AC1200. It’s the one I use at home, and it works brilliantly. If you don’t want to use the AC1200, any router that supports VDSL will work.

TP-Link AC1200
TP-Link AC1200

Using your own router with Plusnet fibre

These instructions will be specific to the AC1200, but the process is pretty simple if you’re using a different router.

The first thing you need to do is connect your DSL cable to your micro-filter, then connect a laptop to one of the Ethernet ports on the router.

Next, open a browser and navigate to http://192.168.0.1. This should load the router management interface. The default password is admin.

CHANGE YOUR PASSWORD!
Your router may prompt you to do this immediately. If it doesn’t, navigate to Advanced > System Tools > Administration.

Setting up your Plusnet fibre connection

Once you have changed the admin password (make sure it’s a good one), you should be greeted with the Quick Setup wizard. If you are not, click on the Quick Setup tab.

Once you’re on the Quick Setup tab, select Plusnet_VDSL from the drop-menu and click Next.

Next, set the connection type to PPPoE from the drop-down, then enter your Plusnet username and password into the corresponding fields.

These will be the same username and password you use to login to the Plusnet website, but you will need to append @plusdsl.net to your username.

For example, if the username you use to login to the Plusnet site is kevq123 then the username you will use on your router is kevq123@plusdsl.net.

If you didn’t see an option for Plusnet_VDSL, choose Other instead. Then as well as entering your username and password, click on the Enable VLAN ID option and set the field to 101.

Once you have entered those details, click Next again.

If you selected Plusnet_VDSL
If you selected Other

Next, you will be asked to configure your wireless networks. I personally have wireless disabled because I use TP-Link Deco M5 Mesh WiFi for better coverage in my house.

If you intend to use the Wi-Fi built into the router, then configure it as you see fit. My recommendation is to use use 5GHz only, as it’s faster.

The problem with 5GHz wireless is that the signal is much shorter. So if you have connection issues, try enabling 2.4GHz too. If after enabling 2.4Ghz you still have connection issues, I’d recommend setting up a mesh Wi-Fi system, like the one I linked to above.

Once you’re happy with your wireless configuration, click Next.

Your AC1200 should now do a connection test and with a bit of luck, you should see a success message similar to this one:

You can now click the Finish button. Congratulations, you just setup your own router with Plusnet fibre!

Explore

From here, I would recommend exploring the TP-Link settings to see the kind of things you can do with it. For example, if you have kids, you might want to configure the parental controls.

Or you can just set it and forget if you don’t want/need to do anything else with your Internet connection.

I’ve been running my TP-Link AC1200 for a few years now and I’m really happy with its performance. Sure, there are way more powerful and feature rich routers out there, but for the majority of home users, ever power users like myself, the TP-Link AC1200 should be more than adequate.

How To Make Ubuntu Work Like Windows 10

Last night, while walking the dog, I was listening to the latest episode of Late Night Linux where Joe speaks to his friend Kyle about his use of Linux and why he has ultimately decided to stick with Windows 10 for the time being.

I thought this was a very interesting discussion, which ultimately boiled down to Kyle saying on a number of occasions that he didn’t like the UI/UX of the distros he had tried, and that he wanted to make Ubuntu work more like Windows 10.

Kyle went on to say that he’s accustom to Windows and likes the workflow, but couldn’t find any simple guides on making Ubuntu work like Windows 10. That’s where this post comes in. 🙂

There was a couple of distros that he mentioned, including vanilla Ubuntu, Ubuntu MATE & Xubuntu. Kyle said that he couldn’t find any simple guides on emulating the Windows workflow in Ubuntu. So, I decided to write one.

Note: by the end of this process you will NOT have a Windows 10 clone – that isn’t the point of this post. What you will have is an Ubuntu desktop that has a workflow similar to that of Windows 10.

The easy way

The easiest way to make Ubuntu work like Windows 10 is to download a distribution that’s already geared toward Windows migrants. Linux Mint and its Cinnamon desktop does a fairly good job of this, but I think the UX leaves a lot to be desired. Personally, I would compare Linux Mint Cinnamon to Windows XP rather than Windows 10.

I think that Zorin OS is a much better Linux distribution for Windows migrants, as it has a very similar workflow right out of the box.

Zorin OS 15 desktop
Zorin OS 15

The slightly harder way – make stock Ubuntu work like Windows 10

If you look at the default Ubuntu interface, you will see that there’s a taskbar at the top and another bar on the left. There’s no start menu, and if you press the Activities button, you don’t get a start-like menu, but instead a spread of all open windows.

Default Ubuntu UI
Default Ubuntu UI

It’s fair to say that the out-of-the-box experience of Ubuntu is very different to Windows 10.

What we’re going to change

In order to make Ubuntu work like Windows 10, there are few things we need to change. These are:

  • Remove the top and side panels.
  • Create a single taskbar at the bottom of the desktop.
  • Integrate a system tray into the taskbar.
  • Add a proper start menu to the taskbar.

To give you an idea of the kind of thing we’re aiming for, here’s my Windows 10 desktop:

Windows 10 desktop

There’s a lot to go through here, but it’s all relatively simple and should take no more than 30 minutes. So, let’s get cracking, shall we?

Step 1 – installing extensions

First, you need to install the Gnome Shell Integration addon for Firefox. This will allow you to install Gnome extensions right from Firefox with the click of a button.

Next, visit the link for each of the extensions listed below and switch the black rocker from “OFF” to “ON” to install them. When you switch the rocker to “ON“, you will receive a prompt to install the extension:

Gnome extension install

Here’s the list of extensions you need to install:

Step 2 – customisations

You should now have a bit of a hodgepodge of panels. There will be a single panel at the bottom, and a few icons that you probably don’t recognise. Don’t worry, we’re going to fix all that now.

Dash to Panel

The first thing to do is sort out the Dash to Panel extension. Right-click on the bottom panel and select Dash to Panel Settings from the pop-up.

On the Position tab, click on the Visible button next to Show Applications button. When you click this button, it should turn from grey to white. This will hide the applications button so we can replace it with the Arc menu later:

Click on the Style tab and change the Panel Size to 40px. This should make the panel a similar size to the Windows 10 taskbar. Obviously change this number to be larger or smaller as you see fit.

Dash to Panel size

Next, go to the Behaviour tab and click on the cog icon next to Show window previews on hover.

Then, change the Window previews preferred size (px) from 240 to 120. Again, this should make the window preview similar to that of Windows 10 when you hover over an open application:

Window preview

System tray menu

Next we need to configure the system tray menu. If you don’t know what the system tray menu is, these are the little icons that certain applications display on the taskbar, usually by the clock, when an application is running in the background.

These are usually application like anti-virus and file syncing tools. Here’s the system tray icons on my Windows 10 machine:

System tray icons - Windows 10

With Dash to Panel, the system tray icons should work out of the box. But if for whatever reason they’re not working, go back into the Dash to Panel settings and click the Visible button next to Right Box from the Position tab.

If everything works right, you should see the icons loaded on the panel, as shown below:

System tray icons - Ubuntu

Arc menu

The last thing we need to do is make a couple of small tweaks to the Arc menu configuration so it works like Windows.

First, right-click on the Arc menu icon (it’s on the far left of the panel and looks like a grey “a”. Then, select Arc Menu Settings from the pop-up.

On the General tab, under Arc Menu Hotkey, select Left Super Key. This will ensure that when you hit the Windows key on your keyboard, the Arc menu will appear, just like in Windows 10.

Arc menu super key

Finally, we’re going to get rid of the silly “a” icon and replace it with an Ubuntu icon. To do this, go to the Appearance tab within the settings window and click on cog button next to Arc Menu Icon Settings.

On the sub-window that appears, click on the Browse Icons button, next to where it says Arc Menu Icon.

Another window will then appear. Select the Distro Icons tab, then the Ubuntu logo:

Close the third window, so you’re back on the icon settings window. Where it says Icon Size, change it to 30px. This should give you a nice Ubuntu themed icon that matches the rest of the panel:

That’s it! You should now have an Ubuntu desktop that works like Windows 10.

Conclusion

As I said at the start of this post, my intention here wasn’t to emulate the theme of Windows 10 in this post, but rather the user experience and workflow.

At this point you should have the familiar single panel layout, with a good looking start menu and a system tray. However, it’s all themed in a way that still gives Ubuntu its own identity.

As you explore more, if you decide to change the theme of your Ubuntu desktop, the Dash to Panel and Arc menu should adapt too, so your theming remains consistent throughout.

I hope this post helps any new people coming over from Windows 10 to setup their environment in Ubuntu so it’s slightly more familiar than the default.

Which Is The Best WordPress Caching Plugin?

I’ve talked about how I optimise this site before, but I wanted to do some digging into which is the best WordPress caching plugin. I’ve tested some of the most popular caching plugins available, and decided to write this post with the results.

Testing WordPress caching plugins

Before I get into the results, let’s talk about how I actually went about testing each plugin, so you have an idea of what I tested and how.

My friend and Fosstodon colleague, Matt Cooper, kindly offered to give me a test WordPress site on his shared hosting account with Hostinger. From there I created a 1,200 word post using Lorem Ipsum generated text. I also added a 140KB image as the featured image.

I kept all of the WordPress settings default, except for the permalink structure, which I set to post-name. All plugins were removed and I used the default Twenty Twenty WordPress theme.

Which WordPress caching plugins were tested?

There are a lot of caching plugins available for WordPress, but for this test I went with the 4 most popular plugins I could find, which are:

  1. LiteSpeed Cache
  2. W3 Total Cache
  3. WP Fastest Cache
  4. WP Rocket (premium plugin)

I installed each of these plugins in turn, then configured them as best I could. At first I was going to figure out a baseline and configure them all as closely as each other, but I later decided that this was unfair.

We’re looking for the best WordPress caching plugin here, so I wanted to test all the bell and whistles each plugin offers so that I could get a true representation of what they can do to a site’s performance.

How was the testing carried out?

Once I had established which WordPress caching plugins I was going to test, I headed over to GTMetrix to carry out the tests. The server that Matt’s shared hosting account is on is located on the east coast of the US. The closest GTMetrix server is located in Dallas, TX. So I went with that. I also selected Firefox as the test browser.

GTMEtrix test results

I tested the same page without WordPress caching so I could get a baseline, then with each caching plugin listed above.

Tests were carried out 6 times for each caching plugin. The first test was ignored, the rationale being that it allowed GTMetrix to generate the cache for the subsequent 5 tests that I ran, which I then took an average of. This, I think, gave a good idea of how the WordPress caching plugins were improving performance.

The results

GTMetrix gives a tonne of data for users to sift though, but I focussed on 3 metrics for my testing:

  1. Load time in seconds
  2. Total page size
  3. Number of requests
AVG Load TimePage SizeRequests
No caching2.26194 KB9
LiteSpeed Cache1.36185 KB7
W3 Total Cache1.36195 KB7
WP Fastest Cache1.26195 KB8
WP Rocket1.46185 KB6

It was great to see that all the caching plugins improved load times. The quickest of which, WP Fastest Cache, knocked a full second off.

I did think there would be more of a difference between the different caching plugins though. I was also really surprised to see that WP Rocket, a premium plugin that costs $45/year, was the slowest.

Having said that, we’re only talking about 2 tenths of a second between the fastest and slowest caching plugins. And when navigating around the test site, I didn’t really notice a difference in load times when using any WordPress caching.

Real world testing

The test site I used was great, and gave me good data, but I wanted to see what these plugins could do with a site that has a lot more to their posts. While 1,200 words and a single image is indicative of many blog posts, I think a post with roughly the same amount of words, multiple images and comments would be a better test.

So I decided to carry out the same tests on one of my posts. My most recent post, Synology vs Nextcloud, seemed a good candidate.

It’s 1,400 words, 3 images and 66 comments (each with an avatar). This means that the WordPress caching has to do a lot more work because it’s loading things like analytics, an advert and commenter avatars. It’s also doing some IndieWeb goodness too.

Results round 2

So I went ahead and carried out exactly the same tests on my Synology vs Nextcloud post. Here’s the results for that post:

AVG Load TimePage SizeRequests
No caching1.982.32 MB62
LiteSpeed Cache1.902.31 MB50
W3 Total Cache1.64704 KB22
WP Fastest Cache1.642.31 MB53
WP Rocket1.38961 KB20

I found these results to be far more interesting. First of all, LiteSpeed Cache and WP Fastest Cache didn’t really manage to reduce the amount of requests, or the page size by much.

I think this is because these plugins didn’t appear to have an lazy loading option for images (not that I could find anyway). So the entire post, all the images, and all the avatars were loaded right away.

Since W3 Total Cache and WP Rocket both support lazy loading, the page size and request numbers were significantly reduced.

WP Rocket managed to reduce the load time most significantly, but even that was only 60ms quicker than with no caching at all. Again, I was expecting the load times to be improved more than this.

Having said that, the server this site runs on is a VPS that’s under resourced, so even without caching, WordPress will still loads fairly quickly. If you want more info on my hosting setup, here’s a post about what it costs me to run this blog, which explains it all.

This time around there was a noticeable difference, I felt, with W3 Total Cache, WP Fastest Cache and WP Rocket. The LiteSpeed Cache and no caching did feel noticeable slower than the rest.

What I have learned

I think the most important lesson I’ve learned from this testing is that caching is not a magic pill that fixes all performance issues. I already have a good quality server, and I optimise this site in a number of ways, not just caching.

So I suppose in hindsight the results aren’t that surprising on my own environment. But I still would have expected more performance to be squeezed out of the shared environment.

I currently pay for WP Rocket, as it’s widely regarded to be the best out there. Although it did get the best speed results of the WordPress caching plugins that I tested on my site, in the real world it didn’t feel any quicker than WP Fastest Cache or W3 Total Cache. Plus, it performed the worst on the shared environment.

My WP Rocket license is due for renewal in April 2021, which is a 3 site license costing $99/year. My initial reaction was to not renew this license and instead move to W3 Total Cache, who also have a premium offering. However, that’s $99/year for 1 site. So I might as well stay put with WP Rocket, especially since it was the fastest in the tests for my site.

What can you take from this post?

Do your own testing! It’s clear from the testing that I’ve done, that the results can vary greatly depending on the environment your site is hosted on.

WP Rocket offers a free trial, so you can still give it a go, but make sure you test other WordPress caching plugins too, as you may be able to gain more performance with one of the free offerings. Not to mention a few dollars too!

Conclusion

I’m really happy with the setup I have, but that’s a result of lots of testing over the years. Some things have worked, some haven’t. I’m glad that my current choice, WP Rocket, ended up being the fastest in my environment, but the free alternatives came very close and were quicker on the shared hosting.

I’m going to be sticking with WP Rocket when my license is up for renewal in April.

Do you use any of the WordPress caching plugins listed in this post, or this there a hidden gem on the WordPress Plugin library that I have missed? If so, why not tell me about it in the comments below.

Quick Update

Hey folks. You may have noticed that I’ve been a little light on content over the last couple of weeks. That’s because I’ve been extremely busy with some personal stuff that I’ve been dealing with (all positive, don’t worry).

If you’re subscribed to my newsletter, you will know all the details around this personal stuff already.

Anyway, I just wanted to let you fine people know that I haven’t gone anywhere. I’m still writing content and I will be publishing more content just as soon as I get time.

Talk very soon…hopefully!