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?)

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Top comments (32)

𒎏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

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!) 💗

Ingo Steinke, web developer • Jan 27 • Edited

I remember a German/Denglish version with a more subtle syntax: </irony> (or </ironie>), but without an opening tag, just like @valeriavg 's </Not sarcasm> reply.