Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Two important dev skills that don’t get enough attention
936 Plays11 months ago
This week, I focus on two of the most important skills a developer can have, which also happen to be two of the hardest ones to teach:
- The thought process to break down more complex problems.
- Being able to dive into existing code and quickly make sense of it.
These are probably two of the most important skills you can have as a developer, but they don’t get much attention because they aren’t as easy to convey as “follow along as I code this up”.
I’ll give some tips on how you can improve your skills on both of these though, and as a bonus it can even be a little fun!
Other awesome stuff around the web:
- ShopTalk show’s How to Think like a Frontend Developer
- Hyperplexed’s channel
- Hyperplexed video that I mentioned:
- CSS4 is coming by CSS Weekly
- Workarounds for Buggy Gradients by Keith J. Grant
What I’ve been up to this week:
- The code behind a Hyperplexed video
- Awesome filtering animation with vanilla JS
- CSS Shorthands aren’t always worth it
Find me elsewhere on the web:
Recommended
Transcript
Introduction to General Musings
00:00:00
Speaker
Hello my front-end 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, usually in some way that's at least somehow related to front-end development, as well as share interesting sites and resources that I've come across in the last week
00:00:21
Speaker
and also share what I've been up to as well.
Breaking Down Complex Problems
00:00:24
Speaker
This week I'm going to be focusing on two of the most important skills that a developer can have which also happen to be two of the hardest ones to teach. First of which is the thought process to break down more complex problems and second being able to dive into existing code and quickly make sense of it.
00:00:42
Speaker
They don't get very much attention, at least in tutorials and other things that you see online and in YouTube, because they aren't as easy to convey as the follow along as I write this code type of tutorial that you see out there. Since you follow me, you probably realize my videos tend to be a little bit longer than they could be, which people do also like to complain about sometimes, but it's because I try to add extra context and explanation into why I'm doing different things and not just showing you the code that makes it work.
Understanding Pre-existing Code
00:01:09
Speaker
But still, it can be really hard to convey that thought process properly. For me, the second one is even harder though, and it's probably something that's actually better suited to a live stream than a regular video because you just need to sit down and spend a long time sometimes going through a lot of code and it's hard to speed up and skip through the boring parts because it's not terribly exciting.
00:01:28
Speaker
Now, you might feel like I'm repeating myself a little bit, but it is one of the most useful things that you can learn. If you're already working in the industry, you might already know this because I can guarantee you that you can remember after being hired the first time you sat down and opened up an existing code base or whatever you were working on, and you just had so much code staring right back at you. Maybe they even just assigned you a really nice simple task for you to get started with, but you're just blinded by all this pre-existing code and you have no idea where to start.
00:01:57
Speaker
And of course this isn't only when you're new to a job, this happens anytime you get assigned to a new project, or if you get a new position as well. Whatever the case, they need you to get up to speed relatively quickly and understand the code that you're looking at, and that can be a really daunting task, especially if you've never done it before. There are ways that you can develop that skill though, even if you're just learning and you're not working in teams or anything like that yet, and they can actually be a lot of fun to do.
Recreating Code Pens for Learning
00:02:22
Speaker
One thing that I enjoy doing and I've even made some simple videos around this is where I find an interesting code pen and I try and recreate what they've done and also sometimes add on top of what they've already done. I like doing this because I see it first of all as a little bit of a challenge, but the final code is also right there. I can dive in and see how they've done things as well. This has several benefits to it. First, it helps me read other people's code and learn how to make sense of it.
00:02:50
Speaker
but then also by using their own approaches and maybe modifying them slightly for the changes I might have made, I learned a lot along the way too. I'd strongly encourage if you've never done this before to give it a try. It's a lot slower than simply following a tutorial to get to the end result, but it's also a much more powerful way to learn as you have to do a lot more independent thinking and a lot more trial and error and
00:03:13
Speaker
Of course, that trial and error is a good thing and a nice way to learn.
Teaching Problem-Solving Skills
00:03:17
Speaker
And of course, speaking of independent thinking, the other hard to teach skill is being able to break down complex problems. I've made videos where instead of specifically looking at the code, I look at how I would break down a layout before I even start writing any CSS. And actually, one of my favorite podcasts is the Shop Talk show.
00:03:35
Speaker
and my favorite episodes from that were from a few years ago where they had a series called thinking like a front-end developer where in that series they brought on a bunch of guests every episode was a different guest and they showed them a layout and they asked them to share their thought process of trying to break it down that first time they take a look at it. It's really interesting to listen to and I'll make sure to include a link to that series in the show notes.
00:03:58
Speaker
And this idea of trying to convey our thought processes and how to break things down is also why I'm a big fan of Hyperplexed. If you're not familiar with him, it's a wildly successful YouTube channel that's really just well polished short videos. But in his videos, he doesn't focus so much on the code itself as much as breaking down the complex looking effects into more manageable pieces and then going over the core concepts on how to recreate all of it.
00:04:23
Speaker
It's a great approach, in my opinion at least, because he focuses so much on the thought process and breaking things down rather than the follow along while I code this line by line type of thing.
00:04:34
Speaker
Now there's value in that as well, of course I make that type of video so I hope there is.
Learning from Hyperplexed
00:04:38
Speaker
But one of the things that I don't think enough people take advantage of with videos like Hyperplex is how you can actually use his videos to bridge the gap a little bit between the here's the thought process and here's the line-by-line breakdown because Hyperplex shares the finished code as well.
00:04:55
Speaker
And I'm bringing Hyperplexed up specifically in this idea specifically because with his last video having a Pixar theme to it, I thought it would be really fun to do something like one of those insider behind the scenes videos, what they normally do for like movies and stuff like that. Or they're looking at like how a movie was made, but instead I did it as like look at the code behind his video type of thing.
00:05:15
Speaker
And my video in this case was a little bit faster paced than I normally would do. It really wasn't my typical style of tutorial. That's because I did want to break away from the this is exactly how we do this to more of a there is a lot more going on here, which you can learn a lot from if you take the time to do it type of video instead. I hope that makes sense. But yeah, I really wanted to highlight that even though we're seeing the general overview of what he's showing us, which you can already learn from, there's a way to get a lot more from his content.
00:05:44
Speaker
And a lot of the things that you can learn here are that idea of learning from going into an unknown code base, because as I said, he shares his code pens, but you get that extra level of a little bit more comfort when you first dive into it, just because you've at least heard his thought process behind all of the code first.
00:06:03
Speaker
Now he's really good at making things sound simple, so when you first open one of his code pens and take a look at it, it can seem a little bit intimidating, even if you've watched that video, because, you know, as an example, in the last one he had like this glowing effect, and in the video it took about 20 seconds for him to explain it, and he only showed two lines of JavaScript, whereas the finished version was a heck of a lot more complex than that, and had quite a bit going on with it.
00:06:25
Speaker
But this is why diving into his code after watching the video can be really useful because as I just said you'll understand the thought process behind the code already but at the same time it takes a fair bit to actually unpack everything that's going down in there and you have to break down what some of the functions are and you run across some functions that he never even mentioned in the video
00:06:45
Speaker
And you just try and figure out the exact purpose of some of what he's actually doing there. And of course, you don't have to take this to the full extreme of understanding every single line of his code. In my own video, for example, I got to the basics of the effect and had it working pretty well, I think, by mostly just sticking to what he covered in the video and supplementing it with just little bits from his code pen.
00:07:06
Speaker
It didn't result in the same polish, but it got me like 80 to 90% of the way there. And even then, getting that 90% also helps explain some of the extra details that I didn't understand why he bothered with at the beginning. You know, I'm like, oh, look, my effect looks pretty good, but oh, it's missing a little bit. And then, oh, that's why he had this like whole extra complex thing that he actually ended up creating because it made that effect go from like, oh, that's kind of cool to like really nice and polished instead.
00:07:33
Speaker
Now, I didn't want to record this just to come across as like a hyperplexed fanboy or something like that, but rather I just wanted to highlight some of the different approaches that you can take to learning that if until now you've mostly been focused just on step-by-step tutorials.
View Transitions API Tutorial
00:07:47
Speaker
And speaking of step-by-step tutorials, I did create one of those this week as well where I was looking at how you can use the new view transitions API to make a pretty nice filtering animation.
00:07:57
Speaker
These are the really common types of things that you see for portfolios where you might be showing all of your portfolio projects and everything. But then there's buttons along the top where you can filter by the tech you use. So when this one uses, you click the React button and you're only showing projects that are using React.
00:08:13
Speaker
ones that are only using Vue or Astro or whatever it is. I think you probably know what I'm talking about. Sorry if it wasn't the best explanation. In my video, instead of doing a portfolio, I did a conference list that you can filter by front-end, back-end, and full-stack conferences instead of having the entire list of all of them. The reason I did that was just so I could mention that I'll be speaking at that conference in January. Yes, the name of it is that, which I'm really excited about. If you can, you should totally attend and I'd love to meet you there.
00:08:43
Speaker
If you do make it, make sure you say hi. But yeah, in the video I looked at how we can create the filter itself to make it working, but of course then there's no animation. But then we can use the new view transitions API with literally just a couple of lines of JavaScript. And all of a sudden you have this really cool animation that looks really well. And honestly, it feels a little bit like magic when you first get it working.
00:09:04
Speaker
And there's actually a lot more to view transitions than what I cover in the video, and there's something I look forward to actually playing around with quite a bit more. But just for sort of what I was doing there, it just works so wonderfully. It was really, really cool. And so if you haven't looked into view transitions, their support's not perfect yet, or perfect by any means, I should say, because it's only in Chrome at the moment. But yeah, they're a really nice thing that you can just throw in there as a progressive enhancement to add this little polish to your websites and make them a little bit more fun to interact with.
CSS4 and New Features
00:09:32
Speaker
And speaking of new features, it's a good time to move on to our other awesome stuff from around the web section of this podcast, as this week I actually had some people reaching out to ask if CSS4 was really going to be a thing or not, and I think this might have been because of a recent video on the CSS Weekly YouTube channel that was talking about how CSS4 is now happening.
00:09:52
Speaker
The TLDR of it is that yes, it does seem to be coming. And with it, CSS5 and CSS6 and so on and so forth are all going to be on the way here. And the main idea behind all of this is primarily as a bit of a marketing exercise to raise some more hype and awareness around a lot of the new features that are part of CSS now. Because when CSS3 happened, it was huge. Everyone was talking about it. It was all over. There was blogs all about it, all these new things that were coming out.
00:10:21
Speaker
Whereas now like every feature just sort of comes out on its own, and while a few of them do get some attention and definitely people get excited over them, it's not anywhere close to the level of excitement that was built up when CSS3 landed. We've got so many new things and better things also since, you know, CSS3 was like border radius and box shadow. And it's like, wow, look at where CSS has come since then. There's so much that we should be excited about.
00:10:44
Speaker
But the other part of this, though, is also to help group things a little bit because right now every spec is on its own level. But drawing some lines in the sand can be really useful to help group things a little bit in terms of sort of where you should be at, where is the general support and all of that.
00:11:00
Speaker
Anyway, Zoran does a really good job of going into more details about it all in his video. So if you're interested in learning more about getting a better understanding of or just the idea behind CSS 4 and 5 and 6, etc., do check out that video. And of course, the rest of his channel, which again is called CSS Weekly, because honestly, he's been killing it over there and you should definitely check it
Fixing Buggy Gradients
00:11:22
Speaker
out and subscribe.
00:11:22
Speaker
And speaking of CSS4, that lets me keep going with a relatively smooth segue, as the new color features in CSS look like they're probably going to be put into the CSS5 grouping, and they play a really important part in a really nice article by Keith J. Grant called Workarounds for Buggy Gradients that he recently put out. I'm sure you've probably created a gradient at one point in the past, only for the middle of the gradient to be a little bit of a greyish letdown, even though the two ends are really nice and vibrant.
00:11:51
Speaker
And the simple solution sometimes is just to provide your own middle color. You can manually pick a middle color that looks a little bit better. But what if you're going from a color to either transparent white or black? Finding the middle isn't really as obvious then, right? And sometimes when you do the gradient going into one of those, the gradient that the browser comes up with
00:12:11
Speaker
can be really ugly. And there's one example that Keith shows in his article is if you go from an OK lab, I think it is, or an OK LCH. I forget which the two it was. But if you go from the red in that space into a white, for some reason, the middle is this weird, orangish color. And it's really strange. And I think the one to black, it sort of turns purple before it gets to black. And it's just kind of not what you'd expect it to be.
00:12:33
Speaker
And if you've ever struggled with this in the past or you'd like to see examples with it and know how to fix them if ever you run into it, Keith shows that you can actually fix the problem by declaring the white, gray, black, or even the transparent in the same color space as the first color. It's slightly more work to set things up this way, but it actually makes the gradients look so much better. So it is definitely totally worth it.
Exploring Code for Learning
00:12:55
Speaker
And without any nice segues that I can think of instead, we'll circle back to the idea of learning by looking at other people's codes rather than following step by step tutorials. And I want to just talk about that really quickly again, just to reiterate that if you've never tried doing something like that,
00:13:10
Speaker
please do give it a try. It can definitely feel a little bit frustrating at first, especially if you can't make sense of a couple of things, but not only is being able to understand someone else's code a very important skill to have, but you often learn so much more along the way while you're doing it. It forces you to think more independently than a step-by-step tutorial would, and it sort of sometimes forces you to do a little bit of extra digging and research to figure things out, and it is a really powerful way to learn.
00:13:38
Speaker
And that's it for this week. Depending on how you are consuming this, if you'd prefer a written version, a podcast version or a video version, the link to all of those options are in the description slash show notes, as well as links to everything else that I've mentioned along the way. Thank you so much for listening. And of course, until next time, don't forget to make your corner of the Internet just a little bit more awesome.