How I take my notes through FreeCodeCamp using Dynalist

I haven’t finished freecodecamp material (262 points of ~1300ish) but I think someone might gain some insight from this

I wrote a post on how I take programming course notes through my favorite app dynalist.io. Its 3 posts at the moment, read in that order

TL;DR version

  • Dynalist has a powerful 3rd party extension called PowerPack that lets you take course notes easily
  • It works great for the format freecodecamp has setup

Example of what some of my notes look like

Below is how I actually organize all my notes specific to FreeCodeCamp

I have a document for each section that freecodecamp has setup

To give a sample of what my notes look like on the jQuery section

They look like this:

What makes this really useful is I can search through any piece of code I’ve written on freecodecamp and search for keywords, so I use it as a reference manual of how to do basic things

I can also do rich searches to find keywords of functions I’ve used like stringify()

You can find this app here:

https://dynalist.io

Forums here:

9 Likes

Cool! Thanks for sharing!

1 Like

Thanks for not only telling us about a cool tool that campers might want to try, but giving explanations and examples of how to make the most of it! I’ve moved your topic to “reviews” so it’s easier for campers to find when they’re looking for helpful resources.

2 Likes

glad you liked it :smiley:

here’s my raw jquery Document in dynalist for the jQuery bootstrap section in freecodecamp

https://dynalist.io/d/AX1h_6LHfNEu0L6xauwVYhcU

it looks like this without any of the 3rd party plugins I mentioned in 2nd link to my blogpost “essential tools to enhance dynalist notetaking”

I am running incognito here, not logged on, default settings, no chrome extensions, etc for below gif

you can play around with file to see how i organized it

Also, I can print out my notes too. It has come in handy a few times. I use this to make reference guides like a workout routine i am following + research in same doc

Here’s the PDF for my freecodecamp jquery section notes in the event . Printing isn’t 100% perfect yet in this app so some formatting is lost when creating pdf, but this gives a better idea

A good thing I use with this system also is I build in search parameters with my notes. So, I can use this to view data in more than 1 format, which I do pretty often

Example: Searching just for solution only from Freecodecamp Jquery section

Example: Searching only for Freecodecamp Jquery question part only

I use these search functions often to test whether I get the big picture or not from the course information I learn (not just from freecodecamp, but other sources like youtube , udemy, lynda.com, etc)

I play around with my data when its all collapsed like this to see if I can remember it off-hand, kind of like flashcards , or kind of like anki (Flashcard software)

Occassionally I run chrome CTRL+F searches for some function names within my document, because I need to search all my code snippets / repos on page

This is very helpful for me since I can find search some snippet of code and move around my page this way

So I normally use this search method after I finish a lot of course notes on a topic, and then have to do some quiz / project testing my knowledge on things talked about during lecture

Say the quiz asked “What does animated shake do”?

So I just search contextually where I wrote “animated shake” and simply just find all relevant information I wrote regarding it

Normally, when I am pasting my code snippets to dynalist, its also on github / freecodecamp as well.

Other times I do a systemwide doc search like this: stringify then I can go to my breadcrumbs and see where that information is located out

This is very useful for me when I have 3 docs / course notes on a specific topic like the function stringify, so I can see how different teachers apply functions in different contexes

this way I can weigh on and what is a good practice and whats a bad practice when it comes to doing development, because I can validate information from 2 strong resources

Basically, the way I do my approach to learning is the following when using this style of notetaking + all its features it has

  1. Rush through topics that explain things like how jQuery works or how bootstrap works
  2. Immediately start applying those notes to algorithm challenges/ quizes/ projects
  3. Constantly refresh back to those notes so there solid reference material

What’s nice about this app especially when using its search features, is I normally dump both my code snippets + my full github repos + freecodecamp solutions sometimes in here.

If you do any development in general (professional or at the noob level like me), you can see the value in a universal search parameter ofr all your code regardless of where its at, since its all in dynalist.

Don’t need to worry about searching through 2 different repos in github (not possible really), or git clone and using an IDE with some extensions to handle this sort of search query, or porting over notes on different PCs, etc

also, I do lots of excel VBA stuff for work and its got a pretty crappy method of debugging / saving code, so this comes in handy when using dynalist to do almost git-style version control

Its also nice because I can take any flavor of notes as well. I’m learning bootstrap 4 in lynda.com atm so its really heavy on gifs and images in it. I can even put images next to each other in the form of an image gallery. I call them “living notes” because of the gifs :stuck_out_tongue:

Example

So whenever I refresh my notes I just scroll through the entire document really quickly (10-15 seconds), I generally will just inherently remember things by seeing how my document looks like.

this cuts down on time it takes to refresh myself on a certain topic, etc

I can also open the same document in multiple chrome windows in case I need to look at different parts of the document, or even many documents at the same time

Also, I can stylize different documents with CSS. I use a black document whenever I write a pure reference manual, normally I combine 2-3 courses of material and duplicate parts of it into a new cheatsheet

This is what I use as my ongoing excel VBA / Visual Basic cookbook for work related things

My rule of thumb is I validate every piece of code snippet that goes into my dynalist

this way I can 100% rely on every note on here

Its full of code snippets, examples, and best reference manuals I’ve collected from a variety of sources.

Excel is a good example of this since a lot of documentation is really old, hard to look at (a lot of authoritative websites in these topics still look like websites from the 90’s), or outdated so this gives me a better manual than anything else I find online. Also, the MSDN website (microsoft docuemntation) is one of the worst-looking user-unfriendly sites out there, so its imperative I have my own manual

