Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
When you don't know where to start
1.2k Plays1 year ago
You follow a few tutorials and feel pretty good with the small projects you’ve been able to build. Then you have a cool idea for your own project, you open up VS Code, and you have no idea where to start.
This is a common problem, and it happens because understanding something is not the same thing as being able to do something.
Other awesome stuff around the web:
- Naming Variables in CSS by Jonathan Dallas
What I’ve been up to this week:
- How to create and style lists with HTML & CSS
- Simplify your code with this underused pseudo-class
- Using CSS custom properties like this is a waste
Find me elsewhere on the web:
Recommended
Transcript
Introduction to General Musings
00:00:00
Speaker
Hello my friend and friends and welcome to my podcast General Musings. My name is Kevin and this podcast is the audio version of my weekly Sunday newsletter where I generally talk about whatever is front of mind for me in any given week as well as share some sites or fun resources that I've come across in the past week and anything that I might have been up to as well.
Understanding vs. Executing Concepts in Coding
00:00:22
Speaker
This week we're going to be talking about how understanding something isn't the same as knowing how to do that thing.
00:00:29
Speaker
And while that might seem obvious when I say it like that, this is a problem that a lot of people run into when they're learning and especially when it's code related. For example, let's say you're starting to learn and you've gotten past the very basics and now you want to learn how to make a to-do app.
00:00:46
Speaker
So you're not really sure how to make one or how to get started so you go and find a tutorial on how to do it and you follow along with that tutorial and everything goes really smoothly or maybe you do run into a hiccup here or there but you refer back to the tutorial, you find a little typo that you might have made where it was causing something not to work and you realize how to fix it and everything works as intended after
Learning Coding Through Tutorials
00:01:09
Speaker
that.
00:01:09
Speaker
Now you repeat this process a few different times, building different things by following different tutorials or courses that you're finding. And then eventually you have an idea for something that just pops into your head. And it's a cool little project, a fun idea that you'd like to build. So you fire up VS Code and then you just have no idea what to do.
00:01:31
Speaker
the empty editor is just staring at you that carrot is blinking away sort of taunting you with the empty editor and you're just staring right back at it and you start wondering how is this possible i've made a bunch of projects now i should know what to do now for some of you listening to this you've already gone through this and luckily you've moved past it but you understand the struggle that i'm talking about
00:01:55
Speaker
Other people listening to this are going through these struggles right now and you're understand if you're there right now You're probably very infuriated But I have some tips to help you out and of course some of you might not have gone through this Yet because it will happen and I know it will because this happens to everybody at some point
00:02:12
Speaker
It can be infuriating, but it happens for a good reason, which is when we understand how something works.
Illustrating the Execution Gap with a Backflip
00:02:19
Speaker
We often think that that means we know how to do it ourselves, but that's not actually true. And it's also a very easy trap to fall into, especially when it comes to writing code.
00:02:30
Speaker
And that's because often when we're doing coding based stuff, we can follow the tutorial. We understand all the different things going on. We can open up some code and read it and understand what that code is actually doing. But being able to follow along line by line and understand each one of those lines or to open up somebody else's code and look at it and understand what it's doing. That is very different from being able to code it on your own.
00:02:52
Speaker
It's a little bit easier to understand this concept if we switch to something completely different from code, though, like doing backflips. And that might seem like a weird jump to take, pun intended. But we can watch someone do a standing backflip. And while we might be wildly impressed by seeing them do that standing backflip, we probably have an idea of how they did that, right?
00:03:13
Speaker
They jump really high into the air, they're throwing their weight backwards, probably using their arms for momentum and everything. And as long as they've managed to rotate enough, they land on their feet.
Challenges of Learning from Tutorials
00:03:24
Speaker
You're super impressed by that. And now you want to learn how to do one yourself.
00:03:28
Speaker
You can find tutorials for that. I've linked in the description to this to a short 60 seconds long, and it covers all the steps to learn how to do a standing backflip. And they do a really nice job of explaining how to do a standing backflip. So if you did have that opportunity to go and watch it, or even if you didn't, that's okay. But let's pretend you did. And there was five steps total in their video.
00:03:50
Speaker
And if you watched the whole thing over that 60 seconds and came right back, I'd like you to try and think about what those five steps were again. Now, I've only watched the video once and if I had to remember what those five steps were, I know the first one involves sort of planting your hand in the ground and sort of maybe doing some weird movement.
00:04:09
Speaker
I think there was another step that involved more of a cartwheel instead of the hand plant. I guess cartwheels involve hand plants, but it was kind of different. I know one of the steps, I think it was the fourth one, was just jumping as high as you can possibly jump to get better at jumping, so eventually you could get into the backflip. So I sort of know what they talked about, but I'd also have to watch it again.
00:04:30
Speaker
probably a lot of times if I was actually going to attempt to learn how to do a standing backflip. And actually, if I was going to try and do one or learn how to do one, I'd probably watch just one step at a time. I would see what their step one was, I'd pause it, and then I would practice those motions over and over again, because that's sort of the idea of that tutorial, is here's the first thing you should get good at, you should practice that a lot, and then you can go on to step two.
00:04:53
Speaker
Now I'd do that, I would pause at each single step along the way and I'd practice it and do it over and over again, even though I understood what all of the steps were. I understand what they're teaching me on that first viewing, I understand the motions they're doing, I understand any terms they might be showing, you know, all the different things that they're showing me how to do, I understand.
Physical Skills vs. Coding: Practice and Proficiency
00:05:14
Speaker
But that doesn't mean I can do any of them without practicing them over and over and over again until I can get them right.
00:05:21
Speaker
And one thing I definitely wouldn't do is do each one of those steps one time and then just move on to the next one. If I did that, I just went step one, one time, step two, one time, step three, one time, and just went through all the motions for each one, one time only. Then when I got to the last step, which is actually doing the backflip,
00:05:39
Speaker
I'd probably land on my face and really hurt myself. Which, even granted, if I were to practice all of the other steps before that, I might hurt myself as well. But at least I'd be giving myself a fighting chance to be able to land one. And obviously, in coding, we don't so much land flat on our face. But that's sort of the same thing as instead of hurting ourselves, we're stuck there staring at the blank editor with the carrot taunting us as it blinks away on an empty page.
00:06:05
Speaker
when we follow a tutorial or a lesson or anything like that. And we're just going through each one of the steps, which is writing each one of those lines of code one by one, along with somebody showing us exactly what letter to write for everything. We're not learning how to do that thing. We're just learning all of the little steps that we need to be able to do to accomplish the final result. And we're going through each one of them one time to get there.
00:06:28
Speaker
Now that we know what all of those steps are because we followed the tutorial, well now we need to actually practice them. And the big difference between learning how to do a standing backflip versus coding something is by following each one of the steps one by one to do the standing backflip you're sort of setting yourself up for failure and you probably don't want to do that and you're going to be hesitant to try when it comes to the last step because you know that you probably don't know what you're doing.
00:06:53
Speaker
Whereas with coding, we feel like we accomplished something because if we follow each one of the steps that the tutorial is showing us, we get the finished product that works in the end.
Independent Coding Practice and Mastery
00:07:02
Speaker
Not only that, the part that I think throws most people off is you could look at the code that you wrote and you can understand everything about it. You could even look at that code a week later and you'd understand it. Or you could find a to-do app written by somebody else that's similar and you could probably understand that as well and understand all the different pieces that are going on there.
00:07:20
Speaker
so all of a sudden you've tricked yourself into thinking you actually know how to do that on your own but reading code that somebody else wrote and understanding it is a lot like watching your good buddy do a backflip he watched the same tutorial as you but it's a week later and all week long he's been practicing and you haven't been and now he can do that standing backflip and you stand there and you nod along and you go yeah i know how to do that too well yes you know how he managed to do that but you're not actually able to do it
00:07:48
Speaker
understanding something is not the same as being able to do something. We have different stages in learning and the first one is when we gain an understanding of something. I can understand what those steps accomplish, I can understand everything that's happening but if all you do is follow along line by line with tutorials or even worse just passively watching tutorials you're never going to progress beyond that understanding stage.
00:08:13
Speaker
Now granted sometimes this is actually why we watch a tutorial, right? Sometimes I don't want to learn how to do a new thing, I just want to learn about a new thing. I'll see a YouTube tutorial pop up from another channel on something new and I'll open it up and watch it probably at 2x speed just to give myself an idea of what it is this new thing can do, right? I just want to learn, I just want to gain like a general awareness of what that thing actually is.
00:08:37
Speaker
And then if a situation ever arises where that could be useful, well, then I'm going to go and find that tutorial again, or I'll go read the documentation and I'll learn how that thing can actually work so then I can implement it where it would be useful for me. And that's what we need to do if we want to learn how to do something.
00:08:55
Speaker
We have to use it and we have to practice using it. And this can start really simple too. You can watch the tutorial like you've been doing but then instead of just moving on to the next tutorial you can delete all the code and start over and just try and recreate it on your own. I almost guarantee it you won't be able to and you're gonna get stuck on different things. But that's completely fine and that's actually a good thing when you're getting stuck because that's how you're going to learn.
00:09:20
Speaker
You're going to find the parts where you're not sure what's going on or you forgot something and there's holes in your knowledge and learning is all about filling in these holes in our knowledge. So you get stuck on something, you go back to the tutorial, you see what it is you forgot, put the tutorial back away and then you go and implement that in your project.
00:09:36
Speaker
and then maybe it was a to-do app you made but you had an idea for a better version of the to-do app or an extra feature that you can add and then you try and implement that in there and you're going to be using a lot of the things that you've learned but now you're using them in slightly different ways and you're going to be learning the entire time that you're doing that because you're applying things without looking at exactly what to write you're trying to remember what you need to do and try and remember how different features work and that's sort of the point is you want to get stuck
00:10:03
Speaker
so you know where you need to fill in some knowledge gaps and this is something you're going to do over and over and over again and every time it just helps that knowledge become a little bit more sticky and then eventually you will be able to do it on your own but that's why if you followed along with like 10 different projects and tutorials or courses to like accomplish different things but you never did anything other than just following along line by line through all of those lessons
00:10:30
Speaker
You have no idea where to start. You've had your hand held the entire time and you've never actually had to actively figure out any of the steps on your own. You're not relying on the knowledge that you have. You're relying on having the code right there for you. And so instead of a few
00:10:45
Speaker
small stumbling blocks, everything is a stumbling block now, right? You haven't been slowly filling in all these knowledge gaps. You're just getting to this point of trying to build something on your own and none of that knowledge is there. You're starting at square one, even though you could understand what all of that code was that you were doing originally.
00:11:02
Speaker
And if this is happening to you, it's very important to understand because it's insanely infuriating when it does happen. But it's so important to understand that it's very normal and you're definitely able to learn and get past this part.
Naming Conventions in CSS
00:11:16
Speaker
But please just don't let looking at some code and understanding what it does trick you into making you think you understand how to do it by yourself.
00:11:24
Speaker
And switching gears a little bit, we're going to move on to the other awesome stuff from around the web section of this podcast. And if you've watched any of my videos, you probably know that I like custom properties a lot. And I actually like a numbering system that I use for my colors and my font sizes, where like 400 is my base and then I go lighter and darker from there. And I also like to prefix my custom properties as well.
00:11:47
Speaker
So I'll use forward slash forward slash, which we need for a custom property, but we have the forward slash forward slash and then I'll do like CLR for color, or I'll have the FS for font size or FW for font weight. Just to make it really clear that that's what that thing is for. The prefixes help and for me the numbering helps a lot as well.
00:12:08
Speaker
And for like simple things like that, the naming and the numbering can be pretty straightforward. And it just for me helps a lot with naming things and naming my custom properties, because in general, as you might know, naming stuff is maybe the hardest part of CSS. But once you get past those like basic things, if you have a robust system in place that has a lot of custom properties being defined,
00:12:29
Speaker
It can be hard to come up with good ways to name them and you just start to get a little bit lost sometimes, which is where this other stuff from around the web is going. Where recently Jonathan Dallas put out an aptly named article called naming variables in CSS.
00:12:44
Speaker
I'd really
00:12:59
Speaker
recommend checking out the article to understand like why mixing the two of them but it's sort of like the kebab case is almost like if you're stringing together all the prefixes and then you'll get to like you know you might have a color that's not red it's I don't know you have a longer name it's you know cherry red so instead of doing cherry hyphen red then you use camel case there at the end because it's just a color name or
00:13:19
Speaker
This could be for your font sizes of different things or, you know, heading one and it's like heading capital one. You're writing the whole word one out. So the font size might be kebab case, and then you have the camel casing for after that. But anyway, I would definitely recommend checking out the article to get an idea of what he's suggesting there. Cause I think he raises a lot of really good points throughout the article and it could really help out if you are ever struggling with naming things, especially your custom properties. There is one thing though.
00:13:46
Speaker
he mentions in the article or when it gets into the world of color that I actually disagree with. The colors in general are a point of contention for a lot of people and I think it often comes down to personal preference. And the part that I don't like is that the way he goes into the naming things relies a lot on knowing the names for different shades of colors. For you know for example in it he uses Ferrari red or sunflower yellow
00:14:10
Speaker
To sort of say like that's actually more descriptive than maybe having, you know, what's a red 300 versus, you know, a yellow 700 or whatever it might be. And I understand that idea. And well, you know, Ferrari red, I think most people would know what that name is.
00:14:26
Speaker
But another example he uses is Bondi Blue, and he also uses Cadet Blue. And for those, I actually had no idea what to expect. And I even Googled the two of them. And especially with Cadet Blue, after Googling it, I still have no idea what the color would actually be because the first five results within Google were actually completely different from one another, going from something I would consider almost a teal all the way into a pretty rich
00:14:51
Speaker
just blue and i completely get why he prefers that naming system he's far from alone in preferring to name colors that way i just feel like it leaves things a little bit too abstract in a sense it relies on people's interpretation of what you know what's ocean blue for example there's lots of different colors in the ocean and well we have some color names that definitely i think sky blue more or less most people could agree on it just leaves things up to a lot of interpretation
00:15:18
Speaker
And it also doesn't take into account that a lot of the time English isn't somebody's first language. And in those cases, there's probably even a bigger chance they have no idea what that color might be. But just because I don't like what he proposes for how to name colors, it doesn't mean that I can't get behind other things that he's saying in the article. And I think these days people do that a lot where they see one thing they don't like and they attach themselves to that and just won't listen to the entire thing.
00:15:45
Speaker
I can totally get behind that the camel case and kebab case mixing thing as I mentioned earlier. I think just because I don't like that way of naming colors doesn't mean that you might not get something from that or some other ideas from it as well. I would definitely recommend checking that out because it might give you a better way to name your custom properties.
00:16:04
Speaker
And speaking of custom properties, I had a video out this week actually where I explored how people don't make the most of them.
Recent Content and Podcast Conclusion
00:16:11
Speaker
And that's because people set them up often on the route and they just use them throughout their project. And yeah, that's good. I think custom properties are really handy and just for doing that. But in the video, I explore the idea of using locally scoped custom properties and even that's like building on top of maybe the global custom properties you have.
00:16:30
Speaker
and also how we can sort of bring in this idea of private properties with like this locally scoped ones which is an idea that Leaveru proposed and that I've really gotten behind and it's a little bit different from how I've used the private property idea before I went more into how Lea actually proposed it and suggested it within the video.
00:16:49
Speaker
If you're using custom properties a lot already, but you're not using them locally, you're just using them up in the route, definitely consider using them locally. And if you're not too sure what the best practice for that is or ways that you could actually take advantage of that, you can check out that video that I put out this week.
00:17:04
Speaker
I also put out a very beginner-friendly video looking at how we can create and style lists with HTML and CSS, really going over the basics into how we can style them up at images, icons, and just the spacing between things, all of that more beginner-friendly stuff that you might have with lists.
00:17:23
Speaker
And I also put out a short this week where I looked at how useful the empty pseudo class can be, where I used a to-do app, speaking of them, where I removed an empty unordered list when the to-do app doesn't have any items in it. So the entire list is taken out of the document so you don't have this thing floating in there that you don't need. A lot of the pseudo classes tend to have that one specific purpose for them, but it can really come in handy in the right use cases.
00:17:47
Speaker
And that's it for this week. If you prefer a written version of this instead of hearing me talk about all of these things the link to my newsletter is in the description as well as links to my socials and every other thing that I've mentioned along the way as well. Thank you so much for listening and until next time don't forget to make your corner of the internet just a little bit more awesome.