Skip to content(if available)orjump to list(if available)

Kinopio

Kinopio

143 comments

·May 21, 2022

pketh

Oh Hi, I'm the solo creator of Kinopio. Before this, I was the designer and co-creator of Glitch. I'll go through and answer things, feel free to AMA.

If you're curious about me or about the process of designing/creating, these blog posts might be helpful:

- https://pketh.org/how-kinopio-is-made.html

- https://pketh.org/designing-for-thinking.html

- https://pketh.org/the-first-four-years-of-glitch.html

gabereiser

I was about to say that the design language of this site feels exactly like glitch. No wonder. Congrats on the launch!

stagas

Hey congrats on the launch! The site looks amazing, i've been digging into everything. There's a lot more going on than what seems at first glance and it's super fun to peek around and discover :D - can you share a little more details about the backend and how you manage to keep all these in sync, seems to be a lot of work there as well and it'd be interesting to learn more about your tools/process. It's very rare to see creative projects like these that go beyond a simple PoC and actually have plenty of effort and development behind them, so many kudos also for that, it's very hard to manage both creativity and sticking to a plan (i'd be interested in learning how you manage that as well :) Is this app part of the solution? Thanks and keep it up!

pketh

Sure! I wrote this to explains most of it

https://pketh.org/how-i-build.html

let me know if you have other Qs

zkid18

Hey! Congrats on the launch. Love the emerging thought and products around spatial web apps. Building the company in adjacent space – www.spatial.chat let's chat one day. feel free to dm in twi: @kidrulit

ktavera

spatial chat concept is great, love what you've done with it.

pketh

that's super cool, spatial.chat looks really polished. I'm @pketh too btw :)

mertnesvat

Congrats on the launch! I'm also a fan of glitch so congrats on that good job too.

Just out of curiosity have been reading the engineering part and came across with below for not using websockets, confused because debounce and throttle is mainly used to avoid many updates over sockets so it's very well known problem for reactive programming

( https://pketh.org/how-kinopio-is-made.html )

> You might be wondering, why don’t you just update the database with websockets instead of relatively slow API requests?

> The problem with saving data with websockets is that they’re too fast. Authenticating that many messages per second and writing them to disk would be really inefficient. E.g. If you’re moving a card from position x: 20 to x: 420, Kinopio will use websockets to broadcast many updates during the move: moving card x to 21, moving card x to 24, moving card x to 28… potentially hundreds of messages.

pketh

That's a good point, and I should look into that (it's been a while since I touched that part of the codebase). Off-hand my guess is that the other reason I handle api requests separately is because I can group multiple actions into a single request more easily, which isn't something I need to do with websocket streaming

throwaway4good

I can see it is using one big canvas element; what draws on that canvas - is that vue.js, some other framework or a bespoke setup?

pketh

that's bespoke, I use canvas for the painting action that allows bulk select

eps

Glitch as in that dorky MMO game that resulted in Slack as a spin-off?

pketh

the thing after it, the web development tool/community

https://pketh.org/the-first-four-years-of-glitch.html

eps

Ah, so it's something else with the same name. Never heard of it, sorry.

roguas

Congrats, love the design - doesn't feel like typical flat/material/lowestdenominator style that is absurdly popular. Feels like the old web we all miss.

stavros

Is the name Greek?

pketh

In Japanese it means mushroom, not sure what else (the nintendo character toad is called kinopio-kun in japan). But really I just randomly stumbled on it years ago and it sounded unique and interesting to me

rjh29

In Japanese mushroom is kinoko. kinopio is the name for Toad, probably comes from kinoko but doesn't mean anything by itself :)

gryson

The Nintendo character Kinopio (Toad) is a play on words:

kinoko (mushroom) +

Pinocchio

stavros

Ahh, ok. It means "publish/share" in Greek.

drakonka

This is so cool. I love the aesthetic and UX. The only thing is, I really wish I could self-host this. This seems like just the kind of thing I'd use for personal journaling brainstorms, and I'd really love to be able to just have that kind of data locally or self-hosted in my own location of choice.

pketh

I get that, it's hard to do self-hosting with a commercial product, but something I'll look into in the future for sure

drakonka

Yeah, I understand. I'd be happy to pay a higher one-time fee for the software, or still do it on a monthly charge basis (I understand there'd be enforcement difficulties with that though).

spicyusername

Infinite canvas apps are such a great way to brainstorm.

Kinopio has a little more... personality, but I use an infinite canvas app called Concepts when brainstorming for work or play.

https://concepts.app/

kaliszad

