DEV Community

Cover image for A pure CSS password generator! 😱 They said it can't be done...

A pure CSS password generator! 😱 They said it can't be done...

GrahamTheDev on April 13, 2021

I have seen loads of people say "it can't be done" and....well it can't (yet)! However after seeing this awesome post by Alvaro Motoro on how much...
Collapse
 
grahamthedev profile image
GrahamTheDev

@alvaromontoro your Bezos calculator made me realise this was possible, I hope you don't mind me stealing your CSS from the fiddle!

@afif once again your little tip in the comments made me realise this was possible, plus I realised I nearly killed you with the lack of CSS in my last post so I thought I better make it up to you! (don't hate my awful CSS skills...I know you could have done it in 2 lines of CSS using emojis whilst holding a candle...we aren't all CSS Gods! 🀣)

Collapse
 
afif profile image
Temani Afif

I see the CSS syndrom affected you πŸ˜‹ .. pay attention you may loss you SVG skills if you continue this way 😁

A small optimization using steps() jsfiddle.net/fvombg9y/1/

Collapse
 
afif profile image
Temani Afif

by the way, Alvaro wrote an article around random numbers on CSS: css-tricks.com/are-there-random-nu...

Thread Thread
 
grahamthedev profile image
GrahamTheDev • Edited

Interesting as I was looking for ways to do random and that article never came up, I guess that is a double shout out to Alvaro then! You were bound to have seen an article on this before....but I still haven't found a password generator with it (unless you are going to disappoint me!) 🀣

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

Thank you for the shoutout :)

You can actually make the CSS password generator accessible by using a method similar to the article (instead of having the letters in the ::before, have them in the HTML and show/hide them). That way, users will be able to select them.

But remember: the passwords generated this way are not secure. They are only pseudo-random, so the password can be guessed/cracked knowing some factors.

Thread Thread
 
grahamthedev profile image
GrahamTheDev

Yeah I did think that after Temani pointed me to your article, but I couldn’t work out a way of doing it that didn’t require 620 elements.

I hope I covered the β€œdon’t use this in production it isn’t actually random” clearly enough in the article but that is always the danger when you put code up, people just use it without thinking!

Collapse
 
grahamthedev profile image
GrahamTheDev

That is really strange, I tried with steps originally and things were ending up misaligned....maybe I was a dumb ass and put the wrong number in!

Collapse
 
afif profile image
Temani Afif

My one element idea (chromium only for now) jsfiddle.net/n9vjbr20/ .. well, couldn't resist to bring my hack to this one 😜

Collapse
 
grahamthedev profile image
GrahamTheDev

Can't you just let me enjoy my big brain moment for a whole hour before dazzling and destroying me with some CSS voodoo!

That one fiddle probably contains about 20 things I need to learn about CSS! lol.

Collapse
 
grahamthedev profile image
GrahamTheDev

Well I had to put it in the actual article....insanely creative mate!

Collapse
 
afif profile image
Temani Afif

an optimized version jsfiddle.net/u5t1bqsj/2/ still with less code πŸ˜‰

Thread Thread
 
grahamthedev profile image
GrahamTheDev

Even more amazing but that one seems to flicker for some reason after pausing and unpausing....I would give you tips on how to fix that obviously but I don't want to take that joy away from you πŸ˜‹ haha

Thread Thread
 
afif profile image
Temani Afif

yes I went to fast with the math. Here is the fixed version: jsfiddle.net/u5t1bqsj/3/

Thread Thread
 
grahamthedev profile image
GrahamTheDev

Right you can stop now! 🀣 Updated article with it now it works!

Collapse
 
javaarchive profile image
Raymond

Reminds me of those gifs I saw on social media where they tell you to take a screenshot of it to pick something random.
I'm curious to know if we can use keyframes on the cursor property to animate cursors.

Collapse
 
theowlsden profile image
Shaquil Maria

I just look at this and ask: WHY?πŸ˜‚ But for real, you learn something new about the capabilities of CSS every day.

Collapse
 
grahamthedev profile image
GrahamTheDev

No real reason other than introducing the concept of pseudo random CSS until we finally get random as part of the spec.

There isn't any real world practical use I can actually think off where I wouldn't use JS instead!

Collapse
 
theowlsden profile image
Shaquil Maria

There isn't any real world practical use I can actually think off where I wouldn't use JS instead!

And I was wondering about that.

btw nice profile image.

Thread Thread
 
grahamthedev profile image
GrahamTheDev

Thanks, that’s another random article I wrote about right there....I promise I do have a plan for my content writing but at the moment I am king of random lol

Thread Thread
 
theowlsden profile image
Shaquil Maria

I think I'll stick around to see how random it gets🀣

Collapse
 
jlrxt profile image
Jose Luis Ramos T.

Solo los dioses de css pueden hacer experimentos a capricho. Yo he aguardado esta publicaciΓ³n solo para jugar con mis tonterΓ­as, experimentar y aprender. Lo que es basura para algunos para mΓ­ es algo valioso. Saludos y gracias por compartir.

Att: aprendis de CSS. 🧸

Collapse
 
madsstoumann profile image
Mads Stoumann

This is fun! Even if it's not accessible, it's important to do stuff just for fun. I hadn't seen the Bezos calculator, that is just scary :-o

Collapse
 
grahamthedev profile image
GrahamTheDev

Yeah tell me about it! 38 seconds for an aston martin, I would have to work 38 years to get that 🀣🀣

Collapse
 
jaywcjlove profile image
ε°εΌŸθ°ƒθ°ƒβ„’

amazing!

Collapse
 
mafee6 profile image
Mafee7

amazing!

Collapse
 
syedumaircodes profile image
Syed Umair Ali

My mind = blown πŸ’₯

Collapse
 
grahamthedev profile image
GrahamTheDev

That’s how feel every time I see something by Temani! Makes me realise how much I have left to learn (and doesn’t help my imposter syndrome lol)

Collapse
 
cdthomp1 profile image
Cameron Thompson

I am keeping this, thanks!

Collapse
 
grahamthedev profile image
GrahamTheDev

All yours, I hope you find a way to make use of the principle (please don’t use it as it is though 🀣🀣)

Collapse
 
gijdoul profile image
gijdoul

is there a way to randomize using a list of word?