Saturday 12 June 2021

Javascript Javagony 99 Bottles of beer (yes please)!

I came across a post on reddit, Javagony for Javascript? this morning and thought I'd have to give it a go:

const printSong = bottles => {
  isFinite(1/(bottles -1)) && console.log(`${bottles.toString()} bottles of beer on the wall,\n${bottles.toString()} bottles of beer!\nTake on down,\nPass it around,`)
  isFinite(1/(bottles -1)) && bottles--
  console.log(`${bottles.toString()} bottles of beer on the wall,`)
  isFinite(1/(bottles -1)) && printSong(bottles)
  !isFinite(1/(bottles -1)) && console.log(`${bottles.toString()} bottle of beer on the wall,\n${bottles.toString()} bottle of beer!\nTake on down,\nPass it around,\nNo more bottles of beer on the wall!`)  
}

printSong(99)

I'll keep an eye on other puzzles - the Blackjack one will likely keep me busy too!

Saturday 5 June 2021

Details/Summary elements and Lighthouse

Jumping like a jackrabbit on crystal meth

...was how an element was described as behaving upon being clicked.

This complaint was concerning an accordion element facilitated by Bootstrap4, so I decided to see what could be improved. I'm a holy terror for removing fancy geegaws with native elements as often as possible, evidenced by my deep and abiding respect for Description List (dl) (I know I'm not alone in that either, eh Wakkos?).

After checking to see just how well supported the details/summary paired elements were, I decided to give them a go (they're supported everywhere except IE11 - but we don't care).

That's an interesting point, though, isn't it? Just as Description Lists require matched pairs of Description Term (dt) and Description Details (dd) elements, the details must be provided with a summary element, which acts like a label. One wonders what would happen if we had one without the other...

A colleague raised concerns regarding accessibility and the likely impact on Cumulative Layout Shift (CLS). With a few minor changes to the markup (and a tiny bit of JS to update those changes), I reasoned that it would be more than satisfactory regarding accessibility. I also figured that CLS would not be an issue as clicking on the summary element within the details element would be a deliberate choice and thus not subject to the dictates of CLS. I set to work on a couple of glitches and then ran them through Lighthouse.

The Bootstrap4 accordion version did well with a performance score of 96, accessibility at 96, best practice at 93 and SEO at 91. The summary/details version scored with a performance score of 99, accessibility at 97, best practice at 93 and SEO at 91. No changes for best practice or SEO scores but a 3 point increase in performance and 1 point increase for accessibility. Nothing major to write home about, but better than a kick in the teeth.

Those figures are pretty decent indicators that the summary/details pair may well be the way to go. Quite apart from the Lighthouse figures, the HTML is slightly smaller using the summary/details pairs, measuring in at 4.8 kB - the Bootstrap 4 version measures in at 7.3 kB, but that doesn't include the Bootstrap Bundle and jQuery (Bootstrap 5 doesn't require jQuery).

I wonder what the impact would be using Bootstrap5, especially as it no longer requires jQuery?

I also got to thinking about inlining the JS and came up with this (using Bootstrap5 and no external JS):

<details class="card">
  <summary class="card-header"
           aria-expanded="false"
           tabindex="0"
           role="button"
           onclick="((e) => {
             const summary = e.target.closest('summary')
             const details = e.target.closest('details')
             summary.setAttribute('aria-expanded', !details.hasAttribute('open'))
           })(arguments[0])">
    <h2 class="h5 mb-0">
      Will Royal Mail need a signature?
    </h2>
  </summary>
  <div class="card-body">
    Our courier is no longer asking recipients to sign for items delivered on or after Saturday 14 March 2020. Please click here to find out more.
  </div>
</details>

Which can be shrunk further to:

<details class="card">
  <summary class="card-header"
           aria-expanded="false"
           tabindex="0"
           role="button"
           onclick="(e=>e.target.closest('summary').setAttribute('aria-expanded', !e.target.closest('details').hasAttribute('open')))(arguments[0])">
    <h2 class="h5 mb-0">
      Will Royal Mail need a signature?
    </h2>
  </summary>
  <div class="card-body">
    Our courier is no longer asking recipients to sign for items delivered on or after Saturday 14 March 2020. Please click here to find out more.
  </div>
</details>

Not pretty, but it works a treat. It also has exactly the same Lighthouse scores as the other, but is slightly larger in terms of the HTML, weighing in at at 6.6 kB.

Wednesday 2 June 2021

Walking for NASS

As you likely already know, AS is an odd illness because the primary way of alleviating it involves exercise. Exercising your aching joints can seem a nonsensical way of preventing increased stiffness later, but it seems to work a treat. Asking for a Blue Badge assessment does, I can assure you, lead to some quizzical looks. Sure, I can walk, and sure, I try to park as far away as possible from where I'm going, but - when I'm walking to my final destination once I get out of the car - I look pretty disabled; hobbling along like someone who needs some help.

Last year, my friend and colleague Claire Ashton started up a walking challenge to keep people engaged in physical exercise during the lockdown. She's written about the process on LinkedIn, and I'd recommend you read that article if you want to set up a challenge yourself. I signed up, and I think I did pretty well, primarily because I walk the dogs at least twice a day (if it's too hot, we knock off the lunchtime walk and instead do two long walks, one early morning and the other once the sun goes down). I also spent weekends walking, a lot! Even to the extent that someone stopped to enquire to check if I were OK.

After completing the walking challenge at work, I wanted to carry on. Claire and I followed a link from a colleague, joined her team, and signed up for the walk 1,000 miles challenge. That coincided with the Walk with us, Walk for AS fundraiser, so I adapted the template to 1,000 miles rather than 250, and away I went. I hit 1,000 miles at the end of April this year and achieved my funding target of £250.00 a few days ago. I've now signed up for the Pacific Crest Trail Virtual Challenge, which is a further 2,485.5 miles, and as of today, I'm 15.16% of the way there (I know because I wrote a Bookmarklet). Hopefully, I'll get there by the end of the year; at least once it gets a bit cooler, it'll be OK to take the dogs for long walks at lunchtime.

I still walk like I'm about three times older than I am (admittedly, that'd put me at near to 150 - but you perhaps know what I mean), and the tendonitis I've got in my ankle means that most steps are not in the least bit comfortable, but it does keep me active! And messing about with charting my progress, and working out percentages, has kept my mind engaged while I'm not walking. I've kept involved while walking with listening to audiobooks via audible and encouraging my youngest dog to drop the latest terrible thing that she's decided to eat. Every so often, I even manage to have someone else to walk with, now that restrictions are easing.

I hope NASS do the same next year; I'll certainly sign up again!