E11: Project Chunkie Todo

08/19/2024, duration: 17:53

Video

Transcript

Welcome to Debugging Dan, where I share weekly my journey, balancing life, a full-time job and side project. I'm Dan, your host. Let's dive in!

Welcome to episode 11 of the Debugging Dan podcast. What I'd like to do today is I'd like to highlight a pet project that I'm working on, which I don't really plan to release as a real full SaaS, but that's the app that I'm building, where I do my to-dos in. I keep track of other items for different projects and my way of working when aligning on stuff like that.

So, to give a little bit of background, I make this graph, and if you're listening to the podcast, I'll try to explain this as good as possible. So, I have different projects running at the same time as a hobby. And what I try to do is I try to divide those projects into chunks. That's why the name Chunky2Do. And a chunk could contain multiple tasks.

And what I try to do, I try to interleave those different chunks from projects. I try to interleave them with each other. So, I have four projects here in front of me, and for clarity, I colored them green, pink, purple, and yellow. And green is, for example, project A. And I create a list with that. So, I start with the green chunk. And after that, I switch to the third project, and I have a purple chunk. And after that purple chunk, I go back to the green project.

And that's how I do my planning. So, I can create a to-do's per project. But this way, I can interleave the different things that I have to do and prioritize by moving the chunks. So, I'm moving the pink one as number four, then the yellow one. And every project is prioritized in order of chunks. But I don't do each project fully and then move on to the next one or move on to the next one because new to-dos keep popping up. So, I interleave them. And that's what I do with chunking to-do.

And I created a mechanism for that. I first created an app for that. That was too much of a hassle. And then I realized, hey, I started using Notion, and in Notion, I can also do this very easily by just tagging projects. And in Notion, you can reorder items pretty quickly. So, the one that I wanted to do was always at the top. And then I would go one down and one down. And by filtering, I could see what I need to do for a specific project.

So, that worked pretty easy. But as time continued, I started doing more projects in parallel. And I also had some issues making a planning. So, this is not really a planning. This is a task order. But I figured when I wanted to do something for the weekend, I would have difficulty really preparing something. Because I would just start at the top and do something and start doing tasks without really having a deadline, stuff like that.

So, that's why I figured I'd create something that also allows me to use this mechanism and do planning. But I don't want to create an entire database and move out of Notion. And luckily, Notion has an API. So, I can build this on top of Notion. And I had built earlier on Notion because I've built a blogging software that I'm using for myself. Where I create the blog posts in Notion, and I have software that builds the webpage out of those pages in Notion.

So, the name of the project is Chunky Todo. And it's the second item on the list for the accountability list. And I hope that by working on this and creating this, I'm able to organize myself better. And of course, I also realized that I could have just created a list and just improved the visualization in Notion itself by adding a due date.

But I like programming and I figured I saw a programming challenge and I took it. So, um, yeah, that's, it's not the most efficient way because I could have done it differently in less time, but I'm also learning new stuff and I enjoy doing it. And it's also a hobby next to my normal job. So, I figured let's just do it.

So, um, so I built it and, um, this is already the, the Notion list that I've prepared and these are just some, some bogus to do items that I added for this. And coincidentally, it's the kind of the accountability list. I created some stuff from that and, uh, I need to pause here.

So I needed to pause here for a second because I forgot to copy my API key for the Notion access to my, uh, clipboard, cause I'm going to show you how to set up this, uh, this thing. So the URL I created is to do the debugging.dem.com. You create an API code token. I'm not going to show you how to set up an integration with Notion. If you just Google it, you should be able to find it yourself.

Okay. So I reused the token for the debugging.dem blog and that's okay. I store the API key and now it's asking me for the, uh, Notion database. So here, the ID of the database is in the URL. So let me just copy that. Oh, I call, I'm copying it, but it doesn't work yet because I can show that as pretty easily. I need to share the page to the integration that I created. So here I select the integration. I confirm that the API integration is allowed to access those pages.

And then, uh, I should be able to test this and it's able to fetch the records. I store the database in the integration, and this is the page status. And there's a small bug here. If you do the first integration thingy, uh, press complete, then, uh, it doesn't work. But if I refresh the page, it's able to query all the, um, things that I had. And I also created to do's in there.

So it's able to show me those. I can collapse, I can expand, uh, I can open the link to the Notion thing itself because editing here is pretty, um, what's called pretty restricted. You can complete it by checking the checkbox. You can add a new to do here, and then it will add a new item to the to do list in Notion.

So it would really be stored. Um, that's basically all you can do. You can refresh and you can complete before I started recording this. I did some fixes to styling and colors, but I see here now that the complete and refresh buttons, the labels are not that visible.

Um, that's might be something I need to revisit later. There's also, uh, this is the white mode or the light mode. Um, yeah. Um, so this is basically what the view they also had in Notion. So, uh, if you look at Notion, here you have the list. You can, uh, you can open it.

And the sorting of the list is based on the chunky column with the number, cause Notion has a very powerful feature that you can drag and drop these, uh, these records. I don't want to remove the sorting, but it was for an example, and then it would be sorted, but that type of sorting is something you cannot query using the API.

So you need to create a sort field and you cannot say sort field manual or something like that. You need to specify a column. So that's a PD. So as a workaround, I created the column and if I add a new record here, for example, uh, demo thing, um, I give it a five, then it ends up at the bottom, but I give it a three. Then it ends up somewhere else.

So, um, uh, and here I created that if you go back to the page, then the refresh item here goes and here you see the demo thing has been added. There's no to do's here and then do a demo for example, uh, and it's there. So this is the functionality that I had basically in Notion, but it's kind of, uh, represented differently.

