Junior Vs Senior Code - How To Write Better Code - Part 2

🚨 IMPORTANT:
1 Year Free Hosting: www.atlantic.net/webdevsimpli...
Use code KYLE for an additional $50
Writing code is easy. Writing clean code, though, is much harder. In this video I take a look at two different code examples from a beginner, intermediate, and advanced level. The goal of this is to show you how a senior developer will think while programming and how they will structure their code to be as clean and well-written as possible.
📚 Materials/References:
Part One: • Junior Vs Senior Code ...
Async/Await Video: • JavaScript Async Await
Single Responsibility Video: • Single Responsibility ...
GitHub Code: github.com/WebDevSimplified/N...
🧠 Concepts Covered:
- How senior developers think
- How to manage async code
- The differences between senior and junior developers
- What to think about when programming
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#NoobVsPro #WDS #CleanCode

[@WebDevSimplified]

Here is part one in case you missed it. kzbin.info/www/bejne/nWPRfn6wndCprtk

[@yt-sh]

was waiting for this, I used part 1 lessons well, kindly make more video like this!

[@kevmac9967]

Thanking you

[@agentstona]

Mate there is no one correct way to write code .. the fact that you think that there is means you are a novice noob your self ...... Also there is no good way or not so goodway , It's all about OPTIMIZATION MATE , Debugging and Transpiliing your code . There is a difference , you wrote the code in this crappy way to just prove a point , but at the end of the day NO ONE and I MEAN noone who codes day in day out writes all the code that way ....CHRIST

[@SeamusMcMichael]

Are you doing any more of these?

[@bedrockcoder5169]

I love these noob vs pro code videos, they're really good, thanks!

[@abdellatiflabreche9518]

Please make noob vs pro code a weekly show, your demos are AWESOME

[@dominicnzl]

how convenient, I just finished watching part 1 when this showed up. Thanks for your videos mister

[@sofianebm7492]

he was wating for you

[@deepakkaithwas8281]

Great information again, loving this series, this is giving me a lot of new ideas. I have been reading book on “Clean code” but the way you demonstrated it, I must say you are genius.

[@aerialaspects]

Thank you Kyle. One things i like about your video is that you are very specific about things. I love it. Keep making awesome video.

[@ayushpaharia5452]

This is my favourite web dev channel. I don't usually comment but I want to show much I appreciate you content. Thank you.

[@bigyang5847]

I've been trying to understand the SOLID principles to make my code better and more readable, and this video really helped with the SRP. Thank you for making these videos!

[@scriptydude]

Great content! This could help enhance developers skills. I'd like to see more stuff like that.

[@erniejeashvillahermosa5699]

I really like the validation part. Thank you!

[@oskar42314]

These are really useful. Thanks. Please make more examples of how to improve the quality of one's code.

[@the_bitcoin_guy]

these kind of videos are so helpful ! Thank you very much.

[@Kawasakifanboy]

This is the best topic you cover in your videos bro. Im a FS javascript dev who makes sure to write the "advanced" but doesn't bother to make it "pro". Nonetheless, It's super helpful and satisfying to watch these videos. Keep up the good work :)

[@Shmeeps_phd]

I finished my second week in a coding bootcamp today, currently on JS branching. the fat-function section hit realllllllllllly close to home looking at my project submission for the week. haha

[@hiteshgupta7591]

Hey Kyle, thanks for your effort please make this kind of video "How To Write Better Code", because this helped me so much. Thanks again

[@christophercheok4814]

Keep up the good work mate :D ! you help different it out the great point on noob vs pro, thanks

[@kishoreandra]

Thanks for this part 2 Kyle .....Keep Going Bloke

[@adamthedev]

Another great video, man! Thanks

[@Aaronmoreno]

this series is so so so good!

[@SethWilson]

Great content! This is really helpful. One suggestion I’d make is that the user validation even in the pro version still requires understanding the implementation details ftrue/false, error array, etc.). To make it cleaner and less dependent on implementation, I would have the user validation throw an error, and then wrap it in a try/catch block. Either that, or I’d rename the function to “isValidUser” so it’s clearer that it’s returning a Boolean.

