CodeSOD: Graceful Depredations

Cloud management consoles are, in most cases, targeted towards enterprise customers. This runs into Remy's Law of Enterprise Software: if a piece of software is in any way described as being enterprise", it's a piece of garbage.

Richard was recently poking around on one of those cloud provider's sites. The software experience was about as luxurious as one expects, which is to say it was a pile of cryptically named buttons for the 57,000 various kinds of preconfigured services this particular service had on offer.

At the bottom of each page, there was a small video thumbnail, linking back to a YouTube video, presumably to provide marketing information, or support guidance for whatever the user was trying to do.

This was the code which generated them (whitespace added for readability):

<script>function lazyLoadThumb(e){var t='<img loading="lazy" data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"> <noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>' ,a='<div class="play"></div>';return t.replace("ID",e)+a}</script>

I appreciate the use of a <noscript> tag. Providing a meaningful fallback for browsers that, for whatever reason, aren't executing JavaScript is a good thing. In the olden days, we called that progressive enhancement" or graceful degradation": the page might work better with JavaScript turned on, but you can still get something out of it even if it's not.

Which is why it's too bad the <noscript> is being output by JavaScript.

And sure, I've got some serious questions with the data-lazy-src attribute, the fact that we're dumping a div with a class="play" presumably to get wired up as our play button, and all the string mangling to get the correct video ID in there for the thumbnail, and just generating DOM elements by strings at all. But outputting <noscript>s from JavaScript is a new one on me.

[Advertisement] Utilize BuildMaster to release your software with confidence, at the pace your business demands. Download today!