Day 5 – Submit a photo

est.

Prompt 5/20

Photograph: Take a photo of street art, or find one you’ve taken previously. Submit it to the WordPress Photo Directory. Once it’s approved, share the link to your photo in the comments. (Or post it online and share the link in the comments.)

This is the photo I submitted, it’s a photo of an underpass in Hackney, London where over many years someone or some people have gradually glued old tech and other found items to a concrete pillar underneath a motorway, and spray pained graffiti over the top.

photo of an underpass in Hackney, previous paragraph decried this in more depth

Day 4 – Oldest WordPress website

est.

Prompt 4/20

Tell us about the oldest WordPress website you know of/worked on/built that you can find in the Wayback Machine. When is it from? What was it for? Screenshots encouraged. Post your response on a WordPress website and link it in the comments.

This site launched in 2004, however it was on another server (and maybe url) anyways the screengrabs of dogwonder.co.uk 04/05 from the Wayback Machine don’t work. The earliest I could find that was semi recognisable was December 2006. So 16 or so years.

And here is a screenshot of it then.

Screenshot if this website in 2006

Day 2 – Custom block #WP20

est.

Prompt 2/20 from #WP20 From Blogs to Blocks I chose the “Develop” prompt:

‘Create a new block! … Post your block in a GitHub repo (or somewhere else that works for you), then share a link to your block (and maybe a description) in the comments.’

As it happened, I needed to create something today. The use case was when I needed to add an HTML anchor to a page. This functionality is readily available for most blocks, but unfortunately, the specific custom block pattern I had built didn’t have the option to add an HTML anchor. So, it may be a bit overengineered, but necessity dictated my actions. I created the block using ACF Pro, with a single custom field called “HTML Anchor.” This field is then outputted as:

<div id="test-anchor" class="dgwltd-block dgwltd-anchor"></div>

You can find the complete code on GitHub.

And this is what it looks like in the admin:

Screenshot of custom block in WordPress admin for a block that allows for a HTML anchor to be added to a page

Additional tip: If you need to offset the scroll margin, such as when you have a fixed header or simply want to add a little breathing space, you can accomplish this using a helpful utility. H/T to Andy Bell.

[id] {
  scroll-margin-top: 2ex;
}

Day 1 – Origin story #WP20

est.

As part of the WordPress 20th Anniversary, I’ve decided to take up this challenge of 20 days of small, WordPress-related actions. Which in my case will likely be mostly blogging.

Prompt 1/20

It all started in 2004 on WordPress 1.0.1 “Miles”, not quite the full 20 but not that far off either. I think this was even before plugins existed.

Why

No idea, I’d been messing with WordPress for a few months. I had set up a little comedy blog with some mates in 2003 on WordPress. So when it came to building my blog I decided to use WordPress (I might have had a blogger prior to that). Completely forgotten where I had heard of it, but was reading blogs / Weblogs at that point so maybe via one of those (kottke.org?). Most likely I had read about someone that had migrated from MovableType over to WordPress and I thought that sounds like fun. Who knows.

What

My first post was a quote from Jean Baudrillard on 10th March 2004, in a (slightly) pretentious ‘I read philosophy’ stage of my mid 20s I liked a lot of the French postmodernists writings. But in many ways the post still stands up now:

“Virtuality, being itself virtual, does not really happen. One lives in the very Rousseauistic idea that there is in nature a good use for things that can and must be tried. I don’t think that it is possible to find a politics of virtuality, a code of ethics of virtuality because virtuality virtualizes politics as well: there will be no politics of virtuality, because politics has become virtual; there will be no code of ethics of virtuality, because the code of ethics has become virtual, that is, there are no more references to a value system.”

Jean Baudrillard in Cyberspace: Internet, Virtuality, and Postmodernity

How

The first timestamp I could find on the original blog theme was 20th February 2004 (it still exists, more on that closer to the 20th Anniversary). Given this is over 19 years old it’s not entirely unrecognisable.

The loop is there. Still here.

It’s CSS / HTML / PHP and a sprinkling of JS (image hover effects mostly) so a lesson there. Use fundamentals.

Yeah, there is some XML / XSLT showing its age somewhat but I was surprised how stable it all still is.

But check out this CSS. 

#container3 {
	width: 475px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	background-color: RGB(255,255,255);
	border-top: 10px;
	border-right: 10px;
	border-bottom: 1px;
	border-left: 10px;
	border-style: solid;
	border-color: RGB(255,255,255);
	position: relative;
}

475px!!! We were still optimising for 640px back then, CRTs and similar ancient tech. 256 colors (well 216 really), also I appear to be using borders as padding. Now given I still struggle with the box model this is not surprising. Also I wonder why I used RGB rather than HEX?

Nothing too surprising in the CSS although this stood out. 

#menu1, #menu2, #menu3 {
	display: block;
	width: 493px;
	height: 19px;
	voice-family: "\"}\"";   /* Need we explain? */
	voice-family: inherit;   
}

WTAF. ‘Need we explain?’ yes, yes we should. I forgot how many weird hacks we used to have to do. Netscape 7, IE6. It was crunchy. Very crunchy. I was so used to having to do weird shit I forget how blessed we are today.

Anyways, that’s the start. 2004.

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