GLOO – structuring your CSS

Back in the day, I had all my CSS in one file. Then I discovered Sass, and started separating everything out into different files. Today, I have a tried-and-tested approach to structuring my CSS to ensure it's tidy, powerful and easy to use. I call it GLOO, which stands for Globals, Layout, Objects and Overrides. …

Using custom HTML attributes to define CSS state

TL;DR If an element should only have one state at a time, don't use classes, use custom attributes. <div class="tile" data-theme="dark">...</div> .tile[data-theme="dark"] {...} The old way Those of us who have been using off-the-shelf CSS frameworks for a few years will be familiar with the idea of using classes to define an element's properties. For …

The state of (my) web development in 2019

Seeing as it’s getting near the end of 2019 already (don’t get me started), this seems like a good opportunity to take stock of where I am right now in terms of my web development, looking at what tools and techniques I use. Of course, this doesn’t mean I’m “right”, or that this list won’t …

Google Analytics, EU Cookie Law and GDPR

Key question: do I need to ask permission from website visitors before using Google Analytics? This is a web developer's guide, describing what GA is, how it relates to the law, and suggests some potential implementations. How Google Analytics works GA can be installed on a website in one of two ways – either by …

Interactive SVG map

I recently needed to present a map on a website so that visitors could choose their region (i.e. a group of countries, which could be arbitrary) before going into the site. After a little playing around, I settled on a solution that uses an SVG map of the world, and used CSS and Javascript to highlight …

Logging with Laravel 5.6 and Loggly

When creating a website, it's important to know what's working and (even more importantly) what isn't. That's where logging comes in. Yes, logging, that oft-forgotten art. But, as Guillaume at Logmatic quite rightly points out, "PHP logs in particular are NOT JUST ABOUT ERRORS". That's his capitalisation there. He's stressing the point, and for good reason. …

WordPress vs. CraftCMS

I've known and loved WordPress for years, and I've used it personally and professionally for a number of projects. But a friend recently introduced me to CraftCMS, and suggested it might be better. The only way to find out is to try them both out and compare! For the purpose for this comparison, I'm creating …

Code quality matters

We've all been there. Time is short, so just bash out a bit of code, and as long as it works we can move on. Code is for computers anyway, right? Who cares what it looks like? Actually, how our code is formatted can totally save our bacon later, and save us time in the …

How to use a browser as a kiosk

When it comes to engaging with customers, interactive screens are an important tool to have in your arsenal. They need to be visually attractive, easy to use, and effective at conveying their message, whether that’s providing information or a particular service. For that reason, web applications are a good way of implementing such tools, because …

Animated star field on a Javascript canvas

I was watching the film Pixels the other night.  Not the best film ever (by a long way), but it did get me reminiscing about all the cool stuff I programmed when I was a lad.  Back when I made text adventure games and simple animations in QBASIC.  Back when I programmed games on my …