One common response I get about CoderNotes is that people aren't sure how to best use it.
Since I personally find that my productivity skyrockets when using CoderNotes, I wrote this blog post to show what it's like to use CoderNotes in your workflow, using my actual day as an example!
We'll be going back through my notes from that day to see how I used it, and what value it provided.
Note #1: Weird or Troublesome Syntax
For this note, I was looking to grab data from my backend's GraphQL endpoint. I wanted to delete a property off of the an object if the "objectID" column was null or empty.
Imagine that you had to look this up. What steps are involved in a simple google search?
0) Consider the right way to word it for Google
1) Look at the top links, making sure they are not ads.
2) Click the most relevant one
3) Scan the page
4) Find the code snippet, read paragraph above and below to make sure it does what you want
5) Copy, paste, and close tab
Bonus 6) Repeat if you ever need to look this up again
Although it may only take a few seconds, this is enough for the brain to disengage from code.
In contrast, what does searching look like in CoderNotes?
The nice thing about having this in CoderNotes is that search is really smart for awkward syntax like this. Check out the different ways I can search for this snippet below:
"object delete js"
"delete key js"
This is one of the most powerful feature of CoderNotes. Saving a tricky code snippet is worthless if you can't get back to it.
CoderNotes searches the title, comments, url, and even the code itself to identify exactly what you're looking for.
Note #2: Difficult Exceptions
Sometimes it can be very easy to determine the root cause of an exception. But often, we get stuck.
When a vague, rare, or difficult exception occurs, it can take hours to find the solution to your problem. Google becomes an enemy due to the irrelevant posts that it picks up. Same with StackOverflow.
I'll show you an example, and why CoderNotes helps in the long-term.
After implementing Algolia, I was getting this error:
Uncaught ReferenceError: process is not defined
First, I copy-pasted the exception into Google:
The first result was talking about technology very different from my own (electron-vue vs svelte), but I decided to take a look. Despite proposing multiple solutions, none of them applied to me.
The second result used Angular 6, which I wasn't using, but it was also about Algolia, which is the technology I had just implemented.
"Hmm, perhaps my refactoring was correct after all, and this is an Algolia issue?"
The problem is, the solution mentioned a polyfill.ts file, which also didn't apply to me. I kept Algolia in mind, but I needed to keep searching.
The rest of google's first page wasn't relevant to me either! Even worse, these all started taking me down different rabbit holes, thinking that something was wrong with my bundler, or missing a plugin, etc.
However, this wasn't the case at all.
30 minutes later
After spending wayyy too long, I finally found this github page:
(By the way, this doesn't show up when you search "Algolia Svelte <error message>". I don't even remember how I found it.)
Did you catch the solution in that mess?
"The Algolia client makes a reference to 'process', which does not exist in the browser. Add the code below to prevent errors"
I made sure to immediately store this in CoderNotes. If I ever see this error again, I want the answer to show up instantly.
We now can:
1) Copy/paste the error message and get the right answer
2) Instantly get the line of code we need
3) Use comments to give context to the error message
Since everything in the note is searchable, we can find the note in new ways:
This leads into the best feature of CoderNotes: Public sharing of notes.
By default, notes are shared publicly with everyone. Just by making this note for myself, I have potentially helped every other svelte / algolia developer out there.
We have the ability to solve the problem once, and lock in the knowledge forever.
In contrast, StackOverflow only has results when people ask the question. I don't know about you, but I rarely post to SO, even if I've been stuck for a day. My ratio of learning something worth sharing vs. asking the question on SO is like 10000:1.
Because people are more likely to save a snippet for their own reference, CoderNotes builds a much higher level of content than StackOverflow, especially around difficult or rare error messages.
Of course, CoderNotes does allow for different levels of privacy, depending your plan.
A paid user can write unlimited private notes, which is important for secret information.
The "Team" plan allows teams to have notes that they share amongst themselves, but are hidden from the rest of the world. This is perfect for teams that want a collaborative space for common roadblocks, but are unwilling or uncomfortable with having those notes public.
Final Note: References
This snippet isn't actually from the coding session I've been talking about above, but I want to show you why I decided to call this CoderNotes and not CoderSnippets:
Since CoderNotes has a great search engine, it's not just limited to your code.
Have you ever found a great tutorial or technical guide, but couldn't find it later? By storing it in CoderNotes, we can save that article and make it easy to find. No more searching google, or trying to remember who published the article (Medium? Personal blog? Slack group?) and tracking it down in conversation history.
I've personally been shocked with how often I use this feature, and how many times it saves me from forgetting some small detail of an implementation.
Hopefully you've gotten a good idea of how I use CoderNotes for both simple, everyday google queries, to complex error messages and links. In addition, I hope you can see how useful this would be for teams.
If CoderNotes interests you, registration for the beta is currently available at codernotes.io! If you have thoughts or comments on CoderNotes, please reach out to me at email@example.com, and I'd love to chat.