Introduction to Mini Mailbag Episode
00:00:00
Speaker
Hello, my front-end friends, and welcome to my podcast, General Musings. My name is Kevin, and this podcast is usually a place for me to share whatever's front of mind for me in any given week, usually in some way that's related to front-end development and often more specifically CSS. Though this week's going to be a little bit different because we're going to be doing a little bit of a mini mailbag. I asked for some questions from people and got some good ones. So we're going to be going over the questions that we got. A few of them are actually related to some things I've been talking about recently. So those will make for some nice
Conversation with Travis Nielsen
00:00:31
Speaker
And also I just before we get into that, though, I do want to say I was recently really lucky and had got to have a conversation with Travis Nielsen, if you don't know, is the creator of the dev tips channel, who's the reason I actually started my own channel. And it was a really awesome conversation. And I'm going to be posting the full interview. I'm going to edit it a little bit and post the full interview here as a podcast episode, probably in about
00:00:56
Speaker
hopefully three weeks or something. I have another interview with Yuna that I'm going to be posting before that one. So anyway, we'll get around to it. But the reason I'm mentioning it is because in the interview I did with Yuna and I have another one, I'm going to be doing Risara, Suiden shortly as well.
Personal Elements in Interviews
00:01:14
Speaker
Part of what I added in those was I wanted to capture that general musings essence a little bit of not just talking about CSS or code and stuff.
00:01:23
Speaker
getting to know the people a little bit more. And my conversation with Travis involved a lot more of that than it sort of planned originally, but in a really good way. And I think I want to start doing more interviews in that realm because I've been on as a guest for a lot of podcasts at this point.
00:01:43
Speaker
And a lot of the time I end up talking with a lot of the very similar things in terms of my story and then getting into sort of my thoughts and beliefs and other stuff on CSS and things like that. And I think if I'm going to be having these guests on, I'm sure most of them have done the same thing. So I think I'm going to try and make the personal side a little bit bigger and so we get to know the people
00:02:05
Speaker
in a way that's different from what we see them always posting and talking about. Though, of course, we'll have some code related stuff on there as well. But anyway, it was a fantastic conversation and it's made me start thinking a lot about what I want to do with this space here. And so, yeah, I guess that's it. And we'll jump into the questions now. And let's see, I have them right here and I don't want to delay too long.
Effective Online Learning Strategies
00:02:28
Speaker
The first one, here we go. The first three are actually very well tightly knit. So I also actually made a mistake.
00:02:35
Speaker
put a Google form together so people could ask their questions. And I only put one field, so I don't know anybody's name that asked these. I apologize. I think one person wrote their name in the field. Yeah, I don't have names, so I apologize for not having a name field so I can credit who asked these. But the first question was, what are the steps you use to study an online coding course that you've bought? Or how do you get the most out of a course that you've bought?
00:03:01
Speaker
It's a really good question and this is something I find hard and I also think self-paced learning is hard and it's something I think a lot about since I make courses and I want to make sure my students get the most out of them and that's not easy to do. I think one of the pieces of advice that I give and I know it can be it sounds silly but it's putting time on your calendar
00:03:24
Speaker
dedicated to when you're going to be learning. And especially if you purchase a course and you spend money on a course, you clearly value what you could get from it. You see that there's value there and you want to extract that value out. And when you start doing the course and you sort of, everybody jumps in like really
00:03:41
Speaker
that you dive in right you're excited you want this new thing you want to learn and you binge through a whole bunch of lessons and then the next day you'll probably do some more and then the next day and then it sort of fades off a little bit and then eventually you take a break and then maybe you get back into it and you do a few more lessons like three weeks later and then that binge is a lot shorter than the previous one and then you just never go back to the course again
00:04:02
Speaker
This is speaking from my own experience. Hopefully you haven't had these problems, but just based on the average completion rates of online courses from the different things I've read can be anywhere from three to 30, which is like 3% is depressingly low. I don't have any way of knowing what my own students are because of the platforms I use. I really hope they're higher, but I always try and find ways to help. But one of the things I recommend is people put time on their calendar for learning. And the reason I say that is I think
00:04:30
Speaker
people underutilize their calendars. The more stuff I have on mine, the more I do, but I try and keep it important. Like I've seen Ali Abdaal stuff where he has like it's everything is there and I feel like anxiety looking at his calendar whenever he shows it on screen just because like there's not a minute that's not accounted for. Maybe that's good. Maybe that's the right way to do it. I like putting things on my calendar that I know I need to do.
00:04:57
Speaker
So I have that time blocked off and I know I won't accidentally put a meeting during that time. I won't do other stuff and when I get to that I'm going to do that. And so for me when I'm doing a course or something like that or trying to learn a new subject, having that on my calendar is important for me. The advantage with that too is
00:05:13
Speaker
That also means when you finish the course, if you're able to, you can leave that time on the calendar, which can be really useful because then you can just keep on keeping that block of time for learning. And the other thing with that is make sure you put it to a realistic amount of time because I think the same idea that we can jump in and overdo it early on and then fade away from a course.
00:05:34
Speaker
If you over commit, you're not going to do it. So find something that works with your schedule. Maybe it's 30 minutes every three days. Maybe it's six hours a day. It depends completely on your responsibilities and your lifestyle and everything else you have going on in your life. But you need to find something you can do that you can do sustainably.
00:05:56
Speaker
for a long period of time and then find what you think would work and you can adjust it obviously but do be realistic about it. The other thing is just a lot of practice. Don't just follow a course by going through the lessons. Make sure you're actually doing the things that the course is teaching you. Make sure you're not copy-pasting your writing code. Try and go ahead of lessons like if you know what's coming in terms or if you're reading a lesson like
00:06:19
Speaker
or watching a video like pause and do stuff on your own. Don't just follow along word for word or copy the code, like maybe look at it, minimize the window that the code was on and try and do it yourself. You need to be able to do it independently. And so if you're just...
00:06:34
Speaker
having your hand held the entire time and then you start trying to write the code, you're not going to be able to do it. So just getting the little bits and then you build on those little bits and you get more independence and everything else along the
Mastering CSS Through Practice
00:06:45
Speaker
way. I think that's it. I could go on this for a long time, but we have other questions that we want to answer. So the next one, Hi Kev, can you highlight the importance of showing up every day in order to master CSS? Will the method of showing up regularly pay off? I think it
00:07:02
Speaker
I think this goes into what we were just talking about. We're having some time to work on things will definitely help you get better at it. The more you're practicing, the more you're doing, the better at something you will get. I do think that there's different approaches you can use. You could show up every day for six months and the guy next to you, you clone yourself. It's the exact same person. You and your clone,
00:07:26
Speaker
Both of you show up for one hour a day, every day for six months. Depending on the method and the ways that you're trying to master the subject, one of you or your clone will be much better at it than the other one. And that's just because we can more effectively use our time. So that, I think, goes into it as well. It's like showing up is really important. Without that, then you're never going to get better. But then
00:07:52
Speaker
spending that time wisely, I think also goes a long way. So finding different ways to, like multimodal learning is so important. We get stuck in this idea of I'm a visual learner, I'm a, what are the different ones? Whenever I prefer video, I prefer written content. You can definitely prefer one form over the other, but there's a lot of benefit from mixing different things and most importantly, actually creating stuff. And that's like a really big part of it. So a little bit, like I said, where if you are following tutorials or following other things, pausing, not looking at the code and trying to do things on your own,
00:08:21
Speaker
trying to fix problems on your own. And the other thing that I've talked about before is teaching. Whether that's teaching or note taking or writing a blog, talking about the things you're learning, trying to explain the things that you're learning goes so far in reinforcing what you're learning, finding those knowledge gaps,
00:08:42
Speaker
enabling you then to fill in those knowledge gaps and then you just get better and better and the stronger the foundation you have, which you build by finding any gaps you have in your knowledge, the faster you add new skills after that.
Advice on Starting a Tech Blog
00:08:57
Speaker
So I think that goes a long way. And that actually goes to this next question, which was, I listened to your previous podcast and I moved to start writing a blog, which makes me so happy to hear that. Even I said, I want one person who listened to that episode to start something. That episode was worth it. So I'm so happy to hear this.
00:09:15
Speaker
So they want to start a blog about what they've learned. Can you kindly point me to a website where I can write my blogs? Thank you. So I would recommend creating your own site to write your blog from. There's 11T or Astro as like static site generators that make that side of things really easy to do and it gives you a new thing to learn. So I would recommend having your own place.
00:09:41
Speaker
If you want to get more eyeballs on your stuff, I would probably say dev2 just because it's an established platform that I think I've written some stuff on there. Free Code Camp is always looking for authors too. So depending on what you're talking about, you might be able to get
00:09:56
Speaker
some stuff on free code camp. And then if you're feeling really comfortable with what you're doing, you could look on some of the more established sites, Smashing Magazine. I don't know what's happening with CSS tricks now. They have like two new articles, so I don't know if they're doing anything, but like anywhere you can get it. But Dev2 I think is perfect. It's also less stressful than trying to write for like one of these places like Smashing or something.
00:10:19
Speaker
But I would still say have your own site and you can set up, when you do it to Dev2, you can have like a, I can never say the word canonical URL. So it's saying like the original source is your site and you're just cross posting it onto Dev2. So Dev2 can help build, you know, get more eyeballs and everything, but you have your home where you've built it, which is a good skill set right there, but it's also your space. And I think there's a lot of value in having your own space in today's world and not relying on
00:10:49
Speaker
places, other places, like even medium, like that was really popular. I don't, if I see a thing on medium now, a lot of the time I don't even go because I know that half the time it's paywalled. And so yeah, that's, that's sort of what I think there. You could also cross post to medium though is another option.
00:11:04
Speaker
but I'd still really recommend having your own place to do it. It doesn't, you know, you can even just at the beginning, if you don't want to pay for a URL, you could have everything set up as a static site very easily using one of the static site generators I said, and there's others. I listed my two favorites, but there's many others. And then just use like a GitHub pages or whatever Netlify or Vercel or whatever you need.
00:11:26
Speaker
with their free tiers and you have the dot whatever website, a GitHub page URL. Then eventually, if you want to make it more of your own, then you end up purchasing URL. You can run a site completely for free as a blog or whatever. You can even, early articles could be explaining what you've built. I've seen really good blogs that are out there that when they add a new feature to their site, they make an article on how they did that feature and then I've gone and used the stuff I've learned from that to integrate into other websites.
00:11:56
Speaker
So yeah, that can be really cool things to do. Yeah, there we go. Those are all the questions about learning. As I said, it followed up a bit from last week. So I thought that was cool.
Pixels in CSS: Usage Guidelines
00:12:05
Speaker
Going in a bit of a different direction is, yeah, 100% there. I don't use them a lot. And I think I'm actually going to start doing them more in my videos. I use them for things like borders a lot or outlines and small stuff. There's nothing wrong with pixels anywhere other than font sizes.
00:12:24
Speaker
The one place you don't want to use Pixels is your font sizes, just because it makes it less accessible. So you sort of want font sizes to be something that are always based on the REM in one way or another, just so it helps adhere to user settings if they have gone and set something up. Everything else, it depends a little bit. I actually used, I don't remember if it was M or REM, I think it was REM.
00:12:50
Speaker
in a filter or it was a backdrop filter blur or maybe just a regular blur. And someone commented saying, wouldn't that have made more sense in pixels? Because if a user had changed their settings, do you want it to be more blurry? And I was like, oh, that's a good question. And I don't know what the right answer there is. I don't think it would have bothered me one way or the other. But I was like, you know what, pixels might have been a better choice there if it comes to like padding and margin.
00:13:17
Speaker
I could see use cases where they could be fine. I tend to prefer M's or REM's there just because I find when so much is built around the content and the font sizes are such a big important part of that content that having that relationship of spacing to me makes sense. If I increase the font size, I also want the padding to probably increase and the margins to increase.
00:13:39
Speaker
Because if I increase the font size and I had my margin at say it's a margin bottom on a paragraph of 12 pixels and the font size gets bigger but that margin doesn't change, that can be kind of strange. And obviously if you zoom in, the pixels get affected too. So this isn't talking about like people zooming in and out of browsers. But if the font size were to be manipulated in any way and that margin bottom doesn't adjust with it,
00:14:03
Speaker
could be weird. All of a sudden, the spacing looks like it's getting smaller and smaller as the font size gets bigger and bigger. It's not actually smaller, but the relationship of that space relative to the font size is smaller, so it looks like it's shrinking away. But I think for box shadows, borders, lots of stuff, there's lots of times where I think it's completely fine to use a pixel. If you're doing it for your media queries, you're using it for
00:14:25
Speaker
I don't know what else, anything basically. I think you're probably okay as long as it's not for font sizes. But anytime you use any unit, I think it's important to be able to say why you're using, like why did I use that unit?
00:14:39
Speaker
What's the benefit of that unit being used in that? And it's the same, why am I using Flexbox instead of Grid here? You should be able to say why Flexbox is the better choice. If you're early on, that could be really hard to do because you're not 100% sure and you're just, I think it's going to work better is still an answer though. And your answer could be because I'm more familiar with Flexbox and I know I can get it to work. Over time, that might change. We always change what we're doing, but you need to,
00:15:08
Speaker
Yeah, I think as long as you can justify the choice of pixel in a certain situation, then go for it. All right, moving on to another question. We have, what other languages do you know well apart from CSS? And related to this, what do you think of PHP? So PHP is very different from CSS.
00:15:25
Speaker
I haven't touched PHP in about a decade. So I don't think I have a very, I don't know if I can form an opinion about PHP because it's been that long since I've touched it. At the time I knew enough to make custom themes of WordPress a little bit or custom functionalities within WordPress at least. So I have played with PHP. It was fine. It did its job what I needed it to do.
00:15:49
Speaker
not the the favorite thing he ever used but yeah it's okay i guess and i've heard that there's been a lot of good things happening to it recently so that's good but i don't have any strong opinions about PHP to be honest
00:16:03
Speaker
other languages I know well apart from CSS. CSS is by far and large the one that I know well. That's the one I feel comfortable with. I could sit down and teach somebody about most things CSS related without planning it and probably do a half decent job, which is why that's
00:16:23
Speaker
what my channel is focused on because that's what I can sit down and teach. I plan my stuff out. I build my demos ahead of time. I plan lessons. I have outlines and all sorts of stuff. But if I need to, I can talk about it. And as I'm going through lessons, a lot of time I go off script because I think of stuff that would be useful for what I'm teaching about.
00:16:43
Speaker
If I'm doing that for other languages, I don't have that comfort level. So with JavaScript, I have to plan a lot more and hope I don't make a stupid mistake along the way. But I also don't know as many alternative solutions to things. What I just said about being able to justify myself for things I'm doing, there's a lot more because I know this works rather than I know this is the best solution. So I can make stuff happen in JavaScript. I can write it relatively comfortably
00:17:13
Speaker
but I don't have the comfort level with it to be able to sit down and teach someone JavaScript without having to plan it. So I guess that's the big difference there. I've mucked around with Python, but you wouldn't want me teaching you Python. Yeah, I've probably spent less than 20 hours playing with Python. If you want to get into other things, I've used React, I've used Vue and those, but that's sort of JavaScript.
00:17:38
Speaker
adjacent, I guess, you know what I mean, and stuff. But again, there it's not things that I've gone super in depth with or play with too much. So yeah, hopefully that answers the question there.
Understanding CSS Resets
00:17:51
Speaker
The next one and the next couple are CSS questions. Well, okay, sorry. I usually will do some base CSS changes on the universal selector, the star selector, such as box sizing, padding margin, but I've seen some normalized CSS style sheets. They linked to normalize.css. Are these sheets needed or should I stick with the basics? Does using any pre-made starters like this alter ownership accreditation of the final code? We'll start with that final question.
00:18:21
Speaker
It shouldn't know. Most of those are on, I think normalize anyway, has the MIT free use license or whatever. When people share their resets, they're freely shared. There's not really a way to copyright that type of CSS, right?
00:18:44
Speaker
It's just maybe 50 lines of code. They've put it out there in the public. It's basically public domain. So I think you never worry about it changing anything when it comes to ownership or accreditation. It could be good to keep a comment in the code if you're using someone else's reset or normalize or whatever you want to call it, just so it's there and you're acknowledging it. But beyond that, don't worry about it.
00:19:07
Speaker
As far as, are they useful? Yes. And no, normalize started as a way of making sure it's less about like getting rid of your box or changing the box sizing, you're getting rid of your padding and margins. It was more about getting all the browsers to behave the same. So back in the day, even like I should look now, I haven't looked at this in a while, but font weight. I'm trying to think font weight.
00:19:39
Speaker
OK, if you use the strong tag, it was different in Firefox and in Chrome. And in Safari, Chrome and Safari are the same. You have Chrome, it's WebKit, and then there was a branch of WebKit for their engine, which is escaping me for whatever reason right now. But a little Chromium is a branch of WebKit. So they're the same. And what it is is the strong tag
00:20:04
Speaker
In the user agent styles, in Chrome and Safari has a font weight of bold. And in Firefox, it has a font weight of bolder. And there's a big difference there, because if you have a font weight of say 400 on something, and then you have a bolder, it's going to go to the next step that's available. So in Firefox, if you have a font that has a font weight 500, it would choose the 500.
00:20:30
Speaker
Whereas if you have a font weight of bold, it would go to the 700. So you'd actually have a different, if you didn't declare what your font weight for your strong tag was, it potentially could be different between the two browsers. That's a really silly example in one sense, just because it's not like a big thing that's going to have a huge impact on things. But it's just one of those places that it's the first thing that came to mind on the difference between two different browsers.
00:20:58
Speaker
And so the idea with normalize was just to make sure they're all the same as a starting point. So you could run into cross-browser incompatibilities and other stuff, but at least when you started working on your website, everybody would be on the same page. And it goes into some of the more niche things and stuff that you wouldn't even really think about. And it's just nice that you don't have to think about those things.
00:21:20
Speaker
These days, modern browsers have a lot less differences between them than they used to. If you go back far enough, they were wildly different. It was massive differences between them. Even between Internet Explorer and Netscape Navigator, we didn't have a box sizing property, and the two of them handled box sizing differently. So you can just imagine how that went. These days, there's a lot less. So if you look at different resets, there's like Josh Como has his and Andy Bell has his, and there's a few others that are out there. A lot of them, there's not too much that they're doing.
00:21:50
Speaker
So just because CSS is in a better place, but there's the image and making sure we have a max width 100% and stuff like that. And you'll see a few opinionated things in there as well in some of them.
00:22:01
Speaker
I guess it depends a little bit on the scope of your projects, what you like to do, and other things like that. I tend to just roll my own that's sort of influenced by some of the other ones that are out there. But if you just want to use normalize.css, it works perfectly fine. And normalize is sort of the base for a lot of other resets, like reboot, Tailwind has their own that's based on, I think, Sanitize, which is an opinionated version of normalize.
00:22:28
Speaker
If you don't want to, you don't have to, but it's sort of just a nice way to set the stage and not have to think about things too much. A really long way of saying that.
Utility vs. Custom Classes in CSS
00:22:36
Speaker
Next question. Do you favor utility classes, custom classes, or a combination of both? Thanks for the great pod and video channel. Thank you. I'm glad that you enjoy both of them. I prefer a mix of both. I used to be a really big BEM person, which is just all custom classes.
00:22:52
Speaker
And over time I started using more and more utility classes, just mixing them in because I'd be like, well, I don't, you know, like this is the, I don't know if it would be like, I can't think of a good example, but say I needed a space on something, but it was the same space I needed somewhere else and the same space I needed somewhere else. And it was all these different quote, like blocks.
00:23:15
Speaker
So normally, those elements in the blocks would get different selectors on them. But I only needed to change that one thing. And it was the same on all of them. And it was just like the block system felt a little bit too rigid to me. So I started going with utility classes for those types of things. And then I sort of found, I find what I tend to do is I have a pretty wide range. I have font sizes, colors, and background colors. So text color, background color, spacing.
00:23:44
Speaker
Those are the things I tend to use utility classes for the most. And then if ever I find myself putting more than three utility classes on something, I go, you know what, this would make more sense as just making a regular custom class and putting these as properties in there.
00:24:00
Speaker
makes it, for me, easier to maintain and easier to keep track of and work with. So yeah, that's sort of how I do it. And maybe if I get to four and I'm like, I'm never going to need more than four, then I'll put four on there. But when I get to three, that's when I start thinking, should this just be a custom class instead?
00:24:21
Speaker
All right, next up. A while ago, you put up a controversial video titled, A New Approach to Container and Rapper Classes, which I loved and thought should become common use until something better comes along. Do you have any new thoughts on it? Or maybe any old thoughts you think should be reiterated? Thanks. Thank you, Stefan, for the question.
00:24:45
Speaker
Yeah, so for those who don't know the video, I proposed using grid as like having a parent grid that would control your layout and then so you don't need containers or wrappers
Exploring CSS Grid Layouts
00:24:56
Speaker
anymore. And you could have different classes on the elements that would sort of take up the width that you needed it to be, but anything that was on, you'd have like your main grid and any direct child of that, it would sort of act as a container in a sense, but you could also easily break out of it or have narrower sections as well.
00:25:13
Speaker
I think it's great. I like using it. It's definitely sort of become my new go-to of how I work and new thoughts on it. I've experimented with it. I got a few people asking questions about it where I'd split. One of them was for like a carousel-ly type thing.
00:25:30
Speaker
horizontal scrolling but having it line having the first item line up with whatever so if we were in like the regular width area to have it match that but you can have it match a pop out or a breakout and different things and then as you scroll the last element would line up perfectly with like the right side so i played with it more and got that working and i was pretty happy with that then
00:25:54
Speaker
I also added being able to do like splits like a 50-50 split section. That one made me have to rework everything a little bit because then because there's like a grid line right down the middle you sort of have to create a whole bunch of you have to divide all your columns in half basically for the sizing. Anyway it wasn't too bad or not all of them but the middle one but it got there and it works well. The one thing I'm trying to decide at this point is
00:26:24
Speaker
Because the one I have now that has all of these features and stuff that I can use is pretty... There's stuff in there I don't need all the time, right? Most of the time, I'm not going to use that 50-50 split, and I'm not going to use the carousel type element. And I'm probably not going to use all the different depths of things I've done, like a narrower section, a popout, a breakout, an extra large, and then the full width. And most of the time, I don't need all of that either. So it's like...
00:26:53
Speaker
Do I want to just keep it all there so it's always available and I just bring that into every project? Or should I have different versions of it that I can use depending on the project I'm working on? That's the main thing I'm trying to figure out. Because obviously, the good thing with it is the ease of use. The hard thing with it is once it's set up, it's a bit of a pain to modify if it's in an existing project. So I feel like having a more robust version of it, even if you're not using all of it, is better.
00:27:21
Speaker
So if ever you do need that breakout, all of a sudden it's there versus trying to then have to build it in. It's not that bad to do it. You can add it in without breaking anything, but it just takes a little bit more work. So that's, I guess, the main thing I've been thinking about.
00:27:35
Speaker
And we're going to go to the last question because I've been recording for half an hour now, which is way longer than I thought it would be. And I have some other questions. We'll save those for another time. I apologize if I didn't get to your question. But what's the best way to have subtle UI animations, page transitions, and or page transitions? Thanks for your videos. So I guess it depends on the animation or the transition. If it's page transitions, I mean, view transitions are amazing, but the multi-page view transitions are kind of limited.
00:28:04
Speaker
It's behind a flag only in Chromium right now, so that is very limited, but that will definitely be the solution. The page transitions with those are amazing. They're really easy to do, like incredibly easy to do. So I'm just holding off for those instead of coming up with really complex page transitions because actual page transitions can be a lot of work without that type of thing. I think Astro actually has a really nice solution there, so you could play around with that too.
00:28:30
Speaker
As far as more subtle UI animations there, it depends on the interaction.
00:28:39
Speaker
the best way to have them. I'm not 100% sure what you mean by the question, so it depends a little bit on the context. I just realized I've been recording for like half an hour now. I had to cut a little bit out probably because my dog was barking at one point, but this has gone on a little longer than I was planning. I'm going to end it here. I do have a few other questions I didn't get to, so I do apologize. If I didn't answer your question, I'll save some of these for next time and I'll do another one of these at one point or another.
00:29:02
Speaker
As I said, you can have a few interviews to look forward to. I have Yuna Kravitz. One is coming out hopefully next week, and then a week or two after that will be my one with Travis. And I have a few other people lined up already to interview and a bunch of people that I want to interview. So I'm really looking forward to this. And we're going to have solo podcasts like I've been doing up until now, but interspersed with some longer interviews and stuff like that. So just a bit of an idea of what you'll be finding here if you are subscribed or you're thinking about subscribing.
00:29:32
Speaker
With that, thank you very much for listening. I appreciate it very much. I hope you enjoyed this episode. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.