Priceless video for any aspiring web designer as well as for folks interested to learn and make use of chrome dev tools. Great work with a practical example!
Umar, thank you for this. Any serious developer who doesn't subscribe to your lessons is a fart. So much goodness in one video it's hard to understate how outstanding this is. Thank you for sharing this and all of your lessons!
3:05 The MDN website itself is also an excellent example of using the "font-display: swap" property. You can see it really clearly if you step frame by frame through the video with "," and "." as the website loads.
Amazing job Umar! I love the voice, humor, and the flow of your content. I thought I was pretty good with Chrome dev tools but I learned something new in every minute of this video.
This is great Umar. I was just working on a competitive analysis to compare what important elements are loading by 1st meaningful paint, your screenshot tip just made this project A LOT easier. Another great vid, I'm so going to reference this one! The 10:38 mark, hahahaha
I know....I saw that and didn't believe what was happening. It took me back to my old sublime text days before VS Code came and forced that persky Shift in between.
Local Override seems to be functioning a bit differently on my chrome build. The overrides are being applied after the initial stylesheets. So for example, "color: red" would only be applied half a second after the white text shows. Because of this, "font-display:swap" also didn't work because of how the local overrides are being applied after the initial stylesheets loaded. Regardless of whatever this is(bug/my own stupidity/ etc), this is an awesome video!! Time to dive into your whole series!!
This is really great! Just one thing I'd like to point out that I didn't notice you mention, this isn't in stable Chrome yet. It was slated for release in Chrome 64, and is even displayed in the "What New" tab in DevTools, however it was pulled at the last minute. So I assume you're using a Canary build of Chrome to be able to use the feature. Chrome 65 is supposed to have it. Thanks for the great example, is going to help massively when I can finally use it! (I'm on Linux machine, where Canary isn't available :( )
I'm on Ubuntu and using local overrides for a while now. The package is "google-chrome-beta" there is even another one called "google-chrome-unstable" which is one version ahead of beta
Great vid-what happens to the local override file if the live CSS changes and they haven't used a unique query string? Does the local override forever take charge until you manually pull the latest changes? Also, here's the font-display caniuse for anyone that's interested: caniuse.com/#feat=css-font-rendering-controls
The internet of 5 years ago wasnt slow enought for this to make any difference... guess how it will be 5 years from now when this css atribute may be supported by half of the browsers
Thanks a lot bro,
I was always looking for something like this to test immediately on production, and it has always been there.
This is incredible.
Terminator screenshot earned you a subscriber. Thank you for teaching me about DevTools! going to mess with the screenshot feature now
Priceless video for any aspiring web designer as well as for folks interested to learn and make use of chrome dev tools. Great work with a practical example!
Umar, thank you for this. Any serious developer who doesn't subscribe to your lessons is a fart. So much goodness in one video it's hard to understate how outstanding this is. Thank you for sharing this and all of your lessons!
whoa !
local overrides could have saved me countless hours if I only knew it existed!
3:05 The MDN website itself is also an excellent example of using the "font-display: swap" property. You can see it really clearly if you step frame by frame through the video with "," and "." as the website loads.
Amazing job Umar! I love the voice, humor, and the flow of your content. I thought I was pretty good with Chrome dev tools but I learned something new in every minute of this video.
This is great Umar. I was just working on a competitive analysis to compare what important elements are loading by 1st meaningful paint, your screenshot tip just made this project A LOT easier. Another great vid, I'm so going to reference this one! The 10:38 mark, hahahaha
I've never been so enthusiastic about resizing a div :D This is brilliant!!
It Looks absolutely stunning! Thank you for the sharing!
No my mind has not been more excited about red text and then you did cmd D, MIND BLOWN!
I know....I saw that and didn't believe what was happening. It took me back to my old sublime text days before VS Code came and forced that persky Shift in between.
Thank you very much it exactly what I search
11 minutes of awesome.
Thanks!!!
I love that little commentary overlay on the video. Great vocabulary Umar! 🤣
This is fantastic! Thx for the video!
Very cool and helpful. Thank you Umar
You are a GENIUS
Loved this. Had no idea. Now I do :-)
Amazing tutorial, thank you
Great tip!!
Finally, the hack of "window.onbeforeunload = function() { return '';}" is coming to an end for me :D
Love the info, love the jokes, thank you
Local Override seems to be functioning a bit differently on my chrome build. The overrides are being applied after the initial stylesheets. So for example, "color: red" would only be applied half a second after the white text shows. Because of this, "font-display:swap" also didn't work because of how the local overrides are being applied after the initial stylesheets loaded.
Regardless of whatever this is(bug/my own stupidity/ etc), this is an awesome video!! Time to dive into your whole series!!
Keep it real Umar . Cheers
Awesome, THANKS!
Thank you so much 😭
Saved me hours
thanks
my favorite part was where the MDN docs had exactly the same issue at 3:05
Nobody asked me :D Another awesome video, Umar!
It was interesting
This is really great! Just one thing I'd like to point out that I didn't notice you mention, this isn't in stable Chrome yet. It was slated for release in Chrome 64, and is even displayed in the "What New" tab in DevTools, however it was pulled at the last minute. So I assume you're using a Canary build of Chrome to be able to use the feature. Chrome 65 is supposed to have it. Thanks for the great example, is going to help massively when I can finally use it! (I'm on Linux machine, where Canary isn't available :( )
I'm on Ubuntu and using local overrides for a while now. The package is "google-chrome-beta" there is even another one called "google-chrome-unstable" which is one version ahead of beta
Thanks, I shall give them a go!
How about a tutorial on Chrome DevTools Performance tab ?😄
Can you change the text on random website and save it temporarily after yoh reload the web in your pc ?
display-font ***** Great property - Didn't know of its existence
Great vid-what happens to the local override file if the live CSS changes and they haven't used a unique query string? Does the local override forever take charge until you manually pull the latest changes?
Also, here's the font-display caniuse for anyone that's interested: caniuse.com/#feat=css-font-rendering-controls
赛高
why this can be used in github?
The internet of 5 years ago wasnt slow enought for this to make any difference...
guess how it will be 5 years from now when this css atribute may be supported by half of the browsers