The sheer simplicity is what's blowing me away. And the pacing was great. And it was entertaining. And the music is great. And his voice is relaxing. And the final product was more than I expected coming into this video.
@@user5214 He may know about marketing. There was a wave of marketing strategy where, as a seller, you tried to blown your customer mind, tricking them to come back to you for more. So, you end up selling sturdier equipment for quite a price, knowing that the customer will come back before its end of life to be "up to date". It's not effective for mass sales, more for sales where you intend to build a relationship. It's why it much less done those day. Still, when you hear "I know X, let's call him, he can figure it out", then you're in that case ^^
Wow! You make this look so easy! Great job, really well done. Recently got my first job in front-end development. Now you gave me a slight linger of impostor syndrome lol
Haha congrats! Don't worry, there is not a day that goes by that I don't have a bit of impostor syndrome. These videos typically take 2 - 4 full work days to make, so making it look easy is by no means easy (for me at least).
@@Hyperplexed hahaha I just called you a front end god in my comment, then I read this comment and see your humility. Thank you man, you're even better than I first imagined. Really wishing for your success and your channels success. Thank you again for sharing your thoughts and knowledge.
You've successfully gone into the realm of the unknown. Really cool effect at the end with the grid gutter showing the color behind it. I really like it. And then the transition to show what's behind is just so cool.
Caballero esto es oro puro, me encanta la forma que explicas incluso no se mucho inglés y siento que entendí cada parte que explicaste, Woow eres un genio.
for english users: Gentleman this is pure gold, I love the way you explain even I don't know much English and I feel like I understood every part you explained, Woow you are a genius. Edit (I used google translate cuz i was curious)
You're actually so underrated, got better graphics than most TH-camrs and way more concise. Have you considered doing TikTok? Your short form videos will probably do good there!
You are a front end god. I am so glad to have found this channel man, you have no idea. Thank you so much for sharing your thoughts and knowledge. Hoping I'll be half as skilled as you one day, someday soon.
that's just impressive, you just earn yourself a new subscriber. it reminds me how little i know about the fundamental of css and styling, this video really inspire me to learn more, and waiting for more video
What you can do extra is, generating the different colors for the body gradient when making toggled variable true; It'll generate different gradient every time we go back from tiles to gradient;
Both are great and it depends on what you want to do, but to be fair your gradient version rocks! Just insane what you can do with a few lines of code some libs, HTML5, CSS3 and JS!
This is a convoluted implementation if all you want is a responsive structured grid of items. He has a decent reason for this implementation, but you likely don't and will only overcomplicate your code.
Wonderful demonstration, very clear and extremely educational. Effect looks great and can be expanded upon for sure, I just gotta figure out a way to apply what I've learned now, haha.
Couldn't you simplify this approach by using "grid-template-columns: repeat(auto-fit, minmax(....))" ? You'd still need JS to calculate the number of child divs to insert, but the rest can be taken care of in the CSS I think. I haven't tried it yet though, so maybe I'm overlooking an issue?
Yep! The pen this is based on (link in desc) actually does it this way. In an effort to reduce some of the time/complexity of this vid, I went with the custom css vars, but you can absolutely do it the way you're referring to. For anyone curious, you can replace the grid row and column lines in the css with: grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: repeat(auto-fit, minmax(100px, 1fr)); and remove the lines setting the "--columns" and "--rows" variables from the js and the same effect will be achieved.
@@Hyperplexed Thank you for the reply! I was less than confident, glad to know I wasn't off base. And I totally see why you would avoid that approach to keep things streamlined.
I love the rainbow gradient effect one but the hexagon lover I am I bet this would be 10 times cooler as hexagons, sadly I wouldnt know how to do it myself
I don't know what I did wrong, but when a used a :before pseudo-element to make the mask layer I started having serious performance issues. My solution was to use as the gray cover mask a standard nested inside the .tile div.
Meanwhile I'm struggling to center the inputs of my form using the grid. The beautiful things you can do when you know your stuff, great content for sure!
This is by far my favorite web dev channel. Thanks so much for these videos. I must've missed something because when I was done writing all the code that you wrote in the video I got an error message for line 41 in js file saying that the value for the "quantity" parameter was declared but never read. There was something else that was fishy about the parameter in the .map method call in that function but I can't remember because I got done with the video and the code didn't work I went and copy/pasted the code from the codepen and everything in that kind of works except the ripple effect it might have to do with the fact that I can't access the font awesome icons linked in the description because the link is truncated.
no way you just tricked me to watch a js video cuz I thought it was about some anime related website anyways, great vid, don't like js but it looks cool af
So no one noticed there is a bug (maybe not bug in the example, but worth noticing): instead of 'document.body.clientWidth ' (or height) it should be wrapper.clientWidth (or height) - that way it works for a container instead the whole page (which we don't want because it will cram it too much. Cheers!
Are we moving backwards? 😂 Lot's of modern apps are so bloated that take ages to show up and work on economic often heating up smartphones. JS can do cool stuff but they design things as if they were making it only for desktops and for 5G in majority slow 3G world. Native stuff was doing well in past despite much slower hardware and internet. That flash era! The memories. There were also java applets.
Never learned so many things in CSS even through a dedicated tutorial video. This is awesome content, keep up the good work!!
The sheer simplicity is what's blowing me away. And the pacing was great. And it was entertaining. And the music is great. And his voice is relaxing. And the final product was more than I expected coming into this video.
@@user5214 He may know about marketing. There was a wave of marketing strategy where, as a seller, you tried to blown your customer mind, tricking them to come back to you for more. So, you end up selling sturdier equipment for quite a price, knowing that the customer will come back before its end of life to be "up to date". It's not effective for mass sales, more for sales where you intend to build a relationship. It's why it much less done those day.
Still, when you hear "I know X, let's call him, he can figure it out", then you're in that case ^^
This breakdown is insane! I spent, like, a month making my version of an Etch-a-Sketch project and implementing a flood-fill. This is extraordinary.
Don't know if you're doing the Odin Project but I also did that project before doing this and now I want to go back and implement some of this in that
@@robbyrish13 The Odin Project gang! God I remember doing that project too, now I can't even remember when was the last time I used vanilla js
@@iced2916 excuse me but what might this Odin be ??
@@siliconhawk it's a website that teaches modern full stack web development for free, it's pretty good
@@siliconhawkit's website for learning webdev
Wow! You make this look so easy! Great job, really well done. Recently got my first job in front-end development. Now you gave me a slight linger of impostor syndrome lol
Haha congrats! Don't worry, there is not a day that goes by that I don't have a bit of impostor syndrome. These videos typically take 2 - 4 full work days to make, so making it look easy is by no means easy (for me at least).
@@Hyperplexed that is the best response to a comment by a creator.
@@Hyperplexed ok i can sleep now
@@Hyperplexed hahaha I just called you a front end god in my comment, then I read this comment and see your humility. Thank you man, you're even better than I first imagined. Really wishing for your success and your channels success. Thank you again for sharing your thoughts and knowledge.
@@Hyperplexed sigh* now I can breath
You've successfully gone into the realm of the unknown. Really cool effect at the end with the grid gutter showing the color behind it. I really like it. And then the transition to show what's behind is just so cool.
such an underrated channel. thank you so much for this 😊😊
This channel is blowing my mind. I hope you continue making the awesome showcases.
Cheers
I quite like your video style. You're good at choosing which details to keep in and which ones to gloss over.
Actually epic. Glad I found you on reddit
Same!
@@apuji7555 me also glad. but I found him in youtube.
TH-cam Recomended me.
I think they work well in tandem with each other. Could even be used as an interface for a modular app where the pieces snap to the grid.
Gradient border. Easy choice. Looks so clean.
Caballero esto es oro puro, me encanta la forma que explicas incluso no se mucho inglés y siento que entendí cada parte que explicaste, Woow eres un genio.
for english users: Gentleman this is pure gold, I love the way you explain even I don't know much English and I feel like I understood every part you explained, Woow you are a genius.
Edit (I used google translate cuz i was curious)
You're actually so underrated, got better graphics than most TH-camrs and way more concise. Have you considered doing TikTok? Your short form videos will probably do good there!
Thanks!! So far I've made two TH-cam shorts that I also posted to TikTok, but I definitely need to make more!
@@Hyperplexed you don't need to Tik tok, your YT videos are just great😍
@@Hyperplexed please don't do tictoks, it will degrade your content's quality
@@vaisakh_km eeehhhhh..
@@vaisakh_km Nah not necessarily, there are loads of great content creators that make high quality short-form content on the side
I'm speechless. This is a keeper. Bravo. Standing ovation
Cant wait to use this effect and its variants ! Thank you very much, the way you explain step by step is really clear ! I appreciated it !
You are a front end god. I am so glad to have found this channel man, you have no idea. Thank you so much for sharing your thoughts and knowledge. Hoping I'll be half as skilled as you one day, someday soon.
i think the outlined would be really good for a header, and also the rainbow one for background
The border gradient version is absolutely beautiful
Sigma chad for making the outline version look that nice
How have I never found this channel until today. The content is amazing 💯
I'm a lover of tailwind css but this is making me love CSS so much lmao. Think imma switch back for a while in my next couple projects
Your trolling on TikTok is god-tier and your content on youtube is perfectly explained. 10/10 dude, keep it up!
You are actually amazing. I have never been so inspired 🔥
“Lets pretend we’re React for a moment, and create some HTML in our JS”
Amazing
very well may be the most informational video i've come across yet
That is crazy good! I absolutely love the one with the tile borders, congratulations.
You deserves even more likes and views!! 🎉❤
I just found a gem, your contents make my 🧠 to release a lots of dopamin 🤟
You're actually insane man this is so good
Instantly subscribed. THANKS TH-cam ALGORITHM!!!
First vid I've seen from your channel. Great. I need to directly watch the next one :)
that's just impressive, you just earn yourself a new subscriber.
it reminds me how little i know about the fundamental of css and styling, this video really inspire me to learn more, and waiting for more video
What you can do extra is, generating the different colors for the body gradient when making toggled variable true;
It'll generate different gradient every time we go back from tiles to gradient;
I don't understand how you don't have more than 20 million subscribers. And just what kind of people are disliking your videos.
You are a digital magician man! Such talent!
Both are great and it depends on what you want to do, but to be fair your gradient version rocks! Just insane what you can do with a few lines of code some libs, HTML5, CSS3 and JS!
your videos are really inspiring for a beginner. thank you so much!
You're a really great channel! You should do a tutorial series or something. A _ton_ of people would appreciate that.
Thank you! I will definitely consider doing that at some point!
Can I ask what kind of tutorial series you'd be hoping to see?
@@Hyperplexed honestly a concise beginners to intermediate would be great.
You are a literal genius
Really, really awesome! I am a sucker for the gradient version!
That's just amazing, somehow got this video in the recommended and instantly subbed. I'm not even a frontend tho.
After watching this, I think coding might be something I want to learn in the future! So cool
Why not something you learn now?
I would suggest starting with Arduino's, PHP or Processing.
Actually been trying to find a grid system for my personal notes application and I think I found it through your vids. Thx for the tutorial!
This is a convoluted implementation if all you want is a responsive structured grid of items. He has a decent reason for this implementation, but you likely don't and will only overcomplicate your code.
Wonderful demonstration, very clear and extremely educational. Effect looks great and can be expanded upon for sure, I just gotta figure out a way to apply what I've learned now, haha.
Damn 💯💯 your improved version rocks
That's art. Congratulations !
Missed opportunity to make the chess site staggered grid demo have a chessboard coloring on it
This worked incredibly well! I can finally play it thanks
Thanks! I've been searching how to get it and this is brilliant :D
Couldn't you simplify this approach by using "grid-template-columns: repeat(auto-fit, minmax(....))" ? You'd still need JS to calculate the number of child divs to insert, but the rest can be taken care of in the CSS I think. I haven't tried it yet though, so maybe I'm overlooking an issue?
Yep! The pen this is based on (link in desc) actually does it this way. In an effort to reduce some of the time/complexity of this vid, I went with the custom css vars, but you can absolutely do it the way you're referring to.
For anyone curious, you can replace the grid row and column lines in the css with:
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
and remove the lines setting the "--columns" and "--rows" variables from the js and the same effect will be achieved.
@@Hyperplexed Thank you for the reply! I was less than confident, glad to know I wasn't off base. And I totally see why you would avoid that approach to keep things streamlined.
Exactly, I was waiting for him to refactor it into this, but he never did D:. Still a really cool video though
You are making my life soo much easier
effortless, timeless, rainbow border takes the win
quick and simple explaination love it 10/10.
Came here for CSS, stayed for the ASMR vocal of yours.
so many things going over my mind 🤯
Finally TH-cam did a good job for Suggest me his video. 🥰🥰🥰🥰
holy shit that end result blew me away
Wow, instant subscribe to this content. Awesome stuff!
OH MY GOST THATS PRETTY
That's insane dude XD wow! Both are gorgeous :D
Epic graphics. Blowing my mind rn
I LOVE your video style
in 5 minutes he created this, meanwhile in 5 hours I can finally use the code I copied from Stack Overflow
Still working as of today! Thank you!
This did done blow my goddamn mind, fren.
I love your videos, I just found out about you and I'm first year in Informatics... You're definitely giving me so many ideas for my html exams
It looks awesome, you make it look so easy. great job.
I love the rainbow gradient effect one but the hexagon lover I am I bet this would be 10 times cooler as hexagons, sadly I wouldnt know how to do it myself
This is so cool. Thanks for the awesome video :)
amazing.
Didn't feel to skip any seconds in the video
I swear, like 50% of programming is just knowing what plugins others have written for the language you're using
that's actually so sick. nice
I don't know what I did wrong, but when a used a :before pseudo-element to make the mask layer I started having serious performance issues. My solution was to use as the gray cover mask a standard nested inside the .tile div.
Instead of passing --columns number from javascript to css, you can just do grid-template-columns: repeat(auto-fill, 50px);
what an easy new like and subscribe ! waw it's crazy how much we can do with css and js
You make really WOW videos! I like the border version more
Meanwhile I'm struggling to center the inputs of my form using the grid. The beautiful things you can do when you know your stuff, great content for sure!
Is this hitman voice? 😳
Cool work
😙👌 magnificently concise gold dust quality video, damn i want to try so many bits of this out already
i entered the video thinking it had something to do with japanese animation
anyway, learnt something new as an amateur web developer :D
This is by far my favorite web dev channel. Thanks so much for these videos.
I must've missed something because when I was done writing all the code that you wrote in the video I got an error message for line 41 in js file saying that the value for the "quantity" parameter was declared but never read. There was something else that was fishy about the parameter in the .map method call in that function but I can't remember because I got done with the video and the code didn't work I went and copy/pasted the code from the codepen and everything in that kind of works except the ripple effect it might have to do with the fact that I can't access the font awesome icons linked in the description because the link is truncated.
I can't code. I steal code from others. I hate myself to not invest more time to actually learn this stuff. I love you! This is awesome!
That's literally what coding & learning is 😉😂
@@ebrelus7687 feeling less bad now and preparing my application as front end dev now. 😅
The border one is awsome
mindblowing 🌸🌸(if u know u know, rip ronnie)
Beautiful and awesome ❤️👍
"why are sites slow??"
The code:
Really nice and helpful... Thanks!
no way you just tricked me to watch a js video cuz I thought it was about some anime related website
anyways, great vid, don't like js but it looks cool af
Amazing, thanks for insight
Awesome effect
Good Work
It worked! Tank you sir.
really nice, but I can't really imagine myself tinkering css at all, those things always go over my head
That's some dope ass shit if I've ever seen it.
You have earned a subscription ;)
Damn you make it look so easy
So no one noticed there is a bug (maybe not bug in the example, but worth noticing): instead of 'document.body.clientWidth ' (or height) it should be wrapper.clientWidth (or height) - that way it works for a container instead the whole page (which we don't want because it will cram it too much. Cheers!
Awesome! Also, instead of adding oncllick handler to the each tile, I thing you can add only single one on the parent maybe?
This is so awesome 👍🏻
Isso sim é perfeito parabéns pela iniciativa
wow...20 years ago building this was easily done in Adobe Flash with little to no effort. But this is still very cool!
Are we moving backwards? 😂 Lot's of modern apps are so bloated that take ages to show up and work on economic often heating up smartphones.
JS can do cool stuff but they design things as if they were making it only for desktops and for 5G in majority slow 3G world.
Native stuff was doing well in past despite much slower hardware and internet.
That flash era! The memories. There were also java applets.
Awesome content man. new subscriber