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.

Adding Syntax Highlighting

I’ve been unhappy with the code blocks on this site for a while now. I really wanted to add syntax highlighting, but I didn’t want to add another plugin.

I ended up going with PrismJS for code blocks by natively baking it into my theme, rather than adding a plugin to WordPress. PrismJS obviously uses JavaScript for syntax highlighting, so I wanted to ensure that everything still works and looks right for people who have JS disabled.

Here’s how a syntax highlighted code block now looks like on this site:

body {
    background: #fff;
    color: #333;
    max-width: 40rem;
}

Looks pretty good, right? If you hover over the code block it also tells you what language the code block is, as well as an option to copy to contents of the block.

All pretty nifty, but what does it look like when JS is disabled? Well, here it is:

body {
    background: #fff;
    color: #333;
    max-width: 40rem;
}

Still looks pretty good, right? In fact, it’s almost exactly the same. The last thing I wanted is to have a blank space for people who have JS disabled. I’m a firm believer that a site should be accessible to as many people as possible.

I’ve also made a small tweak on my theme’s CSS that makes inline-code look a similar to the new code block.

I’m really happy with how my theme is evolving on this site. Hopefully this makes things easier for you as a reader too. When I get a chance, I will write a guide on how I added syntax highlighting support to my theme.

Should I Kill My Newsletter?

So I’ve been running my newsletter for around 5 months now, but I’m thinking about killing it off. Let’s look at why…

My newsletter, Craving Coffee, has been a thing for close to 5 months at this point. In that time I’ve accumulated a little over 100 subscribers and have sent 4 editions.

Sounds ok, right? ~25 subscribers per newsletter – not too shabby. But looking at the numbers tells a different story. You see, across those 4 editions of the newsletter, the email has been opened a grand total of 189 times. That’s an average of 47.25 readers per newsletter post.

Add to this the fact that it takes a couple of hours to write and edit a newsletter post, then the costs involved in sending the emails and managing the newsletter system. It’s all a bit shit.

Is it worth it?

So hours of work every month to write, edit and manage newsletters only to have 47 pairs of eyes on them. I’m asking myself, is it really worth it?

Now, 47 readers is better than none. I get that. And it’s great that people are interested in my content, but I make my content available by RSS. So what’s stopping me from simply publishing the newsletter editions as a post on this blog instead. It would save me having to manage the entire newsletter system.

What do you think?

So, dear reader, what do you think? Are you subscribed to my newsletter? If so, do you get any use out of it? Would you be sad to see it go?

Alternatively, do you think newsletters are a waste of time and I should invest my time into this website and writing posts on it instead?

I’d love to hear your thoughts, either by contacting me, or leaving a comment below.

Replacing FreshRSS With Miniflux

FreshRSS is a good RSS reader, but I recently decided to switch to Miniflux. This post talks about why I decided to switch.

If you didn’t know already, I love using RSS feeds and I’ve been using FreshRSS to read those feeds for a few years now. It’s self-hosted and generally works well. But I hate the web interface.

It was never really a major problem, as I mostly check my feeds from either my phone or tablet with the Reeder app.

What’s wrong with the FreshRSS UI?

I’m glad you asked, dear reader. Let’s start with a screenshot of the interface, shall we? After all, a picture speaks a thousands words and all that…

FreshRSS web interface
The FreshRSS web interface

Look how cluttered that interface is! There are gradients all over the shop, the colours are awful and it’s difficult to navigate your way around.

For example, if you want to go and visit the origin page (when those really annoying people don’t have the entire post in their RSS feed), you have to click that weird circular icon with the arrow over it on the right hand side.

That would be fine, but the icon is exactly the same as the rest of the metadata, so I have no idea what’s a link and what isn’t.

Second, you see the list of feed items in the image above. Where it says The New Oil, Ru Singh, Linux etc? Logic would dictate that if you click that link, it would open that feed item, right?

WRONG!

If you click that link, you are taken to a list of all items in that feed, not the feed item itself. Again, it’s completely counter-intuitive.

