Web Tools #445 - Chaotic JS, SVG, Git/CLI, React
source link: https://mailchi.mp/webtoolsweekly/web-tools-445
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Chaotic JS, SVG, Git/CLI, React
Issue #445 • January 27, 2022
A recent article called Chaotic JavaScript Patterns got me thinking about the way I tend to write code nowadays.
I write a lot of tutorials, blog posts, and newsletter intros that feature various front-end features and techniques. A lot of my day-to-day work involves creating small demos and reduced test cases to show off these specific techniques.
One thing I find myself doing a lot in these encapsulated instances is writing the worst code imaginable just to get things working. Once I have the working demo in place, I go back to refactor the code to ensure it's more maintainable.
Some of the refactorings I commonly do are:
- Store DOM references in variables, rather than repeating each reference for every use
- Convert old-school string concatenation to template literals
- Move common tasks across functions into small utility functions
- Rename variables and constants to more recognizable names
- Fix code indenting and formatting for better readability (including improving on long lines of code; I always use word wrap in my editor)
I suppose a lot of this could be avoided by better planning that could lead to actually writing good code to begin with. But I do find the speed at which I can get quick-and-dirty demos running can be a benefit and I don't find the refactoring time is all that bad.
But that's the key – don't wait too long to do the refactoring, otherwise the bad code can really pile up and now you have a behemoth of a mess that you're less likely to ever want to go back to.
Do you find you do something similar in your projects? Feel free to hit reply and let me know. I'd love to hear your thoughts.
Now on to this week's tools!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK