February 17, 2020

How It's Made: My Toolkit

I’ve been doing a fair amount of restructuring of all of my projects as well as my workflow, but now that I have a regime in place I figured I’d share how everything is set up for me. I’ll describe how I work as well as what tools I use for what purposes, so stick around if you’re interested!

I have a Lenovo Legion Y545 running Windows 10 as my primary development machine, though I’m not a huge fan of Windows for CS. Instead, I do everything inside of a WSL Ubuntu instance, which has language support installed for Python and Java, along with any and all libraries I use for all sorts of stuff. I also have Vagrant installed, which is a command-line tool to spin up VirtualBox VMs for specific purposes. I have an Arch Linux-based Vagrant machine that has all the ML libraries I ever need – Numpy, Pandas, Scikit-Learn, Jupyter, Tensorflow (manually compiled at the moment, since TF2.1 doesn’t support Python 3.8), etc.. I mostly wrap these in a VM because I don’t use them all the time, and because I don’t want to clutter my hard drive with libraries that aren’t frequently used. Originally, I wanted to keep my WSL instance pretty clean too, using Vagrant for everything, but I figured this was pretty inefficient so now it’s really just ML that’s wrapped.

The WSL instance links to a folder stored in Windows, because I still like having external access to everything. All of the development is done inside VSCode, with the Remote - WSL plugin (I’d recommend VSCode to everyone for all purposes – it’s the most versatile IDE I’ve ever used and it’s so easy to tweak and customize and setup to your liking). I just spin up Windows Terminal (the WSL bash is set to default for me), navigate to the project directory I want to work in, type a short and simple code ., and VSCode spins up its beautiful interface, ready for me to pick up exactly where I left off. I use the Tokyo Night theme, with the Helium Icon Theme. I also have the vscode-spotify plugin installed for the audiophile in me, though I intend to extend this plugin at some point to add some cool features to it like search and browse. For now, though, cheers to the developer for doing an amazing job!

Most of my recent work has been web-based, and I’ve been using a few different tools and technologies for my websites. My main website is a static HTML page written using the Bootstrap library, nothing special there. This blog is written using Hugo, which is a nice static-site generator with a very large selection of themes. I almost always find a theme I want, and with a few tweaks here and there I’m up and running exactly how I want to be. My Teaching page is also static HTML, using the same stylesheet as the main website. My Guide to 61A is written using Hugo, with a significantly modified version of the Learn theme. That project specifically is really niche – the content and theme are stored in separate git submodules, since I wanted to keep my theme separate and the content is open-source (it’s a community-based project!).

My ACARS page and Notes page are both rendered using Nunjucks, a lightweight templating library by Mozilla, wrapped in Gulp. It’s super easy to get started with Nunjucks templating, and using the gulp-data library just makes it a piece of cake to add content without having to copy-paste a template. Well, aside from the JSON data structure, of course.

Within my Notes website, the main page is Nunjucks-based, but each individual course’s index is written in Markdown using Typora, because I absolutely love Typora’s interface and ease of use. The notes for CS 61A were taken in Typora as well, but all other notes were written either in my erasable Rocketbook or, more recently, in the Drawboard PDF app on my Surface Book.

I also have a custom start page, which is rendered using Nunjucks as well. That project uses a significant amount of JS scripts, so Gulp’s ability to copy static files along with rendering Nunjucks templates was definitely the way to go there.

Then there’s my resume, which isn’t public at the moment. I originally wrote it in HTML using Bootstrap, but during my senior year of high school I switched this to Nunjucks too for easier editing. However, coming into college, I realized that my resume wasn’t professional at all, so I redid it in LaTeX. Again, to avoid retyping templates, I created a style that contains simpler representations of various elements – experiences, academics, etc..

Lastly, my git flow. Everything I do is stored on GitLab, which I personally like a lot more than GitHub mostly for its organization. GitLab allows you to create an endless number of groups and subgroups to organize everything you do, so I have different groups for different types of personal projects, as well as different groups for different classes I take (I’ll write about my college workflow soon). Pretty much everything except for my Guide to 61A content is hosted on GitLab, and my structure looks a little something like this, where each branch is a deepest-level folder:

Personal
|-- Websites
|   |-- Themes
|   |-- High School Projects
|   |-- imVS
|   |   |-- Teaching
|   |   `-- Blogs
|-- Python
|-- Vagrant
|-- Data Science
`-- Misc

My college repository structure looks like this, where each branch is a repository:

Berkeley
|-- Data Science Undergraduate
|   |-- [Fall 2019] Data 8
|   |   |-- Notes
|   |   `-- Vagrant
|-- Computer Science Undergraduate
|   |-- [Spring 2020] CS 70
|   |   |-- Notes
|   |   `-- Homework
|   |-- [Spring 2020] CS 61B
|   |   |-- Notes
|   |   `-- Repository
|   |-- [Spring 2020] EE 16B
|   |   |-- Notes
|   |   `-- Vagrant
|   |-- [Fall 2019] EE 16A
|   |   |-- Notes
|   |   `-- Vagrant
|   |-- [Fall 2019] CS 61A
|   |   |-- Notes
|   |   `-- Homework

And that’s about it. It’s not the simplest of setups, but it works very very nicely for my personal use, so it’s what I do! If any of this is useful to you, feel free to replicate it. If not, thanks for reading anyway :)

© Vanshaj Singhania. All rights reserved.