I know I can change the theme, but there are no nice ones bundled with FreshRSS and I don’t have the time (or inclination) to make my own.

Switching from FreshRSS to Miniflux

I had heard really good things about Miniflux. Both Jan-Lukas Else and Ru Singh speak very highly of it.

I decided to pay the $15.00 (~£12.30) a year to have the Miniflux team host it for me. Not only does this save on headaches for me, it supports the Miniflux project too. Win/win. If you prefer to self-host, it’s simple to do.

Why Miniflux over FreshRSS?

When I designed this website, there were 2 things I wanted to achieve from the theme:

  1. A content-focused experience.
  2. Beautiful typography.

The whole point of this blog is for you to read my content. Nothing else. Miniflux aligns itself to the same principles:

Miniflux is a minimalist software. The purpose of this application is to read feeds. Nothing else.

Miniflux

If you take a look at the Miniflux interface, it’s sparse, focused and beautiful. Just the way I like it.

Miniflux isn’t just good looking though. It’s also been thoughtfully built. The user experience is really good. For example, if I want to load the original post, there’s no silly icons that make little sense. I just click on the original link.

This simplicity continues as you dig into feed items. Everything in Miniflux is simply laid out and content focussed. Take a look at the screenshots below to see what I mean:

A post on Miniflux
The same post on FreshRSS

Big difference, right?

Conclusion

I replaced FreshRSS with Miniflux around a month ago now. As a result I have a much better interface that has a beautifully simple reading experience.

Furthermore, I don’t have any headaches because someone else is managing it all for me. And, I get to support a great open source project too.

Finally, I can continue to use the Reeder app on my devices, because Miniflux supports the Fever protocol.

Wins all round, I think.

If you’re thinking about switching feed readers, or if you’re new to using RSS feeds, I’d strongly recommend Miniflux.

Looking After An Aquarium – How Much Work Is Involved?

Fish are such easy pets to look after, right? You just pop them in a tank, feed them once a day and change the water now and then. Easy. This post explores how much work is involved in looking after an aquarium.

I have news for you – if you want to keep fish, it’s a lot of work! But, it’s really rewarding. In our house we have 3 tanks (sometimes 4), which are as follows:

Aquarium #1 – Goldfish

Our first tank is a 200 litre (approx 55 US gal) cube tank that contains 4 fancy goldfish and a panda garra.

200 litres for 4 goldfish sounds like a lot, right? Actually, that’s too small because goldfish are extremely messy fish. We offset this with a massive filter and lots of water changes. More on that later.

My goldfish aquarium
My goldfish aquarium

Aquarium #2 – the tropical community

Our next aquarium is a 120 litre (approx 30 US gal) tropical community that has all sorts of fish including tetras, corydoras and shrimp. It’s also full of live plants. It’s a beautiful tank.

My tropical community tank
My wife’s tropical community tank

Aquarium #3 – the cichlid tank

The third tank we have is a 350 litre (approx 90 US gal) containing a selection of south America cichlids (pronounced sick-lid), a group of 10 corydora sterbai, a bristlenose pleco and an incredible fire eel.

This tank is behind my desk and is by far my favourite tank. I can watch it for hours.

My cichlid tank
My cichlid tank

Tank #4 is a hospital tank that we need to setup occasionally. This is used for things like quarantine and sick or bullied fish.

Looking after an aquarium

So like I said; you buy some fish, dump them in a tank, feed them some flakes once a day and change the water now and then. Simple, right?

WRONG!

The first thing you need to do is cycle your aquarium so the nitrogen cycle has a chance to complete. This is to ensure you have an ecosystem that can support your fish.

Once that’s done, you need to keep an eye on your nitrate levels (I’d recommend the API Master Test Kit to test your water). Start by doing a 50% water change once a week, then you can increase or decrease that depending on where your nitrate levels are.

As a rough guide, I try to keep my nitrates below 20ppm, with the max being 40ppm. Ammonia and nitrite levels should always be 0ppm.