Sometimes the best solutions and answers / templates are found only on stackoverflow, or some other site, and this helps that I can consolidate / organize / view my information in any way I want

I also have manuals from everything to accounting, real estate, physics, mathmatics, engineering, etc whenever I need to brush up on some concepts depending on whatever hobby / work project I’m working on

Some notes have standard-operating procedures for how I determine what the least-number of steps it takes to capture information

I also have a document for purely generating ideas as well

the list goes on and on

1 Like

Thanks for sharing. I’ve always taken notes on paper but its hard indexing and searching through notepads. I’ve tried using OneNote since its used extensively where I work, but I just find it not pleasing to work with. I fell back to using Word documents and its allows for searching and automatic table of contents generation but it fights you at all steps in the process. I relunctantly keep using Word but I’m going to give Dynalist a try, so far it looks like everything I need. Thanks again FCC community! the sharing is incredible!.

1 Like

I’ve been a long time user of both evernote and onenote and also have read many books / videos on these topics, but I found both of them to be lacking and overshadowed by newer generation of notetaking apps

Onenote kind of suffers in that it takes far too long to navigate around documents. It also has very loose formatting rules that sounds great on paper (can format any type of notes) but becomes a huge mess when you scale things upwards. Searching in onenote doesn’t give many contextual clues either, the whole search area is only a small window at the topright.

Working with multiple word docs becomes a huge pain to manage as well.

Another good thing I like about dynalist, is that if I don’t like some notes I added (e.g. poorly formatted notes), I just collapse them from view so I no longer see it and rewrite those notes over again. This tends to happen all the time when I take course notes, since I contextually have no idea how the lecturer organizes their notes until after the fact.

Anyways, dynalist is very powerful. I only mentioned about 50% of the features listed in this post and my blog. I just covered the ones I use the most often when taking course notes + programming. It took me a while to adjust to using dynalist, its one of those apps where you don’t really appreciate until you’ve used it for 2-3 months and tried every other alternative software out there.

Also, dynalist is free but I highly recommend getting the PRO version ($50/year) just so you can get a file uploader and automatic backups into dropbox.

Excellent article. I quite love Dynalist. Two chrome extensions that you can consider including into your workflow are:

My Notes - https://chrome.google.com/webstore/detail/my-notes/kpcknabohpkeelnnnbfdnmoampijbnpb - this one allows you to take notes while browsing and saves the notes to your google drive. Very good for doing web based research.

Reclipped - https://chrome.google.com/webstore/detail/reclipped-take-notes-on-y/gbnebpdekafhpcipejfhabfghccgfnbh - this one allows you to easily take notes on youtube and MOOC videos

1 Like

Really like this, I was just looking for an efficient way to take notes. I like that it allows for physical copies I really enjoy being able to refer back IRL as to not disrupt work flow but also have the option in case I am using multiple displays. Thank you!

1 Like

1 year later,

I still use the same workflow outlined here, granted now when I take course notes I just use screencaps of my visual studio code editor. Since it also shows the most recent changes I make on every course video.

I’ve tested many ways of taking notes, this is the most seamless and stable way so far for me. I’ve tried other tools since then like inkdrop, vscode/atom extensions, boosted note, onenote, evernote, and notion.so. However, those tend to fall short because they add too many steps to get things done and formatting.

When I take course notes, I have to be able to do it extremely fast, b/c it doesn’t add any direct value in learning. Ideally, I try to watch videos at 2x speed while still typing along, adding external blog links the author mentions along the way. After I finish the video, I make screencaps before I do my git commits. So this way I can see changes to the repo, and changes to files.

Sometimes I’ll annotate these images in https://getsharex.com/ (windows only) , but most times its just a screenclipping (windows and mac both have these). Occasionally I’ll make a gif with shareX, but its very rare and done maybe 5% of every image I make.

Ultimately I want notes to get out of my way so I can focus on development & learning, but I still need some historical record of notes I take along the way. So I can just grok through my entire course notes within 30 seconds or so, and it becomes really easy to remember what parts of the video had some relevant information I should check out

If you get dynalist pro, I suggest using my CSS theme. Its designed to be as undistracting as possible. I made a custom userscript to modify the sizing of images (its that topleft slider) https://greasyfork.org/en/scripts/369888-dynalist-image-resizer-v1
. This helps because I know exactly what screenshot I took, but when I review I need to have those images enlarged, as I can’t remember every detail that happened.

This goes into what a userscript is:


Formatting rules for course notes

I currently employ these 5 formatting rules which has served me well over the year.

  • Yellow is the course’s top level categories
  • Purple is the course’s sublevel categories
  • Orange ticks to indicate a console command
  • ALLCAPS to describe filenames
  • Bold if its really important (only use it about 5% of the time)

These notes are from Brad Traversy’s MERN course which is found below. I find this course to be helpful as an intermediate developer. I have no affiliation with any of these tools or courses, but I find udemy to have the best video interface for quickly learning concepts (consequently, some of the best fullstack content as well), compared to lynda.com, youtube, coursera, udacity, etc.

https://www.udemy.com/mern-stack-front-to-back/learn/v4/t/lecture/10055150?start=0

Dynalist doesn’t have a very good mobile app still but it doesn’t really matter, I take these notes on a computer anyhow