🔥 🐊 Here's how to reverse-engineer the cool UI tricks on alligator.io. Which website should we breakdown next? 1:40 Setup 4:18 Polygon Header 5:13 CSS Dropdown Menu 7:56 Theme Switcher 12:59 Rainbow Animation
big oof.. you made this in 2020 without mentioning prefers-color-scheme wich essentially allows visitors to have a set default based on their system settings.
@@GottZ I mentioned it in the last video "100 seconds of CSS variables". It's useful, but this was more about site-specific theme controls. I could have duplicated some of the vars in to a media query, but too late now :)
This is really cool - thanks for the video. I'd be interested in seeing how the login page at discord (discord.com/login) achieves that animated squiggly thing at the top left corner upon page load. Just a thought..
@@-leovinci oh, and focus within isn't generally supported neither xD Sadly as much as the new functionality is handy, in most cases you still need to use old ways to ensure anyone can see your website
Hi dude, I'm from Brazil. I'm learning English and study to be Full stack developer and go to work in canada. Your vídeos help me a lot in both, English and programming. Thanks a lot ♥️
Hands down one of the best developer who is teaching meaningful things. I find a huge gap in the teaching industry where all the focus is on the foundation and understanding the basics but the problem is that they don't take it a step further and explain how would you build something having learned those skills or breaking down an existing product to go step by step to reverse engineer certain topic. Absolutely love your content, it's concise and just spot on. Definitely gonna watch all your videos and share :)
holy moly that :focus-within drop down css changed my life.. I have been doing stuff like the css checkbox menu trick or javascript. Thank you for the pro tips
Nice video. There is a lot of useful stuff. It is also recommended for hidden things like switcher use `visibility: hidden` to prevent invisible switcher from catching clicks, and for accessibility
Man your the BEST!! Noone out there make such great content with such high production value. Plus this thing were you introduce new stuff, like the -webkit-scrollbar in the navbar video and the clippath , rainbow animation in this video are super nice. Like I searched how to create wave shape for divs using css the other day and didn't get any helpful answers. But surprisingly this video taught me how to make triangle shape ( Can I make wavy shapes too? I'll try to if yes). Please keep making content like this. Love this Channel.
As always an awesome one Jeff👍. Would be great if you could add a quick side-note on the video about browser compatibility, whenever you use a cool CSS property. Will be a real plus. Thanks for all the work you put in.
I used google analytics on my website and none of my visitors use legacy browsers. 80% of them uses chrome becouse it is default on most android phones,rest is samsung internet and safari
@@pulga961 it's not just about mobile. We have huge enterprise customers who end up using IE a lot. It's always good to know a compatibility score while watching before getting too excited about features like clip-path. caniuse.com is always there but a quick compatibility view is a feature that can be an awesome addition.
You could have used the classList.toggle method to toggle the solarized class. It also returns true or false depending on the value, so you would still be able to have if statement with just one line referencing the solarized class.
Great content! Some topics I'd like to see covered are SVGs and parallax effect. Oh, and a question: can you use the same dropdown trick to implement a mobile, hamburger-style, version of the menu?
nice video as always :D but I think there's a little issue when creating a dropdown like that.. the elements are still there and are clickable .. they're just not visible to the user.
I noticed that too, any fix for that? Im thinking to make those theme changing "buttons" insert right on to nav bar and visible all the time with no text just the circles
Inspired by you angular + firebase course, I started making my own app. I'm having too much fun and your resources are very very useful, but what's my weakest side is the architecture design, principles and common mistakes in a more complex angular pwa, so I was wondering would you be interested in making a video about that :-)))
The CSS looked really nice, but some of the JS did not look good. Especially that part where you added a string to the styles. Flutter FTW! Awesome to-the-point video though! ✌️ Love your channel
For the dropdown menu, why did you choose "opacity: 0" when you could have chosen "display: none"? Is there a best practice in there or is it simply preference?
hey i had an idea for making a homepage for my chrome for when i make like new tabs and stuff. i want to make a start page with like a clock, links to websites and i'd like to make the background photos of my google photos, or make like a little box where there are pictures from my google photos library (kind of like when a chromecast is displaying nothing there is a photo wall). any tips on how to do this?
I always see you use `element.onclick` with arrow functions for event listeners, but I usually use `element.addEventListener()`. The `onclick` syntax is a little nicer, but I've always believed there was some downside to it. Is there a reason to use `addEventListener` over `onclick`?
i wanted to know if its hard to build a site just like alligator io just the layout and functionaily not much the logos those boxes on the site are containers i think are link to differbt routes but not sure
I got it to work by creating a @mixin for the color and background, using the --variables like from the example and added those to .light and .dark. Then in body, I added an @extend of whichever theme was my default.
🔥 🐊 Here's how to reverse-engineer the cool UI tricks on alligator.io. Which website should we breakdown next?
1:40 Setup
4:18 Polygon Header
5:13 CSS Dropdown Menu
7:56 Theme Switcher
12:59 Rainbow Animation
big oof.. you made this in 2020 without mentioning prefers-color-scheme wich essentially allows visitors to have a set default based on their system settings.
@@GottZ I mentioned it in the last video "100 seconds of CSS variables". It's useful, but this was more about site-specific theme controls. I could have duplicated some of the vars in to a media query, but too late now :)
If You use CSS Hudini You can also animate gradients, that's cool thing to show.
This is really cool - thanks for the video. I'd be interested in seeing how the login page at discord (discord.com/login) achieves that animated squiggly thing at the top left corner upon page load. Just a thought..
@@andrews3386 good, crunchy, epic css
I've learn 2 things today, variables in CSS are really useful, and "clip-path", this is golden. Always learning new tricks and stuff here ;)
Make sure to practice, you'll forget soon if you only absorb knowledge without practice, happy coding 💪
clip-path still not support in all browsers yet
And :focus-within is useful, else we want JS
@@-leovinci oh, and focus within isn't generally supported neither xD
Sadly as much as the new functionality is handy, in most cases you still need to use old ways to ensure anyone can see your website
Thank god he told me I was free to pause the vid
boiii
nice one
Hi dude, I'm from Brazil. I'm learning English and study to be Full stack developer and go to work in canada. Your vídeos help me a lot in both, English and programming. Thanks a lot ♥️
Glad to hear that :)
@@Fireship ♥️♥️♥️
Your English is quite good
Saying it as a foreigner :D
@@1001-w5q thanks sz
Ih ala mó gay kkkkkk salve br
Hands down one of the best developer who is teaching meaningful things. I find a huge gap in the teaching industry where all the focus is on the foundation and understanding the basics but the problem is that they don't take it a step further and explain how would you build something having learned those skills or breaking down an existing product to go step by step to reverse engineer certain topic. Absolutely love your content, it's concise and just spot on. Definitely gonna watch all your videos and share :)
Excellent video as always. 135min content in just 13.5min. *hue-rotate* is the highlight of the video for me 👍
Thank you! Hue-rotate is a cool one
I really like the straight forward presentation type, quickly to the point and no unnecessary talking, great job!
It's for videos like this that I don't waste my time watching other random tutorials. Good quality and straight to the point.
I learned a lot of new things from this video, clip path, localStorage , transitioning the color etc
Legend has it if you set the playback speed to 0.01 you can actually see him typing all of the code letter by letter.
Your css videos are actually on a whole new level , please make more of these
Hey Dude, I'm from Mexico, I've learned a lot with your videos! and always I can, I shared your videos with my fellas!!! Thanks!
This reverse engineering series is great, easily my favourite webdev content on UA-cam
Right when I need it most you come up with a new video, solving my problems. Thanks! ☺️👍🏼
holy moly that :focus-within drop down css changed my life.. I have been doing stuff like the css checkbox menu trick or javascript. Thank you for the pro tips
I rarely make time for CSS so these short tutorials are great.
Nice video. There is a lot of useful stuff. It is also recommended for hidden things like switcher use `visibility: hidden` to prevent invisible switcher from catching clicks, and for accessibility
Or one could use display none.
@@mikaelgross6588 It is hard to animate fading of the element when you set display none
I really enjoy these types of videos more than the 100seconds ones you're making more often now.
At 3:10 you can use Emmet to generate ipsum for you by simply typing lorem So something like lorem50 would generate 50 words.
5:01
Can we just appreciate how fucking insanely cool this is?
Man your the BEST!!
Noone out there make such great content with such high production value.
Plus this thing were you introduce new stuff, like the -webkit-scrollbar in the navbar video and the clippath , rainbow animation in this video are super nice. Like I searched how to create wave shape for divs using css the other day and didn't get any helpful answers. But surprisingly this video taught me how to make triangle shape ( Can I make wavy shapes too? I'll try to if yes).
Please keep making content like this. Love this Channel.
The hue rotate rainbow effect rocks!
this series is perfect to watch with breakfast 😅
I love you as kid I dreamed to make that for my website and you inspired me a lot thank you very much!
Tried to set video speed back to normal cause I thought it was on 2x...😉 This was absolutely brilliant!! 🙏🙂
lets hope we learn invaluable experience and lession during this lockdown through your channel....
This is soo cool!
I needed to know that clip-rect property for my current personal project and that theme switching is neat to know!
Man , your videos are so simple yet very rich with informations , KEEP UP this good work 😘
1 second in: Shift + 1 + Tab to make boilerplate html and I'm already impressed
Learned so many things during this video. Great job !!
haha everytime i watch his video i smile in enjoy learning new things it's crazy he never ceases to amaze me
Great fan of your work . Its really hard to learn and save someones time and you done it superbly .... thanks for your cool content 😎
Wow, this is genius idea for theme switcher! Just change css variables in classes!
Really nailed it.... The best tutorial I’ve seen in a while.
body.classlist also has a toggle function that you can use for solarized. Though you would have to change the innerText in the css.
Jeff, awesome as always! I really would like a full course about NgRx + Firebase!
As always an awesome one Jeff👍. Would be great if you could add a quick side-note on the video about browser compatibility, whenever you use a cool CSS property. Will be a real plus.
Thanks for all the work you put in.
I used google analytics on my website and none of my visitors use legacy browsers. 80% of them uses chrome becouse it is default on most android phones,rest is samsung internet and safari
@@pulga961 it's not just about mobile. We have huge enterprise customers who end up using IE a lot. It's always good to know a compatibility score while watching before getting too excited about features like clip-path. caniuse.com is always there but a quick compatibility view is a feature that can be an awesome addition.
Best tutorial i've ever watched so far. You should make one about responsive structure.
Best explanatory channel ever
Your videos are so interesting ..always brings smile and happiness when the new video is out..love it
We need more of this man
I love this extra cool tricks that you always bring, keep it up
Awesome tutorial dude!!🔥🔥🔥🔥🔥🔥🔥🔥
This is exactly what i'm looking for. Thanks, man.
Css is super cool when you teach!
That was a awesome video. Do make more videos like this bro.
Extremely useful... Thanks brother!!!
Oh myself! I do looove this channel, man!
Thanks for the video. I learned a lot!
Fantastic idea, thank you Fireship
Лучший из лушчих! Я подписался, шикарный канал.
over 10 years in the web development, not specialized front dev, im still using BEM lol
Thanks for the video Jeff, sooo useful for me
amazing work, i always struggled with theming, now i know everything 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
So much value in one video!!!!!!
Top notch as usual! Thanks!
Oh my god this is full of knowledge
You could have used the classList.toggle method to toggle the solarized class. It also returns true or false depending on the value, so you would still be able to have if statement with just one line referencing the solarized class.
My phylosophy: Animations and UI, should be CSS only
JS to program events and request data only in web, and obviously for doing your server
I agree, more you can rely on CSS for animation the better, but it has limitations if tied to the state of your app.
Some wonderful animation must use canvas, but we can do it with Houdini in the future
@@-leovinci yeah, if it requires a large number of objects, canvas is the best choice
Mostly yes but CSS has a bad reputation of behaving differently across browsers & OS and by any chance if you have to support IE, good luck with that.
@@MYMPSWORLD IE is such a problem:(
Beautiful video, thanks!
Instead of "const theme" use "var theme" 11:55
Because theme is not a fixed one, it keep on changing when user change the theme.
Great content! Some topics I'd like to see covered are SVGs and parallax effect. Oh, and a question: can you use the same dropdown trick to implement a mobile, hamburger-style, version of the menu?
Curious why you've been doing so much vanilla recently. (still my fav dev channel btw)
I did see that you are a backer of a masonry project. It will be interesting if you could make a video about that.
Undo stuff and then record while you redo stuff...classic!
nice video as always :D but I think there's a little issue when creating a dropdown like that.. the elements are still there and are clickable .. they're just not visible to the user.
I noticed that too, any fix for that?
Im thinking to make those theme changing "buttons" insert right on to nav bar and visible all the time with no text just the circles
Change the display to hidden
What was that piece of code on 12:16, the `isSolar && body....`?
Firegator.io with another video!
🔥 🐊 I think that has a better right to it than gatorship.io
hey, great tutorial! super easy to follow!
Inspired by you angular + firebase course, I started making my own app. I'm having too much fun and your resources are very very useful, but what's my weakest side is the architecture design, principles and common mistakes in a more complex angular pwa, so I was wondering would you be interested in making a video about that :-)))
The CSS looked really nice, but some of the JS did not look good. Especially that part where you added a string to the styles. Flutter FTW!
Awesome to-the-point video though! ✌️ Love your channel
Welp, I guess I need to change my server-rendered themes to this. I didn't realize these features are supported in a majority of browsers.
Wonderful! So many gems packed into so little time, it's amazing and I don't know how you do it but I love it!
Also, showing us more than one way of doing things is very helpful too.
Which editing software you use?
Btw that's a really good video
For the dropdown menu, why did you choose "opacity: 0" when you could have chosen "display: none"?
Is there a best practice in there or is it simply preference?
you can't animate the display property, it would just pop without any animations
Would you know why the CSS opacity 0 to 1 trick isn't working on Safari? (works fine on Chrome)
If these tutorials are not perfect then I don’t know what is
hey i had an idea for making a homepage for my chrome for when i make like new tabs and stuff. i want to make a start page with like a clock, links to websites and i'd like to make the background photos of my google photos, or make like a little box where there are pictures from my google photos library (kind of like when a chromecast is displaying nothing there is a photo wall). any tips on how to do this?
I do not want to use normalise and solarise. I tried to replace with the similar code, but the toggle did not work.
I always see you use `element.onclick` with arrow functions for event listeners, but I usually use `element.addEventListener()`. The `onclick` syntax is a little nicer, but I've always believed there was some downside to it. Is there a reason to use `addEventListener` over `onclick`?
You can’t use addEventListener on some ie versions and you can only add one event with onclick which is the only downside I can think of
Great video as always!!
Which are the extensions you use for VSCode when doing this html and CSS videos?
Thanks!
Emmet its built it vscode
Awesome learn sir...
i wanted to know if its hard to build a site just like alligator io just the layout and functionaily not much the logos those boxes on the site are containers i think are link to differbt routes but not sure
Some S tier content my guy
Really awesome tutorial. :D any reason why we didn't use element.classList.toggle for the solar theme thingy?
how do you transition the background property, i can only transition background-color
Can someone tell me why don't scss variables work? I tried this in my react project. Css variables work perfectly fine however, scss variables don't.
Please help, light theme and light solar theme not working! But dark theme is doing fine, WHYYYYY
Wow, this is amazing!
Is there a way create different themes but with sass variables instead of css variables?
i used this to make my portifolio
Hello, @Fireship! Could you show us how to implement responsive carousel? Thank you!
I'm getting body is not defined when using onclick property in js
I didn't know there was classList.replace() method. Mozilla's docs of classList didn't list that with other methods 😡
BRILLIANT SIMPLY BRILLIANT
Is it possible in condition of using SCSS or SASS variables in my project?
but if you make the opacity 0 it doesnt mean that it is not clickable
you can still click on the area
wow man, your content is FUCKING AWESOME
I'm using SASS and when I try to compile it's says undefined variable. What should I do?
I got it to work by creating a @mixin for the color and background, using the --variables like from the example and added those to .light and .dark.
Then in body, I added an @extend of whichever theme was my default.
Nice, but are css variables supported by the majority of browsers?