The amount of nitrate your tank will produce all depends on a combination of your tank size, what livestock you have, and the filtration you have.

My maintenance routine

To give you an idea of how much work it takes for me to look after my aquariums, here’s my maintenance schedule:

Every Sunday – 50% (150 litre) water change on the cichlid tank. Gravel vacuum and glass clean. Approximate time – 1.5 hours.

Every Tuesday – 50% (60 litre) water change on the community tank. Gravel vacuum, glass clean. Approximate time – 1 hour.

Every Wednesday – 50% (100 litre) water change on the goldfish tank. Gravel vacuum, glass clean. Approximate time – 1 hour.

Also every Wednesday – another 50% (150 litre) water change on the cichlid tank. Approximate time – 45 mins.

Every 3rd Sunday – alternate cannister clean on 1 of the 2 cannister filters I have on the cichlid tank. Approximate time – 45 mins.

Every 4th Tuesday – filter clean on the community tank. Approximate time – 30 mins.

Every 6th Wednesday – cannister clean on the goldfish tank. Approximate time – 45 mins.

Note: a cannister clean involves stripping it down, cleaning the impeller, rinsing all the media and cleaning/replacing the sponges. This is a great video on what’s involved in cleaning a cannister filter:

As you can see, looking after an aquarium is a lot of work. This is why many people who get fish without doing their research find that their fish die pretty quickly.

Did you know that the average lifespan of a goldfish is around 20 years. Most people think it’s just a few years as so many are mistreated in the aquarium hobby.

So my maintenance schedule for looking after my aquariums takes somewhere in the region of 4.25 and 6.25 hours per week.

Still think looking after an aquarium isn’t a lot of work?

Feeding the fish

Fish, like any other animal, need a varied diet. Some are carnivore, others are omnivores. Then, to make things even more complicated, some prefer to hunt for their food (like my fire eel) and others are nocturnal.

My goldfish eat a combination of goldfish pellets, fruit & vegetables like courgette (zucchini), melon and spinach. They also eat frozen bloodworm and brine shrimp in garlic.

My cichlids eat a selection of krill flakes, various cichlid pellets (I really like the Hikari brand), frozen bloodworm and brine shrimp in garlic.

Plecos are nocturnal and eat a combination of wood (yes, wood!) and algae. So he needs to have algae wafers put into the tank just before I go to bed – right when he’s out feeding. Plecos also like fruit & veg too.

The fire eel likes to hunt his food, and also prefers low light conditions. So he eats a mixture of live bloodworm, live earthworms and even the occasional feeder shrimp as a special treat.

The community tank tends to eat a mixture a tropical fish flakes, frozen bloodworm, brine shrimp in garlic and copepods.

Finally, the corydoras are bottom feeders that pretty much eat anything that hits the bottom of the tank. Having said that, we still target feed them with corydora pellets. Corydoras also love fruit and veg too.

Not quite as simple as buying a pack of cheap flakes, right?

Some recommendations

On small aquariums, doing a water change with buckets is relatively easy. But once you get into the territory of aquariums that are 100+ litres, you really need to ditch the buckets.

I do this by using a submersible pump that pumps the water straight down the toilet, or into the water butt in the garden.

To re-fill the aquariums I use a JBL Aqua In Out, which allows me to attach it to the tap (faucet) via a long hose. This can also be used as a gravel cleaner too, but I don’t find the suction to be very good.

Instead, I use a standard gravel vacuum, which goes into a large 75 litre bucket. I then pump the water out using the submersible pump I mentioned earlier.

By using this method of aquarium maintenance, I can knock hours off my weekly maintenance schedule.

My aquarium maintenance kit
My aquarium maintenance kit

Conclusion

The whole point of this post was to show that fish aren’t the simple pets you think they are. Looking after them properly takes a lot of research, patients and work.

But in return you get to watch some of the most beautiful organisms in the animal kingdom do their thing. I’ve been keeping fish for around 5 years now, and I can’t see myself ever being without at least 1 fish tank in the house.

