DEV Community

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

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

GrahamTheDev on January 25, 2025

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 th...
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
 
riobrewster profile image
RioBrewster

I have to disagree on your premise. Sarcasm is alive and well in the US. (Granted, the Biden years have made it more difficult to detect.)

However, this component would be extremely useful in email and especially for assistive technology. Maybe we can slip it into ARIA.

Collapse
 
savvy-itch profile image
Michael Savych

So nice to find some quality content for once here (not sarcasm)

Collapse
 
grahamthedev profile image
GrahamTheDev

Haha, I am now thinking we need a <genuinely> component to counter the <sarcasm> one! haha

Collapse
 
fyodorio profile image
Fyodor

But then you won’t be able to prevent sarcastic use of the <genuinely> component 🤔

Thread Thread
 
grahamthedev profile image
GrahamTheDev

It then becomes a game of triple bluff? 🤷🤣💗

Collapse
 
riobrewster profile image
RioBrewster • Edited

Actually <seriously> would be more performant.

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 🤣💗

Collapse
 
grahamthedev profile image
GrahamTheDev

A belated happy new year everyone!

I hope you are having a great one so far. 💗

Collapse
 
rer profile image
Joonas Väänänen

haha ::D Thanks guys, good humour makes a day :D <3 thx