™ Inspired local wordsmith.
My React framework
<script>const urlParams = new URLSearchParams(window.location.search);</script>
<?php isset($_GET['foo']); ?>
<?php $query = new WP_Query( $args ); ?>
<meta name="view-transition" content="same-origin">
Sparklines
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)
}
Phone boxes: a new batch
A few from Taunton train station, including a KX200 🤓
Normal service has resumed…
Well after a month of running this site as it would have been in 2004, all good things must come to an end, so have reverted the theme back to it’s latest iteration (well latest less one, tried out Full Site Editing, and nah, php baby).
Here is a screenshot for posterity.