What do you love about Concepts? Do you pay for a subscription (and how much is it - I must be blind or I just can't find it on the website)?

spicyusername

It has a slick interface and has a "rightsized" feature-set, not too many, not too few. Just enough to be productive without overwhelming you with options.

mahmutc

I've installed android application and it showed around $2-3 per month for subscription. But I'm pretty sure it should be different in another country or for web.

sureglymop

I use concepts on an ipad pro for drawing and i bought the subscription for a few dollars. I prefer it over other drawing apps for ipad because it's vector based.

ptato

The design is really cool, but the tool is useless (to me) if I can't use it offline and store the data on my own hardware. For some reason everyone in this space is building cloud tools!

sagarm

From https://help.kinopio.club/posts/how-your-data-is-stored/:

" Without an Account

Your user and spaces data lives entirely on your own computer, in your browser localStorage. Because it is not sent to a server, you can't share your spaces or access your spaces from another device.

If you clear your browser's cache and delete your cookies you will be removing your kinopio data.

To keep your data safe, share and collaborate, and edit your spaces from all your devices sign up for an account at any time.

With an Account

Your user and spaces data lives on both your own computer and on the kinopio servers.

You can safely clear your browser cache and cookies without losing any data. "

The5thElephant

Working on a project in a similar space and the vast majority of people I have spoken to have said they don't care if it is in the cloud and find managing files on their devices to be a huge hassle. I think the Hacker News audience is a bit out of touch with the ways most people use their tools and devices.

ptato

I did say "to me"!

SemanticStrengh

web apps can be totally offline via localstorage and some PWA APIs, it's just not widespreadely in use unfortunately

ptato

localStorage is nice but what I really love are files, in a folder, on my computer :D

capableweb

localStorage is in a file, on your computer ;) For Firefox/Linux, it's in webappsstore.sqlite (guessing the same file exists for Windows/macOS too but can't verify, and Chrome probably have something similar).

Less fun: many "offline-capable" web apps that leverages PWA APIs/localStorage usually often allow you to download/upload a JSON representation of your data. I think I remember a graph drawing tool that allow you to do just that, but can't find a link to it right now.

thomaspaillot

Shameless plug, I work on an app called Stemic, a different take on the same problem than Kinopio is trying to solve. https://stemic.app

SamBam

I created one note, deleted it, scrolled to the bottom, and tried to create another.

From then on, everything was broken. Taps didn't create cards, scrolling became janky, sometimes I'd see the pink circle of a tap from something I did 10 seconds previous, and in the wrong place.

The was repeatable when I exited the site and came back in.

Android Pixel 6 Firefox 100.2.0

pketh

Hey SamBam,

Ya Android is the only platform that currently has this bug (and a couple others). It's hard to diagnose, but I'm working on it. Sorry about that!

SemanticStrengh

It'd be nice to have a Ionic app in the future!

xhfloz

One of my favorite people and websites out there :)

pketh

Thanks xhfloz, I love what you're doing with mmm.page too!

lexx

I love both products. Not currently using them, but thanks guys for warming my heart

programmertote

When I saw "Kinopio", I thought it's about Toad character (my favorite) in Super Mario universe. :) But I'm still pleasantly surprised to see a site that looks very unique.

I wonder if the word "Kinopio" means something other than Toad in Japanese (maybe someone here who knows Japanese can answer?)

YeezyMode

Straight from Wikipedia: Kinopio, which is a mixture of the word for mushroom (“kinoko”) and the Japanese version of Pinocchio (“pinokio”). Those blend to be something along the lines of “A Real Mushroom Boy.”

pketh

> “A Real Mushroom Boy.”

Sometimes that's how I feel about myself

culi

So far from this thread, in terms of "spatial knowledge gardening" tools I have to try out:

- https://stemic.app/

- https://roamresearch.com/

- https://kinopio.club/

- https://mmm.page/

- http://concepts.app/

- https://vienna.earth/

nammi

I used this and it's really cool, but like others the fact I didn't have my files on disk made it way less useful

hammerbrostime

What is your process for designing a vector-laden ui like this? Are you coding and drawing? How did you get to this?

pketh

In this case I started with some mockups a looong time ago, and I've been building primarily in code ever since.

Maybe helpful:

- https://pketh.org/designing-for-thinking.html

- https://pketh.org/how-i-build.html

- https://pketh.org/glitch-look-and-feels.html

IceHegel

2D canvas is by far the most natural way to brainstorm.

I've been using the Vienna beta (https://vienna.earth) but am interested to see how this compares. So far I like Vienna for visual stuff - but going to try this for mind mapping.

pambea

Never been a huge fan of mind mapping. You have to kind of force the information into a certain structure, whereas with a paper/canvas, you can just put everything down without connecting stuff with lines.

pketh

I'm also not a huge fan of traditional mind mapping (which uses a single tree and everything has to be connected). With Kinopio if you want to put everything down where you want it without connecting stuff with lines you can totally do that :)

alakep

Would brainstorm with pen and paper only. Publishing thoughts and brainstorms to friends is the only thing I would use a tool online for

IceHegel

There are some cases where it needs to be digital. Paper is great for smaller projects, but it doesn't scale.

jack19

Honestly mind mapping is a waste of time, just trying to look smart

pketh

kinopio isn't traditional mind mapping, think of it as just writing stuff down wherever until it makes sense. Hopefully we can agree that clear writing comes from clear thinking.

alakep

Really wanna try Vienna. Been on their waitlist

null

[deleted]