DEV Community: Einar Guðni Guðjónsson

Using Obsidian as a task manager and a personal knowledge database

Einar Guðni Guðjónsson — Sun, 29 Jan 2023 13:10:06 +0000

Old Vault

Remember I wrote these two posts about Obsidian? One was about Obsidian, and the other was about my Vault and how I use Obsidian.

I still use Obsidian, and I've only come to like it even more than I did.

I started a new vault because I felt I was experiencing some problems with mine. These problems were not significant,
but they held me back from genuinely using Obsidian to my advantage.

Why I wanted to start over

My old Vault was great; I had a lot of content, but I recognized two things I felt I could do better.
Firstly, I had massively gotten stuck in the collectors fallacy.
And I tried to adopt a structure from someone else but needed to understand that system better.

What could I do better

Number one and two for me were to restart and build up a system I knew would suit myself and my daily life.
This structure I started with could have been better, just that there are better ways to learn how to use other systems.
It's better to start with the bare basics and gradually add what I want to add.

Remember Gall's law:

All complex systems that work evolved from simpler systems that worked. [And conversely...]
A complex system designed from scratch never works and needs to be patched up to make it work.

I started with a complex system and never used it to my advantage. That is part of why I got stuck in the collector's fallacy.

New Vault

I have my glass of red wine, and I'm ready to tell you more about my new Vault. I say a new vault, but it's not new.
I have been using it for 457 days.

Here is a table of content for you to navigate the post if you want.

I started a new vault with no community plugins, just the built-in ones.
Slowly I figured out what plugins I might want to use and added them by need.
Below, I will list the plugins I use when discussing the use cases connected to them.

