Javascript: Aesthetic and Readable

Sample code that was used on this article: Github

Sometime ago (about 6 months) I started to develop on Javascript. With focus on the engine RPG Maker MV (and creation of stuffs to website), in which I enjoy to create things. So with the practice and my previous experience with Ruby and C#, I became confident on programmation.

But one thing that always hunt me is the design of the code. I don’t if is that because I’m a graphical designer or whatever, but I like to do codes with aesthetic aspect for me and other peoples. So I’ll show up for you, dear dude, my way to doing aesthetic and readable codes on Javascript.

Summary of my way to do:
• Use JSDoc for commentary section and description of methods.
• Create a introduction part on the begin of code.
• Create keys to localize parts of the code.

Introduction part: See below the picture with the sample.
Take note: I recommend to set a limit of characters based on the space line (=====================================)

Location part: On this part you will set a commentary section to indicates how the reader will get into that specific part faster (part of the code).
Pay Attention: The ‘symbol name’ need to get setup on the part from specific code. See below a example.
Take note: You can write some codes before this part, but I recommend to don’t write big codes, just small parts (as ‘import’ list, for example)

But why? Because when is structured and have a good aesthetic design, will improve your time to read and edit after some time. And most important, the other person that will read your code will have a orgasm (believe me)!