Um, I can check this and it says all to do's are completed and I can choose to hide to do's what it does by default, or I can choose to show them. But the planning stuff that I added it to it was this, so I can add a board and it creates a funky title.

Uh, which I should be able to edit, why am I not able to edit that? So that's the trouble with a live demo. I guess I should be able to just click here, edit it and that's it, but somehow it's not working. I'll have a look at that, but we're here in the podcast, uh, you saw it first.

So this is the list and what I can do, I can choose here to create, to pick tasks from the lists of the, uh, of the first one. For example, it says record podcast episode 11 and there's a bunch of to do. I need to record the video. I need to edit the video. There are some sub items clip, the beginning, in the end, and I'll say audio stuff like that.

And I can just pick the first one and ideally I would name this weekend, for example, um, for my planned items to do for the weekend, but I can choose here. Add to, and then the title of the board. So the prototype Paladin's pilgrimage, and now I have record video and I can choose to complete it here.

And then it also completes on the list. I can also uncomplete it. Um, and I can figure, oh, wait, uh, for the accountability stuff. I also, in the weekend, I want to do, so that's the second to do item, update the accountability chart. I also want to do that in the weekend.

So now I have tasks from two different projects in the same board and I can choose to set a schedule date, for example. Um, and so the weekend ends today, I guess. First up here. Yep. Um, so the weekend ends today, I guess, and I can set it to tonight. I pick a date and then it says, Hey, it's due to today at eight.

Now I can also choose the clear date and based on that. So if I put time a little bit near, like so it's now a 10, something like that. I can select the date. And as I near the end date, I can't really make it visible now because it's percentage wise and I just created it. But if the, the, the end date gets more near the color changes to yellow.

And when it's overdue, it turns to red, the background of the item. Um, what I can also do, I can pick a color for the background of the item itself and, uh, show it differently. So I can also do color coding for things. And for me, I hope this is going to help getting me more organized.

So I can choose for the weekend for the week. I can, uh, also add a, another board and add another one, but I can also take the edit video from the record podcast thingy. And then it takes the edit video, but also do the two subtasks for clip, the beginning and the end for adding the pre-card and the postcard, um, to the video.

Um, so yeah, and I've been working on this, um, I'm using the Bulma CSS library, which I use for all my projects. Um, I am really familiar with that and it helps me create stuff because as you see, I'm not that good with colors. I didn't notice the refresh and the complete, um, visibility issue, but I don't think it, yeah, it's not there when you go to light mode, but not everybody uses light mode.

I always use dark mode and the stack that I use. I use, um, SvelteKit and the thing is all the data is stored in local storage. So your API key, your database ID, it's not stored somewhere in the backend. There is a backend running for this and that was necessary to circumvent course issues with the Notion SDK.

So I'm loading the Notion SDK in the browser, but the Notion API has no course header. So you're not able to query data directly to from api.notion.so. Um, so what I did in SvelteKit, um, I created one backend route, um, slash API slash V1, which is similar to what the Notion API has.

And I, and I told the Notion SDK, which they very lucky that they have that option is to define a different endpoint URL. I just define the endpoint URL to this site and then in, in the endpoint for in SvelteKit, it just forwards the request to Notion and gets the result back. So I don't even need to integrate the Notion SDK in the backend and all and proxy all the different calls, but it just do the same with the ACP request.

I forward the out headers and stuff like that. So if you use this, your API key will be forwarded first to the server and then to Notion, but I don't store the data anywhere. I don't care about your Notion data. Um, I'm not that kind of guy. I don't have bad intentions.

Um, I use this myself and I created it so that if they want, other people can also use it. And I will, in the, in the future will occasionally be doing some small tweaks like the refresh and the complete here.

Uh, the visibility, I may be adding some more icons. Um, and the last thing that I want to show. So here on the demo thing, I completed the to do there. It now says all to do's are completed and I can, um, even add something here.

So do a demo was added here. Uh, and I can say edit from Notion. And when I go back to the page, it already refreshed and that's a pity because I wanted to do it manually, but I can also do refresh here and I can also mark this demo thing as complete.

And then it removes itself from, uh, the list and it is still there in Notion on the completed column. If you remove the filter there, uh, you can still see it back for boards.

Um, if everything is completed in the board, you just see this at a new to do. I can also toggle that it shows competed to do's or hides them. I did it on a subtask, but I needed to do it on the full task.

Um, and I can toggle it that it only shows the ones that are completed that it also includes the ones that are completed. And if you're sort of, we get this done. For example, when your tasks are done and you don't want to see the board anymore, you say, remove this board here and you're done.

And you can do the same thing for this one. And what I had been working on, but I wasn't able to complete this weekend. So I figured I do that later is to have those board also be synced to Notion.

So on a different database than the to-do's you would be able to sync the to-do so you could, ah, you can access the boards from your to-do from your phone and from your desktop. Cause now all the planned things are also stored only in local storage.

Um, so if I close this browser window, for example, and clear the local storage, then I won't have the boards anymore. I would still have the tasks because those are Notion. So this was a short overview of the to-do, the chunky to-do app that I've been working on.

Um, I don't really have a homepage for it, but at some point I will probably tidy that up at a simple homepage and just, um, share it at some point saying, Hey, you can access it to do.debugging10.com.

Um, and if we follow the steps that I did here, it should already be working for you. Um, if you feel that this is something that might work for you, um, yeah, let me know what you think.

And, um, that's the recording for today. Bye. Thanks for tuning in to Debugging Dan. If you enjoyed this episode, please subscribe and leave a review. Stay curious and see you next week.