[@ShawnRitch]

It works that way in PHP also using PDO.

[@zm690]

This is so helpful , when the companies give me interview assignments, later they help me to review the code, they always point out my unclean codes. I wish I could knew this vedio earlier ...

[@SusonS]

Great video, used this to prove a point to a fellow developer! :D

[@yonatan_song]

Love your video series about this topic. Until now i have never maintain my own code because its hard to read 😂 Hope to see your next video soon

[@capriccz]

Keep these kinds of videos coming!

[@RyanKHawkins]

Awesome. I would love to see more examples.

[@perkin524]

Intensely interesting. I code mainly in PHP but the principles seem equally applicable to most/all programming languages so I learnt a lot. I am now a subscriber. But how great it would be Kyle if you could do similar videos for PHP, which after all is still very much the main language of the web.

[@rajendra222php]

we need more videos like this.

[@shutterradio]

Thank you for this very useful video!

[@kauanmocelin]

Good example of use SRP on fat function refactoring, go ahead and publish more videos about this subject. Very good!

[@hagergamal2856]

Amazing video ♥️ U need to make more of these ♥️♥️

[@huyphan377]

i hope you have many part with this topic

[@al-aminfirdows4169]

Waiting for part 3!

[@BelajarPemrogramanPemula]

notif, listening .. start to meet this channel when I look for face recognition

[@hassaneoutouaya]

THANK YOU SO MUCH!

[@abhayganti8662]

THis is soooo good Web deb Simplified

[@truongpm2144]

Thanks you so much, great videos

[@no-one6790]

Though I code python, ti's helps a lot, because the logic is basically the same. Thank you for this video!

[@leandrolobo]

Really usefull info, I'm a noob, and this helpme a lot

[@adrianfletcher8963]

Another reason to do a more intermediate to master video 👍

[@TechDecryptor]

need more videos like this

[@markadeniran301]

I do enjoy this video series and wish to see more of this kind of stuff. Though I have some comments, I would only speak up on the unnecessary else I see both on this and the previous video. Most time inside a function an else does not always need to follow an if statement. Somehow similar to like guard clauses but not exactly the same a return inside the if statement should be satisfactory enough. It helps reduce nesting in my opinion.

[@iancuvlad7368]

Tried to follow along and do it myself: In the first example i have replaced the nesting with a recursive function. The program works with 14 lines of code in file total (without blank lines).

[@AJax2012]

I think the keyword missed in the pro version in the async example, even though you explained it very well, is "Separation of Concerns." Each file, function, and if you're an OOP developer, class, has a very limited, preferably single, responsibility and dependency, which makes your code flexible. Your code for the async example is very clean/good btw :) I have a single major issue with the save or update user implementation. You should *never* be able to save something to a database without validating it. This means you should not be able to call the saveUser function without having validation checks inside the save function. I'm not saying that validate user is done incorrectly, but no senior server-side dev I know would create an API endpoint that saves data to the database that doesn't have a call to a validation method. Yes, I know the point is that you don't expect a "save" function to return errors, but think about this.. if I were a hacker and I find your function name and parameters in your JS in your client code (which is generally super simple to do using chrome debugging tools), I will just open up Postman and put in whatever I want. You have no checks in place to stop me, so the data will just get entered into your database without validation. If you have retrieve user information without validation that I should be able to access it... well, you could probably guess how much damage I could cause there. Consider this instead: Return an object "result" from your saveUser function. Many languages have a very easy way to do this, including JS (I'm a C# developer, which calls it an IActionResult). Call validate user from your save user function. then save your user if valid. If you don't like how it's named, consider renaming it to "registerUser", because I would fully expect error results if I attempt to register a user incorrectly. This is fairly common practice. So much so, that the library MediatR in C# has the process of validating upon saving/updating an object built into their pipeline without even having to write "validate object" in the storage method; you create a class that implements a generic Interface to save the data, then create a class that extends another generic interface to validate the data. The pipeline validates the data, then saves the data without calling it based on (I believe) reflection.

[@akshay__sood]

Can you tell me how much time does it take for you to write pro code when you start coding something? I am asking this because I was cleaning up my code today and it took me decent amount of time as I ran into errors too.

[@alekdemj]

Kyle, this is very good video! My Kudo to your karma :)

