Recently, a lot of folks tried their best to provide a star rating system. Now it's time to bring THE "star rating" that will change the world!
I ...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
Love it!
Most people would think that you have won....but if you think a 1 star version is going to end this then...
p.s. I love that the Star Wars silliness is continuing! I wish I was a mega fan so that I could use some obscure references!
I still have a lot of secret weapons for this war while you folks already used all your Mana!!
*furiously looks up references
There are nine million bicycles in Beijing
That's a fact
It's a thing we can't deny
Like the fact that I will love you till I die
That is what Katie Melua sang in 2008 : youtube.com/watch?v=eHQG6-DojVw
I have the utmost respect for people doing great stuff with HTML+CSS only
Then again, I have the utmost respect for people riding uni-cycles.
There might be 9 million bicycles in Beijing,
there are about 22 million bicycles here in the Netherlands (aka Holland).
And I have yet to see one person riding a uni-cycle to work.
Websites without any JavaScript are possible; but let us be honest.. that is like riding a uni-cycle.
You don't want users messing around with N lines of (error prone) HTML and M lines of (error prone) CSS when all you they have to do is:
The <one-star-rating> Web Component
Using JavaScript to create a Custom Element with shadowDOM allows for optimized HTML/CSS
.starclass<div>Here is all code required:
Buy a uni-cycle
If you really want one, here is a good site: hollandbikeshop.com/en-gb/children...
As you can tell from the URI, not many adults buy uni-cycles here in Holland.
But what about an N-star rating?
Here is my 2-wheels version: dev.to/dannyengelman/twinkle-twink...
Star wars... ROTFLMAO
biddi biddi biddi
I am never against the use of JS ;) I simply want to push the limit of CSS to see what we can do with it and I agree that the idea of web component is good.
I already saw your other post, too bad it didn't get a lot of success.
This doesn't work, at all, on mobile.
It does, for me atleast. Maybe you are on Safaria
Yes, I am on Safari. Not a great solution if it doesn't work on the most widely used mobile browser 🤷♂️
Well... Safari is not the most used browser...on mobile its Chrome to.
remove aspect-ratio and replace it with height and it will work on your mobile.
Sorry but targeting all the devices is not my goal here (or any of my posts). I want to explore the future of CSS and use the new things. I don't want to wait 5 years until all the browsers support all the features to use them.
I agree with you, I totally ignore Safari market and build Production sites only for modern browsers, if you use Safari well you can't use my Site so your problem... and btw Chrome on IOS is not Chrome its Safari under the hood. Apple politics....
That's a pretty poor attitude to have.
It may not be most popular but mobile Safari still has a 23% market share. You're alienating a lot of users with that attitude.
It's also just laziness. Safari is absolutely a modern browser.
You have understood my comment wrong. Are you aware about the new feature that are released or planned to be released each day? do you know how much time such feature will take to be supported?
I am not that guy that will wait 5 years for a feature to be supported in all the browser to write an article about it. I am the guy that will write articles about the new features as soon as possible so people know the future of CSS.
I never claimed in any of my articles that I am building things to be used for production right now.
I am not alienating any users. If you are looking for something supported in all the browsers (including IE) to be used right now then ignore my articles because this is not what you will find on them. If you are intrested to see the new CSS features and what can be done with them, then I invite you to read my articles.
The same logic is done in all the fields. A lot of people talk about their invention and ideas that will be available to the public in many years.
I was responding to Ivan's comment.
I know its not the best way to develop if you want to support as manny people as possible but Apple lags behind most of the time and doesn't care much about the web which is very sad, they need to understand that App Stores can't replace a browser.
That may be true but with that attitude you're alienating a large user base, regardless of how you feel about Apple.
@inhuofficial @madsstoumann @link2twenty @lapstjup @siddharthshyniben
The star wars is not over !
Well, you'll need 24 hours to recharge. By that time, I'll bring my own weapons!
Nope, I doubt that this is intuitive enough.
Everyone knows how to rate the 5 star thing. Here I needed to click around to understand your rating system.
But I think it would be nice for displaying the total result.
Besides that, it looks very neat. Good job!
of course it's not intuitive since it's a new concept. Anything new need a lot of time to be widely adopted and known by everyone.
You think the classical 5 star rating was intuitive since the beginning. I don't think so.
Ok ok, I agree with you :)
Maybe an outline for all segments would help :D
I hope I don't hurt your motivation if I give you two more problems I see with it:
I am not following any standard, I am creating my own standard ;) I already talk about the direction in the article and said that I don't want to deal with left-to-right or right-to-left. I invented a new "circular universal direction".
You see this as a problem but I see it as a future solution to the actual problems ;)
I very like it from a conceptual perspective but UX on mobile (when Star is smaller) is very low.
Alternative for small Stars: Tap to fill IT step-wise (1 Tap is one Part, 5 taps is a full Star)
I made a new version here: dev.to/afif/the-safe-star-rating-t... similar t o what you suggested ;)
Yes good idea. The concept is new so I still didn't explore all the drawbacks and the optimizations. Let's say this is the "Beta" version and maybe in the future a more robust one will come ;)
I've been keeping up with this saga since day one... I'm now convinced - dev is my new home. I think I'm going to like it here.
first, no JS make you code faster using the native CSS feature then it's more funny to make creative things without JS ;) With JS you can easily achieve almost anything. You can pick a plugin from the net and build a 3D Star rating without any issue.
A 3D star rating....where are your spies, where?!
you cannot imagine it, it's beyond your limited imagination 😈😈
Wait are we going full threejs...
Coz if we are... 😅😉
This is such a novel design, I'm not sure where to go next without JS. 😅
My powers are weak.
Unfortunately from UX (accessibility) perspective, this seems to be step back. Every touch element should be at least 10x10mm (55px). Also gaps between elements at least 3mm. It makes the star to be at least 140px x 140px. Don't need to do calculation to see that not space is saved by your solution. It rather looks like your solution takes more space than 5 starts in row :)
I won't use the word unfortunately. This is a new design/idea of rating so for sure it cannot be something good and cover all the needed aspects (good UX, accessibility, etc). Like any thing new, this a first draft that can be improved and if you read the next article I wrote after this one you will see that I have improved the ONE star with another ONE star version
😅
Too much? 😉
Damn, I wanna go back to when @afif was building 100 loaders.
CSS wars.
Though, the best solution will remain to be having no rating system in the first place. 🤣
I will be back to the 100 collection ;) but I cannot leave a war without winning it! people need to know who is the boss here !! :p
hahaha, best of luck to all the kings here
poetry
nice
Great idea, thanks for sharing
Really interesting concept.... would love to see how the future plays out and if you might have inspired some developers/designers to create a one-star rating system. Love the idea!
Interesting....
I hate this and I love this, thank you
COOL! :D
I adored the concept...
This would also solve the accessibility issue, especially with the RTL to LTR conversion.
Nice!
I couldn't have even made anything like this in CSS, but Javascript is another thing, so...Prepare!
You are only going to change the world?
I would like to see a styled components ⭐
Its good but less convenient somehow
Absolutly great!
But for most of time, the star rating should be Google schema structure data appove, how about this one ?
the schema is not relevant here because it's something you need to add by yourself to let google know and understand the rating.
I'd use a circle instead of a star. I think it may display way clearer in small sizes 🤷♂️
Very cool!