GrahamTheDev

Posted on Jan 25

The <sarcasm> 🙄 component - now Brits can finally be understood on the web!

#programming #javascript #css #webdev

I don't think 'Muricans understand our struggle as Brits.

We make a killer sarcastic comment like "I love listicles, they are super useful" and they think we are being serious!

Now most of my European friends will recognise the sarcasm, but as a Brit I do find that my cousins from across the pond struggle with identifying sarcasm, especially in written text.

And the scariest part of that is that they might actually think I like listicles 🤢.

They should make me Prime Minister

Do not fear though, dear reader, I have solved the problem. I will be forever heralded as the saviour of USA-UK relations!

My creation is that ground breaking that I truly believe I would make a better PM than Mr Starmer (although that isn't a high bar to be fair! 😱🤣)!

At the very least I think I am in the running for a Nobel Peace Prize?

Prepare yourself to marvel at the majesty and beauty of the <sarcasm> component!

The sarcasm component

Did you cry?

I know I did when I saw it take it's first breath. The beauty of helping 70 million Brits finally express themselves was overwhelming.

Air quotes in HTML should have been a thing since day 1 of the internet!

It is bad enough I have to write color every day and spell things incorrectly, but I could have easily forgiven that if my needs and those of my fellow Countrymen had been considered elsewhere.

I have finally solved that injustice!

Go forth and multiply

To all my fellow Brits (and other sarcastic so and so's!) - go forth and spread the good word.

Use the component everywhere you can and rejoice in your ability to fully express yourself.

And you can rest assured you can use it without fear as:

It hides the SVGs from screen readers and adds a visually hidden "(sarcasm)" to the end so it is pretty screen reader friendly (open to suggestions on how to improve it though!).
If you remove the rotate(1.5deg) it would be even more accessible FYI.
It will adapt to font sizes and colours so will look ~~ugly~~ great in anything you do.
Comes with my standard 3 year warranty*

* this warranty, as with most warranties, is completely useless as we provide no guarantees either implied or explicit and is included purely for marketing purposes

That's a wrap.

A silly article (as to be expected from me) just to get back into the swing of writing and to say hi.

I hope 2025 is treating you well so far and I look forward to writing some more "useful and well thought out" articles and sharing with you all soon. (see why we need the sarcasm component?)

Top comments (23)

𒎏Wii 🏳️‍⚧️ • Jan 25

in practice, the component should probably detect if the language is set to en-UK or en-US and show or hide the visual aids accordingly :)

GrahamTheDev • Jan 25

OMG why did I not think of that, genius idea! 🤣💗

Ben Halpern • Jan 25

This is good

Valeria • Jan 25

I love this article! It’s very useful 😉

GrahamTheDev • Jan 25

Haha, as with all my articles right? RIGHT?? 🤣💗

Valeria • Jan 25

Most certainly👌

GrahamTheDev • Jan 25

And look at that, we already found a use case for <sarcasm>! hahahah

Valeria • Jan 25 • Edited

Jokes aside, I had fun reading it and I liked the subtle push for a11y. Well done!
</Not sarcasm>

GrahamTheDev • Jan 25

I like to do things subtla11y and slowly win people over 😁💗

Dario Mannu • Jan 26

Actually, autistic people are the ones who would love this the most. Brilliant idea!

<sarcasm> for web standards, not just a playful web component

May also think of an aria-actual-meaning attribute:

<p>
  Oh, that's just
  <sarcasm aria-actual-meaning="ridiculous">the best idea ever</sarcasm>.
</p>

Shame that whoever's being sarcastic would unlikely be using these tags... 🤞😝😂

GrahamTheDev • Jan 26 • Edited

I love the levelling up of the idea here! Would be nice to see if I can find a standards compliant way of doing this (perhaps, dare i say it, with title attribute or a custom implementation of the behaviour!) 💗