My Vault is mainly a task manager and a personal knowledge database.
I'm slowly improving and adding functionality to my Vault. For example, this summer, I added a people folder to help me remember people's names and professions (I'm not good with names) and connect to others.

It's exciting to follow the Obsidian community and see how people use their vaults.

This Vault aims to help me connect my knowledge and improve it.
I want to build systems that help me play long-term games. This system allows me to do daily tasks and minimizes the mental load of always trying to remember everything.
There are only so many things we can keep in our minds at any moment.

Systems

This is the homepage of my system!
A summary of it:

top left corner: graph of my Vault
bottom left: folders for my notes and search.
- the notes under the folders are notes that I recently added
top right: calendar
middle right: local graph(for the open note) OR backlinks for open Note
bottom right: a pinned note containing different callouts

Below are the various parts of the system I've implemented in my Vault.

Note that I use templates for a lot of this. This is because, in Obsidian, you can leverage templates to do so much dirty work.
Here you can read more about Obsidian templates.

Daily notes

I use my daily notes a lot!
One of the first things I did in my new Vault was to set up a template for my daily notes.

My daily note is my funnel to my knowledge database.
I capture almost everything in my daily note. From the daily note, the content will either end up in the slip-box (more on that later), the reference folder, or I will not 'archive it'.

I use raycast on my MacBook pro as a launcher, and some genius made an Obsidian daily note shortcut.
It's super easy to press Command + Option + T, and my daily notes open.

Obsidian has a mobile app, which is perfect for quick capture when you have made some upgrades to it. I sync my Vault to my iCloud (there are more ways to sync your Vault.), so I have the same Vault in my iPhone as in my MacBook.
I used the button plugin to add a custom button to my daily note.

These two methods of quick capture have lowered the "barrier of entry" for me to dump everything into my Vault.
Since implementing this, I have spent more time adding content to my slip-box and making new connections.

Everything that goes to my daily notes could end in my Vault! Not all of it does. I use the daily notes to think, so sometimes. It's just some nonsense about my current work project.
I added a tag to the things I would like to keep on the daily note. For example, I use the #collection tag to collect stuff.
I'll describe how I use this tag in the weekly notes section below.

Daily notes plugin

Here is a screenshot of my daily note for today.
As you can see, I don't have anything under the Ideas:, which means I haven't captured anything for today.

Plugins & template:

Weekly notes

In my weekly notes, I add all of my tasks. These are the tasks I want to complete this week.
Most often, these are long-term-minded tasks that I try to do on most weeks (training, mobility, reading, etc.) combined with more ad-hoc style tasks that I add (pick up this, order haircut, clean apartment, etc.).

I recently added more personal tasks to the bottom of my weekly note. I dearly want to complete these tasks sometime during the week, but to be honest, I've not been good enough at following through with some of them.

Regarding my #collection tag earlier, I've created a user-friendly system at the bottom of my weekly note.
I use the data view plugin to show every note in the last seven days, which includes the #collection tag.
Before I added this, it happened too often that I needed to remember that I had tagged things in my daily note.

Toward the end of every week, I review these daily notes to add content to my Vault.
This data view query is helpful and lets me easily see what I've tagged in the last seven days.

The screenshots below are from two different weekly notes.

You can see on these screenshots that my weekly notes contain a lot of tasks,
I will go into more detail regarding my tasks below.

In the second image, you can see how I handle the #collection tag, as I mentioned earlier.

Plugin & template:

tasks
dataview
template (weekly note)
button (mobile)

Monthly notes

You can see how I structure my Vault. I have a monthly note where I link to the weeks of this month.
I also count how often I finish the personal tasks I set for each week. It's easier, to be honest, when I see that I only complete them once or twice a month.
Below that, I have five short review questions in the monthly note. These are short answer questions that help me reflect on my month. It's easy to forget what one accomplishes, even the small wins.

Plugin & template:

tasks
template (monthly note)

Tasks

As of writing this, I have 6990 tasks in my vault.

I use the tasks plugin to make tasks in my weekly notes.

As mentioned above, I use data view to show tasks in my daily notes.
This is how tasks are shown in my daily notes.

I have these simple data view queries to only show the tasks with critical due dates.

I've added a keyboard shortcut for both making tasks and completing them.
Here you can see what the tasks plugin looks like when adding a task.

These shortcuts are CMD + SHIFT + ENTER to make a new task and CMD + CONTROL + ENTER to complete a task.

I could use the task plugin more specifically, but I like to keep things simple.
I could do recurring tasks, for example, but adding every task manually to my Vault makes me feel more in control.
I use my weekly notes as much as my daily ones.

Plugin & template:

tasks

Projects

I recently started using this plugin for my more significant projects.
Having a space where I can have a good overview of my tasks is nice.
Each task gets a note dedicated to where I can store information and wanderings regarding said task.
I scribble down almost everything I'm wandering and thinking regarding these tasks. It has helped me get up to speed quickly when I continue with a task after I've changed my focus.

I made a projects template that the Projects plugin always uses when I make new notes in the project folder,

I will do a project about my blog and my side projects. I have many notes in my Vault regarding this, and this Project plugin helps me have a better overview.

Plugin & template:

projects
template (project)

Spaced-repetition

I read this article a while back, and I think I installed Anki not even 5 minutes later.
This is one of the biggest things I'm trying to keep improving on daily bases. How would've thought that continuously reviewing things again and again would help you get better at them?🫢

I mostly use spaced repetition for general concepts and other things that help me, like keyboard shortcuts (lol)

I use Anki and the Obisidan to Anki plugin to sync my notes to Anki.

I set up an anki hub note that connects all of my notes for each anki deck. I can leverage the Anki software for spaced repetition. I like this setup a lot since it allows me to add to my anki decks straight from my Vault.

My main decks are about React, JavaScript, and TypeScript. 🤓

I could improve my usage of Anki with Obsidian, but I've at least started. This is one part of my system that I want to use more.

The article I mentioned above is super good. Even though it's long, I can't recommend it enough!

Plugin & template:

Obsidian to Anki

Time blocking

I think this concept originates from Cal Newport's book Deep Work.
Here are articles about this concept

Time blocking
more about time blocking
there are plenty more articles about this concept.

I use cron as a calendar, and the full calendar plugin gives me access to a calendar in my Obsidian Vault.

What I like about Cron, and I like it a lot, is the ease of using keyboard shortcuts. It helps me quickly block my time -> Less friction, more likely to do it.

I've connected and imported events from my personal Gmail and my work calendar to Cron, so now I have them all in the same place. It's accessible in the full calendar plugin in Obsidian, though I use the Cron app more, especially since they launched the iOS app.

Here is a screenshot of my Cron calendar from this week, so you know how my time blocking is.

My time blocks are rather general. I have more details about those tasks in Asana (work tasks) and my weekly note.
I try to block time for the general "theme" of that time, which could be a project or more shallow work like emails.

As you can see in this screenshot, I'm working on a big task for work. We are refactoring our react-router to integrate the version 6.4 changes.
That takes some time, but it's a fun and challenging task.
I'm also working as a contractor for gigOver. This week, I spent some time early in the mornings to work on their project, and last but not least, I do Crossfit.

I might have a couple of invites to Cron, so if you want to try it, you can send me an email or DM on my socials.

Plugin & template:

Full calendar

Shut down ritual

Here are some articles regarding shutdown rituals:

At the end of every work day, I take a quick tour and go over to see if I missed some of this.

Finish tasks in Asana that I finished this day
Archive emails on Front that I can archive
Commit any updates to GitHub I have uncommitted
Finish tasks in Obsidian that I've finished.

Of course, I sometimes forget this, but most days I remember, and It feels good to "close" these things off for the day.
Maybe it's only the placebo, but I feel like I can start the day without the need to 'de-clutter.'

Plugin & template:

This is on my daily note template.

slip-box

I put all the notes that I want to 'own' into the slip-box

I got the slip-box 'concept' from the book 'How to take smart notes.'
I'm not going into many details here because there is no correct way to do this. I like how I structure my slip-box, but there are better ways to do it.
The topic notes work like an entry point to a particular topic. Here below is a list of my current topic notes.

1 systems
2 technology
3 productivity
4 psychology
5 philosophy
6 math
7 physics
8 biology
9 chemistry
10 ecenomics
11 personal finances
12 health
13 hobbies

Every note in the slip-box is prefixed with the number of the topic it belongs.

In each topic note, I start to build on these prefixes. Which is nice but also a place I could improve.
For example, the technology topic note has many links, and since I work as a software developer, I'm constantly adding new notes to this topic.
This is the topic note for technology.

The last note I added to my slip-box had this name: 2a2b9c1 - estate typescript. So I've branched a long way from the technology topic note with the prefix 2.
This has pros and cons. I'm slowly building a model of my slip-box note, and I can see how it grows. But I'm also wondering if I can find notes. (Thank god for the search feature).
To add, when I reference a note, I do this [[2a2b9c1 - useState typescript]], but there is a neat trick I can use. [[2a2b9c1 - useState typescript|useState typescript]] displays the string after the pipe instead of the full name of the note. It's nice to have the reference to other notes match the text.

If you look at the graph at the top of this post, I suspect that the technology cluster is the densest "collection".

Conclusion

So, this was quite long 😬
It may seem like I spend all my days in Obisidan, but that is not the reality.
The more I use my system, the more prolific I become.
Some days I add more. For others, I don't add anything. I don't want to add stuff that I don't need.

If you are interested in using Obsidian, please start small. I slowly integrated and tried everything I use in my Vault before I added it to my workflow. I'm also conscious and willing to remove parts of my system if unnecessary.
But note that this came on the back of my old Vault not working well with me, so I'm deliberately being patient with my system.

The ultimate goal of any productivity system is to have a place where you put tasks and reminders safely so they won't be forgotten and done in time.
The core reason is that that's the best way to close off 'open loops,' which are nagging sense you forgot something or the random task that will pop up at night before bed.
Those loops will constantly suck mental energy until you address them, and your brain will spend energy trying to remind you, often at the wrong time and space.

Shawn Blanc noted that "there is no one-size fits all system for your tasks, time, and goals. A good system should include these elements:"

Allows you to clarify your priroities
It's something you understand and enjoy using
It allows you to focus on the right things at the right time
Efficiency: you're able to do more in less times (isntead of tkaing a long time to do very little)
Anxiety and stress are reduced (not exasperated)
You know if you hit the mark
It's repeateable and sustainble.

Keep these points in mynd when you start building your system 🧐

I hope you guys enjoyed this post and that it was helpful in some way.
If you have any questions, don't hesitate to ask.

CheatSheet

I have mentioned before that Obsidian uses markdown files. Which is great and means that I don't necessarily need Obsidian to write my notes. I can use any text editor and write my notes in markdown.
Markdown is an easy language to learn, and I recommend you know it.
My blog posts are also written in markdown.
Here is a free cheat sheet with markdown basics and Obsidian keyboard shortcuts.

You should learn how to type fast!

Einar Guðni Guðjónsson — Mon, 13 Jun 2022 15:41:18 +0000

How to type faster

High-Leverage Skill

Writing fast is a high-leverage skill.

To be able to be write sync with your thinking is super valuable. It will improve your output and help with your flow.

Keyboard navigation is a big part of preserving said flow, moving your hands from the keyboard brakes the flow state.

Here are couple of steps to help you hold on to that state of flow, along with the possibility of increasing your typing speed and efficiency.

Recognise where you are slow

This is the most important one to think about. You can improve your typing speed, your efficiency or both.
If you can type as fast as you think, but you are always braking the flow by using the mouse, you should focus on using keyboard shortcuts to help you.

If you need to increase your speed and efficiency you can aim to get better at touch typing.

I first recognized that touch typing is something that could definitely help me increase me speed and efficiency, couple that with increasing my use of keyboard shortcuts and I think that I can improve a lot.

Learn touch typing

Being able to write without looking at the keyboard is great and helps you to be in the flow, as long as your efficiency doesn't hinder you. Touch typing can help you be a more efficient typer. My aim is to be able to continuously write at same time I think. I.e my typing does not lag, so that I can go into a great flow state.

For me this will require practicing, since I’ve build a muscle memory for the way I type and I want to change that.

I’ve been focusing on getting better at touch typing but it is difficult to let go of other habits.
What I've struggled with the most is to use my pinky-fingers to type. The more I condition my pinky fingers the more efficient writer I become.

Should I learn touch typing?

Here you can see a couple of links where this is discussed.

Here are some screenshots from my training.

These are all in a chronological order.

I've not been as consistent in practicing my typing, but I always get some practice in, so on these screenshots there are couple of months in between.

Keyboard shortcuts

I can’t emphasize how important this is.

Every time you move your hands away from the keyboard to your mouse it ´costs´ you time. Over time this cost compound and you spend a lot of time moving your hands between the keyboard and the mouse.

By eliminating the need to move my fingers away from the keyboard I can continue my flow state of writing code and/or my blog posts and notes.

Here are shortcuts I use on daily bases, these are for mac users but they are likely available for windows.

Option + ← / → ==> Move to next word
Shift + ← / → ==> Highlight to the left and right by holding this keyboard shortcut
Shift + option + ← / → ==> Highlight everything to the next word
Command + ← / → ==> Go to beginning or end of current line
Command + shift + ← / → ==> Highlight to beginning or end of line
Option + backspace ==> Delete the everything to the end of current word
Command + backspace ==> Delete everything from this line from the cursor.
Command + tab ==> Switch between apps
Command + Option + ← / → ==> Switch between tabs in chrome/vsCode
Command + W ==> close tab in Chrome

There are a lot of keyboard shortcuts you can use in your daily life. You can find them here

I write a lot of code in VS Code, I tried to use Zen Mode more (Command + K Z -> (esc esc to exit zen mode)) and it forces me to use keyboard shortcuts.

Here are macOS shortcuts for VS Code

Typing games

I used these typing games to improve my touch typing.

ratatype.com
typist (mac only)

This is a great starting place to learn touch typing and they helped me to build the base I needed.

Conclusion

I started to spend 10-20 minutes per day to learn touch-typing. Sometimes I spent few minutes but spaced it around my day.
This is a deliberate practice. Which can be a painful way to get better, but a well known way to get good results.

I feel that I've increase my speed and efficiency, but as with other skills you have to keep in refining them every day!

Building my second brain with Obsidian pt. II

Einar Guðni Guðjónsson — Sun, 08 Aug 2021 14:22:32 +0000

Obsidian

Check out part I here

I talked a little bit about the basics of Obsidian in the last post, and I encourage you to take a look at it here.

The main thing I want to talk about here is that you can connect notes like you want with [[links]], So you can connect notes as you want.

Most of our note apps are mono-directional linked. That means you can link from note A to note B.

A -> B

Obsidian provides the ability to perform bi-directional linking through Backlinks.

It does not only take you from A to B like most notes app, but it also recognizes that if A includes B, it means that B is a part of A. This is very good when the complexity increases.

Individual, unconnected notes are useless, so Obsidian focuses on connections and links between notes, mimicking the billions of neural connections in your brain >

- Hause Lin

You can also put #tags on your notes and then search all notes containing certain tags.

You write markdown files in Obsidian.

Markdown

This was one of the first things that stood out for me when researching Obsidian. I used to write LaTeX while I was finishing my Computer Science degree so I knew the good thing that comes with plain-text formatting syntax.

If you get used to it it will improve your efficiency!

Think about when you have to write something in bold you have to select some pre-setup feature, but with markdown, you can easily just *bold* the text like this.

By formatting text like this, you can be very efficient and quick to write stuff down.

Markdown benefits

Minimalistic - You will work in a simple and uncluttered workspace, with almost no extra buttons or stuff you have to pay attention to or use.
Flow - When you don't have to constantly format your text by adding headings, bolding, or adding italics to text you can get to a good flow while writing
Control - You really can use markdown in whatever editor you like. You can write notes in Obsidian and open your markdown files in VS Code for example.

With all this we can maybe start to look at Obsidian, I will tell you that the learning curve can be quite steep in the beginning.

Obsidian basics

Vault

You will have to create a Vault in the beginning. I would say that it is not bad to have two vaults, maybe one for testing things and another one for you to use. You could have separated vaults for work/school/personal life, but in my opinion, you should just have one for all of that.

Nick Milo has been doing some interesting stuff, not only in the Obsidian community, but he has been working on Linking your Thinking, and he uses Obsidian quite a lot. I recommend his Youtube channel for a lot of content, he also has a Obsidian vault you can download and play around with. But I recommend you spend some time working on your vault before using someone else's template.

Since no one thing works for all of us and your vault will probably change over time, you should start by playing around and adding to your vault.
I can tell you that I quickly saw that my system did not suit me well. So I changed it up and am always trying to improve it.

Now I have MOCs (Map of Contents) as my main notes and I generate notes from that corresponding MOC.
Here is a picture of my MOCs.

I have updated this quite a lot, I have at some time had more MOCs, fewer MOCs, and everything in between. So this is kind of a dynamic in my vault.
I do also have some 'smaller' MOCs under one of these main ones.

My general layout and workflow are continuously improving.

You can see those MOCs on the photo below. even though things look cluttered there is some kind of organization there!

My Vault

All of the notes that are single and not connected to anything in my graph view, will hopefully in some time connect to a MOC.
They are not connected either because I'm not sure where to put them or I want to add more to that note.
However, I can also filter by tags, see here below, and I'm quite sure that all of my notes have at least one tag, so even though they look like they are all alone they do fit close to one of these main MOCs.

Filtered by tags

These notes that do not have any blue-ish note that stands for a tag are all from the Day planner plugin. You can see more about it later, I use it sometimes to plan my day and I feel like I don't need to include any tags there.

Notes

One thing I like and have talked about is that I like the keyboard functionality of Obsidian, by adding keyboard shortcuts I can generate notes in no time.

I've made some templates for different kinds of notes.
These templates all have their specific frontmatter to help me sort them correctly.

Here are my current templates:

Daily notes I have a pre-made checklist for some tasks I want to do every day, but I also add extra checkboxes for things I want to accomplish any given day.
Blog posts I am aiming to continue to write more blog posts on this site, so I made a template that has the correct front matter. I use frontmatter for my website, here you can see this post frontmatter.

---
title: 'Building my second brain with Obsidian pt. II'
date: '2021-07-05'
tags: ['PKM', 'growth']
draft: true
summary: 'How I use Obsidian'
---

Frontmatter

Source This is a note containing content I find something and want to store something from it in my vault. This can be from any source, article, website, podcasts, whatever.
Note This is just a general note, I use this when I'm not completely sure what I should group this as, I like to start with this and sometimes change it later.
Books I recently started to write down notes from the books I read, so I made a template where I can fill in the author and much more.
Projects I almost constantly get good or not-so-good ideas about projects I could do. Even though I will not do anything with them I like to store them all in one place.
Weekly Reviews I try to write a short weekly summary at the end of every week. This is mainly to see how I've managed to do things I want to improve this week. Or just anything. I do not do this every week, but I've felt that this is very handy when I want to use it.

I have also added a keyboard shortcut to add templates. So I can get myself a note with one of these templates in no time!

Formatting

Here I have added photos on some of the text formatting.
On the left side, you will see the markdown code, and on the right side, you will see the note in preview mode.

Links

To create a link I will make something for demonstration.

I simply make a link like this [[Alarm Clock]] and "Control + Click" on that link to create the note.

Then I can simply add some text to the newly created note. You can see on the right side that the graph view for this note shows us all of the notes that are linked to this one.

Images

![]()

This is the syntax for you to add images to Obsidian, in the [] you can put in alternative text for the image and ing the () a path to the images.

I have a special folder in my vault where I put all of my images.
usually, I don't add an alt text, since this is just for my personal use. But I encourage you to always add alt text to images if it is for others to see.

Graph View

This graph view is quite important for me!

For the first, I love to see my second brain grow, but I also use it quite a lot to go over my notes, I like to spend some time and filter out some tags and go through my notes.

Plugins

The plugins are also a big reason why I got drawn to Obsidian.

There are some 'default' plugins you can add to your vault and then there are also community plugins. Which general users like you and me could create.

By having its user being able to generate plugins for other users the community will grow a lot and the software can improve so much.

I recommend you to try some plugins and see if you like them, but here is a list of some plugins I use a lot:

Advanced Tables
Daily Notes -> This one is a core plugin from the Obsidian team.
Day Planner
Hot Keys ++
Sliding Panes

Mobile app

The Obsidian team recently launched a mobile app. I think it is still in beta testing, if not, I'm sorry.
For this app to work you have to back your vault up in the cloud and access it on your phone.
Since I have an iPhone I uploaded it to iCloud and sync it to my phone that way.
There is more solution and you can also pay for an Obsidian sync service.

Community

There is an Obisidan forum with tons of content. This is a place where you can dive deep into Obsidian. They also have a discord group.

I have found a lot of high-quality content on the forum.

Conclusion

I love Obsidian, for real! It is a long time since I've been as excited to spend time to just dive into something so much.

I almost have to stop myself to change my whole vault every other week. I want to get some consistency in my use and develop a good system for my second brain. So I mainly try to improve tiny things at a time, give me some time to try them out.

I want to do a lot of things, but I want to get more notes in my vault to see how it will look.
That is one reason why I have so many unlinked notes, for the time being, I want to keep them unlinked and gradually link them to the correct MOCs.

I also would love to try experience building a plugin. For what you might ask? I ask the same, I have no idea at the moment, it would just be fun to try it out.

Since the Obsidian team released their mobile app I've just gotten more on the Obsidian train.
For me, that was the only thing I felt like was missing, not that I'm constantly writing notes on my phone, it is more accessible to my vault. Like I mentioned earlier I use Obsidian to plan my workday as much as I can and make a lot of checklists, memos, and whatnot, so it is very nice to have access to that on my phone!

If you have any questions for me regarding my Obsidian vault, plugins, how I use it or just anything. Don't hesitate to ask!

Building my second brain with Obsidian pt. I

Einar Guðni Guðjónsson — Sun, 08 Aug 2021 13:41:42 +0000

Second Brain

In todays world we have so many different kind of information. We have emails, text messages, emails, articles, books, podcasts and so much more.
All of this content has value, but it is hard to try to remember all of it. But to be effective today you can build yourself a second brain to use all this content without needing to remember all of it.

I've been using Obsidian to build my second brain since the beginning of this year.
I'm very keen on Obsidian and I like it a lot. It suits me very well and has so many opportunities.

This below is my second brain as of today, it is under continuous development and gets bigger every day.

Every yellow note is a note containing some content. Every blue note is a not-yet created note, but I have made a link to a note. And every purple note is an attachment, like image.

But what is a second brain? Other than Looking like one in the picture above?
Go check out what Tiago Forte has done, he has a great article and a course about this.

Building a second brain is a methodology for saving and systematically reminding us of the ideas, inspirations, insights, and connections we've gained through our experience.
It expands our memory and our intellect using the modern tools of technology and networks.

In this post, I will mostly talk generally about personal knowledge management and how I'm using Obsidian to build myself a second brain.

What is a PKM system?

PKM (Personal Knowledge Management) system can be a system that you use to curate knowledge.
You can design it to match your needs. You can look at PKM systems as your second brain.

This is one place to improve your knowledge.

So this will be a personal system best for your usage. I think that is important. None of us do the things in the same way, we may have a like activity to do various things,
but I think we can make them better by personalizing them to suit ourselves.

By collecting our knowledge in a centralized place outside of our heads, we can create an engine of creative output – a “second brain” – to advance a career, build a business, or pursue a passion. By making this knowledge digital, we can reap the benefits of searchability, backups, syncing between devices, sharing with others, and more.
- Tiago Forte

Having this collection of knowledge in a digital form is very useful for me, as I spend quite a lot of time in front of my computer. It is super convenient to
have quick access to my PKM system.

I truly believe that in today's world we should use technology to help us build up knowledge.

By quickly accessing your notes to review, add to them, and use them you can methodologically build your knowledge you curate in your day-to-day life.

"Go to sleep smarter than you woke up"

Is a great phrase I think Shane Parrish, said. It could be that he is quoting someone else, but the saying is true in my opinion. Couple that together with digital PKM and
I think you have yourself a great way to improve your life.

Why do I think PKM is good?
For so many reasons.
One of the biggest reasons I keep adding to my PKM system is because I want to learn more things, but I only can spend limited time diving into new things to learn.
By having a PKM system in place I can gradually add content about the things I want to learn and that way I build up more knowledge over time.

So this suits me very well, I can gradually add notes and connect them to build a good base of content.

Just to clarify, there are many other software's you could use, other than Obsidian. I like obsidian very much and I don't think I'll move away from it. But, I encourage you to start making you own PKM system, whatever the method you use.

Why Obsidian?

Locally - You keep all of your files locally on your computer. Note: If you want to use their mobile app you can sync them with iCloud for example.
Markdown - Super easy to use markdown syntax after you get used to it. One thing I like more about Obsidian than Notion is the Markdown writing.
Customizable - You can add your custom CSS, there are multiple plugins you can use. You could even build a plugin if you want.
IDE like - Like mentioned above, it is customizable, you can make a lot of keyboard shortcuts and more, so it feels a lot like I'm just using an editor like VS Code.
Good Looking - just a personal opinion, but you can change themes, add plugins, and more to make it look nice.

One thing that I do like also is the graph view, like you see in the photo above. It helps to show the connection between notes.

I'll write another post explaining how I use Obsidian and what I would like to do with it.
I've just been using it since the beginning of this year, so instead of making it super customized right from the beginning, I decided to wait and see what I thought
would improve my usage.

Here is part II

Improve your portfolio by using the Spotify API🎼

Einar Guðni Guðjónsson — Wed, 28 Jul 2021 15:51:07 +0000

This is inspired by Lee Robinson, go check him out, he does a lot of super cool things!

You can see this working here on the bottom of the page

Like the summary says: This is a blog post about how to set up to make a component on your website which showcases what you are listening to on Spotify, at any given moment.

So before we can start to write some code, we have to do some preparation so that the Spotify API will work with us.

Please do take into account that you could do the first steps in the same way I showcase here, but after that, it will depend on how your website is built on how you can showcase this on your website. My page is built with Next.js and TailwindCSS and hosted on Vercel.

Spotify

There are three steps that we need to do for this to work. Here you will see these three steps. Below we will go and do these three steps.

Create Spotify Application
Authentication
Environmental Variables

Create Spotify Application

The first step is to create a Spotify application so we can get credentials to authenticate and then use the API.

Log in to you Spotify Developer Dashboard
Create an App
Add name and description to their fields and click create.
Show Client Secret
- We have to get this secret and use it later!
Copy your Client ID and Secret and paste for use later on in the process.
Edit your settings
Add http://localhost:3000 as a redirect URL
- What is a redirect URL?

This step is done!
Now Spotify is configured and you are authorized to make requests.

Authenitcation

There are many ways to authenticate with the Spotify API, it will depend on your use case what is the most feasible solution.
For us, we will use the Authorization Code Flow, since we only need the permission granted once.

We will have our application request the authorization by logging into the scope we need. Here is an example of what the URL might look like. Swap out the client_id and scope for your own.

https://accounts.spotify.com/authorize?client_id=f42ae57ec93142b0b4017936f75fa65e&response_type=code&redirect_uri=http%3A%2F%2Flocalhost:3000&scope=user-read-currently-playing%20user-top-read

Since we only need to authenticate once, we will be redirected to our redirect_uri we added in the step above.
In the URL, there will be a code query parameter, save that value.

http://localhost:3000/?code=AQA7...FyBs

Next, we will need to retrieve the refresh token. To do that we will have to generate a Base 64 encoded string containing the client_id and secret from the first step. You can use this tool for example, to encode it online. The format should be client_id:client_secret.

curl -H "Authorization: Basic <base64 encoded client_id:client_secret>"
-d grant_type=authorization_code -d code=<code> -d redirect_uri=http%3A
%2F%2Flocalhost:3000 https://accounts.spotify.com/api/token

This will return a JSON response that contains the refresh_token we needed. This token is valid indefinitetly unless you revoke access, so we'll want to save this in an environment variable. This refresh_token being valid indefinitely is one part of why we only need to authenticate once.

Add Environmental Variables

To securely access the API we need to include the secret with each request. But we don't want to showcase our secrets in public, and not on GitHub either. Thus, we should use environment variable.
You can do this in a few ways, but since I use Next.js and vercel I used this to help me to store my environment variables in a correct way.

Code

Here we will go over the two files needed to access the data from the Spotify API. Like I mentioned above, I will not go more into detail on how to make it visible on your site, which will differentiate from the framework your site is built with. However, I'm sure you can figure out how to display the data yourself. 🤩

spotify.js

import fetch from 'isomorphic-fetch'
import querystring from 'querystring'


// We access our values with enviroment variables,
// we don't want to share these values in our code
const client_id = process.env.SPOTIFY_CLIENT_ID
const client_secret = process.env.SPOTIFY_CLIENT_SECRET
const refresh_token = process.env.SPOTIFY_REFRESH_TOKEN

// We encode our client_id and client_secret again to send with the POST request.
// This is a part of the authorization header
const basic = Buffer.from(`${client_id}:${client_secret}`).toString('base64')
const NOW_PLAYING_ENDPOINT = `https://api.spotify.com/v1/me/player/currently-playing`
const TOKEN_ENDPOINT = `https://accounts.spotify.com/api/token`

// This function gets the access token so that we can access the API

const getAccessToken = async () => {
  const response = await fetch(TOKEN_ENDPOINT, {
  method: 'POST',
   headers: {
    Authorization: `Basic ${basic}`,
    'Content-Type': 'application/x-www-form-urlencoded',
   },
   body: querystring.stringify({
    grant_type: 'refresh_token',
    refresh_token,
   }),
  })
  return response.json()
}

// We use the afformentioned access token and send it with the request to the API
// this requests gets the currently playing song.
export const getNowPlaying = async () => {
 const { access_token } = await getAccessToken()
 return fetch(NOW_PLAYING_ENDPOINT, {
  headers: {
   Authorization: `Bearer ${access_token}`,
  },
 })
}

now-playing.js

import { getNowPlaying } from '@/lib/spotify'

export default async function handler(_, res) {
  const response = await getNowPlaying()

 // Here we handle the request from the API
 if (response.status === 204 || response.status > 400) {
   return res.status(200).json({ isPlaying: false })
 }

 const song = await response.json()

 if (song.item === null) {
   return res.status(200).json({ isPlaying: false })
 }

 const isPlaying = song.is_playing
 const title = song.item.name
 const artist = song.item.artists.map((_artist) => _artist.name).join(', ')
 const album = song.item.album.name
 const albumImageUrl = song.item.album.images[0].url
 const songUrl = song.item.external_urls.spotify

 res.setHeader('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=30')

 // We return an obejct containing the information about the currently playing song
 return res.status(200).json({
   album,
   albumImageUrl,
   artist,
   isPlaying,
   songUrl,
   title,
 })
}

Conclusion

So to summarize!

These three main steps are required so you can get access to the Spotify API.
You can then use the API to display what you are listening to on your website.

First Create the application on the Spotify Developer website
Get the Authentication set up and working
- This is important so the requests will work
Set up Environment Variables

You can use the Spotify API to do many other things, for example, show your most played songs!

But these steps are important so you can get access to the API and use it in your projects.

You can see this component on the bottom of my webpage, above the footer
Either there is a song playing or Not playing.

Automate your fitness after lockdown

Einar Guðni Guðjónsson — Sun, 25 Apr 2021 00:00:00 +0000

We have to have short storytime, to talk about the scenario for this project.
Lockdowns have been on and off here in Iceland over the last year. Crossfit boxes here closed, and when the lockdowns lifted they opened again but not in a full capacity.
That meant that the demand for places in the classes was very high.

Of course, we can't automate our own fitness, we must show up and put in the work. But this will help us to reserve a spot in class when the demand is very high.

One point that plays in my hands is that I can reserve a place in class 72 hours ahead of time. So in theory I could reserve my place in classes for three days at a time, as long as they are not more than 72 hours ahead of the current time. So why not try to automate the process? That would at least save me the time of fighting to get the few places in the classes.

I had done a similar project when I was finishing my computer science degree. To build a small script that sent me an email when I received my grades. So that was a fine starting point.

The first was to set up selenium. This link has quite good information on the process of setting up selenium, but here are also some rather detailed steps to get started with selenium.

I decided to use the chromedriver you could use the geckodriver for firefox if you want.

These are the packages we need to import. We will use selenium a lot, more on that later...

The time module we use to make sure the website does go to its correct state before we select and click values.

The os module we use to access the environmental values that keep our username and password for the login. Read about how to use the os module.

from selenium import webdriver
import time
import os

After this, we can test if the selenium works. It is best to just start to open a website, you could try google.com or whatever.

driver = webdriver('./chromedriver')

driver.get('https://app.wodify.com/Schedule/CalendarListView.aspx')

time.sleep(4)

driver.quit()

Here we just try to open the Wodify website we plan on using later, but since we need to log into it only opens up on the login page.

If everything worked you should see the website open up in a new browser
So now we have selenium working.

How can we use Selenium to log in to this website?

Selenium lets us select and interact with the HTML of the website.
We can inspect the website with the Chrome DevTools by using ctrl + shift + I

The first step is to log in.

We can use the DevTools to inspect the website and select the login field and input the username we had stored as an environmental value earlier.

elementLoginInput = driver.find_element_by_id("Input_UserName")
elementLoginInput.send._keys(WODIFY_UERNAME)

driver.find_element_by_id comes from the selenium module we imported earlier

We do the same for the password field, select the id and input the password.

elementPwInput = driver.find_element_by_id("Input_Password")
elementPwInput.send_keys(WODIFY_PASSWORD)

After we have sent our login information to the correct fields we have to locate the login button.

Here we can however see that the Login Button does not have an Id, but we can use the xPath to select the button without the Id.

driver.find_element_by_xpath('//*[@id="FormLogin"]/div[2]/div[5]/button).click()
time.sleep(3)

After we login, we can go straight and find what element we need to select to register for said class.

However, since we could end up needing to scroll down on the page, especially if the class is two or three days from now, remember - we can reserve for classes 72 hours from the current class, but only one a day.

So here below you can see us find an element by its xPath, this element contains the day and class we want to select.

tableRow = driver.find_element_by_xpath('//*[@id="AthleteTheme_wt6_block_wtMainContent_wt9_wtClassTable_ctl45_wtAddReservationLink2"]')
driver.execute_script("arguments[0].scrollIntoView();", tableRow)

And since we need to scroll the particular day and class into view we must use .scrollIntoView().
Because of the element we are searching for is not in view on the page we must scroll it into view. We can not click an element that is no in view.

We can see what the element for the button is, but however, it is important to notice that the buttons have not identical ids. Which we can understand because they all stand for different classes.

But this helps us to just go to the day and time we are registering for.

We can inspect the element we want and simply copy its xPath.

Here we have two different classes, one that we can register for and another one that is not accessible yet.

In the code snippet below we can see xPath for both classes.
Note, that when the classes are available for registration the xPath is different.

tableRowAvailable = driver.find_element_by_xpath('//*[@id="AthleteTheme_wt6_block_wtMainContent_wt9_wtClassTable_ctl15_wtAddReservationLink2"]')
tableRowUnavailable = driver.find_element_by_xpath('//*[@id="AthleteTheme_wt6_block_wtMainContent_wt9_wtClassTable_ctl17_wt3"]')

This does mean that we must figure out how the xPath will be after the registration opens. We figured out that AddReservationLink2 is added to the element and the xPath as soon as the registration opens up.

This is rather a simple step and a good starting place. We could add more to this to make it more robust.
Right now it returns an error if it doesn't find the element straight away. Wy could handle it with a try-except to make sure that we try to click the button until it becomes availabe if the programs run few seconds too early and it tries to register for a class when the registration period is not opened yet it would return an error and 'crash'. The try-except could make sure we would not have this error happen if we try to register too soon.

Scheduling

How could we automate the process of scheduling the task?

Since I have a windows machine, I used Task Scheduler there are probably more ways to schedule a python script to run at a certain time, especially if you have a different OS. I know that you can figure that out. 🤠

Conclusion

It is not the perfect way but I feel like this is a good starting point.

This is a super simple way to start to automate things with simple yet effective python scripts.
I recommend you play around with it and use it as you like.
It is not super hard to get started with selenium, which is why it is a good starting place.

There are probably multiple ways to automate a lot of things in a different way, so Selenium is not the only way. I think is just one place to start.

Automation small tasks like this are fun to do. I hope you can use this to automate something in your life, or just to play around and have fun.

Check out my site for more upcoming posts about things I'm doing 🤓

Animated Waving Hand Emoji 👋

Einar Guðni Guðjónsson — Sun, 11 Apr 2021 23:11:27 +0000

Maybe you have noticed that subtle, and welcoming waving hand emoji in the title on my website.
EDIT: I have changed the design for my website so this hand is not visible there as I say here, but you can see it here below!

Here you can see what I'm referencing to

This is just the simple 👋 emoji found here on emojipedia. This is just a simple emoji, like the rest of them, but by using some CSS 'magic' we can make the emoji wave. So the waving hand emoji will actually wave.

To use CSS animation, we first must specify keyframes for the animation.

But what are keyframes?
Keyframes (@keyframes) control the steps in a CSS animation sequence. We can also use transitions but keyframes give us more control and customizability.

We'll look closer at the keyframes I used for this animation later in this post.

First, let's take a look at how the blog title is structured.

<h1 className="blog-title">
  <span className="blog-title-text">Hello!</span>
  <span className="blog-title-emoji">👋</span>
</h1>

Here we can see the title. Two spans, the first one containing the text and the second span containing the waving hand emoji.

The main reason why I split it into two spans is so that I could only use the animation on the emoji, I do not want to use the animation on the title itself.

.blog-title-emoji {
  animation-name: wave-animation;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  transform-origin: 70% 70%;
  display: inline-block;
}

Now we'll go over some of the CSS and what it does. This is just an idea of how this animation can be, it is very easy to customize it to your liking.

animation-name Here we will put the name of the animation where we make the keyframes. We'll talk more about this later.

animation-duration We can decide how long the animation should appear. We have selected 2.5 seconds, this also will affect the speed of the animation. If we set the value to 0.5 seconds, the hand will move very fast and it will move very slow if we set the value to 23.5 seconds.
Note that you have to define an animation-duration, if nothing is entered the default value is 0 and nothing will happen.

animation-iteration-count This is how often the animation will run. We could set the value as 3, and the waving will happen 3 times. The value here is infinity, so the waving will go on forever, let's just hope the hand won't get tired😫

transform-origin This property allows us to change the position of the waving hand. The animation will occur without this property, but it does a good job at making it better, without it the animation would pivot around a point somewhere in the middle of the hand.
In our animation, this property is used to pivot around the bottom of the left palm, which gives it a more realistic feel.

The display property really does not connect as much to the animation as the other properties, so I'll leave that one out as an opportunity for a later blog post.

Now we will take a look at the keyframes. Note that the animation-name must be mentioned in the keyframes initializer so that the keyframes work on the correct animation.

Here we see the keyframes for the waving hand animations.
They are not very complicated.

@keyframes wave-animation {
  0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(14deg);
  }
  30% {
    transform: rotate(-8deg);
  }
  40% {
    transform: rotate(14deg);
  }
  50% {
    transform: rotate(-4deg);
  }
  60% {
    transform: rotate(10deg);
  }
  70% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

The % stands for a different part of the animation itself.
So the 0% is at the beginning of the animation and the 100% at the end.
This ended up being a lot of trial and error to get to a place where I was pretty happy about how the animation was.

So from the 15%, you can decide how intense the wave will be. How much the hand will go in each direction.
Like I mentioned before, here it was just trial and error. First I felt like I had settled on a fine wave but it was quite intense, so by changing the degrees on various parts of the animation it looked better in my opinion.

You can use the keyframes for a lot more, but for me and this instance, this was enough.

This was a fun little 'project' and got me to dive a bit more into animations. The complexity was low so this was a good place to start and play around with.

Here is a link to the codepen showed above, with the code that I used. I highly recommend you to play around with it if you want to understand any part of animation better.