Always been a big fan of Edward Tufte’s sparklines, so when I saw this today I had to have a go.

<svg height="180px" width="500px" viewBox="0 0 9 15" preserveAspectRatio="none">
    d="M 0 14 L 1 15 L 2 10 L 3 11 L 4 7 L 5 5 L 6 0 L 7 5 L 8 10 L 9 11 L 9 15 L 0 15 Z"
    d="M 0 14 L 1 15 L 2 10 L 3 11 L 4 7 L 5 5 L 6 0 L 7 5 L 8 10 L 9 11"

Really neat. I thought I would have a little play so I could easily replicate in code, via nunjucks / 11ty.

Which ended up as:

{%- set yPos = [14, 15, 20, 11, 30, 5, 0, 5, 10, 11] -%}
{%- set yPosLength = yPos|length - 1 -%}
{%- set yPosMax = yPos|max -%}
{%- set fill = 'L ' ~ yPosLength ~ ' '  ~ yPosMax ~ ' L 0 ' ~ yPosMax ~ ' Z' -%}

<svg height="180px" width="500px" viewBox="0 0 {{ yPosLength }} {{ yPosMax }}" preserveAspectRatio="none">
<path class="fill"
    d="{% for y in yPos %}{{ 'M' if loop.first else 'L' }} {{ loop.index0 }} {{ y }} {{ fill if loop.last else '' }}{% endfor %}"
<path class="outline"
    d="{% for y in yPos %}{{ 'M' if loop.first else 'L' }} {{ loop.index0 }} {{ y }}{% endfor %}"

I did have to create a little 11ty filter for the yPos|max bit but that was pretty straightforward

