Drikerf.com

Klart Inbox: Save it for later

Fredrik -

For the past one and a half year I've been working on Klart.io — A bookmarking with screenshot service. Lately, I've been thinking a lot about whether or not I should make a mobile app for Klart. Sometimes when I'm browsing Twitter, Hacker News or something on my phone, I want to save a link to something so I can check it out later when I'm on the computer. My workflow for this has been to open Safari on my Mac and grab the tab from there (I sync tabs between my Mac and phone). However this is not really optimal since:

  • I have to keep the tab open in my phone
  • I have to juggle around tabs on my computer

I figured that Klart should be able to solve this and that I should do something about it. After some research I realized that I basically had two options:

  1. Build a native mobile (in this case iOS) app with a share extension to save links and screenshot to Klart (Approx 1 month).
  2. Make a bookmarklet that can be used to save links only (Approx 1 day).

🤔 Think about the use case

The first and naive solution would be to just get cracking on building the iOS app. Learning Swift and/or React native, pay the Apple developer fee and get something out the door. Did this make sense to me? No, and for two reasons:

  1. The use case for mobile is not really to save a high resolution screenshot. For me it's more like a check-this-out-later-on-computer kind of thing. So it doesn't make sense to even use the bandwidth required to upload a screenshot. I want the experience to be fast so that you can save it, put down your phone and exit the subway.

  2. I'm bootstrapping Klart on my own. I want to focus on things that create maximum value for me and all the other lovely people using Klart (you rock ✨). An iOS app would simply take up too much focus in development and maintenance from other, more important stuff.

💡 What does make sense?

What did make sense on mobile was to save a link to an inbox/buffer/read-later board. This would allow me to quickly get an overview of all the links I've saved for later and be able to clear the board easily. If I want to keep something I can either move it to another board or visit the URL and save it with a screenshot on the computer if I want too. What could possibly suit this case?

Hello, and welcome back Bookmarklets. Bookmarklets are basically little JavaScript snippets that you save as a bookmark in your browser. Historically they've been used to automatically search for something on a site, make bookmarks and lots of other cool stuff. This is what my first iteration of Klart's bookmarklet looked like:

javascript:source=location.href;metaTitle=document.title;void(t=open('https://klart.io/inbox?inbox=true&source='+encodeURIComponent(source)+'&metaTitle='+encodeURIComponent(metaTitle),'Klart','toolbar=no,width=400,height=400'));t.blur();

And then I decided it would be nice to add some meta data so you can search it on Klart. A bit more verbose but I think the additional data makes up for it. Sorry about the long lines 🙈 .

javascript:source=location.href;metaTitle=document.title;mP=function(prop){var mE=document.getElementsByTagName('meta');for(var i=0;i<mE.length;i++){if(mE[i].getAttribute('name')===prop||mE[i].getAttribute('property')===prop){return mE[i].getAttribute('content');}}return '';};void(t=open('https://klart.io/inbox?inbox=true&source='+encodeURIComponent(source)+'&metaTitle='+encodeURIComponent(metaTitle)+'&metaName='+encodeURIComponent(mP('og:site_name'))+'&metaDescription='+encodeURIComponent(mP('description')),'Klart','toolbar=no,width=400,height=400'));t.blur();

Pretty simple right? Just one line of code. To use it you just copy the snippet or this link and save it as a bookmark with a name of something like "Save to Klart". On the server I only had to set up an endpoint that would accept these requests and add them to an Inbox board. If the user doesn't have an Inbox board I'll create it on the fly.

🎥 Enough words — Let's GIF

This is what the bookmarklet looks like in action:

And this is what your Inbox looks like (once created automatically):

Of course you can use the bookmarklet on desktop as well. It's actually quite nice for quick and temporary things that you don't need a screenshot of (or if you're on a shaky WiFi 💩).

🕓 One day instead of one month

Prioritising becomes super important when you're bootstrapping. Focusing on the right things is crucial to create value for users and to differentiate from and keep up with competitors. Developing the bookmarklet for Klart took me one day instead of one month development time and it's also way less prone to bugs so maintenance will be substantially lower than a native app. So now I can focus on building more useful stuff instead of being stuck in Xcode all day 😜 .

This also allows me to keep the number of code-bases down to the Klart web app, Firefox extension, Chrome Extension and the server. As you may understand, as a single founder, I've got my hands full with these and I'm working hard on making code work across the platforms to keep everything DRY. I don't really need another one.

This said, I might be building an iOS app in the future, if it turns out that I need it. I don't really know what it would look like but it would'nt be just a desktop clone on mobile since I don't think it makes sense. But for now, I'm really happy with the bookmarklet solution and I love the feeling of finding a Judo solution for a problem (Maximum efficiency, minimum effort).

Don't forget to checkout Klart if you're looking for a sane and bootstrapped solution for bookmarks and screenshots 🤓 .