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.
That’s, unfortunately, the issue: it doesn’t work!
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