What started as an innocent post on creating an accessible star rating system that was useful and pointed out the problems with most solutions has descended into madness. In this post I end the star (rating) wars!
People have started creating star rating systems that don't use stars or anything even resembling a star, people are making inaccessible rating systems (the very thing I was rallying against - and @lapstjup is certainly not alone!), some are even making star rating systems that don't work on 20%+ of browsers.
Well you know what, lets end this right now as I have:
Here it is, a star rating system that:
- uses something resembling a fucking star (the number 1 prerequisite for a star rating system!)
- works all the way back to IE9 and beyond! β
- is tiny at 168 bytes all in! (and that includes the label which could probably be shorter!) β
- has validation built in β
- is easy to use β
- requires no JS β
- requires no CSS β
- is accessible (kind of, the control type is confusing, although if this wasn't silly you could use the
patternattribute to fix this! Also as I stated in my other posts you should use explicit labels rather than implicit ones (for="id"style labels)) β - even includes submission to your server (if you set the action - might double the size of the control though!) β
I present to you the winner of the star (rating) wars
So there you go, it is all over, go home you all lost.
(and yes, I am of course joking!)
In case you wanted to catch up properly
This saga has been insanely funny, here are all the posts I can remember as part of this so far (I am sooo sorry I started this! ππ):
An actually useful post:
Article No Longer Available
lapstjup came up with an interesting JS powered version, just has a few accessibility issues but overall a great contribution!
Article No Longer Available
@madsstoumann fired back and I have to say I absolutely love this idea and I am stealing it, if you read any read this one as it is accessible and works in everything other than IE!
@afif showing off his CSS skills as always!
@link2twenty just got this one out before my rebuttal piece (and is better than mine)
Where it all started to become very silly!
Me again includes my lightsabre star rating system at the bottom - this is where it all started to go wrong!
Article No Longer Available
@siddharthshyniben came up with a version for the terminal
A great take on star rating systems that shows us what we will be able to do in the future with CSS once the browser vendors catch up! Very educational and a clever concept too!
A better terminal version, taking the concept of the previous post but with ASCII text!
Simple but effective, accessible too!
This is where "star rating" started being stretched
Yet again, not even using stars anymore!
@lionelrowe decided to spice things up with a rating that introduces negative ratings like rotten tomatoes! But doesn't use stars once again!
@adam_cyclones decided to put a very silly one in from their phone! Sorry Adam I only give you one star for this!
All caught up now with this post being the latest!
You silly billy
Yes I know! Sorry for polluting the feed with this crap.
I am hoping everyone just gives up now because you know what, star rating systems are actually pretty rubbish as they don't give an accurate picture!
Top comments (17)
I win!
@afif @lapstjup @madsstoumann @link2twenty @lapstjup @siddharthshyniben
Honestly that read a more like you were surrendering than winning π
Seriously though it's been fun, we should do it again sometime.
Well I have a list of 140 different web UI elements so I think when this does finally end (as @afif doesn't look like he can admit defeat after this devastating post of mine) we have about 5 years worth of wars we can wage! ππ€£
no no, the war is not over yet .. to be continued ...
Yeah it's pretty much time to stop this, next time there's a war choose something more useful to build ;)
It is easy to win a war if you only mention the 7 opposing parties that fail at creating a star-rating component.
Iβm from Denmark, where we β like our Scandinavian neighbours β live under βthe law of Janteβ, meaning we canβt brag or declare ourselves winners. Even if we feel like it π
Well in my eyes I actually think you did win but I canβt say that in the article ππ€£
Lol, of course not! π Itβs been great fun, and always interesting to see different ways of solving stuff!
I think that dev.to/afif/scalable-star-rating-w... won
Doesn't work on IPhones so (for now) it is a great technical showpiece...do NOT use it in production!
Always love Temani's work as his remit is "this is what the future looks like" and I always learn loads of neat tricks and tips - but don't just copy it without thinking for anything today, bookmark it and use it when Apple catches up!
This was pure brains. I liked the way the field was used as the rating system.
Bro when I looked at it, it was like I saw you mic dropping on everyone else.
Damnit, I wish you had commented earlier as a Mic drop would have been far better than a hip thrusting storm trooper to assert my dominance.
In honour of your big brain idea...
ππ
By the way, the Mood Selector was inspired by the happy or not terminals, not star ratings!
<sarcastic>
That is a great idea, if only someone had thought of that in the first place! ππ€£
</sarcastic>
@lionelrowe @adam_cyclones beat you ππ