Comic: Technical Interview

Published

August 24, 2020

Reading time
2 min read
Comic about a Technical Interview

Animated Version

Using flex to reverse order is not a11y friendly, but it shows you can think outside the box. Also it helps to think about both sides of a problem, not always all JavaScript or all CSS. Sometimes the best solution can be a combination of both.@elijahmanorManorismselijahmanor.com/pun-interviewOkay, I need you to write**code** to reverse this list/wha?/wha?1. Apples2. Oranges3. Pears4. Lemons<ol reversed><li>Apples</li><li>Oranges</li><li>Pears</li><li>Lemons</li></ol>Ahh, I can add the reversedattribute to the <ol> elementWait, what!?! No, not reversednumbers, but reverse list order!Oh, that's easy!ol {display: flex;flex-direction:column-reverse;}

If you'd prefer to not have animation, there's a static PNG version of the comic available or you could turn on prefers-reduced-motion for your operating system. Another alternative is to mouse over the comic to pause the animation.

Background

This comic was inspired by two tweets from Mar 20, 2019 and Aug 6, 2020. You can find more developer comics like this from the comics page. The following code hosted on CodePen shows the HTML and CSS from the comic.

Share on TwitterDiscuss on TwitterFollow @elijahmanor
Web Mentions
0
0

Tweet about this post and have it show up here!