Do THIS to Write Clean Code! | JavaScript Pro Tips (2021)

Поделиться
HTML-код
  • Опубликовано: 11 сен 2024

Комментарии • 100

  • @codeSTACKr
    @codeSTACKr  3 года назад +2

    🦸 Become A VS Code SuperHero Today: vsCodeHero.com
    🧑🏾‍🤝‍🧑🏽 Join my Discord developer community: discord.gg/A9CnsVzzkZ

  • @nikhilsourav2025
    @nikhilsourav2025 3 года назад +17

    I really do enjoy this writing clean code series.. They help a lot to correct my bad habits from time to time.

  • @CodingNuggets
    @CodingNuggets 3 года назад +6

    Super needed video. Not enough emphasis on this topic. I have really started paying attention to my code quality. Not always easy when your under pressure, but I always do my best to keep my code as clean as possible. Appreciate you and your content. See you soon!

  • @kettenbach
    @kettenbach 3 года назад +3

    Props for mentioning James Q Quicks Quokka video. Also a good video. 🙌

  • @codeorigin6428
    @codeorigin6428 9 месяцев назад +1

    The glitch effect is awesome.

  • @adiemar3974
    @adiemar3974 2 года назад +1

    this is why i love coding.

  • @karlstenator
    @karlstenator 2 года назад +1

    So much awesome in one video!!! Thanks for sharing.

  • @elgrancriticon8586
    @elgrancriticon8586 2 года назад +3

    Thanks a lot for all these tips, the majority of them are very useful to me :)

  • @shamsul4432
    @shamsul4432 2 года назад

    Simplicity is the ultimate sophistication. Thanks man.

  • @tinpham6413
    @tinpham6413 3 года назад +2

    Great video, i have learned so much from this video

  • @dapolcio3405
    @dapolcio3405 2 года назад +2

    let [a,b,c] = [1,2,3] is much less readable than declaring them one below another. If you have more variables it is harder to tell which value belongs to which variable.

  • @rupamkairi
    @rupamkairi 3 года назад +1

    Now I can flex how cool Javascript is! Kidding tho this video has surely very interesting stuff that really does help while writing large application.

  • @christopherjschultz
    @christopherjschultz 2 года назад +1

    Just found your channel, this video is great. Thanks for sharing. These are some awesome examples.

  • @morphine496
    @morphine496 Год назад +1

    Great refresher

  • @AlphaScorpii86
    @AlphaScorpii86 3 года назад +21

    In the “Don’t Use Flags” example, you lose the automated process of creating the file based on its type. How would replicate that without using a switch statement?

    • @codeSTACKr
      @codeSTACKr  3 года назад +13

      You are correct. The point is that a function should only do one thing. The function is to save a file. So we separate those functions to save each type of file. But you are also correct that we loose the ability to then automate the type save. I probably should have added another function that decides which type to save. So instead of a single function that does too much, we end up with 4 functions that are clean and can then be reused if needed.

    • @stevensavoie856
      @stevensavoie856 2 года назад

      This functionality is not best solved this way. The function could remain dyadic, having 2 args, and then the type would be inserted into the path. Then you just need one option that handles all types including future types not yet required.
      Where ever name and type came from, it could be a class instance which owns the properties "name" and "type". Then the function could be a method of that class which would have access to those props without the args.

    • @IsayanBros
      @IsayanBros 2 года назад

      You can create those clean and reusable functions the OP suggested and then create an object which will be a mapping of image type to the function that saves it. You won’t even need a function that saves based on type

  • @splitpierre
    @splitpierre 2 года назад +1

    SOLID tips, Very much appreciated. Thanks!

  • @HA-fq5xc
    @HA-fq5xc 2 года назад +1

    So useful tips
    Thanks from Saudi Arabia

  • @hdm_vision
    @hdm_vision 2 года назад +1

    Super thankyou, this is real PRO TIPS

  • @Pokemonman44441
    @Pokemonman44441 2 года назад +1

    This code theme for vscode is awesome! bomb tips!

  • @Frazful
    @Frazful 3 года назад +1

    Straight to the point, valuable tips. Love it

  • @oorhood
    @oorhood 3 года назад +2

    Really quick, thanks for your videos. They help me out

  • @marimuthur9456
    @marimuthur9456 Год назад

    Awesome tricks thank you so much for this knowledge sharing to us keep posting more videos like this 🙂👌🏼👌🏼👌🏼👌🏼

  • @lokeshvenkatesan2693
    @lokeshvenkatesan2693 3 года назад +4

    Nice Video @jesse!! What editing Video softwares used here! Just curious... !

  • @viswanathank2551
    @viswanathank2551 2 года назад

    Small things that mean a lot ! Great work buddy 👏

  • @waleedalkathiri8564
    @waleedalkathiri8564 3 года назад +1

    How good you are 😁👍🏽👍🏽, i also interested in Vscode how it looks.

  • @saurabhdaswant7833
    @saurabhdaswant7833 2 года назад

    Thank you so much i learned a lot of new things and applied it to my work!!!

  • @kettenbach
    @kettenbach 3 года назад +2

    Cool video. Thank you for sharing. What makes your cursor pulse like that? That's pretty cool. I would like to add that to my workflow. 🙌😀

    • @codeSTACKr
      @codeSTACKr  3 года назад +1

      It's just cursor settings in VS Code.

  • @Pluvo2for1
    @Pluvo2for1 2 года назад

    Nice to see that many of the practices at my work are reflected here. Of course typescript helps a lot too.

  • @ritika2563
    @ritika2563 3 года назад +2

    So grateful! 🙏THANK YOU, SIR! 🙂

  • @beinyourguard
    @beinyourguard 3 года назад +2

    Really good. It's always nice to know how to write proper and cleaner code

  • @Alex-bc3xe
    @Alex-bc3xe 2 года назад +1

    Simple and very effective thanks a lot :)

  • @aashiqahmed5273
    @aashiqahmed5273 3 года назад +1

    Awesome man

  • @GoWokeGoBroke1
    @GoWokeGoBroke1 3 года назад

    I wanted to give you a thumbs up at 5 seconds just for the video quality 😁
    EDIT: I had to wait to the end of the video to finally like it

  • @matte.309
    @matte.309 3 года назад

    I got really stuck on his pronunciation of quokka. 😆 That said, the video is seriously good stuff.

  • @IkraamDev
    @IkraamDev 3 года назад

    I remember last year I couldn’t wrap my head around many things in this video like function parameters, destructuring, and many other things.

  • @mountakhabi
    @mountakhabi 3 года назад +1

    Please do part 2 👌🏼

  • @cineverseproductions
    @cineverseproductions 3 года назад +1

    Thanks for this video, mate. 🙏 😊

  • @kayxue2560
    @kayxue2560 3 года назад

    Default value part also can change code to “let colorScheme=getColorScheme() ?? ‘Dark’ ”

  • @fabriziofilograna6498
    @fabriziofilograna6498 3 года назад +2

    great video thank you!

  • @davidMerHer_
    @davidMerHer_ 2 года назад +1

    ¡Gracias!

  • @waleedahmad2012
    @waleedahmad2012 3 года назад +1

    Awesome

  • @prudhvichinnam1488
    @prudhvichinnam1488 3 года назад +3

    Do async projects and CSS tricks please codestack

  • @trandinhthang5778
    @trandinhthang5778 2 года назад +1

    You using theme vscode ? It is beautiful. I want custom theme same you

    • @codeSTACKr
      @codeSTACKr  2 года назад

      Thanks! It's my codeSTACKr vs code theme. Link in description :)

  • @migueldomingos4570
    @migueldomingos4570 3 года назад +1

    All great examples, except for the last one that just reduces readability for typing less characters

  • @Lilliebeth001
    @Lilliebeth001 3 года назад +1

    Thanks, very insightful

  • @mouhamethfadalmarabyaidara4935
    @mouhamethfadalmarabyaidara4935 3 года назад +1

    Insightful video, thanks a lot sir.
    Please can you share your VsCode theme ?

    • @codeSTACKr
      @codeSTACKr  3 года назад +1

      It's my codeSTACKr theme. The link is in the description.

  • @hamzazahir956
    @hamzazahir956 Год назад +1

    thank you so much

  • @otonomimusic
    @otonomimusic 2 года назад

    Were you and WebDevSimplified made by the same voice machine?

  • @fabaladibbasey7453
    @fabaladibbasey7453 3 года назад +1

    Great one

  • @NanobyteOnline
    @NanobyteOnline 3 года назад +1

    22:03 would here the nullish coalescing operator (??) not be better?

    • @codeSTACKr
      @codeSTACKr  3 года назад +2

      In this example, no. You would use ?? when you may have a falsey value like 0 that should be used instead of the default value. In this case, we are only worried about null or undefined. But it's good that you even know about ?? 😃

  • @raymundpaulfontanilla4570
    @raymundpaulfontanilla4570 3 года назад

    Good day,
    Thanks for the tips on how we make clean our codes after I finished that video I re write my To-Do List app next week to make it clean and clearly to some other reader codes. it's a little bit hard to catch up like deconsturcting, because I'm new in Web development. I'm done with HTML CSS then now I'm in JS. it's just a month ago when i started to learn a web development. Because I can't imagine that programming is needed when you get the job in IT Security with Secure Coding but not to use some tools like we download in the internet. I'm Cyber Security Analyst / Web Penetration Tester for 2 years but I don't know how to program. because I'm a tool user. and I can happy in 50%. Why 50%? because I secure or penetrate the system using Kali Linux and other some tools. like i can forensics some files etc.. You know it's hard to jump in advanced but now I realized its hard to find a job in IT Security or IT Industry that you didn't know how to program. because that programming is the 1st bullet if we want to become an IT.
    sorry for telling my long story that jump in advanced to basic because in tools we don't use logic a little bit only its kind a pattern only like how you use the tool. so that's why I jump into my favorite side which is mastering cmd/terminal and Kali Linux.
    so my question is.. how you get a HTML DOM in JS file.
    is it const shopList=document.getElementByID("div1");
    or
    this
    const shopList=document.getElementByID(".div1"); => with dot sign? is same with CSS.
    do we really do that in same with CSS? or not? because its a JS file.
    don't make me wrong about the error. I need advice from you on how you write your code clean to clearly understand some code readers while we read your codes.
    lastly. how you write your for loop functions in JS?
    did you really put the semicolon after the loop begins like beside the curly brackets?
    Thank you in advance sir @Jesse

  • @viniciusm.m.7822
    @viniciusm.m.7822 3 года назад +1

    Thanks!!

  • @W0KNI
    @W0KNI 3 года назад +1

    This is the best! Thank you for this. L+S.

  • @mohammadmohammadalian2611
    @mohammadmohammadalian2611 3 года назад

    This video is so FUCKING good.

  • @prettycolddeath
    @prettycolddeath 2 года назад

    last one amazing ajshdajshd

  • @HawkwardAlaskan
    @HawkwardAlaskan 3 года назад

    I tried your example with Optional chaining, but the code stops, saying the first thing isn't defined.
    code: const something = apple?.sauce?.test;
    console: Uncaught ReferenceError: apple is not defined;
    Is there a basic part to this I'm not understanding?

    • @joeldaros
      @joeldaros 2 года назад

      This only works in latest versions of ECMAScript.

  • @kibu9850
    @kibu9850 3 года назад

    At 3:10 why you used const for the variable, you just said that if in the future you want this variable to be changed to 30$, but you can't reassing a new value to a const

    • @codeSTACKr
      @codeSTACKr  3 года назад +1

      If it needs to be changed globally you would update the const, not reassign it. That way there is only one spot to update it.

    • @kibu9850
      @kibu9850 3 года назад

      @@codeSTACKr okay, i just started learning js ..

  • @olto2012
    @olto2012 2 года назад

    What the VSCode theme name is?

  • @dlckchan4461
    @dlckchan4461 3 года назад +1

    amazing

  • @madhuprasad4822
    @madhuprasad4822 3 года назад +1

    ❤️

  • @chickeninabox
    @chickeninabox 3 года назад

    The variable names in the fourth section are lke me.

  • @rafi_45
    @rafi_45 3 года назад +1

    superb. thank you so much for the tutorial.

  • @Axionauta
    @Axionauta Год назад

    guys, is it really clean code or just fast coding?

  • @nr7343
    @nr7343 Год назад

    Your ex with save images... it better create a object with keys like jpeg and so on..

  • @lucianeviana7283
    @lucianeviana7283 3 года назад

    Aula sensacional 😃

  • @ratul1125
    @ratul1125 3 года назад

    which theme are you using??

    • @codeSTACKr
      @codeSTACKr  3 года назад +2

      My codeSTACKr theme. Link in description.

    • @ratul1125
      @ratul1125 3 года назад

      @@codeSTACKr Thanks there :)

  • @pattty847
    @pattty847 2 года назад

    Yo that's my last name lol

  • @couragic
    @couragic 3 года назад +1

    This cursor is annoying. And selection background makes the text hard to read.

  • @SheshagiriPai
    @SheshagiriPai 3 года назад

    if(isAdmin) {}
    if (!isAdmin) {}......????
    Why not if(!isAdmin){}else{}

  • @muzammilsyed2339
    @muzammilsyed2339 3 года назад +1

    So, I have been writing shit...?👀

  • @it_is_ni
    @it_is_ni 3 года назад +2

    First two tips: shorter is NOT better.
    I stopped watching after that.

    • @mountakhabi
      @mountakhabi 3 года назад +1

      Rule number 1: simplicity and easy readable