[@vojtechsebo4119]

Thx for video 🙏🏼 Please do something similar where you will work with DOM 😉

[@cg8939]

More of this please

[@clydegrey5060]

Great video. Quick question: in the advanced version of the save & validate example, you have a return statement in the errors.length > 0 if statement. I presume the return statement is what is preventing the saveUser() from executing, which makes sense, if you have errors you don't want to save the user. The question I have is how is the return statement preventing this as you are not inside a function block?

[@vashupandey2212]

you are greate sir!!!

[@pestrinmarco]

thank you... good video

[@TheKseon]

Thanks for great video. I don't think about that nested code like noob version in first example can by clean up using Promises. I try to remember about this concept. But in last example in pro version, I think than code could be improved using open-closed principles in validation for more reusable function than validationMessage.

[@abdellatiflabreche9518]

The bad thing about the pro code is that you open a new interface & close it on every auestion, i suggest using an array of question than return an array of answers in order, to get responses variables names use array destruction.

[@onefilm2709]

Good lessons, i will like to see "How To Write Better Code" for PHP

[@franco-cespi]

Another grate video!

[@pahvalrehljkov]

ok, i went from jun vs dev 1 video, to second one, but i needed async video, for that i needed promise video, for that i needed arrow function video... i learned today how to code javascript in half hour... tnx mate!

[@WebDevSimplified]

That is awesome! Congratulations.

[@carlosjuarez8152]

Hey... Good video! The pro version looks cool.. noob question here.. In the printErrors () function, u end up with a O(n2) time complexity... I know it is not a big deal here... But thinking on a larger project... Isn't that a bad thing?

[@modo4211]

I love these videos

[@soulehshaikh8799]

You can use top level await in Node. Update your node version to latest. Use command "node --harmony-top-level-await filename.js". No need to put await statements inside async functions.

[@Shiguenori]

Thx a lot!

[@-Jason-L]

I watched this series, thinking I was going to be able pick it totally apart. But I was wrong :) Good job. I'm a director of engineering - want a job? :) 99% of experienced devs write your "advanced" examples from series 1, and stop there. Without guard clauses. I almost always need to guide them to refactor to the "pro" level code. even devs with 20 years experience (who typically refuse to change).

[@awekeningbro1207]

19:46, ok i am a little bit confused here, the if block of `validateRequiredMessage` and `validateLengthMessage` will only run when their conditions returns truthy value, so if the `required` is set to false or if the `length` is set to 0, the validations function won't run anyway...what's that about am i missing something here?

[@markgyverguardiana8928]

10:54 , it relates to SOLID principles- S as in Single Responsibility as you said, its doing 3 different things and has unintended side effects

[@zwanzikahatzel9296]

those are not side effects. a side effect is when you modify the state of a mutable data structure. side effect does not mean unintented, or unwanted, imperative algorithms do in fact hinge on them to work.

[@hatebreeder09]

It would have been really cool if in the noob version you say you are 25, and in the advanced version 26 and the pro version 28 or something because that's how it really happens. Uber cool video, learnt a lot. Thanks.

[@xxxstebyxxx]

Could you make an episode how to write better code in React? :) I'm practicing a lot and I've made bunch of projects, but I'm still confused what I could to improve to make my code the most readable I can to do.

[@MarshallSC1]

GOLD! This is pure GOLD! Moooore... Moooore, please.

[@FunIsGoingOn]

Few seconds in: already gave it a like for the Pink Floyd Shirt (and the other content).

[@yoanbello6891]

what of your videos you recomend for learn html, css and javascript because you dont have any complete crash course on javascript, html and css

