prettier VS JS-Beautifier

VS Code is my preferred IDE and I recommend it to my team. Additionally, we use Prettier to enforce consistent, clean code style across our projects.

There are two tools for that: Prettier and ESLint.

Prettier: Checking formatting

For the code formatter, I chose prettier. This is because my project uses javascript as its main language, and I felt like it would be a simple setup. Here's the link for prettier: https://prettier.io/

Prettier formatter is a VSCode extension and/or npm module that can be used to format code in a nice looking way with a simple command or the click of a button. I chose prettier as I had been using it already to format my documents in VSCode for quite a while now, and on my old PC had it set up for formatting on save from an older project in last year's cloud computing class. The documentation can be found here

Prettier

Since Barrierless is primarily built in JavaScript, I decided to use Prettier as the project’s source code formatter. Prettier is a popular choice in the JavaScript community, known for enforcing a consistent code style automatically. With Prettier, formatting rules are predefined and eliminate the need for contributors to focus on stylistic details, allowing them to focus on the code logic itself.

For my source code formatter, I choose Pretter. It is very popular and I have seen it other projects but I never had to set it up from scratch so I wanted to do that. First thing I did was go to thier docs and followed their install instructions. I also updated the .prettierignore so that I could exclude the files and directories I don't want to be formatted. Then I ran

For formatting, my go-to is always the beloved Prettier package/extension! This was introduced to me first in the Cloud Computing for Developers course I took with Professor Humphrey last year.

Even without tools it looked a bit weird, all files in source without minification costs us 27k, its something not needed inside, and if you unpack it with something like https://beautifier.io/ you will see:

I can go through the functions that I have wrote in here. Go to js beautifier and paste in the code for easier viewing while reading this.

I just cobbled together a version using js-beautify https://github.com/beautify-web/js-beautify, works for JavaScript and JSON, does not format HTML correctly.

View source and get the main javascript file https://musicforprogramming.net/client/client.bc21fa59.js then stick it in a beautifier https://beautifier.io/ then grab the most likely looking function, the easiest way is to delete everything that's obviously nothing to do with the animation, then what you have left is the code you want.

One that is customizable, I don't know. Always used vscode formatter with default settings (are there some options?) Or prettier. Maybe https://github.com/beautify-web/js-beautify

Sprite list from the randomizer can be found at https://alttpr.com/sprites/ with links to the zspr files (copy/paste the output into https://beautifier.io/ to make it more readable)

You can use an online service like beautifier.io to try to clean it up a bit. There is no way to get the original human readable JS back though. If you are interested in reading source code, you might have more luck looking at repos on GitHub, which will not be minified.

This is fantastic, thank you for the decoded output. I had run it through Beautifier.io to get some of the unicode/hex characters decoded, but this is much more readable.