Video není dostupné.
Omlouváme se.
8 Must Know Tips For Writing Clean JavaScript (Blind Reaction)
Vložit
- čas přidán 18. 08. 2024
- Let's react to this article on tips for writing cleaner JavaScript code from Alex Omeyer!
** Resources **
Original article - dev.to/alexome...
Alex Omeyer on Dev.to - dev.to/alexomeyer
Stepsize on Twitter - / stepsizehq
** Timestamps **
00:00 - Intro
01:20 - Use Try/Catch
03:25 - Use ESLint
05:00 - Track JavaScript Issues In Your Editor (Stepsize)
06:50 - Use Template Literal Strings
08:00 - Use Regex
09:15 - Use Optional Chaining
10:35 - Avoid Nesting
12:40 - Comment Atypical Code
STAY IN TOUCH 👋
Check out the Podcast - compressed.fm/
Newsletter 🗞 - www.jamesqquic...
Live streams on Twitch 🖥️ - / jamesqquick
Follow me on Twitter 🐦 - / jamesqquick
QUESTIONS...?
Join the Discord Server 💬 - / discord
Want to know what hardware and software I use? www.jamesqquic...
Learn Web Development 📖 - www.jamesqquic...
I also prefer to define functions as `function` rather than a `const` assigned to an anonymous function. I think it reads better and clearer since a `const` can be an object or array or a primitive type. Defining functions with the function keyword is just much clearer imo. I only use anonymous functions (fat arrrows) when writing inline callbacks.
I just don't buy into "use fat arrows everywhere" practice.
Fair enough. Thanks for sharing!
I've been using Regex in my development for years. I thought it was just me. I have a pretty strong understanding of regex so I often use it in searching and refactoring code. And most of the time the expressions themselves are pretty simple. It is extremely rare that I need to write any complex regexes. Since most tools let you do regex searches it's good to know that more people are taking advantage of this feature.
I also struggle with RegEx and I try to use it as little as possible. Fortunately, there is a member of my small team that is a RegEx master and they are my go-to resource.
Before watching the video:
1) follow the standards and practices around whichever framework, libraries, team guidelines to assimilate your coding style to it.
2) write code that communicates intent
3) be consistent
4) write a test first that has your desired output or outcome, and make it work, then chunk it into functional pieces that separate concerns and responsibility, and iteratively refactor your code and tests
5) segregated core functionality from imperative shell to isolate side effects and keep your core logic testable and reliable.
6) read other codebases and expose yourself to learn new approaches, try them yourself, and reforge a new understanding.
7) pay forward by teaching others and bringing non technical people from the business to guide them through your logic, if it’s getting difficult to explain its highligh likely that you have named things badly. (This goes much in line with DDD) Domain driven development.
After all code is just instructions and a translation layer between a machine and an operation
thanks james :)
It's a good point that Tutorials tend to skip the best practices to write code (like having Try-Catch). I understand that they want to make it easy for beginners, but it leads to bad practices early on. I don't think it's much harder to learn to code the best way from the get-go. If you know good resources to learn the best industry practices to write JS and architect code let me know.
Awesome video! Re: comments - I lean towards using comments as little as possible. MOST of the time you can write code that makes perfect sense for others reading it, but there are definitely edge cases or "hacks" where it makes sense to comment why you are doing it. An example would be adding strange constants in performing calculations where the name of the constant might not clearly get across WHY you are doing the thing.
Yes, but sometimes you do a thing in a way that is not the normal way one would expect to do it, for good reason. Comment the reason!
So Fresh and so clean 🛁
I find my code cleaner, when written in TypeScript, rather than directly in JavaScript. Also I think knowing arrays functions like map() and filter() helps to clear the code a little bit than when I was using for each loops.
I like the concept of writing “self-documenting” code to help make it more readable while reducing the volume comments. I’ll generally opt to use more longer, more verbose, readable variable names to achieve this. Sometimes comments are just necessary and unavoidable, of course, but complex functions can be made much more readily intelligible if variables really spell it all out wherever possible.
Right there with you!!
sometimes my variable names are outright rediculous because they are so descriptive but I typically have to write very quick and fast (and often dirty haha) solutions so I typically spend a lot of effort on writing code this way. Makes going back later to document things way easier. I'm not a developer by trade, but have to write code regularly to solve problems in my work so I don't have a full time effort writing code and documenting.
Every time I try and use ESLint and Prettier I end up with weird conflicts where one will modify the code and then the other will flag it as incorrect and then I can't run anything. It's so frustrating. I think it might be VS Code itself fighting with my ESLint and Prettier configs? I don't know. I usually end up disabling prettier to fix it.
Best use case for me with RegEx is searching & making precise bulk changes on a large codebase.
Very helpful when you want to search for closely named variable names, or components with a similar prefix.
Definitely can increase productivity & speed up your dev speed
I've just binge watched 90% of your videos from the past year. It's been great. Has your stress level gone up? High cortisol causes glitching in the thought process. Take care.
I’m not consciously stressed. Thanks for checking in though!
@@JamesQQuick Good. I haven't found a better collection of videos with the least need to rewatch sections.
The first thing I do with a new TS project is setup a linter. An acquaintance has a package with all the rules exactly how we'd want it, so the whole config is just 3 lines. Those 3 lines would make a massive difference during development
Great video as always James
Thank you sir :)
Dunno about Prettier, it's opinionated enough that it can sometimes cause problems, such as an application suite I'm building widgets for and whose default ESLint is set up to be diametrically opposed to it. Definitely agree with using TypeScript, template literals, and regex; nesting can be annoying but sometimes it's the best way. I like the idea of the Stepsize extension, but I don't know if I'd use it, simply because I tried to sell my coworkers on using the somewhat similar CodeStream extension and it just didn't fit the company's workflow.
I too struggle with Regex from time to time. Had to battle some today actually. Would be keen on resources... but tbh, I'm just waiting on an English-to-Regex AI conversion app to solve all my problems. 😂
What was the extension that does the automatic conversion to template literal strings? I don't think you mentioned any names of extensions.
Maybe "Template String Converter", I just looked for it and that's what I've found. Someone correct me / suggest better extension if there is one.
Yep that’s it!!
Please do a video about chatGPT
At a minimum each class, method, or function should be commented preceding the readable code.
Hi James, what's the name of the extension that automatically converts the single quotes to backticks ?
Ah it’s called template string converter!
ive seen " senior developers " doing these nested if else statements and over use of callbacks , and after 4 mths just quit to join a younger team that actually know design patterns and best practices. i dont believe anyone can be truly senior unless u dream about clean code.
I am using stepsize but it’s so much worse than sonar
👍
I heard that putting try/catch everywhere is making app slower. Is that truth?
Not much so unless the code fails. It’s not the same as an if else if where the interpreter has to check each condition. A try and catch is usually used when doing an api call so it will either pass/fail and then do the logic in that code block. Obviously use try/catch when only needed not everywhere lol
Any local service code also if it throws an error
I haven’t heard that. I wouldn’t think so!
1) Descriptive Variable Naming
2) Detailed Linter
3) DRY / Reusable Code
4) Separation of Concerns.
5) Comments when your team looks at the code and says "The heck does this do?"
I like it!
Hi @james can you review vs code extension console ninja
What does it do? Did you create it?
@@JamesQQuick in any javascript library like reactjs stevelejs it will give output in the code it like quokkajs
No more svelte tuts, sad 😢
More coming!!
@@JamesQQuick looking forward to! last svelte update is confusing with all these +pages.js +layouts.js and stuff =(
ESlint is very good, both for personal projects and, of course, for work.
Yeah I love it!
Great videos!! I just sent an email to your business inquiry email. Let me know your thoughts