How to find your way around

🔎 How to find code

MaMpf is a huge codebase built over the years. When developing a new feature, fixing a bug etc., it's essential to find your way around in the codebase. Here are some tips:

• Get to know Ruby on Rails in general, the guides are great, e.g. for Active Record Basics.
• Get to know the Rails control flow. For this, you should know about the Model-View-Controller (MVC) pattern. This will ease finding relevant files a lot if you know how the flow well ... "flows".
• As we develop full-stack: the way I identify the portions of code that correspond to some button/view/etc. in the frontend is from outside to inside:
  • On your localhost, open MaMpf and browse through it. Imagine you need to change a feature on the /main/start page. Open the browser dev tools there. Use Select an element to inspect it (Ctrl + Shift + C) to highlight the element in the DOM tree. Most of the time, some combination of CSS classes used for that specific component is enough to pin-point the location in the code. That is, copy this string, e.g. far fa-bookmark text-light me-2.
  • Search for this string in VSCode in the entire codebase. You will probably end up at some HTML and JavaScript files. Et voilà, you're already right in the code.
  • Now to get to the respective backend code, it's not that far if you know how Convention over Configuration works in Rails. Also know how partials are rendered.
  • Due to convention over configuration, it's oftentimes helpful to search for files by name. VSCode supports fuzzy search for this, which is awesome.

💻 VSCode as editor

Quick navigation in your editor is key. In VSCode, know at least how to do the following via shortcuts (of course subjective, but for me, this constitutes the bare minimum to be efficient). Note there are keybindings available as extensions if you're used to another editor. You can also customize all shortcuts or even assign shortcuts to commands that don't ship with a default shortcut. In the following, shortcuts refer to the IntelliJ keybinding I'm used to. They might differ from the default ones.

• Open command palette (Ctrl + Shift + P). Especially in the beginning, this will be your go-to command to find out about other commands.
• View the explorer, view the source control tab. Note that I can recommend the vscode-icons extensions to pimp up the appearance of the explorer and to better distinguish different file types.
• Search file by name (Ctrl + E)
• Open global search (Ctrl + Shift + F), Find in folder (Ctrl + Shift + F after having clicked on a folder), open file search (Ctrl + F)
• Jump to the next suggestion/error in a file (F2)
• Open the in-built terminal (Ctrl + J, might be Ctrl + ö)
• Ctrl + click on code to jump to definitions
• Alt + Up-arrow/Down-arrow to move lines up/down
• I've set up a custom keybinding (Ctrl + Y) for me to delete lines. It's so convenient not to have to mark blank characters with a mouse ;)
• Ctrl + scroll to zoom in the editor (not activated by default, search for "Zoom" in the settings)
• Breadcrumbs are clickable!
• Save file (Ctrl + S). This will automatically lint Ruby and JS files. For HTML files, a solution yet has to be found.
• ... (probably a lot more that are so ingrained that I don't recall them now)

These are the shortcuts I use every day. Note that you can and should customize your editor to your likings, e.g. theming, fonts, layout etc. You can also let VSCode sync your settings between computers by allow GitHub access. It will then automatically create a GitHub Gist for you where your settings are stored.

Note VSCode even has a Zen Mode.

Further niceties

• Apply for the GitHub Student developer pack. You will have to upload your enrollment certificate of uni. Then install the GitHub Copilot extension in VSCode and profit from it (really that was a game-changer for me). You can even ask it questions about the whole codebase. Read through these best practices to make the most out of it.