When I first started diving into the web development world I felt overwhelmed by the amount of information out there, and all the topics I wanted to explore and learn. I immediately found the following problems:
- there was too much to remember,
- too much information overall,
- too many technologies to keep track of,
- I was forgetting things as I learned new ones.
The best solution (so far) I found to cope with all of this is to maintain a commonplace book.
A commonplace book
Some years ago, looking into something unrelated to programming, I discovered the idea of commonplace books:
Commonplace books (or commonplaces) are a way to compile knowledge, usually by writing information into books. They have been kept from antiquity, and were kept particularly during the Renaissance and in the nineteenth century. Such books are similar to scrapbooks filled with items of many kinds: notes, maxims, quotes, letters, tables of weights and measures, and recipes (...). Entries are most often organized under subject headings. Commonplaces are used by readers, writers, students, and scholars as an aid for remembering useful concepts or facts. Each one is unique to its creator's particular interests but they almost always include passages found in other texts, sometimes accompanied by the compiler's responses.
Learning about these kinds of notebooks pushed me into trying different methods to organise topics I was interested in: from physical notebooks (such as dotted, blank, squared), to digital notebooks (Evernote, OneNote and Notion). After having used them all, I found that some of them are better suited for certain kinds of objectives. For example, journaling is better done on a dotted physical book, Evernote is better suited to store (and retrieve) PDFs and documents, and Notion is excellent for handling a large amount of data that needs to be interconnected.
When it comes to software development, having a commonplace book is one of the best things we can do to organise the different coding topics, to keep track of things, and to help not forget concepts. Notion is my preferred tool to implement a commonplace book for code related knowledge.
Structure
When I started studying web development I decided to use Notion as a note-taking system. At first, I didn't follow a set structure, but as new concepts came in, I decided to divide my notes into the following parts:
- Core topics
- Study and practice
- 1st layer topics
- 2nd layer topics
- Jobs
- App and business ideas
- Assorted
Simplification
I tried many other ways of organising my notes, often involving complex Notion databases and relations between notes, or complex multicolumn designs on each Notion Page, but I found that complexity often gets in the way of the ultimate objective: a simple way to insert and extract information. Complex layouts also don't work too well on mobiles.
Core topics
In this section, I have all the information related to the main programming languages I'm learning, as well as related tools, such as Git and GitHub.
Inside each sub-section (these are actually Notion Pages) I'm taking notes of what I consider to be useful: some basic information that I need to remember, special cases, common problems and their solutions, cheatsheets, etc.
I usually have a "topics and roadmap" sub-section with a description of specific topics related to the programming language. For example, in the Ruby on Rails sub-section, I have a Notion database with the name of the topic, its group, and the level of difficulty.
Inside each of the topics, I have detailed notes about it, including interesting sources, figures, and code snippets (Notion is particularly good at managing code snippets), so whenever I have doubts about that topic I can find the most important information right there in my notes.
For example, if I'm working on Rails and I want to do a database migration but I don't remember how, I just go to Notion and open the Web dev resources > Ruby on Rails > Ruby on Rails topics and roadmap section, and I press ctrl + F to search for "migrations". The note will be highlighted, and when I opened it I would be able to see what I am looking for:
If sometimes I don't find a topic on my notes (usually because I forgot how I named the title), or if I want to search for something in a faster way, I can press ctrl + P and Notion will make a search on the body of all my notes. This is very useful!
Study and practice
In the "Study and practice" section I assembled a list of learning resources (courses, tutorials, reference sites, etc.), a spaced repetition sub-section, and some reminders about why am I doing all of this in the first place.
Spaced repetition is a great way to solidify knowledge. I have one section for each of the main topics around web development that I have gathered so far, and this section is constantly growing.
Inside each of the topics, I have a database with the following columns:
- Question
- Topic
- Difficulty level
- Importance
- Last recall
- Days since last recall
The idea is to visit this section regularly (something that I struggle to do, unfortunately) and to answer the questions going from the ones that have more days since the last recall and the most difficult ones to the easiest.
By doing this I pursue the implementation of the spaced repetition concept applied to software development.
If you don't like this implementation, I can recommend to you the following application that is focused on spaced repetition: Anki.
Mindset
Sometimes we can feel overwhelmed about our journey through the web development world. We can even feel lost, without aim, not remembering why are we putting so much effort into what we are doing. This is when the "Mindset" subsection comes to help. Here I have my mission statement: an answer to the "Why am I doing all of this?" question.
1st layer topics
I imagine the programming topics as an onion. In the centre are the core ones, the most important ones: HTML, CSS, JavaScript, React, etc. The 1st layer after that is made of the technologies that are directly related to the core: APIs, CI/CD, npm, VSCode, etc.
Again, each of the sub-sections here is made of pages, and inside those pages, I have personal notes, useful commands, and links to helpful resources.
2nd layer topics
Continuing with the onion metaphor, the 2nd layer after the 1st one will contain topics related to the world of web development but that are not directly related to its core, such as colour theory, interesting interviews, portfolios that I like, standards, etc. This classification is totally subjective, and what I consider a 2nd layer could be a 1st layer or core concept to you. That's the beauty of this method of organising notes: you can make it your own!
Jobs, App and business ideas, and Assorted
The Jobs section has notes about useful links to interview preps, and a table of the jobs I have applied to. This section came in very handy when I was looking for my first job as a web developer.
The App and business ideas section have a collection of ideas that came to me and I wanted to write them down so I didn't forget them. This section is going to be useful in the future.
Finally, the Assorted (or Sort this!) section contains notes that I need to review, catalogue, read, or decide if I want to keep. It's the "catch-all", or "inbox" part of the notes.
Conclusion
The main idea of a commonplace book is to store notes that are important and related to a common theme: web development. You can use Notion as the main tool to build a commonplace book or choose another preferred tool, such as MS Word documents, OneNote, Google Docs, Evernote, etc. I wanted to show you how I organise my notes and maybe give you some motivation to start doing so.
If you have any suggestions about this process, or if you are already taking notes and want to share your technique, I would love to hear about it in the comments section.
I hope you found this post informative.
Keep coding!
🚨 UPDATE! 🚨
You can now download the template. Read more about it here.
🗞️ NEWSLETTER - If you want to hear about my latest articles and interesting software development content, subscribe to my newsletter.
🐦 TWITTER - Follow me on Twitter.
Top comments (0)