DEV Community

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

Posted on

36 11 6 8 9

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

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

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (30)

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

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

Collapse
 
grahamthedev profile image
GrahamTheDev

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

Collapse
 
ben profile image
Ben Halpern

This is good

Collapse
 
dariomannu profile image
Dario Mannu

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>
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
grahamthedev profile image
GrahamTheDev • 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!) 💗

Collapse
 
ingosteinke profile image
Ingo Steinke, web developer • 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.

Collapse
 
grahamthedev profile image
GrahamTheDev

I like the idea of it being a void element, except for the fact that means I can't have my air quotes!

Honestly the feedback on this silly idea has been so great I now actually feel like it is a thing! haha

Collapse
 
valeriavg profile image
Valeria

I love this article! It’s very useful 😉

Collapse
 
grahamthedev profile image
GrahamTheDev

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

Collapse
 
valeriavg profile image
Valeria

Most certainly👌

Thread Thread
 
grahamthedev profile image
GrahamTheDev

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

Thread Thread
 
valeriavg profile image
Valeria • Edited

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

Thread Thread
 
grahamthedev profile image
GrahamTheDev

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

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

I like it for sure. The next step is to make it wildly available in Mardkown-to-HTML libraries, and of course, decide on the Markdown syntax.

Collapse
 
grahamthedev profile image
GrahamTheDev

~s sarcastic comment inside s~??
Don’t worry we will expand into all formats! 🤣💗

Collapse
 
doekenorg profile image
Doeke Norg

I can only assume the JS api for this component has an innit() method?

Collapse
 
grahamthedev profile image
GrahamTheDev

Nah, that is the <UrbanBrit> component, I am impressed you know of it! 🤣💗

Collapse
 
leob profile image
leob

Brilliant, this made my day ... and I'm honestly not being sarcastic here!

Collapse
 
marlonlom profile image
Marlon López • Edited

What about <meme> html tag/component?

Collapse
 
grahamthedev profile image
GrahamTheDev

I am not following? It is a web component? 💗

Collapse
 
zethix profile image
Andrey Rusev

It is bad enough I have to write color every day and spell things incorrectly

I'm always on the lookout for opportunities to sneak a cancelled label in US GUIs and apps. :)

Collapse
 
grahamthedev profile image
GrahamTheDev

Haha! Little wins 🤣💗

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay