As promised, here’s a daily run through of today’s class.

This week, we’re focusing on MVC or Model View Controllers. What’s an MVC you ask? It’s a software or web design pattern used to implement UI, data, and controlling logic. The main idea of an MVC arguably is that the logic and the display are separated.

A simple breakdown…

• Model: the data related logic. Think schemas that communicate with relational databases. This is the data between the view and the controller.
• View: literally what our end users see, the interface. HTML, JS, CSS, etc.
• Controller: this is the intermediary between model and view. It processes requests and manipulates data, then it interacts with the views to render the UI using express.js templates. This week we were introduced to handlebars.js

Prettier

Much like ESlint, this is another VSCode extension I had installed already thanks to a Top 10 VSCode Extensions list somewhere in the ether… but had no idea what to do with it or what it even really was for. Tonight we were introduced to this super useful extension and even configured it to automatically work anytime we save a file.

Okay okay, enough about the setup, what’s Prettier really for? Well, in *technical* terms, it’s an opinonated code formatter that enforces a consistent style by parsing your code and re-printing it based on a set of its own rules. In ~simpler~ terms, it cleans up our code so that it’s cleaner and more readable.

While Prettier operates on its own set of rules, you can also add your own rules using a .prettierrc.json file. Check out an example in the code snippet below 👇

In this rule, we’re basically telling Prettier to fix any double quotes in our code, and turn them into single quotes.

You can utilize this extension a few different ways. The easiest way is to install the extension directly to VSCode, and configure your Preferences > Settings to Format on Save – this will tell Prettier to look for any .prettierrc.json files and apply those rules whenever you save your files.

If you prefer not to install the extension, you could simply run the following commands in your root project folder:

npm install prettier eslint-config-prettier --save-dev

Then, also in your root project folder directory, run this command:

npx prettier --write <yourfilename>.js

keep in mind that npx runs node.js packages, while npm installs them!

I love learning new things in class that I can clearly see myself utilizing in future projects. I’m always looking to clean my code and keep it readable, so this will be super useful moving forward.

On that note, I’m calling it a night.

Happy coding,

</Jessica>