[@Al_Gonzo]

Hey Kyle, will you make a game for your next course?

[@atinagg]

looking great, can we have skincare tutorial junior vs senior please 👉👈🥺

[@swapnilkuwar7040]

Please create video on functional programming

[@thingsiplay]

To make the code even more readable, I would chose naming schemes like "is_valid_username()". This makes it more natural to read and forces the code to be boolean where the answer is yes or no anyway without side effects. And the name of the function reflects that. "validate_user()" to me implies the possibility that something else would be done, including printing error messages. And is something else than the username validated too? If so, then the function name is okay. But if it returns just yes or no, then the "is_" naming structure is more appropiate to me. Btw I am between noob and advanced I believe. Maybe.

[@grzegorzzimnoch4463]

great video but same as in part 1 i am confused why dont you use arrow syntax for functions ? asking as a begginer

[@DuraanAli]

You guys should really read "Clean Code" book, it covers this and a lot more ways to have professional clean code. Thanks Kyle.

[@agentstona]

You should really stop reading a book and actually READ THE RFC Guidelines and API documentation of the CODE in itstelf which has in detail on how to actually properly use the code and all of it is available for FREE . You should also make sure you use a Debugger that its self will show you if you are coding properly or not . You should also use a Transpiler to compile and optimize your code . With that said STOP reading books by idiots who call themselves experts and teach you only one way to CODE .....When in fact the original developers of the coding language have given you a API reference that clearly explains how to use the code and clearly shows that it can be used in NUMEROUS ways and that their is no one good way over the other ... ITS ALL ABOUT OPTIMIZATION .....ps stop reading trashy books and start reading the API !!!!!!!

[@DuraanAli]

@@agentstona Your whole comment shows that you didn't read the book, so It's hard to take your advice. How about doing both, reading proven books and reading docs.

[@agentstona]

@@DuraanAli the only book any one has to read is the book that is created by the developers of the code and are to be followed as guidelines hence the coding documentation api .docs by the original authors .... anything else thats written by anyone else that did not invent , write or contribute to the code creation is pure opinion aka good as FUD ... because an opinion is an opinion and not a real world guideline . thats the bottom line ..... if the guy didnt create the code he has no right to go around preaching on whats right or wrong about the coding language hes word is simple as fiction and not a real world guidline..

[@alexlegard6245]

Could you make a video like this, but for semantic HTML and CSS?

[@Allsjr]

Is there a repo that holds this code? Would like to take a closer look.

[@sniperhawk6969]

So in the pro version of async (6:53) could we jus use an async iife instead of defining a function and calling it?

[@shivetay]

do you plan maybe explore some advance useReff usage?

[@nmanikiran]

Do we need to create *readlineInterface* multiple times (one for each askQuestion)?

[@kamiladamczyk9369]

If i understand it good, createInterface gives or "opens" the possibility to print to console and read input, but it needs to be closed eventually. In the noob version, it was opened at the beginning of the code and being closed as the last thing in the function. In advanced part every askQuestion call uses the close function, so every call has to open it before it starts doing its job. That's how I see it

[@enricoferaldokalengkongang6905]

I know a lot of basic or fundamentals but i didn't know how to implement in making a real world project

[@lucianosantillan164]

Hi bro! I have a question.I think your method called AskQuestion is doing two thinks: asking, waiting for the response, and returning it.

[@bubbagee4853]

Nice

[@ridl27]

Kyle, could you share the code ? it would be nice to look at it from time to time :D

[@TheSawAndTheCarnage]

Thanks

[@WebDevSimplified]

You are very welcome!

[@bartkl]

First of all: nice job! I do have a one remark though. Near the end of the video, in the validateMessages() function, you use reduce() in a way that (although it works) I would think is somewhat inappropriate. You are using side-effects (object mutation, to update the errors object) in the reducer function to ultimately build the errors object, which suggests to me that iteration is more suitable. I would choose reduce() only if you intend to use it purely, i.e. to declare it such that it 'builds out' the desired result recursively, without mutation. When you mutate the result object the way you did, iteration seems more straight-forward to me. Feel free to disagree with me of course or point out to me where I might miss some advantage of your using reduce over a loop :).