max: function (arr) {
    return Math.max.apply(null, arr)

Cooking with Full Site Editing

Update: I’ve reverted this theme right now back to a hybrid theme as I need to add rel=me atrribute to my Mastodon accounts and the WordPress social links block doesn’t support that right now

As mentioned in my last post, I declared I would use this site as the basis for road testing WordPress’ Full site editing feature.

Et voila.

Before & After.

Before and after building a theme in Full Site Editing

So how was it?

Well. In classic developer parlance ‘It depends’. Some initial thoughts (I’ll add and edit this post as I think of more things that occurred to me)

Losing my <head>

With FSE you have templates and template parts and from what I can see no way of controlling the full DOM. As such where I might tweak things like meta tags, preload, scripts, Google tag manager, URL params, PHP variables etc. I don’t have access to this out of the box. There are a number of functions I could use I guess but it was weird suddenly not having control over the full DOM.


There I said it. Always felt the term DX was a little bit narcissistic but the DX of the templates are crunchy. It’s all DIV/JSON soup. These all get passed to the admin interface so that does make sense, but oof.

<!-- wp:group {"align":"full","style":{"spacing":{"margin":{"bottom":"0px","top":"0px"},"padding":{"top":"1.25rem","right":"1.25rem","bottom":"1.25rem","left":"1.25rem"}}},"layout":{"inherit":true}} -->


Old habits die hard

I kept trying to build out structures in semantic name-spaced html via my code editor but the template parts kept breaking.

Styling/layout is done in the admin settings not CSS/HTML. I tried setting the spacing in CSS but realised that’s not ‘the way’ so back to the admin I go. Tried where possible not to use CSS but for some things (container widths / alignment) I found I had to. As the theme development progressed I gradually removed more CSS as I figured out how to do stuff natively in FSE (either via theme.json or the Editor)

But it’s still a bit limited. I found the lack of control a little vertigo inducing at first but then I found I could do more stuff in theme.json like spacing for specific blocks e.g. post-title.

It’s a big paradigm shift.

"core/paragraph": {
    "spacing": {
	"margin": {
		"top": "var(--wp--custom--spacing--baseline)",
		"right": "0",
		"bottom": "var(--wp--custom--spacing--baseline)",
		"left": "0"
    "typography": {
        "lineHeight": "var(--wp--custom--typography--line-height--body)"

Design system

There are the beginnings of some nice stuff with theme.json but then the default 22 theme just smashes random spacing in JSON-esque markup in template parts. These are then exposed in the admin and can be changed to your liking but….

Spicey spacer gifs everywhere.

<!-- wp:spacer {"height":180} -->
<div style="height:180px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->


Sure, component based design and spacing within a block can be achieved using a mix of techniques. But I found that some blocks are full blown components with elements scoped to a parent container yet some that are just HTML (H2, P). This poses issues when trying to achieve consistent spacing between elements. Say for example I have a cover block as the last item on the page. I want it to be flush to the footer. But if it’s a paragraph I don’t want that. But i might want more spacing than the usual margin. I can’t use last of type. I guess I could use last of type ~ sibling. Is spacer gif the only answer? I guess what I really want is sections of content. Which I could do as a group. But feels like there should just be a content block for headings, para, lists etc.

Who is this for?

At first I went straight to my code editor to try and build out the base HTML. Wrong approach. I started again from scratch and built out the header / footer / query block in the editor and copied the code back into my theme. Much better results.

But here’s the rub, do I expect a client to be editing the query block or even want to. The answer is probably ‘not now’ and maybe that’s the point. But they could. Effectively they don’t need me, they could just read the docs, open up the full site editor and change something (in staging for the love of god) and voila. It’s done. This is potentially very powerful.

Right now clients shudder in horror that anyone with the relevant rights could just delete the menu or change the settings for the blog feed. But maybe that’s okay. Maybe we are on a journey and maybe the destination is a sort of super admin/developer/lower barrier to entry. No build systems. No continuous integration. No legacy code. No engineering degrees.

I kind of like it. But it’s still raw.

What do I want?

I guess cake and eating of the cake. I want the fine control – for example; I had custom gradients on the social SVG icons in the footer before, now it’s these icons or no icons. But I also want my users (editors) to have more control. So overall maybe this is the right direction.

I will gradually Marty McFly into non-existence whilst the all powerful (full site) editor takes over an alternate theme building timeline.

Lockdown project 2 – wooden Pi Camera

So after reading this article about building your own camera with a Raspberry Pi 4 by Becca Farsace from The Verge I was sold. It was still (sort of) lockdown, I had waaay too much Raspberri Pi stuff. So i went about making my own.

First off I got the core components.

  • Raspberry PI 3A+ (already owned)
  • Raspberry Pi camera module
  • C-Mount lenses (Pentax 25mm, Raspberry Pi 6mm Wide Angle Lens)
  • Puck.js button (to remotely control the device – essentially the shutter release button)

I then tried to get a suitable case, I first bought a couple of second hand broken camera bodies off of eBay, an old Pentax film camera, but it was too small to house the Pi, then a Olympus underwater camera housing which very nearly worked after hacking at it, but I couldn’t then screw the lenses in! Finally I decided I needed to make the case. So bought some 3mm plywood…..

Et voila.

View of camera from the front

Now for the programming, I am a web developer, but my craft is HTML, CSS, Javascript so not really a l33t python dev. So this was mostly trial and error, oh and a shit load of googling (a.k.a. The Web Developer’s Handbook ™ ® ©)

I use rmate because I *still* can’t use VI/nano

The first file is the command we want to run, based around raspistill, well use this later. So I created a file called which will take the photo and save it to an Apache server instance to you can remotely access it, e.g. http://192.168.0.*


# Unix time and date filename
sudo raspistill -f -ts -o /var/www/html/photos/PI_CAM_%d.jpg

Now to set up the Puck.js button, we can use the web based IDE to flash code the device, this code (below) will allow the Puck.js button to act like a bluetooth keyboard key, e.g. F7, (note the Puck needs to be paired with the Pi)

//For Puck.js 8b1e

var kb = require("ble_hid_keyboard");
NRF.setServices(undefined, { hid : });

//F7 key -
function btnPressed() {
  NRF.sendHIDReport([0,0,64], function() {

// trigger btnPressed whenever the button is pressed
// consider repeat:false
setWatch(btnPressed, BTN, {edge:"rising",repeat:true,debounce:50});
function ledBlink() {
  setTimeout(function() {
  }, 250);

Now we need to set up a multimedia keyboard daemon that can intercept the Puck.js button click (which for our purposes is going to act as a bluetooth keyboard – a one key keyboard). I found something called esekeyd and here are the various commands to get that firing

sudo apt-get install esekeyd
sudo keytest /dev/input/event1

// sudo learnkeys /etc/esekeyd.conf /dev/input/event1
// where eventX == result from above, e.g. event1

sudo learnkeys /etc/esekeyd.conf /dev/input/event1

// Press F7 (), esekeyd will create the configuration file you need (esekeyd.conf). You then need to edit it with your editor of choice. You’ll see a line like this: `#F7(press):` Delete the #, and add your desired command directly after the : (no spaces!). Your new line might look something like this:


// Make sure the sh file is executable

chmod +x

// Now let's set up the config
touch esekeyd.conf
rmate esekeyd.conf
sudo cp esekeyd.conf /etc/esekeyd.conf

//run the file
sudo esekeyd /etc/esekeyd.conf /dev/input/event1

//to run on startup
sudo nano /home/pi/.bashrc
sudo esekeyd /etc/esekeyd.conf /dev/input/event1

mkdir -p ~/.config/autostart
cd /home/pi/Desktop
touch terminal.desktop 
rmate terminal.desktop
sudo cp terminal.desktop ~/.config/autostart

This file, terminal.desktop, will launch terminal and the esekeyd service so the camera is ready to take clicks from the button however this didn’t work for me, terminal opens up but I get an error ‘Failed to open /dev/input/event1 (Permission denied)’ I think this is because bluetooth hasn’t enabled yet, I dunno.

[Desktop Entry]
Comment=Test the terminal running a command inside it
Exec=/usr/bin/lxterminal -e "bash -c 'sudo esekeyd /etc/esekeyd.conf /dev/input/event1;$SHELL'"

And there we have it a (mostly) working camera. Here is it:

And here is a time-lapses I took with the wooden pi Camera.

And some of the camera in action / build process

View of camera mounted to balcony
Me building the wooden case

Happy echo date(‘Y’)

It’s at times like these that I am very happy I declare copyright notices on the sites I manage using the php method for echoing the year.

Copyright © 

Saves a lot of time and panic after noticing a site you built years ago looks somewhat out of date.

Update: via Maarten Jacobs (@MaartenJJ) it’s a good idea to set the timezone to ensure it displays correctly for the users location via date_default_ timezone_set(). Thanks Maarten

New box model army

I love the Observer magazine’s new layout design, particularly the use of mixed fonts and bold header styles.

It got me thinking web design and how new techniques such as CSS3, HTML5, jQuery and Typekit (or more generically type replacement techniques) are allowing for much richer designs and interfaces to be applied easier and more semantically. This is a very good thing, sure with a combination of markup, classic javascript and background images (sprites) we can get pretty complex designs applied, yet it always felt slightly ‘wrong’. Having to create 4 nested divs and negative margins to create a scalable, rounded corner box just felt icky and too heavy to feel proud of actually constructing something out of divs and gifs.

Also fonts, sigh, having to deal with 4 or 5 fucking fonts for a decade is really frustrating, sure we can use images, flash placement etc etc, yet again having to pad my code with so much stuff just to get a font outside, Verdana, Helvetica and Arial (and a few others plus a few sans-serif fonts Georgia, Times et. al.) again seemed like a large overhead and had too many disadvantages (flash issues, slightly non-accessible) to be used unless really necessary (brand guidelines, client preference).

Anyway that’s part of the history and frustration, but then the future started to push through. CSS3, HTML5 and font replacement has been tantalisingly close for what seems like ages. For me the need to carry on supporting IE and it’s backwards and verging on the offensive support from emerging standards has kept front-end development frozen in time, attempting to create increasingly complex and exotic work arounds to achieve new methods for building new web designs (that are not restricted by standards only imagination). Yet there seems to have been a change in heart over the last six months, maybe it’s a tiring of support for a browser that refuses to embrace modern standards, maybe a need (user) or desire (advanced interfaces) to use modern techniques to take the web to the next level and be damned the browser that refuses to grow-up.

Certainly my feelings have changed, where once I felt all users deserve an equal experience (functionality and form), I now feel that if a user chooses to use a browser that doesn’t support modern technologies then why should they expect them (one wouldn’t expect ABS brakes or power steering in an antique car). Ofcourse some people do not have the choice to move away from Internet Explorer, and I do sympathise with those users, yet again, that should not mean we shouldn’t experiment or push the boundaries, I don’t want to be 40 before I can use native rounded corners in CSS. Obviously this is not an approach I take to client sites or important functionality. I believe in the Aggressive Graceful Degradation model where the site is still accessible, readable and usable, but if Internet Explorer users don’t get rounded corners on a form button then will I or they lose sleep at night, well probably not. Hey maybe the proliferation of these more advanced sites will encourage Microsoft, Organisations and Users to upgrade or move away to something more suitable to the 20th century (low-shot I know – but hey)

So people with modern browsers get the treats, like people with modern televisions, computers, mobile phones, and cars get the treats of modern technology. We wouldn’t expect to be able to get HD on a CRT monitor, so why should all users get the same interface?

Also for my own personal development it’s important I keep up with new emerging standards, If I stand by and await for Redmond to grace the web with a decent browser then it’ll be too late for me to catch-up with people that have decided to launch fully into the HTML5 and CSS3 world, especially those which have been brought up on Firefox and Safari (launched 6 years and 7 years ago respectively).

All of this is a very long way of saying I am looking at new techniques and methods to deliver richer designs in html and css. Anyway back to the beginning of the article, the Observer Magazine redux and how much I liked it and how it could be done in native HTML/CSS with more advanced techniques. So I thought I would give it a try, by using typekit to deliver the fonts and CSS to get the rounded corners. First the original (examples from The Magculture blog)

Observer magazine

So thinking I might be able to take care of the circle via -border-radius declaration, with a border radius of half the width and height of the block element in question. But then using a mixture of absolute positioning, margin, padding, z-index and background-image for the border (I had trouble with the simple border declaration and the stack order of the various elements). The benefits of this approach is it’s really easy to change the background colour of the circle element and ofcourse the text as style is set by css not markup or images.

All in all it’s just simply lovely to be able to see a technique in another medium not restricted by technological standards and replicate it in a nice clean(ish) way in CSS3/xHTML/TypeKit – the future is starting to look really quite exciting and I haven’t even really touched on HTML5 yet 🙂

So here is a screen-grab of the header:

Observer magazine - CSS and HTML

And the mark-up (click here to view the demo on a standalone page):

Food & Drink
pie chart - mmmm pie

Heading: The detail

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Something Something

And the CSS:

	/*section colors*/
	#magazine-header {background-color:#dc8100;}
	#magazine-header {background-color:#e00000;}
	#magazine-header {background-color:#d800a3;}
	/*magazine style header*/
	#magazine-header {
		background:transparent url(bg.gif) 0 bottom repeat-x;
	#magazine-header span.caption {
		display: block;
		width: 120px;
		height: 120px;
		-moz-border-radius: 60px;
		-webkit-border-radius: 60px;   
	#magazine-header span.caption em {
		padding:40px 25px 0; 
		font-family: "bello-pro-1","bello-pro-2",sans-serif;    
	#magazine-header div.excerpt {
		margin:0 350px 0 100px;
	#magazine-header div.excerpt h2 {
	   font-family: "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2";
	   margin:0 185px 0 0;
	#magazine-header div.excerpt p {
	  margin:0 185px 0 0;
	#magazine-header h6.meta {
		font-family: "bello-pro-1","bello-pro-2",sans-serif;
	#magazine-header h6.meta span 
		font-family: "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2";

A WYSIWYG is a blunt instrument

Yeah so I am obviously more than a little bias on this and have somewhat a headstart regarding building websites as it’s my day job. However in my opinion HTML and is styling sister CSS should be one of the most important tools to anyone that creates content online. HTML/CSS are some of the fundamental building blocks of the web and they are not likely to go away anytime soon (even in internet time). Now I’m not talking about the kitchen sink here such as floats, background-colors, clearing divs and valid xHTML strict markup, but the basic tags and styling elements like

<li style="color:red;padding-bottom:10px;list-style-type:disc;"> 

that can bring to life a blog post, a news item, an article or basically any website based around a CMS. Most CMS’s allow for a html view as well as a visual editor such as wordpress’s own:

More often the tools for managing and publishing content online are handed back to the people that operate within the company rather than a web design/development agency that built the site in the first place. With the web agency model changes can cost alot and take a long time for the request to be carried out. This handing back control is a great thing, meaning errors are fixed more quickly and more content is produced by the people within the organisation as barriers to production are reduced. But also quite often we find the the user wants more than what the visual editor allows, headings or fine manipulation of the content (image sizes, additional padding or unwanted content that appears with embeddable content). Now it’s possible to extend these visual editors, add more buttons, more rules in the main css file. However this is simply an abstraction and can’t possibly cater for all eventualities.

The answer in my opinion is that a basic understanding of HTML and CSS is an essential tool for employees and user generated content in general. Most comment textareas allow for simple styling, this can make your comment stand out, become more readable or attractive, as well as your own website’s content. How many times have you seen blog posts with too much space or elements buffering up against one and other (this may just be me though) and been distracted by it?

I am not going to go into HTML 101, there are plenty of resources out there for that. But here are a bunch of tags and css styles that I think should be part of any content producers toolbox:


<h1>This is the largest heading</h1>
<h2>This is a slightly smaller heading, maybe a sub-heading</h3>
<h3>This is an even smaller heading, maybe a section heading</h3>
<h4>This is probably a sidebar heading</h4>


This is the largest heading

This is a slightly smaller heading, maybe a sub-heading

This is an even smaller heading, maybe a section heading

This is probably a sidebar heading

A guide to heading hierachy:

Text formatting

<p> – A paragraph, most default css will add padding to the bottom of a paragraph, so if your content is publishing as a huge block of text the WYSIWYG is probably just adding one <br /> (a line break rather than a paragraph) – you may need to click to HTML view and remove the br’s and wrap each paragraph in <p> and closing with </p> – most HTML tags need to wrap the content they are containing, otherwise the browser will continue in that context, so no closing tag and the rest of the page would be considered a paragraph and potentially confuse the browser

<br />A line break, see above, one of the exceptions a this is self closing

<strong>make the content bold <strong>this is bold</strong>

<em> -make something italic <em>this is italic</em>

<ul> – a list container

<li> – a list item

combine them for

<li>list item</il>
<li>list item</il>


  • list item
  • list item

<a> – a link, one of the building blocks of the web, this  tells the browser where the text inside the <a> where the link should point to <a href=””></a> – here we see the first attribute for a tag, some additional information informing the browser what it should do with that tag. in this case the link should point to

<img> – an Image  – maybe it’s too big and you don’t/can’t/won’t go to an image editor (by far the best method – but that’s another blog post) so <img src=”mygreatphoto.jpg” width=”150″ /> change the width and it will scale NOTE uploading your 10 megapixel holiday snaps and resizing to 100 pixels is not cool, also be careful of aspect ratios, if the height and width attributes are both present changing one with stretch the image.

<blockquote> – put something in a quote


<table> – if you want to display some data perhaps many CMS’s don’t have great or any table editors. Now the code is a little tricky but basically it follows something like this (not strictly accurate, nor standards compliant but we have to start somewhere and this will work):

<td>Heading one</td>
<td>Heading two</td>
<td>Value 1</td>
<td>Value 2</td>


Heading oneHeading two
Value 1Value 2

TR are rows and TDs cells much like excel.

Right so that’s the basics of HTML but what of CSS, now this is a bit more of a nebulous beast, but we can cover some of the basic styling concepts, now ideally CSS would go in a stylesheet  – a file linked within the webpage that sits of the server and isn’t really accessible for editing within the CMS – so for this we will need to inline styling (certainly not ideal, markup and styling where possible should be separated as this makes for cleaner, efficient, faster and more accessible code, but we are talking about people with access only to the CMSs hre). The CSS can be applied to the directly HTML tag but use of the style attribute, e.g

<p style="padding-bottom:10px;">some text with some extra padding</p>

this will add another 10 pixels (the default mesurement for much web design)

<p style="color:red;">I'm red text</p>

colours the text red, note the american spelling the code is called a HEX color and is a representation of any of 16 million colours (thus a code and not a name). See here for a nice long list of colours you can also use.


I’m red text

Alignment: maybe you want to align some text, or an image.

For text:

<p style="text-align:left;">align left</p>
<p style="text-align:center;">align center</p>
<p style="text-align:right;">align right</p>


align left

align center

align right

For images:

<img src="myaweslomeimage.jpg" style="float:left;" />, <img src="myaweslomeimage.jpg" style="float:right;" /> 

note the text will ‘wrap’ around the image.

Font size, increasing the font size can be something often the CMS will not allow, this can be mostly to ensure there is a consistency in the output of the content, the same can be said for the font. But there may be a legitimate reason for this being required:

Font size:

<p stlye="font-size:16px;">A bigger piece of text</p>

note that most text on the web will be around 12-14px depending on the site. So 15px 16px 17px will be ‘large’ text, 12px, 11px 10px will be ‘small’ text.


A bigger piece of text

Font type, now this is one to be taken rather carefully, not only are there very few fonts to choose from (for far too many reasons that I care to go into lest I bore you more that I already have) but using too many fonts on a size can be confusing and not very pretty. However a well placed header in Georgia can really bring the content out:

<h2 style="font-family:Georgia,"Times New Roman",Times,serif;">A serif heading</h2>
<h2 style="font-family:Arial,Verdana,Helvetica,sans-serif;">A sans-serif heading</h2>


A serif heading

A sans-serif heading

The reason we put three or for fonts down is because the user’s computer may not have that particular font available so in that case the next font on the list is used and so on.

Now that’s really only a taster, but for many purposes you won’t need too much more, the WSYIWYG although an excellent tool, is a blunt instrument, it tries the best it can but for those instances where you need a more precision instrument, HTML and CSS is the best way to go, click thew HTML view and delve about, there will be a lot of stuff in there and it can be quite daunting, but with practice the results will be better styled and robust content with less rendering errors.

Common ie6 fixes

Like many I tend to come across ie6 rendering bugs and like many have developed my own (read others) set of techniques to overcome theme.

Correct doctype, with full correct DTD, transitional or strict (solves so many issues without having to change anything):

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

Reset stylesheet (via Eric Meyer) the goal of a reset stylesheet is “to reduce browser inconsistencies” see here for a deeper explanation, again solves many many issues and enables a new build to start from the same starting point on every browser by resetting common element behaviour.

/* remember to define focus styles! */
/* tables still need 'cellspacing="0"' in the markup */
blockquote,q{quotes:"" "";}

And some other fixes I have picked up

/* -------------------- */
/* =IE6 FIXES */
/* ------------------ */
img {border:none;display:block;}
/*display block to avoid IE6 whitespace on inline elements
due to baseline spacing (for descender space),i.e. images*/

.inline {display:inline;}
/*used to fix IE6 double margin bugs*/

.haslayout {height:1%;}
/*used to fix IE6 haslayout bugs*/

.button {overflow:visible;display:block;}
/*add this class to form buttons with issues*/

a, a:link, a:visited, a:hover, a:active {color:red;}
/*link styles should be in the order LVHA esp for IE6 to display them well*/

Also, avoid/beware overuse of widths, heights, margins (esp with floats), too many position: relative’s (esp. nested position:relatives), widths + heights + padding + margin (box model issues, add padding/margin to fixed-width child elements). There are many more issues and many other ways to solve them, but generally most can be solved via fairly well documented locations, a good one here, otherwise search on google.

Adiós ie6

Sorry ie6, your names not down your not coming in.

ie6 is ancient, crap and quite frankly I can’t be bothered, not when it’s my own site. I deal too much with that in my day job to be arsing about with rendering bugs and bad programming in my own time.

So for ie6 users I have applied “Aggressive Graceful Degradation” via Andy Clarke and his Universal Internet Explorer 6 CSS.

The site is still very accessible via IE6, but just no visual goodies. There have been too many advances in css for me to stick with 6 year old knowledge, to allow me to grow professionally I need to be able to play with the new toys. I mean it’s not too much to ask for li:last-child or input[type=”button”] is it?

So if you are an ie6 user, just think of it as a realllly minimalist version of the design, or if you want to see websites not framed via technology from the last century upgrade now.

For those not using satan’s own browser, screengrab below:


2023 2022 2021 2020 2019 2017 2016 2014 2013 2012 2011 2010 2009 2008 2007 2006 2005 2004