If you’re thinking about getting an aquarium, I’d say do it! But please do your research first to make sure you setup the right habitat for the type of fish you want to keep. That includes the right tank mates, food, tank size, water conditions, tank scape (places to hide, plants etc.) and filtration.

/r/aquariums on Reddit is a great place to start if you’re new to fish keeping. Alternatively, you can leave a comment below and I’ll do my best to help.

The Apple Walled Garden

I recently posted about my new Apple Watch on Fosstodon. I assumed I’d get some feedback about the Apple walled garden, so I wanted to take some time to elaborate on my thoughts about the walled garden.

As expected, I received a few responses exclaiming that I’m getting sucked into Apple’s wall garden. To be honest, I can kinda see where they’re coming from.

When I was an Android user, I loved nothing more than telling Apple users that they’re stuck in a wall garden, using a device they can do nothing with.

Wallpapers…WALLPAPERS?! Pfft…we’ve had those for years!

Me, circa 2010

But the fact of the matter was, I had never used iOS, so I had absolutely no idea what I was talking about. I eventually got sick of Android and I decided to give Apple a try in 2018.

What walled garden?

After getting my first iPhone, it quickly became apparent to me that there was no walled garden, only tight integration into the Apple ecosystem. You know…just like Android and its Google services.

Before switching I honestly had the impression that I would have to use Apple’s official apps and nothing else – I would be stuck in their lovely walled garden forever.

That’s complete bullshit.

I was surprised to learn that I can actually remove more apps from my iPhone than I ever could on Android.

I now have an iPhone, iPad and Apple Watch. Not because I’m some kind of Apple shill, but because I like their hardware and their software. Plus, you know, they send a lot less data home.

I don’t actually use many of their apps and I’m not stuck on their platform. For music I use Spotify, for email and calendar I use Zoho Mail and their app, for note taking I use my Synology and their DS Notes app. I use Firefox as my browser, Bitwarden to manage my passwords and goodness knows how many other apps that allow me to be vendor agnostic.

But the Apple Watch…

Yeah, I have an Apple Watch now. It integrates really well with my other iDevices and I get a lot of use from it. But I’m not forced to use an Apple Watch – In fact, I used a Garmin smartwatch prior to getting the Apple Watch.

The walls of the Apple walled garden are collapsing all around me and I don’t get why people are of this opinion still. What am I missing here?

But they’re so expensive!

Apple hardware is super expensive, I totally agree. But I think it’s well made, and I’d much rather have my devices come from a company that makes money from expensive hardware, than harvesting user data.

Also, the price of iDevices is inline with the cost of flagship devices from competitors like Samsung. For example, the iPhone XS is around £1,100 here in the UK. The Samsung Galaxy S20 is also around £1,100.

Conclusion

Overall, I’m very happy with Apple and iOS. I really can’t see myself moving off their platform anytime soon.

If you’re a happy Android user, great! More power to you. I’m really glad that Android works for you – it’s good that we have these choices.

But if you’re one of those people who loves nothing more than to quote how bad Apple is because of their walled garden, please do some fact checking as, to me at least, it doesn’t exist.

Thinking About New Hardware

I’m thinking about replacing my desktop and laptop, but I’m not sure which way to go. In this post I want to explain my needs and hopefully get some help from you.

I started out by posting the question on Fosstodon, but quickly realised that 500 characters isn’t enough for me to talk about this subject properly. So, here we are…

My current setup

I have quite a lot of hardware already, but my main devices are my Laptop (a gen 2 Lenovo X1 Carbon from 2014) and a home built desktop, also from 2014.

My desktop and laptop are used interchangeably for the most part, but with COVID I’m currently working from home, so using my desktop a lot more as it has 2 monitors.

I mostly use my laptop for writing posts and doing a bit of coding. I’m actually writing this post from my laptop, all while the kids run around crazy – it’s hard to concentrate so please forgive me if this post isn’t very coherent. 🙂

My system specs

