My top 5 most popular front-end tips

Most people who watch long-form content on YouTube don’t watch Shorts, and I didn’t want to leave you, my long-form audience, missing out on my most popular tips that I’ve shared in my Shorts!

🔗 Links

⌚ Timestamps
00:00 - Introduction
02:45 - Light and darkmode favicons
05:13 - Number inputs aren’t so straightforward
09:49 - Modern CSS is magic - using min()
16:10 - Don’t learn web dev this way

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[dylanzalman]

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!

[tommywheel]

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

[RickBeacham]

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!

[PioneerWhoDreams]

I love this little layers visualization trick. Very useful !

[clevermissfox]

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!!

[Hapkumdo]

Thank you so much! Incredible video, not just the technical part, but also the mentality - way to go! :D

[LePhenixGD]

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

[JanPavlikdr]

Different pattern doesn’t mean it’s wrong - to me is the prove that the programmer is actually thinking out of the box to solve issues in clever new ways. Love this logic actually!

Thank you for the tips, I found the section about the wrapper width very useful

[OQBA-ABQO]

No no no! The wrapper-xl is actually what needs to become the standard... makes this well organized and easy to read 😉 keep on going sir! 😉

[patrickjohnson]

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.

[MadsterV]

Tip #1 is neat, but I went further and made a browser extension for Chrome (I should really bring it to Firefox though).
Stacker - Visualize markup structure quickly
It does an inner shade, then 3d transforms with an animation so you can see nesting. You can toggle it on and off.
Of course, if your own CSS involves 3d transforms, it's not gonna work properly.
Once it was done, someone pointed out that Firefox used to have that feature and then I remembered I used it a ton so.... I guess I really missed it!
And now you can use it too!

On #4 I'm not even sure what the objective was, I think there's simpler ways to do what I think he wanted. Except for this one, the tips are great!

[BigBaddaBoom]

You are getting close to a million subs!!! Exciting times. How are we going to celebrate?

[omhmpp]

this man is a Legend in the making PEOPLE

[kobi-kobsen]

Pesticide for outlining elements is so handy as browser extension - i can click a button on every website - not only my own.

[rsdotscot]

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'.

[redredkrovy]

I think the phrase you are looking for on that last point is “Understanding is not the same as doing.” I understand how to skateboard or play basketball but I suck at doing those things.

[sem-nome-west]

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.

[adkocol]

I like a lot 2nd tip. To me, it is very clear when you use it with - -var .

[namboozleUK]

I beleive there's a new feature in Chrome 130 Dev tools which will highlight an element in the DOM tree if it's scroll overflowing.