[@DieterPrivate]

Using reduce is point free, and thus more fp. Though using forEach like you suggest is eventually the same thing, and I see it preferred by peeps that like imperative code. Also, because immutability is often the best way, that doesn't mean mutation is bad. In this case it's actually good and even preferred for performance reasons. If the one that mutates the object created it, then you will not have the cons off mutation.

[@bartkl]

@@DieterPrivate I think we mainly agree. But the core point I was making is that in pure FP you can't even use reduce the way Kyle did here since he uses mutation. So it's a bit more than a difference in taste I'd say. Still a minor point though :).

[@DieterPrivate]

@@bartkl following everything by the book is not always good. In this case It would hurt performance while none of the reasons this rule exist are present at this point in code. So in essence, FP doesn't state this.

[@rafaelpernil]

I agree with you. When I see reduce() used in these kind of situations, makes the code more complex than needed.

[@jollyjoker6340]

@barktl Disagree since using an object or array as the initialValue is very common in javascript reduce(). _But_ since it returns an object for each input it should logically be map() instead. And with validations as an array, it becomes validations.map({property, required, length} => [required && validateRequiredMessage(object[property]), ... .flat().filter(Boolean)

[@davidkoleckar4337]

Nice vid :)

[@drnovikov]

Why is logging placed before calling createUser? What if there will be errors?

[@LavotiJoelVinayKumar]

Hey dude, I want to raise 2 issues. 1. Use of try-catch block when using async-await is missing 2. You should also reject the promise upon edge cases like undefined/null/wrong answers

[@andyd5235]

The thing is now you need to: 1. code like a pro, 2. solve 2 medium-level leetcode questions in 45 min 3. explain what you think and your solutions as clear as Kyle's video. then you have 80% chance to go to the onsite round

[@srinathsathyanath7435]

Hey, do you use a mechanical keyboard? Sounds nice!

[@itsaaron6423]

Tutorial on scalable nodejs and threading would be nice .....

[@vadymstebakov7023]

LIKE) Kyle, how have you changed PS1 (hide home folder, username of PC) from VSCode's terminal?

[@chrsian]

Just google how to configure PS1, when you see '.bashrc' or 'bash_profile', you're on the right track.

[@engespress]

I prefer callbacks because they require a lesser degree of abstraction to write, and if they work, who cares if it looks messy? They make more intuitive sense to compose. I really don't like Promises as I don't understand it, and async and await is the same, but easier to write. I just copy async and await scripts and use it without understanding it, but if I am writing code de novo that involves multiple functions in a row that depend on each other, and I don't have any templates to work off, I use callbacks. The flow makes more sense to me, and it's straightforward feeding the result of one function as a parameter to another.

[@user-ym8sp2yi1k]

why aren't you using try/catch for the fat problem? just wondering

[@rommelphilipafurong]

Hi, may I ask for the link of part of this coz I missed it.. thanks =)

[@WebDevSimplified]

Hey. Sorry about that. Here is the link kzbin.info/www/bejne/nWPRfn6wndCprtk

[@apmcd47]

At approx 6:14 you say that the interface has to be passed to the function askQuestion(). This is not true as the readlineInterface is defined external to both askQuestion() and main(). To make that statement true you could place the definition of readlineInterface in main(), which actually makes sense to do so as that is where you have to close it.

[@vincesanchez7790]

React js pleaseeee reusable components and other for better practices in react

[@rajabhishek4973]

Awosem please part 3

[@erzengaming]

You forgot Hacker var name = prompt("Whats your name"); var job = prompt("Whats your name"); var age = prompt("Whats your name"); console.log("Hello " + name + "You are " + age + "year old" + job); lol this is 100% better xd

[@reymarkandog1441]

You don't use semicolumn anymore?

[@mming_my]

Part 3 - typescript