I thought it would be useful to provide my current system specs, just so you guys know what I’m working with at the moment.

My laptop

Like I said, my laptop is a second generation Lenovo X1 Carbon. It has the following system specs:

  • 4th Gen Intel® Core™ i7-4600U (3.30GHz)
  • 14.0″ HD screen (1600×900)
  • Intel® HD Graphics 4400
  • 8GB DDR3 1600 MHz
  • 256GB SSD M.2 eDrive

My desktop

This is a home built affair that’s been upgraded a couple of times since I first built it back in 2014. Here are the specs:

  • AMD FX-6300 (3.5GHz)
  • 2x 24″ HD (1080p) monitors
  • 16GB DDR3 1333MHz
  • Radeon RX560 (4GB RAM)
  • 1TB SSD Windows 10
  • 1TB SSD Pop!_OS

What I use my devices for

I’m not much of a gamer. I play some Minecraft on both devices, and the odd game from Steam, but that’s very rare. I certainly play no AAA titles or anything like that. if I were to get back into gaming, I’d probably get a console.

What I mostly use my devices for is writing posts like this, surfing the web, and writing code. The most common applications I use are:

  • Firefox (web browser)
  • Typora (writing posts in markdown)
  • Atom (code editor)
  • Filezilla (FTP)
  • Inkscape (vector graphics)
  • The GIMP (image editor)
  • Signal (private messaging)
  • Spotify (music)
  • Keybase (encrypted chat)
  • Minecraft (fun game)

I also use my desktop for work, but we have remote virtual desktops that we log into, so I don’t need any kind of powerhouse machine for that.

Why I want to upgrade

Based on my usage, you probably think that I don’t need to upgrade. I certainly don’t tax my machines, that’s for sure. But the hardware is getting old and there are things that the machines don’t have that I’d like.

For example, my desktop doesn’t have USB 3.0. You may think that’s easily fixed with a PCI card on the motherboard, but I don’t have space for that because of the graphics card (it’s a micro ATX board/case).

My laptop’s battery is pretty poor now too; only giving me around 2 hours of usage on a good day. Unfortunately, because this is an “ultra book” there’s no way for me to easily replace the battery.

My options

The way I see it there are a number of options I have available to me. Each with their own advantages and disadvantages.

Option 1: new desktop & laptop

Pretty much a direct replacement for what I have now, only more up to date. The advantage of this is that I have exactly the same workflow I do now.

The obvious disadvantage here is that this option is going to be very expensive and my wife will not be happy!

Option 2: new laptop with dock

The second option is that I go for an all singing, all dancing laptop with a dock. The advantage of this is that I have all my devices in one place – I have my laptop for on the go, and I can dock it to my screens etc. when I need to. It will also be cheaper than buying a new desktop and laptop.

However, there’s a couple of disadvantages here too. Firstly, it’s a single point of failure. If my laptop breaks, I have no device I can use. Secondly, laptops aren’t as upgradable as desktops, so I’d likely get less life out of a laptop alone.

Option 3: the middle ground

I think there’s a potential middle ground here, where I replace my desktop with a more up to date and pretty powerful device. Then replace my laptop with something middle of the road. Maybe something like a Pinebook Pro if it can run the apps I’ve listed above.

That way I have my laptop that I can use for writing posts, coding and surfing the web (let’s be honest, I don’t need much power for that). And I have my desktop for when I need to do any heavy lifting.

I also then still have 2 devices in case one fails.

Note: What ever laptop I buy, it can be no bigger than 14″. I like small, ultrabook style laptops.

Conclusion

There is no conclusion here yet. That’s why I need your help! What do you think I should do? What would you do in my position?

I don’t really need to replace my hardware, and I’m in no rush to do so. What I have at the moment works well, I’d just like my setup to be better.

First world problems, eh?

What do you think? Option 1, 2, 3, or maybe something else entirely? Or, should I stop being an entitled brat and be happy with what I’ve got?

I’d love to hear from you. Please leave a comment below to tell me what you think…

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…