Senior developer reviews junior developer's code

Key Takeaways

in this video you are going to watch a senior developer review a junior developer's code here has coded a basketball scorecard based on the design in module 3 of the front and developer career path and now Gill a senior developer previously at treehouse then Shopify is going to review the code and show her how to take it from junior level code to something more efficient and Polished code reviews normally happen in the workplace but they are incredibly productive for new learner developers as well this is because as a new developer it's really hard to shake that feeling of like okay my code works but could it be better somehow did I go about it in the right way getting a code review from a more experienced developer is a great way to accelerate your learning and almost absorb their experience as they apply their perspective to your code that's why actually at scrimber we invite students like Mika here to implement these figma designs we call solo projects and submit them for a code review I'll be back at the very end of the video to explain how you could potentially get your code reviewed but first here's the actual code review with Gil and Mika let's get into it alright well hey Mika it's great to see you how you doing good how are you girl fantastic yeah so Mika I know you're one of our most prolific code reviewers you do an awesome job reviewing projects for the community so we had this awesome idea to bring you on and do a code review for the scrimba community and students and and folks out there just to give them an idea of what to expect and how the code review process goes here in the scribble Community which usually happens on Discord for both the boot camp and our Pro level students so you submitted a solo project over to me and before we get into the code review and get further into the process I just wanted to give you an opportunity to talk a little bit about the project and what the project was what you felt went well maybe some challenges you had and some some questions you might have or things you want me to focus on in the code review so I've been finish the front-end developer career path a few months ago and I recently started my first job as a developer so that's exciting but the career path has changed a little bit since I was doing a lot of solo projects have been added and so I wanted to complete the projects myself the one that I submitted most recently was the basketball scoreboard it's super new and um it was really fun so I think it went pretty smoothly a couple of things I struggled with were learning how to import that font the cursed timer font and the other thing was that my code didn't end up being very dry so I wanted to to kind of figure out how to make my Coke more dry thanks so much for giving me a little bit of insight into the project the basketball scoreboard project is fairly new and it introduces some unique challenges so I'm glad a lot of things went well and those were a lot of great prompts for me to kind of go through and have a look at while reviewing your code and just to make sure as we code reviewers always do with students just to make sure that we're not getting ahead of things or introducing too much in the review that they might not understand yet or maybe perhaps it's something you haven't come across yet in your coding Journey where are you in the front-end developer path just to make sure I keep my feedback more in line with that so I completed the career path at the end of March but there are some new modules so I actually have at least two or three modules that I haven't done that I'm kind of going back through I think it's module two and then I did your awesome code reviews module and the next level JavaScript module I think it's number seven now I I started that and I want to work back through it because it works a lot with Constructors and classes so it'll be good for me to brush up on that great fantastic yeah great to hear I see a lot of opportunities to give some feedback on how to make your code a little bit more optimized and succinct with things like event bubbling and delegations to help you write less functions for example so great yeah this is a lot of good information that I can take as I move into the code review Thanks so much Mika all right Mika well thanks so much for sending over your basketball scoreboard solo project for review I just opened it up and started using it and testing it and I must say that I really liked the Highlight sort of box Shadow you added around the high score well done there I can test that everything works as expected I click new game and everything resets to zero and for this review I'm not going to comment too much on the HTML or the CSS I see that you're using flexbox here quite effectively so we are going to focus on your JavaScript which from speaking with you earlier is what you want to focus on for this review so overall you mentioned that you felt like the code wasn't as dry as it could be and that perhaps you may have written too many functions for the same sort of functionality right like to update a homeschool or to update a guest score and yeah I would totally agree by looking at index.js I see a lot of opportunity to optimize and reduce your event listeners and really make your overall JavaScript more efficient with a technique called event delegation or event bubbling which we'll get to in just a bit now from speaking with you I know that you completed scrimba's front-end developer career path so that sort of ensures that I won't be getting too ahead of things when it comes to the feedback I'm giving you so that's great I think you might grasp some of these Concepts really well so let's dive in first up what I'm seeing here is that you are targeting all six buttons on the page for home and guests for example via the ID so here we have these parent section elements and within that a buttons div and each buttons div has the three buttons for home and guests and then over in JavaScript land you are adding an event listener to all six buttons so for example this one updates the home score by one two three and then again the guest score by one two three and so on and that works great it's super effective as we can see here but as I mentioned I do see an opportunity here to utilize a technique in JavaScript that's fairly common called event delegation or event bubbling so the idea is that instead of selecting all the buttons you might have on the page and attaching a click event listener on them that then updates the score and adds the Highlight class for example you target one element which is the parent of a button for example and then determine what should happen when a child of that element is clicked so in this case you'll minimize your JavaScript from having six event listeners on a button to maybe one depending on how you approach it so first what I might do is get rid of all these button variables and instead I'll Target the buttons common ancestor and put an event listener on that which in this case we can see that it's this main element with the class container so here I'll declare a variable named container and Target it with document dot query selector let's say and then I'm going to go ahead and select and delete all of these event listeners here because now we can put the event listener on our container and we want to listen for a click event I'll pass in the Callback function as well and the Callback function of an event listener accepts a parameter which is the event object you'll often see it as event or E and that event object gives us lots of Handy information that we can use so for example if i console.log e dot Target and click on one of the buttons for example we can see that it's returning as the target the actual button that was clicked so now we can use JavaScript to say okay well if the button inside the container that was clicked is the button that updates the score by one then update the score by one if it's guest updated by one two three and so on and there are many ways we might do that to specifically determine what button was clicked and then what might happen after that for example you can check the buttons class maybe it's ID it's value so what we'll do is use a custom HTML data attribute on the button an element and data attributes let you store additional information about the element for example the value to update the home score by or the guest score so the first thing I'll do since we're no longer targeting each of the buttons individually I suggest getting rid of the IDS now on the first home score button I'll include a data attribute which usually start with data Dash then a custom name so in this case it can be Dash home Dash points and since this button updates the score by one I'll set it to the value 1 and I'll update the other home buttons to use a data attribute and this value will be two then three and for the guess button we'll say data Dash guest Dash points this button will update the points by one then two and three all right so now these data attributes provide a lot of useful information we can use in our JavaScript and the way you read data attributes in JavaScript is using a property called data set so for example let's log the data attribute of a button that's clicked and to test it we'll call it on the target using e.target and remember in this case the target is whatever element triggered this event which is Click so we'll say e.target dot data set followed by Dot and then the name of the property and you need to write it in camel case because that's how JavaScript works but here homepoints is indeed referring to this attribute here so let's see what that returns I'll click one of the home buttons like one for example that returns to string one good two returns two and three returns three perfect so first what I can do here is assign the target to a variable because we're going to use it quite a bit here so I'll call it Target and say e dot Target and now using the target let's also store the value of a data attribute based on which button was clicked let's start with home for example so we'll say const home points and we'll read the data attribute of whatever home points button was clicked remember with the data set property and the name of the property which in this case it's home points and we'll do the same with guest I'll name this variable guest points and we'll read its data attribute with target.dataset DOT guestpoints all right so now we can perform some helpful checks using IF statements for example we can check if the Target that was clicked has a data attribute of Home points and it has a value then let's update the home score or if the button that was clicked has a data attribute of guest points then let's use that value to update the guest core first let's do if home points I'll first test the value of Home points by logging it to the console so let's see if I click on a guess button nothing happens but if I click a home button we see one and then if we click on the two button we see two three and so on good all right so before we move on I want to take a step back and sort of explain what's happening here with event delegation event delegation is a pattern that handles events quite efficiently so what we did here instead of adding an event listener to each and every button on the page for example we added an event listener to the parent container element and then we're listening for the click event on multiple elements right using e.target and it's all happening with one event handler versus six and the reason it's called event bubbling is because when an event happens on an element it sort of bubbles up all the way to the parent or ancestor so the event listener on the parent here sort of analyzes bubbled up events to find a match on a child element then and perform some action after that it sort of delegates it all right so let's keep going let's update the score so here in this if statement so what we want to do here for example is update the home score by a buttons Theta home points value so whatever button was clicked we'll read this attribute and the value and update this variable by that so we'll reference the home score variable here and then use the addition assignment operator with plus equal to increase the home score by the value of Home points and I'll log home score to the console to test what it returns and notice how the values are getting concatenated so we see zero one two three one instead of seeing a number value like one two or three and the reason that's happening is because currently the value of Home points is a string right each data home or data guest points attribute is set to a string so we need to convert a string to a number and a super handy tip which is one of my favorite JavaScript tips for doing that is using the unary plus operator and it looks like this a plus sign immediately in front of the variable holding a string or the string itself so now if we test it we can see one then three then six nine and so on good and this unary plus operator works very similar to like the purse int method or even the number object for example it all works in a similar way oftentimes the number object or a parse int method for example is more expressive than just having a plus sign here which can be confusing but that's what I like to use so I'm going to stick with that here so now the only thing that's left to do is to update the home display right which is the points on the page so to do that I'll say home display dot text content and what do we want to set the content to well the latest home score which is stored in the home score variable so now let's see clicking one should hopefully update it by one and it does clicking two sets it to three hopefully clicking three updates it to six and it does and now we can apply the same sort of logic to the guest points so I'll copy this if statement and update it to say if guest points let's update the guest score by the value of guest points and here we'll say guest display dot text content equals guest score let's try that out I'll click one good this should say 3 6 and so on Perfect all right now what about the Highlight functionality well if you remember in your code you were calling this highlight function in every event listener but now you can simply call it once here and this event listener and that should hopefully take care of it let's try it out all right so we have nine points for home let's set guest to a score higher than nine and good yeah it switches over perfect so as you can see another advantage of event bubbling all right so let's move on to the Highlight function which is doing exactly what it's supposed to do but I'm thinking that there might be a way to condense it instead of having if else if an else statement we can probably do it with two lines of code instead of nine or ten for example so I'm seeing a great use of the class list property here to add and remove the class highlighter for example so what I'll do is copy a set here and delete everything else instead of adding and removing a class there's a handy method in JavaScript called toggle so in this case it's going to toggle classes from the class list like add and remove them from home display or guest display depending on some condition so this toggle method accepts a second argument which is sort of a conditional that determines when this class for example gets applied to the class list and it looks like this so here we want to check if home score is greater than guest score so we can do just that home score greater than guest score and then for guest display we might do the reverse for example home score less than guest score so again when this is true the class highlighter will be applied to Home displays class list otherwise it gets removed and in this case if home score is less than guest core so if guest score is higher then it's going to apply the highlighter class to the guest displays class otherwise remove it and that should be it so let's check it out all right so I'll click three good now let's see I'll add three points for guest and nine it's a tie score so we're not seeing a highlighter class but good it removed it from home and if I click through again it applies it to guest fantastic so it's doing the trick all with two lines of code all right so for the reset or new game functionality I'm not seeing a whole lot here that I would change I might for example move the variable to the top and leaving it above the event listener is fine too that's just my preference what I'm seeing here is that you are resetting the home display in guest displays text content to zero but that information is already stored here right and the home score and guest score variables so what I would do to ensure that everything is working as expected and resetting correctly I'll set it to the variables home score and guest core and let's try it out home score is the leader so it gets the highlighter class then guest I'm done playing I'll click new game and good everything resets as expected awesome all right Mika so that is about it for your code review again wonderful work hopefully you learned a few new things and that the suggestions about making your JavaScript more optimized and efficient is going to help you down the road in your developer Journey so I'm looking forward to hearing back from you and what you think about the code review and we'll be in touch soon thanks thank you so much for watching the code review with Gil and Mika I think we owe Mika a thanks for putting herself out there so please show some supports with a thumbs up here on the video as I mentioned in the introduction I want to explain a little bit about how you could potentially get your code reviewed as well as you'd likely know at scrimber we have something called the front hand developer career path it has a bunch of modules which take you from not knowing any code to being able to code it hopefully a horrible level and throughout this career path we have a bunch of these solo projects like the basketball scoreboard we give you a figma file and the UI design that's nicely polished and we sort of expect that if you've watched the module and you understood it properly you should be able to bring this project to life and because it's your code you can put it on your portfolio it's a great way to like test your understanding before moving on to the next module once you complete a solo project you can head to the scrimber Discord community and post it in the code reviews Channel where a member of the community might review it or if you are a book become subscriber you'll get access to a dedicated Channel where you are guaranteed a code review video it won't be a YouTube video like this it will be a scrim where the dedicated code reviewer sort of annotates and talks about your code and shows you all the ways in which it can be made more efficient more robust or maybe just more terse and nice to read it's a funny story because Mika actually was recently hired as a developer and she is actually now on the code reviewer team so if you submit one of your solo projects for code review it might be Miko Who records a scrim explaining how you can improve it again thank you so much for watching don't forget to give this video a like subscribe if you want to see more like this to close things off I want to hear from Mika about her experience with code reviews I really enjoy getting to do code reviews I love coding and I love talking about coding so it's a perfect fit for me it's a great skill to have to be able to articulate how you solve problems and why you might write code a certain way I've always thought that you can reinforce your own knowledge and learning whenever you explain it to somebody else so it's great for that but as well just looking at other people's code you can learn so much I might have written code for a project one way but I see how somebody else did it differently and it works just as well or better and so it's really cool it's like I can add that tool to my kit for future projects so that's awesome I definitely think you should reach out and have somebody review your code you'll get praise which everyone loves but you also might have somebody help you get past something that you're blocked on or just learn new approaches for how to approach certain coding challenges I also think you should offer to review somebody else's code because you will reinforce your own knowledge by explaining it to somebody else and you'll get better and better at being able to talk about how you solve problems