Have you ever seen a website with a reflective user interface?
Recently, I decided to take on the challenge of creating a reflective UI using only these three technologies: HTML, CSS and JavaScript. And after some experimentation and tweaking, I'm happy to share my results with you all.
you can check it out at: https://demo-gg.vercel.app/
Also it you like it please follow me on Twitter: @gitrevert
Naman Vyas ☕@gitrevert
I tried making this reflective UI ✨
it was fun building. I hope you'll enjoy it.
inspired by — @jsngr & @alexwidua
#webdevelopment10:50 AM - 07 Mar 2023
Top comments (13)
Fascinating, really cool experiment.
Since I gave you camera access, could you see me testing it out from your end? J/k 😅
Not now 😂, but nice idea, i will add this functionality soon
I think it sounds interesting and piques my curiosity. Creating a reflective interface is not an easy task that requires deep knowledge of web development and design. I read a lot about designing something reflective, I even used a reflective essay example for it. I would like to know more about the approach that was taken on this project and what difficulties arose along the way. In general, I believe that using HTML, CSS and Javascript to create a reflective interface can be successful if done correctly and with a lot of creative ideas. So I will be very glad if someone shares this with me.
Um, maybe do some more work on the security headers?
https://securityheaders.com/?q=https%3A%2F%2Fdemo-gg.vercel.app%2F&followRedirects=on
It was a fun project, created in 1hour so i didn't think of it much
Yes, I get that, but now you have a scenario where lots of people have their camera permissions set to "allow" for a website that you might let sit. Should its code (or vercel more likely) have a XSS vulnerability in the future, following a single URL from a dev.to post could give a bad actor access to their cameras unprompted, not to mention other script nastiness.
Always think about security headers by default, they are simple to add, even on small demos.
You should change "reflective" to "transparent" or "see-through", it's only a reflection if it's from the frontfacing camera.
Anyways, neat idea; keep up the great work.
😂😂, you can take my words
I love these programming languages.
ohh man 😅, sorry, updating rn, i used HTML CSS and JavaScript only
Sadly it doesn’t work for me. (iPhone XS, iOS 16.3.1).