Sparklines

est.

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">
  <path
    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"
    stroke="transparent"
    fill="pink"
  />
  <path
    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"
    stroke-width="2"
    stroke="red"
    fill="transparent"
    vector-effect="non-scaling-stroke"
  />
</svg>

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 %}"
    stroke="transparent"
    fill="#ff8ec6";
/>
<path class="outline"
    d="{% for y in yPos %}{{ 'M' if loop.first else 'L' }} {{ loop.index0 }} {{ y }}{% endfor %}"
    stroke-width="3"
    fill="transparent"
    vector-effect="non-scaling-stroke"
    stroke="#000000"
/>
</svg>

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)
}

#WP20

est.

Well that went quick.

WordPress is 20.

As the top of this site mentions, I’ve switched this site over to its original theme built in early 2004. Truth be told, I can’t remember how I even heard about WordPress. I was working in the web for a book publisher then as a ‘Web Development Executive.’ I used to read other tech ‘web blogs’ around that time, so maybe one of those? No idea. But here we are. If I remember correctly, I decided to make a blog for no real good reason apart from a desire to:

a.) build a blog
b.) spout random crap to mostly no one. A precursor to doing c. social media.

I think what initially attracted me was it was easy to set up, and people like myself (frontend developers, I guess, before I even knew the term existed).

  1. Create a database from some god-awful UI like cPanel or something
  2. Populate wp-config.php with database creds
  3. FTP up some files
  4. Click a few buttons, and we are away

I had done only a little PHP at this point, but again WordPress made a lot of things ‘just work’ like The Loop, which still works today.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

Classic.

With these simple tools, I was able to create my own theme easily using mostly HTML and CSS and a sprinkling of PHP. It wouldn’t win any awards or pass any tests (not that that was really a thing), but it was mine. I could create a database-driven website with not much more than a text editor (my daily driver was either FrontPage 98 or Dreamweaver by this point) and an FTP application. That was it. Straight to prod. Apart from the general ability to break things directly, the overall experience was great, seeing changes happen straight away by editing a couple of lines of code, something that is sorely lacking in today’s tooling universe (notable exception Eleventy and a few others).

Gradually, as time went on, WordPress and plugins built by the community got better and better. A notable UX/Design overhaul of the admin by Zeldman in 2.5 (2008?) made it one of the easiest CMSs to use. The introduction of custom post types and custom taxonomies suddenly made it a viable option for client websites, so when I was in agency/consultancy land, we were suddenly using WordPress for bigger and bigger sites. ACF (2012/2013?) turbo-charged that, allowing it to be turned into a fully-fledged CMS, way beyond a blog. Really, unless you were doing heavily transactional/user-generated stuff, it really was ideal for a large number of small to medium and even large organizations. We built lots and lots.

I went solo in 2012 and pretty much specialized in building websites in WordPress. It wasn’t a conscious effort, but there was plenty of work around, I knew it well, and I liked it. As a frontend dev, I was able to do a lot more than I would have probably been able to on another system, mixing backend and frontend development and being able to deliver projects almost entirely on my own unless they were on the larger/more advanced side. I’ve built sites large and small, simple and complex, from a single-page site up to multi-site, multilingual for global organizations such as ONE.org that I’ve maintained for nearly 10 years. Even at one point, working with Jimmy Wales to attempt to create an editable news wiki site powered by volunteer users.

The switch to block-based sites took some time, and the transition between them seemed a bit rushed at first, and dare I say aloof. I had very little interest in learning React, and given recent discussions around the topic, I am glad I did not do so. But ACF to the rescue again! I was able to build custom blocks via ACF and PHP, which made me happy. It took me some time to really understand where they were taking the development of WordPress as it did somewhat feel it was away from people like myself, theme developers. I’ve always had a strong belief that I should not be a gatekeeper when it comes to people being able to control their own site. However, I also saw it as my role to make WordPress as easy to use for people as much as possible, so I could step away once my bit was done. I see now that things have matured, and the ability to do almost everything in the admin enables a range of admin types to create, edit, and control a website without having to worry about FTP, build tools, databases, PHP, and being able to do everything in the browser. It probably means a new type of developer/super admin that can build sites using the editor and hand it over to editors. This will make it much more accessible to many more people wanting to learn how to build websites and not have to worry about how to install node.

Now I build WordPress sites using custom blocks built around client needs. Theme.json allows me to translate design systems into the settings accessible via the front end and admin.

It may well be that the need to hire people like myself diminishes over time, and themes become simply a screen in the admin. Just like WordPress initially allowed more people to build content-managed websites in the first place without needing a computer science degree.

This is the way.

And maybe in another 20 years, I’ll be like one of those COBOL developers that’s brought out of retirement to fix some WordPress 5.8 build that’s got 60 plugins installed, and no one knows why it’s white screening.

So anyway, the long way around to say here’s to WordPress. Happy Birthday.

Day 19 – One wish for WordPress granted

est.

Prompt 19/20

Blog: If you could have one wish for WordPress granted, what would it be? Post your response on a WordPress website and link it in the comments.

This is so so minor, an inconvenience, a slight annoyance, and probably a waste of a good wish. But there is one user journey I try and do all the time from WordPress when I update a post or page the ‘View post’ link is waaaaaaay down to the bottom left.

Screen grab of new post screen on WordPress

I know it seems really minor and I know there is the permalink panel, but something like this would make my day so much easier (not even moving it just a new link top right next to the Update button).

Screen grab of alternative screen for post visibility

The main reason for this is I edit a lot of posts and pages (that are already published) and often ⌘-click on links to open in a new tab to look at them. So my user experience is edit edit edit, click update (top right) – wacky races with the mouse to go to bottom left in time to click ‘View post’, and if you don’t make it in time then it’s like 3 clicks to get to the url. The above solution would be inline with the Update button.

Again, I should not be trusted with wishes. Genies; please don’t engage with me.

I should probably just make a plugin for this right?

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