All this time i thought you're opening was "hello my friend and friends". Which sounded odd but i assumed it was an Canadian jargon thing. First time i am realising it's "front-end friends". Hah!
Minor tip: Prefix local CSS variables with an underscore (--_local-var) to distinguish them from global CSS variables (--global-var) This helps maintain organization and clarity in your code
Your last piece of feedback is absolutely the best tip out of all and it’s your sixth! In particular how you mention developers should approach reading and watching tutorials. I do often, on top of an actual full project, pick up a couple of new POCs I should try and I experiment at least with a couple everyday in an isolated project or env. Whether it’s a different language, a CSS trick, a JS trick… I’ll do it once, maybe twice, keep repeating if I liked it and then make it a library. I generally never use a library until I’ve made a small POC of it so I can understand what happens under the hood. Amazing video
I've learned what is possible from these small tips you do. I typically never actually copy the code. However I need to rebuild what the tutorial is teaching and fail. Failure is golden. If only we learned this when we are young!
I adore the min function and the pattern you described was divisive. I see no downside. Logical property margin and min function cuts down from two declarations (max-width and width) to one. I also hadn't seen the 100% - padding before but I've been thinking about this issue when building with Bricks because I have the full width section and then a wrapper w max width but if I put padding on wrapper then ny content is not taking up all the available space , it's max-width minus padding. Bricks builder forum suggested putting padding on full width section but unless I need bg colour, all thst section is doing is providing padding. I love the pattern of 100% - padding *2!!
21 час назад
Thank you for the tips, I found the section about the wrapper width very useful
Hi man, very nice video as always. I'm a senior full stack developer and I would point a thing I didn't understand of your tips. It's about number inputs. Why on earth I should prefer to make a text input with pattern and with a dozen of javascript lines of code... instead of writing 2 lines of css, yes really 2 lines ("...a lot of CSS?") to disable the arrows. Consider that javascript is (almost) always heavier to process, instead of CSS, except for some types of animations.
It's not just about the scroll-wheels being potentially annoying, it's about intent, UX and accessibility. Most people will use `type="number"` even when the input it not strictly an incrementable number. A great, short article on this is technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/.
@@denoww9261 ...or you just let the validation do his job. 😅 Actually to me, the worst user experience I noticed is when users do something and they do not notice any sort of interaction in the site, like when is broken or frozen. That's where they spam buttons randomly because they expect something to happen. Try with your mom! 😅 This to say that if happens to write letters and the input returns the error that must be numbers, to me is not a big deal to be honest, instead of seeing nothing happening at all. Consider that firefox is like the 5% of user case anyway. Or maybe just use the input type "tel" with a pattern.
@@Nightrapture You have it backwards. If having zero feedback is bad, you definitely don't want to use type="number", since on Chrome/Chromium-based browsers it will silently drop the input if you type non-numbers.
I like the analogy of following a tutorial vs applying a tutorial to your own project is the same as following a GPS vs using road signs and reviewing a map. Following a GPS takes little attention. But following road signs and looking at a map requires strong attention and for you to transform information into action. When you're moving to a new location, you'll learn your way around a lot quicker if you use a GPS once or twice, then try to work it out. Same is true for tutorials. Watch a long one, understand the concepts. Then just start building.
I don't watch all your shorts for the same reason I don't watch all your long-form videos - time. Unfortunately my Tardis is currently broken (which means I'm limited to the same 24hrs in a day as everyone else) and given the massive number of different subjects I like to dabble in I have to pick and choose which to watch. I do really enjoy your videos though and find your enthusiasm rather invigorating.
For phone number submissions you can use the input type 'tel'. I'm not sure how well this validates as I tend to go a bit overkill with JS and server side validation, but it achieves the same look that you have with type 'text' and inputmode 'numeric'.
At 3:51 it says DANK logo, just saying, btw you saved me with your grid expanding video, the one with breakout, fullwidth etc. My webpage is made based on that now, awesome content
I am a backend developer, sometimes I like to venture into the frontend by creating screens, but I have some difficulty with responsive layout, I know techniques like media query and others, however my biggest challenge is adapting layouts for smaller screens more precisely in height, there are many old devices that have very low screens and sometimes we want to display the content completely in 100vh, if anyone knows of a technique or something like that to help me with this issue. Although it is rare today to find devices in use like iPhone SE, 6, 7, 8 and it is always good to think about the design as a whole, it is very difficult to adapt these layouts to multiple devices in a harmonious way.
I much prefer just using media queries instead of trying to find some advanced solution to changing to phone screens. -> I know this gets repeated a lot but usually the simple solution is the best.
I wanted to know what happens with React Native that it can adapt the screen according to the size of the device, The CSS could look something like this, I'm using Bootstrap, and its grid system
Tbh im at a weird place where idk if im a junior developer or not, but currently i dont feel limited by css or javascript anymore, but there is one question that i have, when should one really use width? (specifically on content containers) do you perhaps have a video on it or something already?
I like toggling `::before{content: attr(class);}` to expose the class of all objects on a page in a pseudo element which can be a helpful way to track down problematic elements in your design
The favicon tip responds only to the OS-level dark mode, not to the browser-level setting or to themes. Any site using a flat icon ought to provide a background for it.
Just a comment on the comments you got for the container / wrapper CSS, and how it wouldn't pass a Code Review. The point of the channel is to teach people CSS, how individual companies choose to implement that is up to them. But if it's valid CSS, you should absolutely be talking about it. ❤
When i ride skateboard and try to do a kickflip, i am the only one jumping up in the air. The skateboard remains on the ground and then i land on the skateboard again and then it's back to hospital again. I will never even try to ride skateboard again hahaha, i am terrible at this. But yeah, i agree with you to 100%. No matter how many tutorials you watch, you wont learn to do a kickflip just by watching a bunch of tutorials. Same goes for CSS
they literally just need you to add a comment. This is when you should be using more comments on your code. So senior and junior developers know exactly what is going on. like /* this makes the width either 926px wide or gives the width 100% minus 2rem on each side so content fits properly */
I saw a comment about a single line of css to stop users downloading images. Tried it on dev site and realised that it broke the onclick actions for icons. As ever its better to try something and know what you have done so that you can take a step backwards.
What if we can make an invisible line/box in the centre of the mobile screen that activates all the hover functions related to the specific element? Can we actually achieve that or is it tooo complex to achieve that..? I wanted to know your thoughts on this. (To deal with hover on mobile devices. Even for the ones that don't have cursor access)
