True. But another approach is to only optimise if the performance is bad because it will add complexity as well. Here there aren't many components and the animation seems fluid.
@@elieanimations While I agree premature optimizations are bad. I think it would be important to explain and show why it's bad. For example, somebody taking the code from this video, without thinking about the ramifications when they have a lot of content in the body, might incorrectly assume this is the way to do it.
Thank you for your vids, I'm only a month new in HTML CSS and JS, and your vids helped me a LOT in understanding the concepts when applying it. Thank u so much!
I just got into computer science and am currently learning python, however, I stumbled upon this video and it was so interesting I couldn't believe how entertaining you and watching you code is. This video rocks, thanks!
Unfortunately that's CSS programming in a nut shell lol. I really hate the language, but no one realized at the time of its creation, that websites would become the new software applications...
@@JeloOW Actually a very hotly debated topic that is not settled one way or another. If you're a purist, you believe a programming language must be Turing complete, however I'm in the other camp. I believe if you are writing instructions that create a unique behavior through their interpretation, then you have successfully programmed something and I would call those instructions a programming language.
Well, as pointed already, I would use scale/translate for transitions. Also you forgot about the opened dashboard overlapping the content, and adding a dark filter to the main content.
The one thing you need to work on and what is it your playlist please organize your playlist when someone looking for a beginner to advanced JavaScript course your playlist is mashed up we all love your content and your design so consider this bro Love from Pakistan 🚀
At the 6:00 point in the video, Kyle wraps the SVG element in a button, to "make it more accessible"... what exactly is meant by this? Can the SVG element itself not be made to have the similar functionality of a button that may be later required? I am not challenging or doubting this method/approach... I am just wondering what exactly is meant by "accessible" in this case. Thank you. Great content!
Is there a reason why you don't use SCSS? I find it easier when nesting for different components. Also have you thought about JS hooks opposed to data attributes?
I can't believe that you've spent an hour perfectly replicating the style and animation of that sidebar but you didn't spend the second it would've taken you to add "font-family: sans-serif" 💀
Excellent video and topic! Could you please make a video on LottieFiles and how to integrate them in a website? Perhaps a loading animation or something… thanks 🙏🏻
You: *uses inspect element to get the svgs and colors and play around with the box shadow* Also you: *doesn't use inspect element to copy the box shadow to save time* I kid of course
Can anybody please share their journey about how you started creating websites without much help like without watching tutorials that takes you from A-Z? Like ofcourse while using resources like Google and stack overflow and using CZcams tutorials to understand basic topics but creating things on your own.
Its cool. Now, how to make it work, when you click on the sidebar link, render the content into the main area, without reloading the whole page? Do you use jquery, httprequest, or must to use a framework like react, vue ? Can you contiue this example with the rest of the functionality?
So you could theoretically have multiple sections in the "content" container. Set them to display:none. And then in JS set an "active" like class on the section corresponding to the clicked button. Not the best way, as I would probably just reach for a framework if that was the case
@@alex01at Actually all of this could be recreated with just html +Css really simply without Javascript. Wouldn't make a tonne of sense since this is theoretically the sidebar for a SPA but still easy and possible
Pro tip: you can slow down the animations in the Chrome devtools to really see in detail what kind of animations are being applied to the elements.
Kyle: Can I Code This Tricky Sidebar?
Me: * checks video length *
Me: Yea, probably.
🤣
Excellent - I'd try to avoid width/height for transitions - that'll trigger repaints. Scale/Translate = better.
Yes, translate is way better. Performance is very good. Avoiding top, left, right, bottom and hwight width is recomandwd
I agree, but what would you do to prevent things from squeezing when using "scale"?
True. But another approach is to only optimise if the performance is bad because it will add complexity as well. Here there aren't many components and the animation seems fluid.
@@elieanimations you are right
@@elieanimations While I agree premature optimizations are bad. I think it would be important to explain and show why it's bad. For example, somebody taking the code from this video, without thinking about the ramifications when they have a lot of content in the body, might incorrectly assume this is the way to do it.
3 minutes into the video and I'm blown away man. This is going to help so much with work. Thanks, this info is so valuable
Are you a front end developer?
@@Wanderer2035 yes
For box-shadows, using multiple, layered shadows usually results in a more natural gradient, adding additional realism to the effect.
This! They can be a bit of a headache to understand at first but the result is simply stunning
Can you share an example please?
Thank you for your vids, I'm only a month new in HTML CSS and JS, and your vids helped me a LOT in understanding the concepts when applying it. Thank u so much!
I liked more when you try something you have not done before . So we all see how to handle , fix or walk around errors, issues. Thanks
Was great to see you figuring out solutions on the run. really learned a lot, great video
I was searching for this since 1 year. None of them were perfect.
Now its perfect.
Thank You Sir.
I just got into computer science and am currently learning python, however, I stumbled upon this video and it was so interesting I couldn't believe how entertaining you and watching you code is. This video rocks, thanks!
Love it. I am learning so much just watching how you work and think. I appreciate it.
i like how you run into problems, struggle in inspecting your own code as if someone else has written it and then solve the issue. feel it!
Unfortunately that's CSS programming in a nut shell lol. I really hate the language, but no one realized at the time of its creation, that websites would become the new software applications...
@@ja31ya just letting you know that css and html arent a programming language
@@JeloOW Actually a very hotly debated topic that is not settled one way or another. If you're a purist, you believe a programming language must be Turing complete, however I'm in the other camp. I believe if you are writing instructions that create a unique behavior through their interpretation, then you have successfully programmed something and I would call those instructions a programming language.
You make me think I can actually get a job. Seeing you struggle there for a good hour really gave me confidence that other people need time as well.
Absolutely love the new format. Thanks for keeping the errors and troubleshooting in.
Well, as pointed already, I would use scale/translate for transitions. Also you forgot about the opened dashboard overlapping the content, and adding a dark filter to the main content.
Amazing.
Found something really interesting in free time ☺️
30,000 subscribers in the last 28 days? Damn, you're killing it! Great job.
Thanks. This last month has been by far the best ever for my channel.
@@WebDevSimplified Rightfully so
You gained my "like" at the calc property. Good show sir, good show indeed!🧐
Please do some advanced projects on pure javascript. It helps us learn things better. Thank you for all your videos.
Very clean explanations and excellent content/tempo ratio...thanks for sharing.
The one thing you need to work on and what is it your playlist please organize your playlist when someone looking for a beginner to advanced JavaScript course your playlist is mashed up we all love your content and your design so consider this bro Love from Pakistan 🚀
Its nice & amazing to see how you code all this
Very powerful video, so much technics in just one example!
Need more videos like this
One thing I noticed is the positioning of text on CZcams is not actually moving but just appearing when it's open. But overall, great CSS!
I really like these videos! Please make more :)
box-shadow for me especially with light background colors like white is something like 0 2px 3px rgba(0,0,0,0.2)
The king showing us his channel dashboard.
This video is a classic example of the divide between what developers **think** looks the same, and what actually looks the same. 😂
It would be awesome if you make a video doing a functional multilanguage system with just html and js
At the 6:00 point in the video, Kyle wraps the SVG element in a button, to "make it more accessible"... what exactly is meant by this?
Can the SVG element itself not be made to have the similar functionality of a button that may be later required?
I am not challenging or doubting this method/approach... I am just wondering what exactly is meant by "accessible" in this case.
Thank you. Great content!
I was waiting for customized scrollbar as youtube, seems like you kinda missed it. Otherwise great video!
Is there a reason why you don't use SCSS? I find it easier when nesting for different components. Also have you thought about JS hooks opposed to data attributes?
Great video, Kyle! Sometimes you sound like I'm watching at 1,25x speed
This is just awesome, can you also create this over react please
Love u, good work. U r very helpful thank u
Hi! I really enjoy your videos, thanks!
I can't believe that you've spent an hour perfectly replicating the style and animation of that sidebar but you didn't spend the second it would've taken you to add "font-family: sans-serif" 💀
Thank you !
Thank you so much Kyle! I have one question: how can I make the sidebar stay open when moving to a new page like content.html (for example)?
Excellent video and topic! Could you please make a video on LottieFiles and how to integrate them in a website? Perhaps a loading animation or something… thanks 🙏🏻
Awesome
Awesome.... :) Thank you
El Niño?
Jordi?
why did you use * as well as *::after and *::before? doesn't * apply to those elements as well?
anyone know why when I use a class for the li's, it wont change the color of the svg? Mine only seems to work if I put the fill in the a tags class.
Hey Kyle! Could you please make a video or project about React Native ? It would help so much
Excellent
Awesome 👍
great job
How to use swipe gestur in this sidebar?
If u add the scroll bar and change the font ll looks like same
You: *uses inspect element to get the svgs and colors and play around with the box shadow*
Also you: *doesn't use inspect element to copy the box shadow to save time*
I kid of course
What VSC plugins are used here? Please and thanks.
Now I'm gonna try recreate this in Oxygen Builder :)
why did u use position sticky on sidebar? why not fixed. is there any difference?
So good
Nice!
Can you create one project using mongodb, node js and javascript. It would be great if you create one ecommerce site
can you make videos of learning JavaScript from scratch to pro
Always keep your errors in so much better.
can you please make a Custom Js framework like React JS from scratch
Love you from algeria
Great
hey Kyle Please make a video on reducing bundle size of React app in production. please.
Try implementing lazy loading in ur react app
He is a good programmer.
Yeah, he is a good programmer
778,822 SUBSCRIBERS BTW
Can anybody please share their journey about how you started creating websites without much help like without watching tutorials that takes you from A-Z? Like ofcourse while using resources like Google and stack overflow and using CZcams tutorials to understand basic topics but creating things on your own.
First view from india
yes
Its cool. Now, how to make it work, when you click on the sidebar link, render the content into the main area, without reloading the whole page? Do you use jquery, httprequest, or must to use a framework like react, vue ? Can you contiue this example with the rest of the functionality?
So you could theoretically have multiple sections in the "content" container. Set them to display:none.
And then in JS set an "active" like class on the section corresponding to the clicked button.
Not the best way, as I would probably just reach for a framework if that was the case
There are a million different ways to solve this.
@@d.sherman8563 I already know that. But would like to see than view solutions..
Yeah debugging videos are great because people can see the process.
Can I use your sidebar as an inspiration for a react sidebar-component?
First view from Hyderabad (India)
well i just learned about lorem in vs code
Like the Bob Ross of the next generation...
"And that's all it took to create CZcams sidebar..."
It took literally 1 hour to replicate it.
Lets go...
❤️❤️
any chance this video can be shorter?
CSS is easy but annoying for me to do idk why.
Slick move editing the DOM to change the revenue number to "????". Or does CZcams make all content creators wonder what this number is? 🤔
It's the DOM
A tutorial video made for people that dont need tutorials videos. Xd
Please share css of your hair.
.hair{
display:flex;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(45deg, brown, wheat);
transform: skewY(2.5deg);
}
npm i --save @kyle-hair
I’m so triggered that you didn’t change the font.
Best theme for Vscode?
Material theme 👌🏻
Cyberpunk theme
Retro themes
Namerlp
First
If you had used Sass/Less or at least use some naming convention like BEM you could have achieved the same result in half the time.
CSS is difficult
no not really
Close the damn sidebar of vscode jeez
Beautiful, but not responsive. :-)
I'm new to web dev and I wanted to ask what about JS for this? but I think this sum up the answer 😃
@@starwaveprime7398 The JS part only trigger the button and add css-class to sidebar. It's the easiest way for it.
@@alex01at
Actually all of this could be recreated with just html +Css really simply without Javascript.
Wouldn't make a tonne of sense since this is theoretically the sidebar for a SPA but still easy and possible