Be sure to SUB! My answer for today's question: I'm currently only on 16GB. I used to have 32, but 2 sticks died and apparently I'm quite lazy and never replaced them. :[ You?
Wow, this is a pretty cool feature, looking forward to seeing what people will come up with using this. As for the question, I have 8 GB ram on my laptop, bought it about 4-5 years ago and it's still working well :)
Awesome video, you explained and demonstrated this feature really well. Very informative! I think I'll wait for this to be compatible with more browsers before I use it. :)
Please make a tutorial on what steps or things should make in mind before writing css for a website I know css but don't know how professionals do, please if you can make a tutorial on it that would be a great help😁 Apart from this I love your videos and learnt a lot and learning thanks for this... 😊
I'm in a ICT/Electronic school, so i bought a laptop for 800€. it's ACER with 128 GB SSD, 500GB HDD, 16GB Ram, i7 processor, 2GB graphic card and it even has USB-C port. now.I bought a new SSD of 500GB Samsung for 97€ to replace the 128 GB one. ( free cloning software with it.)
This is a useful trick. However, I have noticed that if you use scroll-snap-type: x mandatory; this works in Chrome but it will cause Firefox to break. In contrast, scroll-snap-type: mandatory; works in Firefox fine and subsequently breaks Chrome. Therefore, I impliment a Chrome only css rule using @media screen and (-webkit-min-device-pixel-ratio:0) etc as a work around for both. Thanks for the video :)
I prefer jquery for it's cleaner look and simplicity. I find myself more productive. I do the same with Pug and sass as well. but oh well. won't need it anymore
I don't mean to ask questions here but wondering what plugins/extensions you recommend for Visual Studio Code, especially for front-end work like html/scss/javascript?
I have question. In the video, you converted the sass file directly to the css file. How did you do that?There are no bundler or task runner settings in your folder in this video.
PROBLEM: I did exactly what he did. My scroll snap works but i am having like 300ms delay for every snap when i use mouse wheel... Some similar problems?
Lex Verbeeck Naa not really yet but I guess you have 2 options A: downgrade chrome B: write a js fallback But I think B is way too much work I wish u good luck :)
16 GiB of Ram, Upgrade to 32 GiB in the next few months possible. Depending on price development for system memory. Instead of subtracting the padding off the width and the height, just use "box-sizing: border-box;". IMO cleaner syntax, less writing and easier to change paddings (just change it in one place, instead of 3).
Hi! Can we use scroll padding on nav links? When i click on on any of my nav lists, i would like for it to scroll to a specific section in my page? Help please. Thanks so much!
Got 2 server with 24GB each. Now in a new job I had the opportunity to choose work PC an NB by myself but limited budget, so I choose 8 gigs DDR4 for both. Priority was SSD and that I can add more RAM into the PC later and maybe a 3rd monitor. What watch/live-reload SASS plugin do you use? There are so many..
I too also just researched this and tested it in various browsers. Unfortunately, that syntax only works in latest Chrome desktop and mobile, and Safari. For Firefox, you'd have to use the old syntax where you specify the distance per snap (not very robust). Even though caniuse says Edge and IE11 support the old syntax, I couldn't get those to work.
Shouldn't the sound at 2:03 appear at 2:37 ? 😄 Still using my good old 8GB RAM... sometimes it really sucks when my computer is running out of memory - lagging hard 😕 but it still working 🤓
I get your confusion, you aren't seeing what scroll-snap is doing in the example. It's snapping to a certain points of the page, like a picture in a carousel would, which is actually also the example chrome developers used in their demo, a picture carousel.
The sample that Google used to demo this feature at a new problem. Clicking with the mouse on the scrollbar did not always work, very poor user experience.
Sir Gary I'd suggest you wear a DesignCourse T-Shirt :) That way you'll only wear one T-Shirt design for all your videos and as well as on your plugging :) That's just my suggestion tho. :)
I only have one 8GB Stick. It's mostly enough for me. I would like to have one more stick but in my opinion it is too expensive with only a small benefit.
I have 64 GB. I use After Effects on a weekly basis so I need it. It really handy to have a lot I can have 20 programs open at the same time with no latency. Also have 3 Samsung 960 Nvme drive one for caching.
I have 8gb ram. But i need to badly upgrade to 16 cause of my new work flow. Browser with multiple tabs, local vm server, vscode and of course music... leaves very little ram and slows my computer down. Probably also need a ssd for my OS.
Until 2 days ago I had 16gb. Then suddenly one stick died and gave me a mini heart attack because my PC would just bootloop and I thought the motherboard was dead.
if someone is using chrome/firefox use 'html' instead of 'body', that is bcoz safari's main parent is body so it's working for him but will not work in other browser
My computer is a good machine yet this 1TB HDD only has 5400rpm which makes the computer a lot slower than it should be for the specs it has but overall is a great PC just needs an upgrade for an SSD and it will get now that I'll start my first job is an internship but I get my paycheck :D i5-7200u 8gb ram hd 620 + 940mx 1tb hdd 5400rpm
Well, this is going to be *hard* ! I am running Windows 98 with 64 MB RAM and 10GB of Hard Disk Space on and use Photoshop 5.0 and Illustrator 7 for my design works. 😥😭 *It's a JOKE* No, it isn't!
Be sure to SUB! My answer for today's question: I'm currently only on 16GB. I used to have 32, but 2 sticks died and apparently I'm quite lazy and never replaced them. :[ You?
Thank you keep going :)
2gb ram 😕
16GB
16 GB
16 cc
I always download more ram as per requirement.
Share the link here. I want to download some RAM too. 😂
the coverage of this particular property is much much better right now! keep it up, sir :D
I just saw this new feature on Google Chrome Developers' channel and here you are with a tutorial
A saw the same video yesterday :D
Gary coming in clutch with these tutorials
Wow, this is a pretty cool feature, looking forward to seeing what people will come up with using this.
As for the question, I have 8 GB ram on my laptop, bought it about 4-5 years ago and it's still working well :)
awesome tutorial ..you always come with new stuff that make me to watch your videos ...thanks a lot
You finally updated VSCode 😲 Now I understand why it's raining like hell over there 😜😂
Sad that it doesn't work with the scrollwheel or touchpad
Awesome video, you explained and demonstrated this feature really well. Very informative! I think I'll wait for this to be compatible with more browsers before I use it. :)
Please make a tutorial on what steps or things should make in mind before writing css for a website I know css but don't know how professionals do, please if you can make a tutorial on it that would be a great help😁
Apart from this I love your videos and learnt a lot and learning thanks for this... 😊
I'm in a ICT/Electronic school, so i bought a laptop for 800€. it's ACER with 128 GB SSD, 500GB HDD, 16GB Ram, i7 processor, 2GB graphic card and it even has USB-C port. now.I bought a new SSD of 500GB Samsung for 97€ to replace the 128 GB one. ( free cloning software with it.)
This is a useful trick. However, I have noticed that if you use scroll-snap-type: x mandatory; this works in Chrome but it will cause Firefox to break. In contrast, scroll-snap-type: mandatory; works in Firefox fine and subsequently breaks Chrome. Therefore, I impliment a Chrome only css rule using @media screen and (-webkit-min-device-pixel-ratio:0) etc as a work around for both. Thanks for the video :)
Your channel is so valuable man its awesome. Keep it up pls :)
Hi Gary Hope You Are Doing Well
I want to know that can I target the element using class to apply snap scroll
Really cool new property to know. Thanks for showing us!
OMG FINALLY! I don't have to use Jquery for this anymore!!! so much more lightweight and easy!!
You could have just used vanilla js but yeah whatever lol
I prefer jquery for it's cleaner look and simplicity. I find myself more productive. I do the same with Pug and sass as well. but oh well. won't need it anymore
I can smell how to make a perfect css slider now
Thanks ! your scroll tips are awesome
wasnt working in React, fixed it with adding {scroll-snap-type: y mandatory;
overflow-y: scroll;} to the html tag instead of the Body tag
Dan has you tested it on ios safari? its not working on iphone.
@@williambenarto6212 unfortunately not. I haven’t started testing on other browsers than Firefox
This was a very cool demo of a feature I've seen on some fancier websites, very nice!
Thank you the guide and clearing my doubts.. really liked it! (as always!).. hopefully I will make something cool using this!
I don't mean to ask questions here but wondering what plugins/extensions you recommend for Visual Studio Code, especially for front-end work like html/scss/javascript?
I there a way to add a sticky navigation?
When I give each section an ID and a nav with anchors to these ID's, nothing seems to happen.
Really simple and informative video 😉👍👍
I have question.
In the video, you converted the sass file directly to the css file. How did you do that?There are no bundler or task runner settings in your folder in this video.
vs code watch sass extension
@@TheProDeSquare oh thanks
I do Exact things but it doesn't work!!
Any help!!
Can anyone please tell me why snap scroll does not work when the container has an absolute position and what is the solution for it?
if you're using one div or element so first add position relative
in your main element i hope it solve a mystery...
Q&A: I'm using MacBook Pro, 16GB DDR3 which is enough for my work for now.
This will be good in creating an Azure Portal like UI.... just what I need.
scroll-snap-type won't work on the body element. overflow is also not necessary
This is such amazing and very useful!!
PROBLEM: I did exactly what he did. My scroll snap works but i am having like 300ms delay for every snap when i use mouse wheel... Some similar problems?
yeah me too , did you find a solution to this?
For whatever reason, when I tried this using your code it didn't work for me. Any suggestions?
maybe it isn't supported by your browser yet
@@PixelatedBrain7 I use the newest version of Firefox, which I believe should work...
@@liamhtml979 try chromium based ms edge
Hello Sir. The scroll element is working but it does not stick when I use the mouse-drag.
Dosn't seem to work in the new chrome version :(
got the same problem, really strange
Lex Verbeeck in older Version its working. I could not find a patchnote to that. So thats a bug I think :)
@@ultramoxx1148 really sucks... i need this real soon.. got an alternative?
Lex Verbeeck Naa not really yet but
I guess you have 2 options
A: downgrade chrome
B: write a js fallback
But I think B is way too much work
I wish u good luck :)
16 GiB of Ram, Upgrade to 32 GiB in the next few months possible. Depending on price development for system memory.
Instead of subtracting the padding off the width and the height, just use "box-sizing: border-box;". IMO cleaner syntax, less writing and easier to change paddings (just change it in one place, instead of 3).
Hi! Can we use scroll padding on nav links? When i click on on any of my nav lists, i would like for it to scroll to a specific section in my page? Help please. Thanks so much!
I also went to your links to see if you had the classes or a download of the file. I was not able to find anything
Got 2 server with 24GB each. Now in a new job I had the opportunity to choose work PC an NB by myself but limited budget, so I choose 8 gigs DDR4 for both. Priority was SSD and that I can add more RAM into the PC later and maybe a 3rd monitor. What watch/live-reload SASS plugin do you use? There are so many..
Hello :) what extension do you use when you have ´watch sass´?
Hello, i'm curious about how this sass watch works
horizontal scroll not work with vertical scroll like in fullpage.js library with extension
Thanks Rob Halford!
Hi! How can I animate a loop snap scrolling div, like a carousel?
I too also just researched this and tested it in various browsers. Unfortunately, that syntax only works in latest Chrome desktop and mobile, and Safari. For Firefox, you'd have to use the old syntax where you specify the distance per snap (not very robust). Even though caniuse says Edge and IE11 support the old syntax, I couldn't get those to work.
Shouldn't the sound at 2:03 appear at 2:37 ? 😄
Still using my good old 8GB RAM... sometimes it really sucks when my computer is running out of memory - lagging hard 😕 but it still working 🤓
I have 4gb ram😢
can you give an example by taking the scroll bar down from the screen?
Thanks for video and info. Good luck
Please create a smooth scrolling in angular 5 video
Do you have a tutorial to show how to reveal an image while scrolling down?
Thanks~ Does it work on mobile? ^^
Is there a way to do this with Javascript / jQuery
It is not working with body container
Video starts at 3:50 😊
Amazing, thanks for sharing this wonderful stuff.
Cool, thanks Gary!
You can make that using width 100% height 100vh
what do you mean with scroll-snap?
I get your confusion, you aren't seeing what scroll-snap is doing in the example.
It's snapping to a certain points of the page, like a picture in a carousel would, which is actually also the example chrome developers used in their demo, a picture carousel.
you write scss and call css in html how ist work??
it didn't work or didnt notice any thing ?! using chrome latest ver ?
The sample that Google used to demo this feature at a new problem. Clicking with the mouse on the scrollbar did not always work, very poor user experience.
You use the mouse a lot, or is it just for the tutorial? Because I find myself hardly reaching for the mouse while coding.
Sir Gary I'd suggest you wear a DesignCourse T-Shirt :) That way you'll only wear one T-Shirt design for all your videos and as well as on your plugging :) That's just my suggestion tho. :)
This could be very useful for carousels
I like your tutorials.
Can I control the transition duration of the scrolling? Seems too fast to me.
I also want to know this! But still nobody responds yet...
Why do you have a cupboard right in front of a door in your room?
You're a lifesaver !
I wanted 16 gb macbook but it was out of stock and new ones were too costly. so i bought the one with 8 gb
Good information, Answer of today's question is 8gb
Thanks for the video.
32GB although I’m not sure why the only time I ever use even close to that is when I have a android simulator and Mac OS X virtual box with a sim open
I have 32Gb of Ram, a lot more than I normally need but it does helping testing out some memory heavy stuff... like modded minecraft XD
didn't worked for me and why using SCSS for basic projects
Sir it is not a joke but I have only😫 2gb ram
Me too😢
me:3;
You guy are pathetic. Upgrade already. 64 gigs is best.
@@sethm3194 u rich bastrd
"at the time of recording this, it's 21%".... I'm out. Thanks for the info though
you missed the part where he says there're polyfills so you can start using it 11:56
wtf? why you didnt use box-sizing: border-box?
I only have one 8GB Stick. It's mostly enough for me. I would like to have one more stick but in my opinion it is too expensive with only a small benefit.
ammm My PC is 8gb of RAM, and for now is really enough for me. And i really hope all browsers will support this new css feature for me.
that an 8 string guitar in the back? 👀
Awesome, awesome stuff:)
Did exactly as she showed, and have the latest version of Firefox, and it still would not work.
me too
@@banana6033 same but im using google chrome ...
We'd appreciate a design to code project? Would you like to do one?
8gbs of ram, want to get 16gb but ram prices are so high right now
I have 64 GB. I use After Effects on a weekly basis so I need it. It really handy to have a lot I can have 20 programs open at the same time with no latency. Also have 3 Samsung 960 Nvme drive one for caching.
cool wow interesting bravo
I have 8gb ram. But i need to badly upgrade to 16 cause of my new work flow. Browser with multiple tabs, local vm server, vscode and of course music... leaves very little ram and slows my computer down. Probably also need a ssd for my OS.
lol jus get an ssd u fool
48gb
No more Javascript for this. Thank goodness!
section css could be like this.
section {
padding: 7em;
height: 100vh;
box-sizing: border-box;
...
}
Until 2 days ago I had 16gb. Then suddenly one stick died and gave me a mini heart attack because my PC would just bootloop and I thought the motherboard was dead.
I used to have 4 but I upgraded to 16 when i got my dads pc.
4 GB 🤯 it's cooool 😃
Did anyone else hear: "Link, banana"?
32gb of ram 😁 got to keep up to date with the pc.
if someone is using chrome/firefox use 'html' instead of 'body', that is bcoz safari's main parent is body so it's working for him but will not work in other browser
8GB, 4GB virtual from SSD XD
No less than 16gigs ddr4 2660
My computer is a good machine yet this 1TB HDD only has 5400rpm which makes the computer a lot slower than it should be for the specs it has but overall is a great PC just needs an upgrade for an SSD and it will get now that I'll start my first job is an internship but I get my paycheck :D
i5-7200u
8gb ram
hd 620 + 940mx
1tb hdd 5400rpm
Love it!
Well, this is going to be *hard* ! I am running Windows 98 with 64 MB RAM and 10GB of Hard Disk Space on and use Photoshop 5.0 and Illustrator 7 for my design works. 😥😭
*It's a JOKE*
No, it isn't!
I have 16GB on both my Macbook pro and Windows machine.
16gb and would have more for editing video