DEV Community

loading...
Cover image for Star rating system - only 168 BYTES 😲, no JS, no CSS, no images 😨, Accessible (kind of)...the war is over

Star rating system - only 168 BYTES 😲, no JS, no CSS, no images 😨, Accessible (kind of)...the war is over

InHuOfficial
Specialising in accessibility and website load speed / performance. If you have a question about [accessibility] or [page-speed-insights] ask away and I will help any way I can!
・4 min read

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:

unlimited power meme - emperor Palpatine star wars

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 pattern attribute 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:

lapstjup came up with an interesting JS powered version, just has a few accessibility issues but overall a great contribution!

@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!

@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!

Discussion (18)

Collapse
inhuofficial profile image
InHuOfficial Author
Collapse
link2twenty profile image
Andrew Bone

Honestly that read a more like you were surrendering than winning 😉

Seriously though it's been fun, we should do it again sometime.

Collapse
inhuofficial profile image
InHuOfficial Author

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! 😉🤣

Collapse
afif profile image
Temani Afif

no no, the war is not over yet .. to be continued ...

Collapse
siddharthshyniben profile image
Siddharth

Yeah it's pretty much time to stop this, next time there's a war choose something more useful to build ;)

Collapse
dannyengelman profile image
Danny Engelman

It is easy to win a war if you only mention the 7 opposing parties that fail at creating a star-rating component.

Collapse
madsstoumann profile image
Mads Stoumann

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 😁

Collapse
inhuofficial profile image
InHuOfficial Author

Well in my eyes I actually think you did win but I can’t say that in the article 😜🤣

Collapse
madsstoumann profile image
Mads Stoumann

Lol, of course not! 😂 It’s been great fun, and always interesting to see different ways of solving stuff!

Collapse
sidcraftscode profile image
Siddharth Chaudhary (he/him)
Collapse
inhuofficial profile image
InHuOfficial Author

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!

Collapse
hugekontrast profile image
Ashish Khare😎

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.

Collapse
inhuofficial profile image
InHuOfficial Author

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...

mic drop Kylo Ren

Collapse
hugekontrast profile image
Ashish Khare😎

😊😎

Collapse
fcalderan profile image
Fabrizio Calderan

<ironic>
Why not a select with all the possible ratings as the options? it would make easier for the user to pick the right choice with just 2 clicks/taps
</ironic>

:D

Collapse
inhuofficial profile image
InHuOfficial Author • Edited

<sarcastic>
That is a great idea, if only someone had thought of that in the first place! 😉🤣
</sarcastic>

Collapse
madsstoumann profile image
Mads Stoumann

By the way, the Mood Selector was inspired by the happy or not terminals, not star ratings!

Collapse
inhuofficial profile image
InHuOfficial Author

@lionelrowe @adam_cyclones beat you 😋😎