DEV Community

Cover image for Amazon Alexa Echo Dot in CSS, HTML and JS

Amazon Alexa Echo Dot in CSS, HTML and JS

Simon on March 11, 2021

In this article our goal is to create an Amazon Alexa Echo Dot in CSS, HTML and JS. You can see the full code on Codepen and feel free to experime...
Collapse
 
trueneu profile image
Pavel Gurkov

At first I thought, 'whoa! Such a lively image generated with a handful of CSS and JS? Nice!'

Then I looked at the CSS and saw embedded image BLOBs.

Collapse
 
hackercabin profile image
Simon

Yes, for the noise grain effect. I may look at that again, but base64 images seemed like the best way for that effect. Do you have a better suggestion for that?

Collapse
 
trueneu profile image
Pavel Gurkov

Ah, no, no. Basically I was just wondering how much of it is generated and how much comes from the BLOB. I'm a total idiot regarding frontend, so I don't have much to propose unfortunately. If that's only for the grain effect, that's still impressive!

Now I wonder if you could emulate a realistic grain effect. I bet you could, but I have no idea how complex would it be...

Thread Thread
 
hackercabin profile image
Simon • Edited

Yeah it does seem a bit of a get-out on my part to use a bg image at all even if just for that effect, it does spoil the otherwise quite small css. I pondered using some divs with random pixels in. I did a bit of research about noise grain effects and there seems to be no effective way to create a noise effect cleanly in css even in 2021.

Thanks for the feedback!

Thread Thread
 
trueneu profile image
Pavel Gurkov

Oh I see. That’s a pity.

Nevertheless, looks really cool :)

Collapse
 
ironcladdev profile image
Conner Ow

I'm not really skilled in SVG, but I think I've seen people use SVG masking to make a noisy effect.

Thread Thread
 
hackercabin profile image
Simon

Thank you, I will look into that.

Collapse
 
developeratul profile image
Minhazur Rahman Ratul

Cool!

Collapse
 
cklek profile image
Conrad Klek • Edited

Super cool! Does [...array(79)] create an array of length 79? Also, I’ve been using createElement and appendChild - how does that differ from clone node?

Collapse
 
hackercabin profile image
Simon • Edited

Thanks Conrad. Yep it does. To be honest there's lots of different approaches to achieve the result I was after. I am sure yours is also valid.

Here is more info developer.mozilla.org/en-US/docs/W...

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

Hey, bro thanks for sharing but you can make it responsive too ;)