E25: Built a Free Notion Tool

11/24/2024, duration: 14:42

Video

Transcript

So free tools, improve SEO, they bring visitors to your website, if you're doing it right. And I built two free tools. One related to colors and one related to Notion and YouTube. So listen, watch and check it out. Today is all about free. Free tooling is a SEO strategy.

So in an earlier episode or more earlier episodes, I did some investigation into SEO and how to improve SEO. And one of the suggestions there is to build free tools. Build a free tool, build something that people will visit. And on top of that free tool, you just link to your site. You make it part of your site. You link to your product. You make something interesting. And as a bonus, you can then with the people that are visiting that free tool or using that free tool, promote anything you'd like.

So with the new DebuggingDan website, I figured free tools. So I already had a free tool laying around something with, uh, generating color palettes. And this week my wife ran into an issue with something between Notion and YouTube playlists. She wanted to be able to sync them to track the progress. Uh, there wasn't something there or wasn't something there working. So, um, I have experience with Notion and YouTube API, so I figured I'd also build that, make it a free tool on DebuggingDan.com.

So the two tools that I built, I'll start showing you the color palette tool. The first free tool, the refactoring UI color palette. So like one and a half year ago, I was struggling with building Teledron and using colors because I wanted to do, make the design more interesting. And I read about the refactoring UI course. And, uh, there were some suggestions there is that, um, the main thing is, is that a color palette is not like five colors because then your site gets looked like a circus, but it's pick a few colors.

And, um, and use different accents of those colors for your UI elements. If you're watching this via the podcast, you can visit my website, DebuggingDan.com to see what it looks like, or you can watch the YouTube video, but I'll also try to do a voiceover of what I'm showing here. So the refactoring UI color palette is what I called it, and it's inspired by a blog post. I'll link that in the description.

And, uh, it starts with gray. So every site needs a lot of gray tints. So text, backgrounds, panels, form control, shadows, you need different gray tints to, uh, to make you the UI pop basically. Um, and then, uh, I split it into two different colors, a primary color and an accent color. And what this UI color palette does, you can pick a color using a color picker. And then it will generate the different accents from light, lightish, light, a base color, which is the color you picked dark, darkest and darkest.

And you can then click on the button and you can make that color, the base color, or you could choose to randomize. And it picks a random color, um, to display. So you can click around a few times, see a color that you like, and maybe iterate on that by clicking on one of the tints of the colors, um, for example, and then there's an accent color. So the base color is a primary and the accent color is then related to the accents that you want to bring. For example, two notifications or different items, um, so the accent color works the same.

You can pick a color or you can choose to randomize if the color doesn't really fit. So here I have pink and orange, for example, and if you scroll down on the page, you get an example of what that would look like, and you can toggle also between a light color and a dark color. And those are automatically generated by using the inversion of the color, uh, that was picked. So in this example, the purple and the orange turn into green and blue, it has some example buttons.

And then at the end, it generates some, uh, CSS with CSS variables for the different colors and some samples of, um, a button or an A color where you get the box set. You get the button, the accent color and the A color gets the, the HRF gets the primary color. Um, yeah, and then it generates also a media, uh, uh, a media query. If you prefer the dark color scheme, and then it changes the colors to the dark colors. So I figured that was useful.

Um, I use it sometimes if I need to pick a color. Um, so I figured I already had that. It was, uh, an open source kit to a project that was, uh, I deployed it to virtual to also see what virtual is. Um, so I had it and I figured I'll deploy it. Maybe somebody finds it, uh, finds it useful and perhaps also fits visits the site and becomes a podcast listener or checks out one of the other projects.

Um, yeah, so the other tool, um, that's more of a, a complexer tool. So the demo is also a bit complexer. So when you have a playlist on YouTube and you want to sync those different videos to a Notion database, this is the tool. So first we need to give it access to Notion and, uh, Notion, uh, allows you to add a personal internal integration to your, um, to your workspace. And then you explicitly need to give it access to a database or something like that.

So, um, let me show you how that works. So you visit Notion and here I have a page that's, uh, it's called YouTube to Notion and I'll first show you how to add the integration. So here at the bottom, there's a connections you can choose connect to, but you can also choose to manage connections and then you, uh, can click develop or manage integrations. And you end up on the Notion page and, uh, uh, you create a integration and, uh, we call it, uh, YouTube to Notion, for example, uh, type is internal.

You don't really need to upload a logo, uh, and you save it. So it cannot contain a word Notion, so we, uh, yep, so we, we use a shorter name and then, uh, we need to configure it settings and we can, uh, copy the internal integration secret. Uh, I'll just show it. I'll regenerate it later. I'll copy that. And that's what you need to input into the internal integration secret box. You click the button, it checks the token and then next step is to input the database URL.

So going back to Notion, I create a new full page database in which we will store the videos. So I copy the URL and then I paste it into the database URL box. It's checks the database, but now it shows an error because we haven't given the permission yet, um, for the app or the integration to access the database. So that's what you, uh, do when you link it via the connect to option. We try it again.

And now we will also add, uh, some additional columns. So we, it automatically adds date and video ID. You can hide those later on. If you want, remove the text that was there automatically. And then we're all set up on the Notion part. So in the example here, I take my podcast playlist and I will import those videos. So you paste that into the playlist box. You save it. And then it will show you how many videos it will import. And that they're imported and now you see them slowly appearing in the video database.

And in the database itself, you're now free to use it however you want. You can use add additional fields. You can hide columns. The tool expects name, date, and video ID to be there. If you want to do it again in the, uh, if the playlist updates, uh, but you can update the sorting, the displaying, the viewing views, you can change all that.

So, um, if I do it again here, I deleted number 24, the latest one. And now it shows, Hey, you're missing one. We sync at the end and then it appears again. Those are the two tools that I wanted to show to you today. Uh, the important thing is free tools, better site visits, better SEO, hopefully.

Um, and I find marketing and SEO, uh, pretty difficult and building tools comes naturally to me. So that's why I wanted to build a tool and it's useful for my wife. It's useful for me. So that's it. Hope you enjoyed listening. If you'd like, subscribe, like the video, um, rate the podcast. If you're listening to the podcast and give a rating in a podcast app, podcast app that will help me a lot and have a good day. Bye.