Comic: Technical Interview Elijah Manor • 2 months 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. @elijahmanor Manorisms elijahmanor.com/pun-interview Okay, I need you to write **code** to reverse this list /wha?/ wha? 1. Apples 2. Oranges 3. Pears 4. Lemons <ol reversed> <li>Apples</li> <li>Oranges</li> <li>Pears</li> <li>Lemons</li> </ol> Ahh, I can add the reversed attribute to the <ol> element Wait, what!?! No, not reversed numbers, 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.
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 article Facebook
Elijah Manor • 2 months