We're all familiar with dev.to's “Reaction Component” (although I'm still not sure, what the unicorn is for!) Here's a short tutorial on how to cre...
For further actions, you may consider blocking this person and/or reporting abuse
Oh you want to start the next war? I didn't think the last one had truly ended.
I don't remember signing the peace treaty on that one and Temani decided to fire another shot so I am just gathering my "forces" (pun intended)! 😉😋🤣
Few things (yes you know what I am like):-
iPhone - the
box-shadowanimation is buggy so your surrounding circle flickers when it transitions. Pretty sure it is an easy fix but cant spot it on my phone.It isn't accessible. Your
<label>will either say "React With Heart" (if you include thearia-labelyou showed in the first code snippet...you didn't add it to any codepens) and not read the value inside the<label>, or it will just read the value inside the<label>(which is not useful as it will literally read "75").Also when you increment your counter the number will not change for screen readers in your CSS only version so I don't think you could ever make that accessible without some hacks!
It would also be a good idea to add
aria-hiddento the SVGs just for robustness (as some older screen reader / browser combos will attempt to tell the screen reader that there is an SVG there). If you really want to cover all the bases also addfocusable="false"due to some ancient browsers making inline SVGs focusable!Obviously it still gets my ❤ and 🦄 as always, just thought I would point them out!
Now I am going to look at how DEV implemented it and see what issues they have when I get back to my PC 😉
Should I prepare the guns??
You picked the wrong Gif from that film! 🤣🤣
Oh and "Endhiran" is a film on my watch list if I can find an English Dub due to the insane clips I have seen, just looks beyond silly! It is Matrix, iRobot, Terminator, Transformers, Alita and Austin Powers in one movie 🤣
Never heard about that movie!
BTW: I was once in a Bollywood-movie! Spent a whole day “playing” a guy in the audience in a cinema in the movie “Na Tum Jaano Na Hum". I later bought it on DVD, but couldn't find the scene! 😂😂😂
Ok so now I have a new mission far more important than winning a war, find Mads on a film!
I will have to get the Blu-ray version so the definition is high enough to spot you! 🤣
That is one of those great little factoids to pull out of your back pocket, how on Earth did you manage that one?
I was backpacking with a friend in India, when a guy approached us in a café. He needed some “white dudes” to sit in the audience of a cinema, just behind the main characters. There wasn't any movie playing, so to simulate the “flicker”, a guy was waving two baseball bats in front of a large lamp! 😂
You don't need to use a counter. CSS knows
content: attr(…)for quite some time, see developer.mozilla.org/en-US/docs/W....Yes, but as I write in the article, it doesn't work with
attr(value), unfortunately :-(Or do you mean some other way?
You can use an additional data attribute.
How would you do the CSS-only version without a counter (adding or subtracting 1)?
Can't you initialize the counter from an attr()? Then at least you wouldn't have to abuse style for content.
Just checked again, that does not work either.
It's actually not the exact same thing, there's supposed to be a pulse when we click it. Realy nice though!
Thx! I didn’t look into animations, I’ll update the examples later