Dominic Myers writes about all sorts of stuff to do with HTML, CSS, JavaScript and a fair chunk of self-indulgent stuff. Thoughts and opinions are all his own, and nothing to do with any employer.
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!
...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):
<detailsclass="card"><summaryclass="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])"><h2class="h5 mb-0">
Will Royal Mail need a signature?
</h2></summary><divclass="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:
<detailsclass="card"><summaryclass="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])"><h2class="h5 mb-0">
Will Royal Mail need a signature?
</h2></summary><divclass="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.
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!
I did 1000 miles of exercise at the beginning of the year (I'm only £20 off my target if you want to follow that link and donate?) using My Virtual Mission and found myself at a loose end when I finished the challenge... so I signed up for a new one. This one is a lot longer (2,485.5 miles), and I've been assiduously adding my steps and cycle rides every morning since I started - but I don't know what percentage I've completed. So I wrote some code in a Snippet and converted it, once it was doing what I needed, into a Bookmarklet: Get Percentage. I've found it works well so feel free to copy it to your bookmarks should you also want to see your millage converted to a percentage.
I was working with a designer recently and so had to convert px measurements to REM. Given that I set the base font size to 16px, I figured the fastest way to develop some utility classes was using SASS. This script seems to generate enough utility classes and, should I need anything more for a class or id, I can use #{(1 / 16) * x}rem;, where x is the number of pixels from the designer.
The function needed to be compliant with ES5, and the data was in this format:
const bob =[{"bob":{"1.1":11,"1.2":[{"1.2.1":121},{"1.2.2":122}],"list":[{"bob.1.1":121},{"bob.1.2":122}]}},{"bob":{"2.1":11,"2.2":[{"2.2.1":121},{"2.2.2":122}],"list":[{"bob.2.1":121},{"bob.2.2":122}]}},{"bob":{"3.1":11,"3.2":[{"3.2.1":121},{"3.2.2":122}]}},{"fred":{"4.1":11,"4.2":[{"4.2.1":121},{"4.2.2":122}],"list":[{"bob.4.1":121},{"bob.4.2":122},{"bob.4.3":122}]}},{"bob":{"5.1":11,"5.2":[{"5.2.1":121},{"5.2.2":122}],"list":[{"bob.5.1":121},{"bob.5.2":122},{"bob.5.3":122},{"bob.5.4":122}]}},{"bob":{"6.1":11,"6.2":[{"6.2.1":121},{"6.2.2":122}],"list":[{"bob.6.1":121}]}}]
Only the `list` was required from objects called `bob`.
I was restricted to using ES5, so I came up with this:
const bobs = bob.reduce(function(a, c){if(!!c.bob &&!!c.bob.list){Array.prototype.push.apply(a, c.bob.list)}return a
},[])
console.log(bobs.length)
"They feel that you're technically excellent and would be a brilliant addition to the team, but that your skill set isn't quite the right fit." I've heard that, or something similar, an awful lot over that over the past few weeks, and I blame video interviews. Let me explain.
My IT career is relatively short, as this is my second career. I had a previous job where I got to a pretty senior position; then, I changed direction to do something I was fascinated by when I could afford to. An off-the-cuff and spontaneous interview later, I landed my first IT gig; I've not looked back.
About to start my third IT role, I'm more than excited by the prospect, but the journey to this position hasn't been all that easy. Several interview processes commenced, and they all started well. There was the screening phone call which went well; then there's the broader - video-based - interview where they can see me and see how old I am. I enjoy this; it's always nice to put a face to the name of the person you've been chatting with.
Then the feedback comes - and, by far, the majority of it runs along the lines of the quote above. I think that's fair enough, TBH; employing someone is nothing that should be taken lightly - you're likely to be spending significant time working alongside them, and if they're old and set in your ways, that could get old, real quick. But how come all the responses are so similar?
I got to chatting with a friend, and she'd been in interviews with her old gaffer and, should a candidate be over the age of 40, there was an automatic black mark against their name. Her gaffer thought that anyone that old would be far too set in their ways to learn something new, let alone work flexibly. Let me tell you: after my previous career, learning and flexibility is all that I want in a role! I guess that's disingenuous, though; there's the opportunity for learning and flexibility in any position; a job is what you make it after all - but IT-based professions seem to relish change and growth.
So I'm left with the feeling of being every-so-slightly discriminated against, thanks to my age. That's not something a middle-aged, middle-class white man can often say. As John Scalzi points out, we've automatically got an advantage and run the game of life on the lowest difficulty setting. It's not the end of the world either; neither does it bear any resemblance to the discrimination faced by others. It simply means that my CV has to be polished a smidge more and that I have to prep a little more. It also means that the process is a little longer and that I hope that the people interviewing today are a little more enlightened than those who interviewed me yesterday.
But, hey, I like meeting new people and talking with them - so I'm sort of odd in that I enjoy interviews. Some people like exams (mentioning no names, but it's my mate I mentioned above), so I guess I'm not that strange in the greater scheme of things. And I might even be wrong; perhaps I wouldn't be quite the right fit? I came across this post on I Programmer and wondered if that would work as a replacement for that final video interview, but I don't think it would. It would be best if you had that face-to-face contact to ensure you're going to be able to work together. Besides, I've been caught out by big-O notation questions before.
My friend has just read this, and she pointed out that her gaffer also thought that if you were over thirty and not in a "lead" position, it meant you weren't any good.
