Two important dev skills that don’t get enough attention

Key Takeaways

hello my front 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 mine 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 and also share what I've been up to as well 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 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 now 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 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 cuz it's not terribly exciting 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 for 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 and of course this isn't only when you're new to a job this happens 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 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 create 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 so I can dive in and see how they've done things as well and this has several benefits to it as first it helps me read other people's code and learn how to make sense of it but then also by using their own approaches and maybe modifying them slightly for the changes I might have made I learn a lot along the way too i' 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 of course that trial and error is a good thing and a nice way to learn and of course speaking of independent thinking the other hardto 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 before I even start writing any CSS and actually one of my favorite podcasts is the shop talk show and my favorite episodes from that were from a few years ago where they had a series called thinking like a front and 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 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 hyperplex 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 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 now there's value in that as well of course I make that type of video so I hope there is 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 byline breakdown because hyperplex shares the finished code as well and I'm bringing hyperplex up specifically and 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 where 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 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 learn a lot from if you take the time to do it uh type of video instead I hope that makes sense but yeah I really wanted to highlight that even though we're to 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 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 at least heard his thought process behind all of the code first 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 you 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 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 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 uh in my own video for example I got to the basics of the effect and had it work 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 uh 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 CU 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 cuz it made that effect go from like oh that's kind of cool to like really nice and Polished instead now I I didn't want to record this just to come across as like a hyperplex 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 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 these are you know the really common typ types of things that you see for portfolios where you might be showing all of your portfolio projects and everything but then there's like buttons along the top where you can filter by the tech you use so like one this one uses you know you click the react button and you're only showing projects that using react or ones that are only using view or Astro or whatever it is I think you probably know what I'm talking about sorry if it wasn't the best explanation uh and in my video instead of doing a portfolio I did a conference list that uh you can filter by front end back end and full stat conferences instead of having the entire list of all of them and 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 and I you know if you can you should totally attend and I'd love to meet you there so 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 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 just works so wonderfully it was really really cool and so if you haven't looked into view transitions their supports not perfect yet or Perfect by by any means I should say cuz it's only in Chrome at the moment but yeah they're a really nice thing 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 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 CSS 4 is now happening the tldr of it is that yes it does seem to be coming and with it CSS 5 and CSS 6 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 CSS 3 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 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 not anywhere close to the level of excitement that was built up when CSS 3 landed we've got so many new things and better things also you know CSS 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 but the other part of this though is also to help group things a little bit cuz 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's General support and all of that 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 six Etc uh do check out that video and of course the rest of his channel which again is called CSS weekly cuz honestly he's been killing it over there and you should definitely check it out and subscribe 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 CSS 5 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 grayish letdown even though the two ends are really nice and vibrant and The Simple Solution sometimes is just to provide your own middle color manually pick a middle color that looks a little bit better but what if 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 can be really ugly and is one example that Keith shows in his article is if you go from a okay lab I think it is or an OK lch I forget which of 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's sort of turns purple before it gets to Black and it's just kind of not what you'd expect it to be 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 and without any nice Segways that I can think of instead we'll Circle back to the IDE aidea 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 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 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 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 slsh 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