1
00:00:00,000 --> 00:00:03,708
I think another way to frame that
is with the idea of resiliency.

2
00:00:03,738 --> 00:00:06,288
When Kinopio  first launched,
it was like front page of

3
00:00:06,288 --> 00:00:07,648
Hacker News for a little while.

4
00:00:07,871 --> 00:00:11,721
A hundred thousand people visited it like
pretty fast, but because the server didn't

5
00:00:11,721 --> 00:00:15,151
even know about them, cause they were
mostly  checking it out in their browser.

6
00:00:15,235 --> 00:00:16,465
Like nothing went wrong.

7
00:00:16,645 --> 00:00:19,945
I barely noticed, because  I didn't
have to worry about like, Hey,

8
00:00:19,945 --> 00:00:21,345
now there's 100, 000 accounts.

9
00:00:21,345 --> 00:00:25,085
And now my database is like inflated
or, now my server's on fire.

10
00:00:25,586 --> 00:00:27,566
Welcome to the Local-First FM podcast.

11
00:00:28,056 --> 00:00:32,036
I'm your host, Johan Schickling, and I'm
a web developer, a startup founder, and

12
00:00:32,036 --> 00:00:33,926
love the craft of software engineering.

13
00:00:34,526 --> 00:00:38,126
For the past few years, I've been on a
journey to build a modern, high quality

14
00:00:38,126 --> 00:00:39,916
music app using web technologies.

15
00:00:40,316 --> 00:00:44,336
And in doing so, I've been falling down
the rabbit hole of Local-First software.

16
00:00:44,896 --> 00:00:48,006
This podcast is your invitation
to join me on that journey.

17
00:00:48,258 --> 00:00:52,968
In this episode, I'm speaking to Pirijan
Ketheswaran, the creator of Kinopio, a

18
00:00:52,968 --> 00:00:55,098
playful canvas-based tool for thought.

19
00:00:55,498 --> 00:00:58,448
He's also the co creator
of the online IDE Glitch.

20
00:00:58,928 --> 00:01:03,138
In this conversation, we talk about
his journey as a creative, including

21
00:01:03,138 --> 00:01:07,358
his time at Fog Creek and later
building Kinopio as a solo developer.

22
00:01:07,958 --> 00:01:11,128
Before getting started, also a
big thank you to Expo and Crab

23
00:01:11,128 --> 00:01:12,918
Nebula for supporting this podcast.

24
00:01:13,378 --> 00:01:15,348
And now my interview with Pirijan.

25
00:01:17,304 --> 00:01:19,094
Hey Pirijan, nice to meet you.

26
00:01:19,144 --> 00:01:20,904
Thank you so much for coming on the show.

27
00:01:20,904 --> 00:01:21,664
How are you doing?

28
00:01:21,874 --> 00:01:22,754
Hey, thanks for having me.

29
00:01:22,754 --> 00:01:23,984
I'm doing quite well.

30
00:01:24,764 --> 00:01:28,494
So for those of us who don't know you,
could you give a quick background?

31
00:01:29,184 --> 00:01:29,524
Sure.

32
00:01:29,524 --> 00:01:29,834
Yeah.

33
00:01:29,834 --> 00:01:31,074
So my name's Pirijan.

34
00:01:31,094 --> 00:01:37,424
Uh, I'm the creator and mostly sole
developer and designer of Kinopio.

35
00:01:37,444 --> 00:01:40,494
club, uh, a mind mapping
and creative thinking tool.

36
00:01:40,684 --> 00:01:44,354
Uh, but before that I worked
at Fog Creek, um, and.

37
00:01:44,554 --> 00:01:48,814
Uh, specifically, uh, at a time
where the Trello office was there

38
00:01:48,814 --> 00:01:50,634
and Stack Overflow had just spun out.

39
00:01:50,704 --> 00:01:53,624
And I eventually went
on to co create Glitch.

40
00:01:53,774 --> 00:01:56,964
com, the, uh, web editing
development environment.

41
00:01:57,074 --> 00:01:59,344
Uh, that's just a cool
community of building apps.

42
00:01:59,474 --> 00:02:00,834
That sounds fascinating.

43
00:02:00,894 --> 00:02:05,559
So, Maybe some of us have heard
of Trello and Stack Overflow, or

44
00:02:05,559 --> 00:02:09,309
certainly have heard of those, but
maybe not quite about Fog Creek.

45
00:02:09,539 --> 00:02:12,789
So I think that's quite a long
journey, but could you give a bit more

46
00:02:12,809 --> 00:02:17,559
background on Fog Creek and the really
monumental projects that came out of it?

47
00:02:18,004 --> 00:02:23,164
Yeah, so Fog Creek, as I understand
it, was founded by Joel Sposky and

48
00:02:23,224 --> 00:02:26,384
Michael Pryor, way back when, a
long time ago, in New York City.

49
00:02:26,434 --> 00:02:29,864
Their premise was, let's make the best
place for programmers to work, which was

50
00:02:29,864 --> 00:02:32,414
a wild and crazy concept at the time.

51
00:02:32,474 --> 00:02:36,419
And from there, um, Fog Creek
kind of acted as an incubator.

52
00:02:36,429 --> 00:02:41,729
So they developed Stack Overflow and
they, let's see, I'm trying to remember

53
00:02:41,729 --> 00:02:45,389
the timeline here, but, um, eventually
Stack Overflow got really big and they

54
00:02:45,389 --> 00:02:49,389
moved to a slightly different building
in the New York financial district.

55
00:02:49,669 --> 00:02:54,709
And Trello grew the same way and for
a long time shared the office with Fog

56
00:02:54,709 --> 00:02:58,729
Creek and Fog Creek would develop its
own bug tracker which kind of they used

57
00:02:58,729 --> 00:03:03,639
to fund the development of new projects
and the third project that was being

58
00:03:03,639 --> 00:03:05,719
developed after Trello was Glitch.

59
00:03:05,884 --> 00:03:10,864
So how did you find your way to Fog
Creek and what led you to work on Glitch?

60
00:03:11,044 --> 00:03:11,494
Oh, wow.

61
00:03:11,494 --> 00:03:11,994
Okay.

62
00:03:12,054 --> 00:03:16,574
So it actually kind of came from a couple
of jobs I've been working at previously.

63
00:03:16,604 --> 00:03:19,394
So I went to school actually
for biology and urban planning.

64
00:03:19,424 --> 00:03:25,324
And while as an urban planner, I kind
of got into a love for map making

65
00:03:25,344 --> 00:03:27,294
and visualizations and illustration.

66
00:03:27,344 --> 00:03:30,804
And that kind of led me to a job
in tech where I started as an

67
00:03:30,804 --> 00:03:34,304
illustrator, then became a designer
and then became a developer.

68
00:03:34,474 --> 00:03:37,454
To build things that I designed,
it's kind of a trial by fire.

69
00:03:37,454 --> 00:03:41,634
But in all those jobs, the other thing
that was new to me was using a bug tracker

70
00:03:41,644 --> 00:03:46,214
and a lot of the companies that I worked
for, uh, used Fog Bugs, the Fog Creek

71
00:03:46,214 --> 00:03:51,064
bug tracker, and it wasn't the greatest
product and it kind of inspired me.

72
00:03:51,349 --> 00:03:55,589
To like want to make a better version,
like as a designer first, I kind of

73
00:03:55,589 --> 00:03:58,349
came up with concepts and new ideas.

74
00:03:58,359 --> 00:04:02,509
Like how could Fog Bugs work if it was
designed around more of a human workflow

75
00:04:02,509 --> 00:04:04,169
as opposed to more of a managerial one.

76
00:04:04,199 --> 00:04:07,989
And so I put a lot of those mock ups up
on Dribbble when Dribbble was a thing.

77
00:04:08,079 --> 00:04:11,919
And the leadership from Fog Creek saw
it, uh, flew me over to New York and

78
00:04:11,919 --> 00:04:15,239
asked me if I wanted to work there
and eventually that's what I did.

79
00:04:15,564 --> 00:04:16,634
That sounds amazing.

80
00:04:16,704 --> 00:04:19,834
So yeah, tell me a bit more
about like how Glitch then came

81
00:04:19,834 --> 00:04:21,524
to be and how it took shape.

82
00:04:21,614 --> 00:04:26,614
And I think you also shared some of the
design principles that you arrived at

83
00:04:26,614 --> 00:04:30,704
for, for Glitch on a great blog post
that we'll also link in the show notes.

84
00:04:31,104 --> 00:04:33,054
So I'm curious to learn more about that.

85
00:04:33,314 --> 00:04:33,714
Sure.

86
00:04:33,754 --> 00:04:34,074
Yeah.

87
00:04:34,074 --> 00:04:38,094
So, so at the time they had
Trello and Stack Overflow, and

88
00:04:38,094 --> 00:04:40,064
both were really big successes.

89
00:04:40,154 --> 00:04:44,014
Now Trello was still independent,
so it wasn't bought by Atlassian

90
00:04:44,014 --> 00:04:47,054
at the time and was also on its
way to be a really big success.

91
00:04:47,104 --> 00:04:50,924
And the company leadership
wanted to figure out what

92
00:04:50,924 --> 00:04:51,824
they were going to do next.

93
00:04:51,824 --> 00:04:53,634
What would be their third big thing?

94
00:04:53,664 --> 00:04:57,784
So what they did was they held what they
called a Creek Week, which was a couple

95
00:04:57,784 --> 00:05:01,154
of people who were interested, could
independently arrange teams and come up

96
00:05:01,154 --> 00:05:03,364
with like ideas of what we should work on.

97
00:05:03,544 --> 00:05:04,674
And there were some pretty good ideas.

98
00:05:05,134 --> 00:05:08,424
But the one that eventually
went out was the one by me and

99
00:05:08,424 --> 00:05:10,744
Daniel X that became Glitch.

100
00:05:10,764 --> 00:05:14,614
It was a web development interface
where you didn't have to download

101
00:05:14,614 --> 00:05:16,654
an ID or set up a server.

102
00:05:16,969 --> 00:05:19,699
Or, you know, figure out how
Git works or anything like that.

103
00:05:19,699 --> 00:05:21,889
You just start typing
and you have a real Node.

104
00:05:21,889 --> 00:05:24,459
js app at your fingertips immediately.

105
00:05:24,559 --> 00:05:29,989
And so, yeah, like over time, we sort
of, every week we build it a little

106
00:05:29,989 --> 00:05:33,409
bit more and demo it to leadership
and every week it would crash.

107
00:05:33,559 --> 00:05:36,279
And then one day they were just
like, Hey, what if we added.

108
00:05:36,634 --> 00:05:40,814
real time collaboration to this and so
that's what we did and that's what it

109
00:05:40,824 --> 00:05:45,304
has and you know like it started as like
this project where we were working really

110
00:05:45,304 --> 00:05:50,144
closely with Joel and then eventually
the rest of the company as the team

111
00:05:50,144 --> 00:05:56,364
opened up and yeah it eventually grew to
subsume so unfortunately, um, Fog Creek

112
00:05:56,364 --> 00:05:58,494
is like pretty much dead as a company.

113
00:05:58,544 --> 00:06:02,334
Glitch, it kind of got renamed to
Glitch and then Glitch was bought.

114
00:06:03,274 --> 00:06:07,274
Well, as they say, all good
things come to an end, but it's,

115
00:06:07,284 --> 00:06:09,164
it's been a phenomenal product.

116
00:06:09,224 --> 00:06:14,924
And I think it had just such a distinct
vibe and visual aesthetic and feel

117
00:06:14,924 --> 00:06:19,254
to it, particularly at a time when I
remember like a lot of products just

118
00:06:19,254 --> 00:06:23,924
kind of felt the same, like spoke the
same, imitated the same design language.

119
00:06:24,324 --> 00:06:27,984
And Glitch really like, not just the
name stood out, but the visuals, like

120
00:06:28,014 --> 00:06:29,964
the feel of it, all of it stood out.

121
00:06:30,394 --> 00:06:33,394
So I'm curious, like, what was
the inspiration for that and

122
00:06:33,394 --> 00:06:34,394
what was the goal for that?

123
00:06:34,494 --> 00:06:34,814
Yeah.

124
00:06:34,814 --> 00:06:36,834
Glitch was actually a
really interesting project.

125
00:06:36,864 --> 00:06:40,254
I mean, I guess in a lot of ways it was
a dream project because you get to make

126
00:06:40,254 --> 00:06:45,094
a product from the beginning, kind of
help define the team and you're doing

127
00:06:45,094 --> 00:06:48,744
so like without having to worry about
money, which is like pretty amazing.

128
00:06:48,774 --> 00:06:50,024
The big bet on Glitch was that.

129
00:06:50,439 --> 00:06:52,289
There's a middle market of developers.

130
00:06:52,299 --> 00:06:56,229
So everybody knows there's the pro
developer who's like, I am on Vim all day.

131
00:06:56,459 --> 00:06:58,679
I can SSH into whatever,
and I'm super great.

132
00:06:58,939 --> 00:07:02,979
And then there's the beginner side, which
is like, Hey, I'm learning MIT scratch.

133
00:07:02,979 --> 00:07:08,629
I'm, I'm doing like, like tutorials
on how to make like, you know, like

134
00:07:08,629 --> 00:07:11,479
a really simple to do list, but then
we thought there's this big kind of

135
00:07:11,519 --> 00:07:17,089
in the middle of these two developer
markets where people want to code with

136
00:07:17,099 --> 00:07:21,929
real code, not like, you know, building
blocks and abstractions, but they also

137
00:07:21,939 --> 00:07:25,849
kind of are kind of turned off by a lot
of the configuration like they could

138
00:07:25,859 --> 00:07:28,049
do it, but it's kind of like a pain.

139
00:07:28,059 --> 00:07:30,359
And if they want to make, like,
a small project or try stuff

140
00:07:30,389 --> 00:07:31,619
out, it's kind of beneath them.

141
00:07:31,749 --> 00:07:32,579
And so that was our bet.

142
00:07:32,599 --> 00:07:35,599
And so, like, we thought, okay, this
is going to be like a different.

143
00:07:35,794 --> 00:07:38,894
market of developers, they're going
to have a different vibe, let's say.

144
00:07:38,924 --> 00:07:43,394
So we tried to get away from the, every
developer tool has to look like serious

145
00:07:43,404 --> 00:07:47,064
fortune 500 enterprise grade, you know,
software and more like, Hey, what's

146
00:07:47,064 --> 00:07:49,734
something, what's the, like a beautiful
thing you would actually want to use?

147
00:07:49,734 --> 00:07:53,044
And we kind of took inspiration
from vintage computers.

148
00:07:53,314 --> 00:07:56,664
Uh, you know, there's a lot of Macintosh,
classic Macintosh inspiration in there,

149
00:07:56,864 --> 00:08:00,764
but we also took inspiration from, I took
inspiration from a little bit of like

150
00:08:00,774 --> 00:08:06,404
pop fashion and also just like, yeah,
burgeoning trends in, in, uh, programming.

151
00:08:06,754 --> 00:08:10,824
That were just happening by people
kind of outside of like the then

152
00:08:10,824 --> 00:08:12,944
classic definition of a programmer.

153
00:08:13,074 --> 00:08:17,684
Yeah, I mean, I, I think you, you greatly
succeeded at the very least of like just

154
00:08:17,784 --> 00:08:23,184
setting Glitch apart in terms of the, the
feel and, and, and using it was so cool.

155
00:08:23,234 --> 00:08:25,383
I remember like I, I
used it for a few years.

156
00:08:25,383 --> 00:08:26,403
Few smaller apps.

157
00:08:26,423 --> 00:08:30,633
And I think we also looked at it back
then at Prisma actually for, for using

158
00:08:30,633 --> 00:08:34,613
it for, for example, apps, but while
like, I think you'd try to really make it

159
00:08:34,613 --> 00:08:39,813
very easily accessible for beginners and
sort of that mid segment of the market.

160
00:08:39,843 --> 00:08:43,103
I'm sure there were many, many
interesting challenges to actually

161
00:08:43,123 --> 00:08:44,873
make the product work under the hood.

162
00:08:45,023 --> 00:08:48,823
Are there any sort of anecdotes
that still come to mind when

163
00:08:48,823 --> 00:08:49,943
you think back of that time?

164
00:08:50,093 --> 00:08:52,473
Yeah, this might be a problem that
doesn't exist anymore, but I think

165
00:08:52,473 --> 00:08:56,133
it's kind of an interesting one to, to
think about even in today's context.

166
00:08:56,133 --> 00:08:59,813
So, you know, nowadays we
have really great browser data

167
00:08:59,813 --> 00:09:01,613
binding frameworks like Vue.

168
00:09:01,613 --> 00:09:02,713
js and, and React.

169
00:09:02,903 --> 00:09:06,953
But back then those projects were either
didn't exist or were very much in their

170
00:09:06,953 --> 00:09:10,763
infancy and definitely not production
grade, even in the relatively small

171
00:09:10,763 --> 00:09:12,833
production grade of Glitch at the time.

172
00:09:13,103 --> 00:09:15,473
So Daniel X, the other co creator.

173
00:09:15,733 --> 00:09:18,943
Of, uh, of glitch, he had
his own pet framework called

174
00:09:18,953 --> 00:09:20,863
Jade and it had data binding.

175
00:09:20,873 --> 00:09:22,163
It kind of did what we wanted to do.

176
00:09:22,163 --> 00:09:26,153
And also obviously we had support by
the person who created like Jade is like

177
00:09:26,153 --> 00:09:30,823
a HTML transpiler, which is renamed to
Pug, but there was another technology.

178
00:09:30,833 --> 00:09:35,823
It was like Jade lit or something Jade
related added data binding functionality

179
00:09:35,953 --> 00:09:38,533
and like a like component state to Jade.

180
00:09:38,873 --> 00:09:40,103
And so we use that.

181
00:09:40,288 --> 00:09:44,708
And it worked really great, but obviously
it came with the problems, um, same

182
00:09:44,708 --> 00:09:47,618
with, we also use CoffeeScript by the
way, but it also all that our tech

183
00:09:47,618 --> 00:09:49,988
stack kind of came into, had issues.

184
00:09:50,048 --> 00:09:55,488
When new people joined, there was a lot to
figure out, a lot of new, crazy wild code.

185
00:09:55,588 --> 00:09:58,128
But yeah, it was like a, it was
like a really interesting place

186
00:09:58,148 --> 00:10:01,888
because we had to build the framework
and the tool, not just the tool.

187
00:10:01,928 --> 00:10:05,378
And I think we made some good choices and
we made some bad choices in that front.

188
00:10:05,583 --> 00:10:09,473
But actually like Daniel X is still
out there creating Civet, which is kind

189
00:10:09,473 --> 00:10:11,093
of like a successor to CoffeeScript.

190
00:10:11,433 --> 00:10:14,163
Uh, he wouldn't let the dream
die, which I think is really cool.

191
00:10:14,213 --> 00:10:19,733
And yeah, I think, um, just being
really early on a technology.

192
00:10:19,773 --> 00:10:23,333
I mean, the web's not really like new or
anything and it wasn't new at the time,

193
00:10:23,333 --> 00:10:27,733
but this idea of web sites as web apps,
single page apps, that was all kind of

194
00:10:27,733 --> 00:10:29,863
like, burgeoning technology at the time.

195
00:10:29,873 --> 00:10:33,213
One of the reasons why Glitch was so
kind of appreciated when it launched, one

196
00:10:33,213 --> 00:10:35,553
was like, you know, the visual design,
which is kind of a little bit of love

197
00:10:35,553 --> 00:10:39,983
hate it, but very memorable, but also
like everything reacted very immediately.

198
00:10:40,043 --> 00:10:42,903
You know, you could rename something
in one panel and see it change

199
00:10:42,903 --> 00:10:46,483
in another panel, which at the
time was like pretty magical.

200
00:10:46,483 --> 00:10:47,733
It's the magic of data binding.

201
00:10:47,733 --> 00:10:50,593
I thought of it as like a
totally new tool for a designer.

202
00:10:50,653 --> 00:10:55,173
Yeah, that certainly rings true of like
those sort of new superpowers that you

203
00:10:55,173 --> 00:10:59,653
slowly but surely like convince yourself
that's possible in the web, but then

204
00:10:59,663 --> 00:11:01,813
also trying to actually make that work.

205
00:11:01,963 --> 00:11:05,693
Particularly so early in the web,
that's kind of going in hard mode.

206
00:11:05,943 --> 00:11:08,843
That seems to be a bit of a
recurring theme across different

207
00:11:08,853 --> 00:11:10,443
episodes that we've done so far.

208
00:11:11,153 --> 00:11:17,213
So I think by now we've like elevated
a little bit to a new plateau of new

209
00:11:17,213 --> 00:11:22,103
challenges, and now we're trying to figure
out like the next generation of problems

210
00:11:22,113 --> 00:11:26,843
where we get new APIs, but there's also
new challenges and new unsolved problems.

211
00:11:27,253 --> 00:11:29,503
So I I'm, but I'm excited about it.

212
00:11:29,553 --> 00:11:30,593
There's lots of.

213
00:11:30,733 --> 00:11:32,403
Good stuff to, to dig into.

214
00:11:32,553 --> 00:11:38,103
So after Fog Creek and working on Glitch,
you've been moving on at some point.

215
00:11:38,183 --> 00:11:42,883
And I'm curious what were like the
questions that were top of mind for you?

216
00:11:42,893 --> 00:11:45,673
Were there any things that you
wanted to explore in particular?

217
00:11:45,913 --> 00:11:46,233
Yeah.

218
00:11:46,233 --> 00:11:50,123
So I kind of took some time off after
working Glitch, either to figure out what

219
00:11:50,123 --> 00:11:54,303
I wanted to make next or what I wanted,
like what I wanted to do essentially.

220
00:11:54,303 --> 00:11:57,523
Like a lot of us after Glitch were a
little burned out on coding and design.

221
00:11:57,533 --> 00:11:57,973
So.

222
00:11:58,168 --> 00:12:01,478
One of the things I kept coming
back to was bug tracking.

223
00:12:01,488 --> 00:12:03,988
So, like, that was how I
got my job at Fog Creek.

224
00:12:04,008 --> 00:12:07,778
But also, like, something I
feel like still wasn't solved.

225
00:12:07,778 --> 00:12:10,528
And actually, to be honest, I
feel like it kind of isn't either.

226
00:12:10,528 --> 00:12:12,568
But I have strong opinions
on bug tracking, actually.

227
00:12:12,568 --> 00:12:16,408
But anyways, what I started
doing was building or designing

228
00:12:16,468 --> 00:12:17,958
a different take on bug tracking.

229
00:12:18,028 --> 00:12:20,048
And it was okay for a time.

230
00:12:20,418 --> 00:12:23,508
Like it was kind of making forward
progress, but when I showed it to

231
00:12:23,518 --> 00:12:27,108
people, even just regular people,
like, and, or developers, neither

232
00:12:27,108 --> 00:12:30,248
groups were very impressed like
they're like, Oh, it's like maybe 1.

233
00:12:30,248 --> 00:12:35,518
2 X better or maybe 2 X better at
most, but it's not 10 X better.

234
00:12:35,518 --> 00:12:38,828
It's not something that would cause
me to like change my habits or,

235
00:12:38,848 --> 00:12:40,228
you know, adopt a different tool.

236
00:12:40,518 --> 00:12:45,238
But it also, it doesn't seem like building
a bug tracker is taking advantage of, of

237
00:12:45,238 --> 00:12:49,428
what you kind of uniquely do, which is,
you know, Design plus development to make

238
00:12:49,428 --> 00:12:51,558
something kind of a little more unique.

239
00:12:51,638 --> 00:12:55,168
And so, you know, I thought about that
feedback for a little while and yeah,

240
00:12:55,168 --> 00:12:57,388
it kind of hit me like a Eureka moment.

241
00:12:57,428 --> 00:12:59,268
All this time I'd been designing things.

242
00:12:59,388 --> 00:13:02,058
I'd been using sketch, which
is, you know, like Mac OS Sigma,

243
00:13:02,328 --> 00:13:03,778
and I'd be using the text tool.

244
00:13:03,808 --> 00:13:07,328
So like I'd have my mock up and then with
the text tool, I'd write like, here's

245
00:13:07,328 --> 00:13:10,198
why I did this thing, or here's what's
missing, or here's what I need to do

246
00:13:10,208 --> 00:13:13,918
using the freeform text tool to just click
anywhere on the canvas and type things.

247
00:13:13,918 --> 00:13:17,098
And I thought, this is
like a really great.

248
00:13:17,438 --> 00:13:21,608
way to like organize my thoughts
and figure out what I'm doing next.

249
00:13:21,688 --> 00:13:24,788
And fundamentally the issue with
bug tracking isn't tracking bugs.

250
00:13:24,788 --> 00:13:27,898
It's communicating between
people about what we need to do.

251
00:13:27,898 --> 00:13:30,248
And I thought, what if
this was the answer?

252
00:13:30,248 --> 00:13:33,088
Like, what if the ability to write
anything anywhere and connect

253
00:13:33,088 --> 00:13:35,028
information to anything anywhere.

254
00:13:35,148 --> 00:13:39,078
And the idea of not having a
structure up front was the product.

255
00:13:39,078 --> 00:13:42,798
Like, what if I could bring this
superpower to like, People who didn't

256
00:13:42,808 --> 00:13:47,018
have design software didn't want to
bother to her have to learn how to use it.

257
00:13:47,048 --> 00:13:49,608
And also design software is
not made for this sort of task.

258
00:13:49,798 --> 00:13:51,858
It doesn't use structured
data for any of this stuff.

259
00:13:52,138 --> 00:13:54,458
So that's kind of where the
original idea for glitch kind

260
00:13:54,458 --> 00:13:55,938
of came from this idea of just.

261
00:13:56,598 --> 00:14:01,118
Clicking anywhere and typing a node
and, you know, free form manipulation

262
00:14:01,118 --> 00:14:04,328
of that, which was a bit more of a
novel concept than it is these days,

263
00:14:04,358 --> 00:14:07,958
but basically from that, I kind of
started and ended up with a mock up

264
00:14:08,058 --> 00:14:12,018
like a design that five years later
still seems like it was pretty accurate.

265
00:14:12,038 --> 00:14:16,158
Like I ended up just building and building
from that and also being kind of moved

266
00:14:16,158 --> 00:14:18,058
in new directions by people's feedback.

267
00:14:18,068 --> 00:14:22,458
And yeah, the, the thing that exists
now is actually eerily similar

268
00:14:22,458 --> 00:14:26,518
to the thing that was kind of
envisioned five, five years ago,

269
00:14:26,518 --> 00:14:27,948
which means it was pretty good idea.

270
00:14:28,208 --> 00:14:31,938
So the, the project that you're
describing is Kinopio, right?

271
00:14:32,038 --> 00:14:32,578
Yes.

272
00:14:32,953 --> 00:14:38,343
So that seems to have originated
from still that urge to figure out

273
00:14:38,343 --> 00:14:42,853
a better way to build a bug tracker,
but I think has evolved since then

274
00:14:42,883 --> 00:14:45,683
in terms of its vision and goals.

275
00:14:45,983 --> 00:14:49,993
So how would you frame today what
the goals and vision for Kinopio is?

276
00:14:50,303 --> 00:14:51,233
Yeah, that's interesting.

277
00:14:51,233 --> 00:14:56,123
I think the goals for Kinopio is to kind
of enable people to think through problems

278
00:14:56,123 --> 00:15:00,173
by themselves or collaboratively without
needing to kind of define a structure

279
00:15:00,173 --> 00:15:04,973
up front, but also being able to, like
add a structure as needed as they go.

280
00:15:04,973 --> 00:15:09,713
And so people can use it for
retrospectives for, for meeting notes

281
00:15:09,713 --> 00:15:13,453
or personal notes, research notes,
but also for like, like traditional

282
00:15:13,453 --> 00:15:16,573
mind mapping and excels at, um, but
I've also seen people use it for

283
00:15:16,573 --> 00:15:18,763
mood boards and personal websites.

284
00:15:18,813 --> 00:15:22,433
It's kind of like a, yeah, it's a,
it's a canvas, but it's a very like

285
00:15:22,433 --> 00:15:26,313
expressive one, but also one that
kind of has like productivity roots.

286
00:15:26,548 --> 00:15:31,518
Yeah, so I definitely encourage
every listener afterwards to go check

287
00:15:31,528 --> 00:15:35,618
out the show notes and open some
of those beautiful Kinopio boards.

288
00:15:35,688 --> 00:15:39,568
They really feel like nothing
you've ever seen on the web.

289
00:15:39,588 --> 00:15:43,178
They feel like very tactile
and playful, et cetera.

290
00:15:43,198 --> 00:15:45,818
So, uh, it just seems very fun.

291
00:15:46,258 --> 00:15:51,828
So I'm curious, what are some of the
design principles that you had in mind

292
00:15:51,848 --> 00:15:53,758
when you designed and built this product?

293
00:15:53,928 --> 00:16:00,308
Um, so I guess I had five main principles,
so I can, I can talk about them.

294
00:16:00,468 --> 00:16:02,268
First to embrace smallness.

295
00:16:02,403 --> 00:16:06,673
To build for fidgetability, to
embrace plain text, to have a simple

296
00:16:06,673 --> 00:16:10,313
interface for mobile and desktop, and
the fifth is to refine by pruning.

297
00:16:10,633 --> 00:16:14,723
But I think overall, at a high, high
level, I kind of wanted to recreate the

298
00:16:14,723 --> 00:16:18,043
feel of interacting tangibly with paper.

299
00:16:18,213 --> 00:16:22,103
And not necessarily do that by imitating
paper, so a lot of apps fall into the the

300
00:16:22,103 --> 00:16:26,013
trap of like, hey, we want to like make
something that feels like a scrapbook.

301
00:16:26,013 --> 00:16:30,193
So let's have like frayed edges
around everything and like a papery

302
00:16:30,193 --> 00:16:34,433
texture and make little like, like
pen noises when you type and stuff.

303
00:16:34,463 --> 00:16:38,983
And actually, I think what makes
tangible or like physical interfaces,

304
00:16:38,983 --> 00:16:42,033
for lack of a better word, feel
good is the immediate feel of that

305
00:16:42,033 --> 00:16:43,513
reaction and the quickness of it.

306
00:16:43,603 --> 00:16:45,873
And I try to carry that
forward in Kinopio.

307
00:16:45,983 --> 00:16:48,953
So you'll notice like you just hover
over a card and it kind of sticks

308
00:16:48,963 --> 00:16:52,043
to your mouth just a little bit to
give you like a like a feeling of

309
00:16:52,043 --> 00:16:56,633
you're just kind of moving your hand
and fidgeting over a piece of paper.

310
00:16:56,783 --> 00:17:00,533
When you go to add information, you're
not presented with like, hey, do

311
00:17:00,533 --> 00:17:02,073
you want to like add a sticky note?

312
00:17:02,073 --> 00:17:04,943
Or do you want to add like
a video clip or an image?

313
00:17:05,103 --> 00:17:06,263
Like you don't have to make a choice.

314
00:17:06,293 --> 00:17:11,423
You just kind of click to add the card
and then you can type whatever you want.

315
00:17:11,453 --> 00:17:14,663
And if you want to add an image, you
can add an image to that card either

316
00:17:14,673 --> 00:17:20,038
by dragging an image or just by pasting
in any web URL, uh, same for websites.

317
00:17:20,088 --> 00:17:25,978
Yeah, it's a sort of like idea of like,
we have text fields, we have regex, with

318
00:17:25,978 --> 00:17:30,798
the combination of those two things, we
know whether something inside that field

319
00:17:30,968 --> 00:17:34,668
is like a link or a file or an image.

320
00:17:35,038 --> 00:17:36,078
We can do the right thing.

321
00:17:36,078 --> 00:17:39,438
We don't have to, like, have a toolbar on
the side of the screen where people have

322
00:17:39,438 --> 00:17:43,568
to, like, before they add any information,
decide what kind of information is it?

323
00:17:43,838 --> 00:17:48,298
I just want to get rid of all that
barriers and just have things as

324
00:17:48,368 --> 00:17:50,508
immediate and fast and fluid as possible.

325
00:17:50,508 --> 00:17:53,298
And I think in that way, you
recreate the feeling of working

326
00:17:53,298 --> 00:17:54,598
with like a physical tool.

327
00:17:54,648 --> 00:17:55,418
I love that.

328
00:17:55,478 --> 00:18:00,638
You draw such a stark contrast compared
to so many other web tools that you're

329
00:18:00,638 --> 00:18:06,618
used to, where I think most tools feel
much more like material UI, et cetera,

330
00:18:06,618 --> 00:18:12,328
like very forum oriented, like very,
like all the inputs feel very similar.

331
00:18:12,348 --> 00:18:17,718
And I think the software that you've
built with Kinopio feel very tactile

332
00:18:17,738 --> 00:18:19,728
and very tangible and very playful.

333
00:18:20,158 --> 00:18:24,798
So I'm curious which sort of patterns
you figured out there that you would also

334
00:18:24,808 --> 00:18:29,028
encourage other builders to embrace more
where you'd say like, Oh, we're kind of

335
00:18:29,088 --> 00:18:31,508
over complicating much of our software.

336
00:18:31,508 --> 00:18:35,488
We could just let the user go with their
intuition and let's just make that work.

337
00:18:35,488 --> 00:18:38,688
So are there any patterns that
you figured out that you thought

338
00:18:38,718 --> 00:18:42,238
like, okay, they might be hard to
implement, but they're really worth it.

339
00:18:42,538 --> 00:18:43,668
Curious to hear more on that.

340
00:18:44,158 --> 00:18:47,618
Yeah, I think the reason a lot of
our tools are the way they are, they

341
00:18:47,618 --> 00:18:51,208
reflect kind of the way the teams
that build those tools are organized.

342
00:18:51,238 --> 00:18:54,268
So you have your engineering team
and you have your design team.

343
00:18:54,578 --> 00:18:58,258
And they both don't fully understand
what's possible, because maybe

344
00:18:58,258 --> 00:19:00,698
they're not speaking to each
other as well as they should be.

345
00:19:00,778 --> 00:19:04,418
But because of that disconnect, the
design team might not understand that,

346
00:19:04,778 --> 00:19:08,793
you know, like anything can be, Intuitive
essentially like you can figure out if

347
00:19:08,793 --> 00:19:13,683
something is some kind of data model, you
know, just based on what it is And they

348
00:19:13,683 --> 00:19:17,993
may just be told here's like the database
model at best and be like we need to fit

349
00:19:18,013 --> 00:19:22,743
things into this essentially Excel chart
make make an interface for this and you

350
00:19:22,743 --> 00:19:26,293
end up with a lot more steps than you you
may not necessarily have and conversely

351
00:19:26,293 --> 00:19:31,223
developers Might see an interface,
propose to them and not really push back

352
00:19:31,223 --> 00:19:35,473
or not want to not necessarily want to
rock the boat too much by explaining,

353
00:19:35,473 --> 00:19:37,203
Hey, maybe we don't need this step.

354
00:19:37,203 --> 00:19:41,663
It kind of requires the programmer
to also kind of take on a little

355
00:19:41,663 --> 00:19:45,603
bit of characteristics of a
designer, like by looking for, Hey,

356
00:19:45,613 --> 00:19:46,813
where are the points of friction?

357
00:19:46,853 --> 00:19:50,113
Can they be reduced maybe in ways
that people don't anticipate?

358
00:19:50,333 --> 00:19:54,153
I guess nowadays, like the hot thing is
AI and maybe there are like legitimately

359
00:19:54,153 --> 00:20:00,058
useful points in an interface where AI
could, could make a difference that people

360
00:20:00,088 --> 00:20:04,328
don't recognize, because again, what one
group knows and what another group knows

361
00:20:04,358 --> 00:20:06,698
may not necessarily be the whole picture.

362
00:20:06,978 --> 00:20:10,468
So you mentioned text, drag
eggs, images, et cetera.

363
00:20:10,498 --> 00:20:14,018
Are there any particular
implementation patterns that you feel

364
00:20:14,018 --> 00:20:15,898
like, okay, this is like a trick.

365
00:20:15,948 --> 00:20:19,418
I'm going to use this across different
projects in the future, no matter what.

366
00:20:19,803 --> 00:20:22,803
Oh, yeah, I think this is becoming more
and more normalized, but I think the

367
00:20:22,803 --> 00:20:27,153
big thing that I still see on a day to
day basis that a lot of apps get wrong

368
00:20:27,193 --> 00:20:30,983
is this idea of like, I'm submitting
some information in a field, whatever

369
00:20:30,983 --> 00:20:35,793
form that field may take, and I've got
to wait for the server to like get that

370
00:20:35,793 --> 00:20:39,303
information and come back to me saying,
hey, it's a 200 before the interface

371
00:20:39,303 --> 00:20:40,913
will let me go on to the next step.

372
00:20:41,173 --> 00:20:42,683
And like 99.

373
00:20:42,723 --> 00:20:45,363
99 percent of the time,
that's going to be a 200.

374
00:20:45,483 --> 00:20:48,688
So I think The interface can
just assume it's good, it's a

375
00:20:48,728 --> 00:20:52,598
200, and just assume success is
what I like to call that pattern.

376
00:20:52,838 --> 00:20:55,348
Uh, if you assume success, then
the user puts an input in and

377
00:20:55,348 --> 00:20:58,098
immediately is able to keep
working on whatever else they want.

378
00:20:58,308 --> 00:21:02,798
If they do multiple things at once,
those atomic inputs just happen and are

379
00:21:02,798 --> 00:21:06,258
assumed to be successful unless they
fail, which is, you know, unlikely.

380
00:21:06,528 --> 00:21:10,453
But, It lets you create like, you
know, really fast, really responsive

381
00:21:10,603 --> 00:21:12,523
to inputs web applications.

382
00:21:12,643 --> 00:21:16,033
So I think another term that's
commonly used to describe this

383
00:21:16,033 --> 00:21:20,563
pattern is optimistic updates, which
I think if you want to take it some

384
00:21:20,563 --> 00:21:22,153
steps further, this is where that.

385
00:21:22,603 --> 00:21:25,563
And certainly points you in
the direction of Local-First.

386
00:21:25,963 --> 00:21:30,813
So based on our prior conversations,
it sounded like you did not build

387
00:21:30,813 --> 00:21:35,583
out Kinopio from the start with like
Local-First as sort of like the technical

388
00:21:35,583 --> 00:21:41,843
goal post in mind, but you've rather
worked on it over time and ended up in a

389
00:21:41,843 --> 00:21:46,723
direction that has many similarities with
Local-First, such as that the app works

390
00:21:46,753 --> 00:21:49,393
offline, it is collaborative, et cetera.

391
00:21:49,503 --> 00:21:51,343
So I'm curious to hear more about.

392
00:21:51,773 --> 00:21:54,773
The similarities that you see
with Local-First and also learn

393
00:21:54,773 --> 00:21:56,153
more about the tech architecture.

394
00:21:56,193 --> 00:21:59,953
Yeah, I guess another way that I'd put it
is like, I only learned about Local-First

395
00:22:00,223 --> 00:22:01,903
after I'd built a Local-First app.

396
00:22:01,923 --> 00:22:04,563
So I didn't know that there was
this community of people like

397
00:22:04,563 --> 00:22:07,543
really pushing for, for that
particular style of building.

398
00:22:07,543 --> 00:22:10,913
But for me, it was kind of a
more natural or organic path.

399
00:22:10,913 --> 00:22:11,403
So, yeah.

400
00:22:11,918 --> 00:22:14,638
Kinopio is the web client
but it's also the server.

401
00:22:14,638 --> 00:22:17,678
The server is a source of truth for
data, especially when you collaborate

402
00:22:17,708 --> 00:22:20,888
or if you switch devices, you need
that information accessible anywhere.

403
00:22:21,028 --> 00:22:23,188
But I didn't start with a
server, I started with just the

404
00:22:23,188 --> 00:22:26,658
client and I, I released pretty
early to get people's feedback.

405
00:22:26,658 --> 00:22:31,053
So, I basically, taking a pattern
from what we did with Glitch, I save

406
00:22:31,073 --> 00:22:35,623
information, your local state essentially,
to local storage in the browser.

407
00:22:35,893 --> 00:22:41,133
So I stringify a JSON object and
throw it in there and deserialize

408
00:22:41,143 --> 00:22:42,933
it as needed to read from it.

409
00:22:42,983 --> 00:22:45,893
Which sounds onerous, but it's
actually really fast, and I still

410
00:22:45,893 --> 00:22:47,203
haven't had a reason to replace it.

411
00:22:47,203 --> 00:22:51,708
But anyways, like, By having that as
sort of like the fundamental source

412
00:22:51,708 --> 00:22:55,968
of information initially, especially,
it's let me, um, do a couple things

413
00:22:55,978 --> 00:22:59,958
that apps don't do is one, it helps
with those optimistic updates.

414
00:23:00,048 --> 00:23:02,488
It lets me load information faster.

415
00:23:02,528 --> 00:23:07,568
So if you refresh Knopio, you don't have
to reload your space or board information.

416
00:23:07,568 --> 00:23:08,408
It's already there.

417
00:23:08,628 --> 00:23:11,918
And then it kind of gets updated
when the source of truth arrives.

418
00:23:12,108 --> 00:23:15,428
If there's any discrepancies, the
other thing it lets me do, uh,

419
00:23:15,448 --> 00:23:16,878
which I think is even more unique.

420
00:23:17,003 --> 00:23:19,443
is you can use Kinopio
without having to sign up.

421
00:23:19,743 --> 00:23:23,393
So you go there and the first
thing you see is this like sample

422
00:23:23,403 --> 00:23:26,323
space, which is kind of shows you
how to use it, but that's a real

423
00:23:26,323 --> 00:23:27,493
space, that's real information.

424
00:23:27,503 --> 00:23:30,833
You can click it, you can edit it, you
can create new spaces and that stuff

425
00:23:30,833 --> 00:23:32,543
will be saved if you choose to sign up.

426
00:23:33,008 --> 00:23:34,458
But it's the complete app.

427
00:23:34,528 --> 00:23:37,138
There's no, nothing in front of
you, which I think is pretty cool.

428
00:23:37,238 --> 00:23:37,538
Yeah.

429
00:23:37,568 --> 00:23:38,568
I love that pattern.

430
00:23:38,618 --> 00:23:43,078
I would love to see that pretty much in
all software, but I think it's really

431
00:23:43,078 --> 00:23:49,458
like a symptom of that most apps are just
like, so server heavy and account heavy

432
00:23:49,728 --> 00:23:55,223
that you basically On a technological
level, like you can't even have an easy

433
00:23:55,223 --> 00:24:00,043
way to make the software work without a
user account with all of that baggage.

434
00:24:00,303 --> 00:24:05,633
But if you build software more in a
Local-First oriented way, then the

435
00:24:05,633 --> 00:24:08,013
software should work no matter what.

436
00:24:08,103 --> 00:24:13,273
And that makes it trivial to have a
fully working version of the app running

437
00:24:13,273 --> 00:24:17,973
locally right in your browser, you can
seed it with like some demo data and

438
00:24:17,973 --> 00:24:23,973
then optionally upgraded into a server
account, et cetera, for collaboration.

439
00:24:24,033 --> 00:24:28,103
But I think this is what this new
generation of Local-First inspired

440
00:24:28,153 --> 00:24:32,663
apps all have in common with the
thinking of something like.TLDraw,

441
00:24:32,708 --> 00:24:36,568
which is a, is a great canvas-based
diagramming tool, which you can

442
00:24:36,568 --> 00:24:39,628
also use right away in your browser.

443
00:24:40,008 --> 00:24:42,458
And it's also has local persistence.

444
00:24:42,468 --> 00:24:43,848
It has collaboration.

445
00:24:44,208 --> 00:24:49,048
So I think this is switching this
around for making software useful out

446
00:24:49,048 --> 00:24:53,858
of the box without you having to sign
up and like pick another password.

447
00:24:54,178 --> 00:24:58,308
I think there's such a obvious
thing in hindsight that just makes

448
00:24:58,308 --> 00:25:01,518
it also much more likely to fall
in love with, with some software.

449
00:25:02,238 --> 00:25:07,008
I think for for new companies especially
or new new startups, it's such a big

450
00:25:07,068 --> 00:25:10,648
advantage if you haven't started that
way and you started with the root

451
00:25:10,648 --> 00:25:14,568
assumption that your app needs accounts
to function, it's really hard to go

452
00:25:14,568 --> 00:25:19,148
back on that, like, it's basically
impossible, but if you've started building

453
00:25:19,148 --> 00:25:24,248
Local-First, this gives you a feature
that that larger giants just can't match.

454
00:25:24,988 --> 00:25:29,038
A common pattern that I've seen is
like that you basically give away

455
00:25:29,038 --> 00:25:33,668
like free anonymous accounts that
you can claim later, but then you

456
00:25:33,668 --> 00:25:37,828
really need to subsidize that and
it's not something you can just do for

457
00:25:37,828 --> 00:25:43,243
free, but if you build Uh, software
Local-First, then there is no thing you

458
00:25:43,243 --> 00:25:47,313
need to subsidize since the software
just like runs in someone's browser.

459
00:25:47,343 --> 00:25:49,433
You don't need to pay anything for that.

460
00:25:49,813 --> 00:25:54,543
So I think, like you say, that gives new
startups huge advantage and I hopefully

461
00:25:54,573 --> 00:25:56,363
becomes table stakes for new products.

462
00:25:57,153 --> 00:25:58,508
I think another way to frame that.

463
00:25:58,698 --> 00:26:01,008
is with the idea of resiliency.

464
00:26:01,038 --> 00:26:04,698
So, you know, when Kinopio kind of
first launched, it was like front page

465
00:26:04,698 --> 00:26:06,168
of Hacker News for a little while.

466
00:26:06,398 --> 00:26:09,978
And you know, a hundred thousand people
visited it like pretty fast, but because

467
00:26:10,028 --> 00:26:13,628
the server didn't even know about them,
cause you know, they were mostly making,

468
00:26:13,638 --> 00:26:14,948
like checking it out in their browser.

469
00:26:14,948 --> 00:26:17,748
And some of them would upgrade, but
are to like sign up for an account.

470
00:26:17,778 --> 00:26:20,468
But a lot of them would just, you know,
kick the tires and maybe come back later.

471
00:26:20,578 --> 00:26:21,808
Like nothing went wrong.

472
00:26:22,038 --> 00:26:22,928
Like nothing mattered.

473
00:26:22,928 --> 00:26:26,338
I barely noticed, because Yeah, I
didn't have to worry about like,

474
00:26:26,338 --> 00:26:27,938
Hey, now there's 100, 000 accounts.

475
00:26:27,938 --> 00:26:31,938
And now my database is like inflated
or, you know, now my server's on fire.

476
00:26:32,433 --> 00:26:36,183
Yeah, and I think this is, you're,
you're touching at a point here that

477
00:26:36,183 --> 00:26:40,723
I'm super bullish about Local-First
software is like, you're, you seem to

478
00:26:40,723 --> 00:26:42,983
be working on Kinopio just by yourself.

479
00:26:43,353 --> 00:26:45,503
And you've been working on
this for, for quite a while.

480
00:26:45,533 --> 00:26:50,123
And you probably reached by now,
like more and more users without

481
00:26:50,183 --> 00:26:55,783
you as a necessity, having to raise
VC money and scale a team, etc.

482
00:26:55,803 --> 00:26:58,763
So given that you can put your focus.

483
00:26:59,113 --> 00:27:03,123
On like making the product better and
not having to babysit a Kubernetes

484
00:27:03,143 --> 00:27:04,623
cluster to handle the load.

485
00:27:04,963 --> 00:27:07,883
I think that's another
benefit of this architecture.

486
00:27:07,983 --> 00:27:11,953
Not having to, to learn what Kubernetes
is also sounds like a big benefit.

487
00:27:11,963 --> 00:27:13,603
It's uh, it seems like a lot.

488
00:27:13,623 --> 00:27:15,113
I'm on like the broke boy.

489
00:27:15,463 --> 00:27:17,463
Heroku plan, and it's still fine.

490
00:27:17,763 --> 00:27:18,583
That's amazing.

491
00:27:18,673 --> 00:27:23,233
So you've shared a little bit of like how
the technical architecture works in terms

492
00:27:23,233 --> 00:27:28,123
of local state management and how you're
persisting data and reading data from and

493
00:27:28,123 --> 00:27:34,573
to local storage, but you can also share
Kinopio boards between users and even

494
00:27:34,573 --> 00:27:36,813
collaborate on them, probably real time.

495
00:27:37,123 --> 00:27:41,473
So curious to hear more how that is
working, how you've implemented that and

496
00:27:41,473 --> 00:27:43,323
which sort of challenges you've run into.

497
00:27:43,678 --> 00:27:48,178
Sure, yeah, to enable that stuff is,
is precisely why I did end up adding

498
00:27:48,178 --> 00:27:50,148
a server early on in Kinopio's life.

499
00:27:50,208 --> 00:27:52,408
So the way it works is
it's pretty conventional.

500
00:27:52,408 --> 00:27:56,148
Um, all the things that change
your local, your local storage

501
00:27:56,148 --> 00:27:58,478
state also shoot up an update.

502
00:27:58,738 --> 00:27:59,698
To the server.

503
00:27:59,758 --> 00:28:02,398
Um, so there's a source of truth
database for all that stuff.

504
00:28:02,688 --> 00:28:05,198
And, you know, all that's
connected to your own user account.

505
00:28:05,198 --> 00:28:08,718
So when you sign on on another device,
like your phone, you have the same

506
00:28:08,718 --> 00:28:13,168
information in terms of the real time
collaboration stuff, I'm essentially

507
00:28:13,168 --> 00:28:16,868
sending a small version of those
transformations over a web socket to the

508
00:28:16,868 --> 00:28:20,968
server, which sees who are the clients
connected to this particular space of

509
00:28:20,968 --> 00:28:23,278
the time beams, those updates to them.

510
00:28:23,608 --> 00:28:26,898
And those people have their own
local storage or local state.

511
00:28:27,018 --> 00:28:29,118
And local storage
updated at the same time.

512
00:28:29,118 --> 00:28:33,768
So it's actually, I'm using like the
same, like atomic update system, but I'm

513
00:28:33,768 --> 00:28:38,508
using it in three very different contexts,
local storage over API requests where

514
00:28:38,508 --> 00:28:42,458
things are authenticated and through
WebSockets where they're very fast.

515
00:28:42,538 --> 00:28:45,668
And the things that you're sending
over the WebSockets, is this

516
00:28:45,668 --> 00:28:49,848
the entire board state that you
send over or is updates events?

517
00:28:49,858 --> 00:28:51,518
Can you describe a bit
more how that works?

518
00:28:52,128 --> 00:28:53,018
Purely updates.

519
00:28:53,028 --> 00:28:57,408
So when you load up, like somebody
invites you to a space, so you click the

520
00:28:57,408 --> 00:29:00,588
invite link, Kinopio, the web client,
will open, see, hey, you're trying to

521
00:29:00,588 --> 00:29:04,468
load up this particular URL with an
ID that doesn't, that isn't already

522
00:29:04,468 --> 00:29:06,318
existing in your own local storage.

523
00:29:06,318 --> 00:29:09,018
So I'm going to ask the server,
hey, pull this down for me.

524
00:29:09,278 --> 00:29:15,188
And so that'll all come in one big, you
know, space, blob or clump of, of JSON.

525
00:29:15,228 --> 00:29:19,108
And as you make updates, iterative
updates while you collaborate, like

526
00:29:19,108 --> 00:29:22,818
move a card around, type in some
text, those will all just be like

527
00:29:22,818 --> 00:29:26,328
little update card operations that are
sent to all the clients in the API.

528
00:29:26,958 --> 00:29:27,368
Got it.

529
00:29:27,468 --> 00:29:33,148
So given that Kinopio is not just like a
more traditional web app where you have

530
00:29:33,168 --> 00:29:39,648
tons of forms and like pages and routes,
et cetera, but it's a spatial canvas.

531
00:29:39,718 --> 00:29:44,248
This seems to be a more common
way now, how software is laid out.

532
00:29:44,398 --> 00:29:48,238
I've never built a canvas-based
app myself, but I'm very interested

533
00:29:48,248 --> 00:29:49,478
in learning more about it.

534
00:29:49,868 --> 00:29:53,788
So I'm curious whether you can
share some of your learnings.

535
00:29:53,963 --> 00:29:56,013
about building a canvas-based tool?

536
00:29:56,173 --> 00:29:59,343
Fundamentally, there are two
main different approaches

537
00:29:59,363 --> 00:30:00,423
when you build a canvas.

538
00:30:00,753 --> 00:30:05,053
So the first approach is you can
build it sort of like a website where

539
00:30:05,063 --> 00:30:09,043
each card is a dom node and you know,
absolutely positioned and you just

540
00:30:09,043 --> 00:30:10,793
kind of move it around with transforms.

541
00:30:11,163 --> 00:30:15,893
Um, the upside of that is it's really fast
and you know, like it'll work everywhere.

542
00:30:15,953 --> 00:30:19,823
The downside is there's a lot of like
interactions you do on a canvas, like

543
00:30:20,123 --> 00:30:21,743
pinch zooming and things like that.

544
00:30:22,703 --> 00:30:27,023
are not really handled well by all
browsers out of the gate, especially

545
00:30:27,063 --> 00:30:30,543
iOS Safari and, and Android Chrome,
for that matter, does a really

546
00:30:30,573 --> 00:30:31,883
poor job in some of these things.

547
00:30:32,163 --> 00:30:37,163
So for example, like I have a UI on my, on
my page and I, but I also have my canvas.

548
00:30:37,183 --> 00:30:41,343
If I pinch zoom the phone, I'm zooming in
the whole thing, including the UI, which

549
00:30:41,383 --> 00:30:43,583
makes the buttons look wild and crazy.

550
00:30:43,673 --> 00:30:44,583
And I don't want to do that.

551
00:30:44,613 --> 00:30:49,123
I can also like add like special touch
handlers to only zoom in that part of

552
00:30:49,123 --> 00:30:53,073
the canvas, but it's really hard to do
it in a way Where it doesn't just crash

553
00:30:53,073 --> 00:30:57,033
the browser because the transformed
texture of the page gets gets too big.

554
00:30:57,213 --> 00:31:01,573
So a Kinopio document can be like tens of
thousands of pixels wide or deep, right?

555
00:31:01,623 --> 00:31:03,203
So it's really hard to design around that.

556
00:31:03,453 --> 00:31:08,743
The second approach, which is by far the
more popular approach, is to recreate

557
00:31:08,753 --> 00:31:14,373
the whole canvas in the HTML canvas
element or some some similar type of

558
00:31:14,858 --> 00:31:18,248
rendering that you control and you
have really fine grained thing over.

559
00:31:18,448 --> 00:31:22,578
And so the upside of that is you have
full control over pinching and zooming.

560
00:31:22,588 --> 00:31:25,418
You can tell things to, to leave space.

561
00:31:25,478 --> 00:31:30,588
The viewport like intersection observer
equivalent, um, is a lot more reliable.

562
00:31:31,378 --> 00:31:34,528
So browsers don't always report their
positions, especially on mobile,

563
00:31:34,628 --> 00:31:37,498
accurately to web apps, as I've found.

564
00:31:37,768 --> 00:31:40,538
And so, being able to control
every part of the rendering

565
00:31:40,538 --> 00:31:42,508
process means you control it.

566
00:31:42,568 --> 00:31:45,768
You can make things appear
precisely how you want to.

567
00:31:46,248 --> 00:31:50,738
The downside is you have to, you lose all
the things you get for free on the web.

568
00:31:50,778 --> 00:31:53,078
You lose accessibility, you lose speed.

569
00:31:53,158 --> 00:31:56,463
You lose like, you know, like special
touch handling and other things like that.

570
00:31:56,463 --> 00:31:59,893
And you have to build it in yourself,
or more likely you don't really.

571
00:32:00,243 --> 00:32:03,943
And you kind of have a canvas
that works great on like desktop

572
00:32:03,943 --> 00:32:05,603
computers, but not so much elsewhere.

573
00:32:05,783 --> 00:32:10,053
And so because of that, Kinopio uses
the first approach, which is fast, but.

574
00:32:10,353 --> 00:32:15,523
It requires a lot of work to not be janky
and I, I do my best, I'll say that much.

575
00:32:15,673 --> 00:32:19,263
Any particular patterns that
you figured out for that first

576
00:32:19,303 --> 00:32:20,493
approach that you laid out?

577
00:32:20,643 --> 00:32:24,073
Yeah, so there's a thing that
I do called counterscaling.

578
00:32:24,333 --> 00:32:28,673
So essentially when you pinch the
screen on mobile, the whole page

579
00:32:28,673 --> 00:32:30,493
will zoom up, including the UI.

580
00:32:30,703 --> 00:32:34,323
But what I do with the UI is I
tell it to scale itself down.

581
00:32:34,323 --> 00:32:37,713
So if let's say you pinched in and
the page is now 2x, I tell the UI.

582
00:32:38,223 --> 00:32:39,913
Hey, it looks like the page is 2x.

583
00:32:40,133 --> 00:32:42,613
Maybe zoom yourself down,
scale yourself down to 0.

584
00:32:42,613 --> 00:32:43,473
5x.

585
00:32:43,713 --> 00:32:47,703
And so it kind of like net makes
the UI look the correct size.

586
00:32:47,803 --> 00:32:51,283
So I'm basically like making the UI
smaller so that it appears regular

587
00:32:51,283 --> 00:32:52,753
size while you're doing this.

588
00:32:52,813 --> 00:32:56,223
What I found though is that
browsers, mobile browsers don't send

589
00:32:56,343 --> 00:32:59,473
resized data and pinch zoom data
as quickly as you interact with it.

590
00:32:59,483 --> 00:33:02,583
A lot of events happen in the
browser that just aren't reported.

591
00:33:02,598 --> 00:33:05,088
To the browser, because they
don't want to like, you know, blow

592
00:33:05,088 --> 00:33:06,398
up the JavaScript or whatever.

593
00:33:06,458 --> 00:33:09,928
There's like little tricks that
you do to kind of work around that.

594
00:33:09,928 --> 00:33:13,858
So like, I will fade in the UI during
like touch events so that you don't

595
00:33:13,858 --> 00:33:16,978
see things like jitter around as
they're, they're struggling to resize.

596
00:33:17,208 --> 00:33:20,348
So yeah, I've learned a lot
about how mobile browsers operate

597
00:33:20,358 --> 00:33:21,668
differently than desktop ones.

598
00:33:21,668 --> 00:33:23,348
And, uh, it's, it's a lot.

599
00:33:23,368 --> 00:33:26,988
Would you still choose approach
number one, as opposed to

600
00:33:27,018 --> 00:33:28,258
the canvas-based approach?

601
00:33:28,518 --> 00:33:30,398
I think I would, because I've tried like.

602
00:33:30,593 --> 00:33:34,543
a couple times to, to redo
Kanopio with different approaches.

603
00:33:34,613 --> 00:33:37,513
The other big downside of the
canvas-based approach is it

604
00:33:37,513 --> 00:33:39,933
also makes iteration way harder.

605
00:33:40,253 --> 00:33:44,203
Like adding new features when you have to
also render them or like, you know, like,

606
00:33:44,223 --> 00:33:48,683
like at a lower level and figure out how
to just work around that sort of stuff.

607
00:33:48,803 --> 00:33:52,223
And you don't have like, you
know, the normal flex box type

608
00:33:52,233 --> 00:33:53,833
positioning flow and things like that.

609
00:33:53,853 --> 00:33:55,503
It's a, it's a lot more tricky.

610
00:33:55,683 --> 00:33:58,423
And so I think it's kind of
like I've chosen the net best

611
00:33:58,423 --> 00:33:59,903
approach, at least for Kinopio.

612
00:34:00,043 --> 00:34:03,413
And the one that I've kind of embraced
because one of the other advantages

613
00:34:03,503 --> 00:34:07,883
of doing a full canvas rendering
is you can scroll in 360 degrees.

614
00:34:08,123 --> 00:34:11,763
And with Kinopio, you can only scroll
down and to the right as much as you want.

615
00:34:11,963 --> 00:34:14,528
But because of that constraint,
You always know where the

616
00:34:14,528 --> 00:34:16,508
beginning of the document is.

617
00:34:16,518 --> 00:34:20,618
It's always in the top left for the
most part, as opposed to other canvas

618
00:34:20,618 --> 00:34:23,788
tools where it can be like in the
center of the page, which might not

619
00:34:23,788 --> 00:34:26,488
be visible depending on the size of
your device and you've got to kind of

620
00:34:26,498 --> 00:34:27,958
scroll around to figure things out.

621
00:34:28,208 --> 00:34:29,208
That's super cool.

622
00:34:29,373 --> 00:34:35,083
In regards to the real time collaboration,
so you can share boards with other people

623
00:34:35,093 --> 00:34:36,923
and like work on them at the same time.

624
00:34:37,003 --> 00:34:41,833
Are you going even further to have like
a sense of presence across collaborators?

625
00:34:42,013 --> 00:34:46,393
You can do see other people's
cursors or how did you think about

626
00:34:46,403 --> 00:34:47,733
designing those interactions?

627
00:34:47,973 --> 00:34:51,683
So, Kinopio has this kind of unique
feature called Paint Select or Magic

628
00:34:51,683 --> 00:34:55,753
Paint and basically it lets you select
multiple cards to do bulk actions, like

629
00:34:55,753 --> 00:34:59,373
move them all together, but it lets
you paint over them to select them.

630
00:34:59,393 --> 00:35:04,313
So instead of drawing a box, you can
kind of like make more kind of unique

631
00:35:04,383 --> 00:35:07,953
selections by painting over and it was
kind of also a way to like bridge this

632
00:35:07,953 --> 00:35:10,873
gap between the right side of your
brain and the left side of your brain.

633
00:35:11,103 --> 00:35:14,213
And so the paint stroke kind of disappears
as you're paint selecting, there's like

634
00:35:14,213 --> 00:35:16,903
a exponential decay function there.

635
00:35:17,173 --> 00:35:21,613
And so I also I show those same paint
strokes for other people looking at

636
00:35:21,613 --> 00:35:23,023
your space or interacting with it.

637
00:35:23,243 --> 00:35:26,573
So as you're moving around, you see
their paint strokes kind of moving

638
00:35:26,573 --> 00:35:28,323
around and fading in the background.

639
00:35:28,323 --> 00:35:30,613
You also see their user icons
kind of floating around.

640
00:35:30,613 --> 00:35:34,463
So it kind of creates more than
just like the cursor plus user icon.

641
00:35:34,463 --> 00:35:38,073
It kind of creates more of like a feeling
of like, Oh, like these people are

642
00:35:38,073 --> 00:35:40,663
like, or someone's really interacting
with the space or maybe somebody is

643
00:35:40,663 --> 00:35:41,883
just noodling around in the space.

644
00:35:41,883 --> 00:35:44,843
I can just see their paint strokes and
they're trying to spell out words or

645
00:35:44,843 --> 00:35:47,033
draw things before the paint fades away.

646
00:35:47,163 --> 00:35:48,193
That is super cool.

647
00:35:48,243 --> 00:35:48,643
Yeah.

648
00:35:48,673 --> 00:35:53,113
This is, I think goes back to the design
principles that did you laid out initially

649
00:35:53,513 --> 00:35:58,383
and how you're not directly imitating
paper, but you figure out like what is

650
00:35:58,663 --> 00:36:02,153
the best mechanism here for, for this
medium and the goals you're going for.

651
00:36:02,548 --> 00:36:08,778
So going back to the canvas, I recently
read that I think Obsidian has launched

652
00:36:08,808 --> 00:36:11,128
an initiative called JSON Canvas.

653
00:36:11,788 --> 00:36:15,708
Um, if I remember correctly, and I
think there, do you have some plans

654
00:36:15,758 --> 00:36:18,028
to, to also like integrate with that?

655
00:36:18,168 --> 00:36:22,538
Funny you should mention, I literally,
um, just yesterday launched, uh, Kinopio

656
00:36:22,568 --> 00:36:27,648
support for full import and export, uh,
you know, um, exporting with that, with

657
00:36:27,648 --> 00:36:29,538
that file format, the canvas file format.

658
00:36:30,163 --> 00:36:31,183
So they launched it yesterday.

659
00:36:31,223 --> 00:36:33,073
I really quickly added it yesterday.

660
00:36:33,393 --> 00:36:37,893
So can you share a little bit more about
why that would be useful for, for people?

661
00:36:37,953 --> 00:36:38,233
Sure.

662
00:36:38,233 --> 00:36:38,483
Yeah.

663
00:36:38,483 --> 00:36:43,343
So for the longest time there hasn't been
like a great interop document format.

664
00:36:43,423 --> 00:36:48,653
So of course, each different app has
its own JSON representation of nodes

665
00:36:48,653 --> 00:36:51,143
or cards and edges or connection lines.

666
00:36:51,293 --> 00:36:53,193
But they're not, they're all app specific.

667
00:36:53,263 --> 00:36:55,633
So, you know, it's kind of tough
if you're trying to, you know,

668
00:36:55,943 --> 00:36:59,213
Migrate from one tool or another
or test out one tool or another.

669
00:36:59,273 --> 00:37:01,973
And so the closest equivalent we
had before, just for a little bit of

670
00:37:01,973 --> 00:37:06,603
historical context was OPML, which is also
like kind of a, an off requested feature,

671
00:37:06,703 --> 00:37:09,093
an OPML was kind of made for outliners.

672
00:37:09,103 --> 00:37:14,093
So like collapsible nested tree and you
know, structures I can indent now dent.

673
00:37:14,423 --> 00:37:19,203
The problem with OPML is it doesn't handle
what happens if you have multiple trees

674
00:37:19,213 --> 00:37:22,013
that aren't connected to each other,
or you have multiple trees that might

675
00:37:22,013 --> 00:37:23,993
have child node that they both share.

676
00:37:24,213 --> 00:37:26,623
You know, like you can, you can
create structures that are way

677
00:37:26,623 --> 00:37:29,263
more complex than OPML can capture.

678
00:37:29,523 --> 00:37:32,333
And so I just couldn't figure
out how to do it with OPML.

679
00:37:32,393 --> 00:37:36,933
So I followed the spec for a while and,
and when Capano and Obsidian launched

680
00:37:36,933 --> 00:37:41,033
it, I, I was already kind of in a rework
of the importing and exporting system.

681
00:37:41,053 --> 00:37:42,683
So it's a very simple spec.

682
00:37:42,683 --> 00:37:45,923
It doesn't cover every feature
that either app has, I'm sure.

683
00:37:46,183 --> 00:37:48,553
But the advantage of that is
it's also very easy to implement.

684
00:37:48,563 --> 00:37:49,463
So, you know, it's different.

685
00:37:49,823 --> 00:37:52,983
Transforming from one JSON
object to another, essentially.

686
00:37:53,183 --> 00:37:53,533
Got it.

687
00:37:53,593 --> 00:37:58,333
And I suppose that while the spec
is like very open ended in some

688
00:37:58,333 --> 00:38:03,023
way, maybe that converges to,
towards some more details over time.

689
00:38:03,373 --> 00:38:07,593
And the idea would be that I can
bring some data from one tool,

690
00:38:07,593 --> 00:38:12,923
for example, Obsidian into Kinopio
or the other way around or future

691
00:38:12,923 --> 00:38:14,293
tools that might, might exist.

692
00:38:14,573 --> 00:38:15,073
Yeah.

693
00:38:15,103 --> 00:38:17,333
It's, but there are wrinkles because.

694
00:38:17,743 --> 00:38:19,963
Of how different these tools
are, or at least how different

695
00:38:19,963 --> 00:38:21,263
Kinopio is from all of them.

696
00:38:21,283 --> 00:38:24,883
So there are assumptions and I've,
I've left like feedback about these

697
00:38:24,893 --> 00:38:28,833
things in, in GitHub issues for the
spec, but there are like assumptions

698
00:38:28,833 --> 00:38:32,763
that they make like, um, the node
has to define like how wide it is

699
00:38:32,763 --> 00:38:35,533
explicitly, or what type of node is it?

700
00:38:35,533 --> 00:38:36,833
Is it a file node?

701
00:38:36,833 --> 00:38:39,733
Is there a, you know, like
a website node or whatever.

702
00:38:39,783 --> 00:38:45,428
So problems with both of these is that
like the width, Of one app's node for the

703
00:38:45,428 --> 00:38:49,328
same amount of text might be different for
another app because they're all rendering

704
00:38:49,328 --> 00:38:51,218
it differently in Kinopio's case.

705
00:38:51,218 --> 00:38:52,018
There's also this.

706
00:38:52,208 --> 00:38:53,528
It's also mobile compatible.

707
00:38:53,548 --> 00:38:57,838
So there's a bit extra of padding
and sizing for touch friendliness.

708
00:38:57,848 --> 00:39:00,268
So those numbers don't really translate.

709
00:39:00,318 --> 00:39:02,348
And so it's kind of weird that
they're required in the spec

710
00:39:02,348 --> 00:39:03,498
as opposed to being optional.

711
00:39:03,528 --> 00:39:04,968
Second issue was the node type.

712
00:39:05,208 --> 00:39:06,978
So I can mention a long time ago.

713
00:39:07,228 --> 00:39:10,358
Or earlier in this chat, you know, a
lot of apps make you choose, like, Hey,

714
00:39:10,358 --> 00:39:11,428
are you going to insert a web page?

715
00:39:11,428 --> 00:39:12,358
Are you going to sort of whatever?

716
00:39:12,578 --> 00:39:14,158
On Kinopio, they're all the same type.

717
00:39:14,168 --> 00:39:17,598
They're all just, there's only one
type of card, a text card, and whatever

718
00:39:17,638 --> 00:39:20,748
type of content you put in that,
whether it's a link or a website or

719
00:39:20,748 --> 00:39:24,598
whatever, is what that card transforms
into using the power of regexes.

720
00:39:24,978 --> 00:39:28,608
And so that part of the whole
spec is basically, like, not

721
00:39:28,608 --> 00:39:30,058
necessarily relevant to Kinopio.

722
00:39:30,098 --> 00:39:33,228
Didn't really connect because
It's making the assumption

723
00:39:33,228 --> 00:39:34,728
that that isn't really shared.

724
00:39:34,798 --> 00:39:38,818
So in some ways I think it's too
specific in some ways it's, and I'm sure

725
00:39:38,818 --> 00:39:42,338
a lot and a lot of people's complaint
is that it's not specific enough.

726
00:39:42,338 --> 00:39:45,278
So it's weird because like
it's really hard to make a

727
00:39:45,278 --> 00:39:47,038
spec for wildly different apps.

728
00:39:47,068 --> 00:39:50,568
But I think currently I'm actually
pretty happy with the spec because it

729
00:39:50,568 --> 00:39:55,558
captures like the most important part,
which is the representation of cards

730
00:39:55,578 --> 00:40:00,608
and nodes in a way that doesn't require
them to have this strict tree structure.

731
00:40:00,618 --> 00:40:00,638
Yeah.

732
00:40:00,778 --> 00:40:01,858
That makes a lot of sense.

733
00:40:01,898 --> 00:40:06,188
And yeah, I mean, the devil's always in
the detail and you built Kinopio really

734
00:40:06,188 --> 00:40:11,608
to enable the sort of interactions and
details that you uniquely thought about.

735
00:40:11,638 --> 00:40:17,138
And you might not have that entropy
available in Obsidian and vice versa.

736
00:40:17,458 --> 00:40:20,278
And then it's also, how do
you preserve that intent and

737
00:40:20,408 --> 00:40:22,068
that information across apps?

738
00:40:22,118 --> 00:40:27,053
That's, that's a very tricky problem,
but I, I applaud the initiative to take

739
00:40:27,053 --> 00:40:32,043
some first steps there to at least bring
some data across one app to another.

740
00:40:32,043 --> 00:40:37,663
So that sort of cross app collaboration,
I think that is certainly a goal that I'm

741
00:40:37,663 --> 00:40:42,623
rooting for, but that we still have like
many chapters still ahead of us there.

742
00:40:42,848 --> 00:40:48,608
So the way I've built Kenopio, it's super
impressive, both in terms of like how

743
00:40:48,608 --> 00:40:54,778
the product feels and works and looks,
but also like, given that you've been

744
00:40:54,788 --> 00:40:59,568
on this journey for, for such a long
time, uh, by, by yourself, I'm curious

745
00:40:59,668 --> 00:41:04,278
which corners you might've already cut
along the way that you regret looking

746
00:41:04,288 --> 00:41:10,103
back where you wish you would have like
spent up front or vice versa where you

747
00:41:10,103 --> 00:41:13,513
thought something might be a problem
and it never actually became a problem.

748
00:41:13,893 --> 00:41:14,353
Oh, wow.

749
00:41:14,353 --> 00:41:14,643
Yeah.

750
00:41:14,643 --> 00:41:16,883
There's, there's
definitely a lot of those.

751
00:41:16,893 --> 00:41:21,553
So like, there's like a lot of code kind
of like with the syncing engine, uh, and

752
00:41:21,553 --> 00:41:25,813
the way I merge, um, different changes
to make smaller change sets that get

753
00:41:25,813 --> 00:41:27,793
sent to the server, but I feel like.

754
00:41:27,993 --> 00:41:32,223
are a little hard to work around now
in just in terms of like just how gross

755
00:41:32,233 --> 00:41:36,483
that code is or how like abstractive
and I wish I did a better job writing

756
00:41:36,483 --> 00:41:39,603
it like it's not it's not something
that's painted me into too harsh a

757
00:41:39,603 --> 00:41:42,733
corner it's just something I'm like
oh I'm scared to touch this part of

758
00:41:42,733 --> 00:41:47,233
the app but one day I'll just you know
buckle down and and really get to it.

759
00:41:47,313 --> 00:41:52,033
So I actually think the app is in a
pretty good place just because um I

760
00:41:52,043 --> 00:41:57,043
guess the other thing is like I prefer
to like write code that's like, not

761
00:41:57,043 --> 00:42:00,393
necessarily for me to understand now,
but for me to understand in like two

762
00:42:00,393 --> 00:42:05,143
months or three months or five years from
now, where I forget what the S variable

763
00:42:05,533 --> 00:42:07,953
or the A variable is referring to.

764
00:42:07,983 --> 00:42:12,903
So I, I, I was like kind of influenced
by, by some short time, like,

765
00:42:13,168 --> 00:42:16,518
Coding for Apple platforms where
they're very verbose with variables.

766
00:42:16,518 --> 00:42:20,758
I kind of took some of that
Coco convention into my own

767
00:42:20,788 --> 00:42:21,958
kind of code writing style.

768
00:42:22,078 --> 00:42:23,928
Yeah, I think that's very wise.

769
00:42:23,988 --> 00:42:28,798
Uh, I've made the same observation
about myself since in reality, even

770
00:42:28,808 --> 00:42:32,268
if you just work by yourself, you
still collaborate with yourself.

771
00:42:32,948 --> 00:42:34,730
Over time more instances of you over
time the future you, the past you.

772
00:42:34,730 --> 00:42:34,748
who do not the same
context right in your brain

773
00:42:42,548 --> 00:42:48,208
So just like leaving notes for yourself
of like, why did you do a certain

774
00:42:48,208 --> 00:42:53,618
thing has, I, I've had to learn that
lesson painfully and I'm treating my

775
00:42:53,618 --> 00:42:59,278
future self better or I'm trying to,
so, uh, it looks like you've learned

776
00:42:59,438 --> 00:43:01,178
quite a couple of similar lessons, but

777
00:43:01,513 --> 00:43:04,883
Yeah, I think we all kind of learn that,
but we all have to, like, burn ourselves

778
00:43:04,883 --> 00:43:06,393
a little bit before we truly learn it.

779
00:43:06,393 --> 00:43:09,173
Because it's not, like, an
intuitive thing to know.

780
00:43:09,393 --> 00:43:12,383
And it is, like, in an industry that's
always trying to, like, move fast and

781
00:43:12,383 --> 00:43:16,613
ship fast and whatever, it's a little,
it's mildly antithetical to that.

782
00:43:16,633 --> 00:43:20,063
But it is one of those things where,
take a little extra time to write

783
00:43:20,063 --> 00:43:23,123
that good comment, it'll save you
so much more time down the road.

784
00:43:23,288 --> 00:43:27,558
So you've been on this journey by
yourself now for quite a while after

785
00:43:27,898 --> 00:43:33,118
being in a more conventional team
context at Fog Creek working on Glitch.

786
00:43:33,178 --> 00:43:35,508
I'm curious whether you can
reflect a little bit on that

787
00:43:35,508 --> 00:43:37,608
journey now working on Kinopio.

788
00:43:37,788 --> 00:43:38,798
What are the good things?

789
00:43:38,798 --> 00:43:40,148
What are the challenging things?

790
00:43:40,148 --> 00:43:42,568
What are the things you wish
you would have known before

791
00:43:42,598 --> 00:43:43,898
embarking on this journey?

792
00:43:44,018 --> 00:43:47,208
Yeah, there's definitely pros and
cons to, to working by yourself

793
00:43:47,208 --> 00:43:49,348
or for yourself versus in a team.

794
00:43:49,348 --> 00:43:51,688
The obvious things are like, yo,
camaraderie when you're having a bad

795
00:43:51,688 --> 00:43:55,668
day, you know,, you're in it with
other people and, and, you know,

796
00:43:55,668 --> 00:43:58,988
like the pain can be absorbed by many
people kind of thing or the struggle.

797
00:43:59,118 --> 00:44:02,308
But actually in reality, like, I
don't, I kind of work alone, but I

798
00:44:02,308 --> 00:44:05,118
also kind of don't in the sense of
like, there are other creators building

799
00:44:05,128 --> 00:44:07,398
great projects out there like MM doc.

800
00:44:07,418 --> 00:44:09,308
page or TL draw, et cetera.

801
00:44:09,598 --> 00:44:13,018
Uh, and so it's kind of like, Even though
some of them are sort of competitors in

802
00:44:13,018 --> 00:44:16,988
the way, but sort of not like Muse as
well, because we're all kind of on that

803
00:44:16,988 --> 00:44:20,448
same hill, we're all kind of struggling
and we're all kind of in a similar place.

804
00:44:20,578 --> 00:44:23,358
It kind of acts as like a de facto
team, even though you're not necessarily

805
00:44:23,358 --> 00:44:24,998
like in contact with them every day.

806
00:44:25,308 --> 00:44:27,828
Uh, they're also the companies
that I've contracted for, like

807
00:44:27,838 --> 00:44:31,538
Futureland, which is also kind of
like a early stage startupy company.

808
00:44:31,818 --> 00:44:35,148
I can see that they have similar
challenges that I have in terms of, you

809
00:44:35,148 --> 00:44:38,008
know, getting the word out and stuff
like that, or just refining the product.

810
00:44:38,008 --> 00:44:38,468
And so.

811
00:44:38,963 --> 00:44:42,573
In that sense, it's like, I think,
I think you mitigate like a lot of

812
00:44:42,573 --> 00:44:46,563
the sort of downsides of, of not
being in a, in a large organization.

813
00:44:46,783 --> 00:44:50,113
But I also kind of like, like in
addition to sometimes working as a

814
00:44:50,113 --> 00:44:54,583
contractor, I also employ contractors
or I'm starting to, and so I've

815
00:44:54,583 --> 00:44:58,683
gotten some really great database
performance optimizations, um, from a

816
00:44:58,683 --> 00:45:00,863
friend named Lucas who I met in Bali.

817
00:45:00,923 --> 00:45:01,133
Yeah.

818
00:45:01,133 --> 00:45:04,323
These are things like, Oh, I like wrote
the indexes wrong and I didn't know how

819
00:45:04,323 --> 00:45:06,373
to check them or like, Hey, I could.

820
00:45:06,583 --> 00:45:10,713
Make merge these database calls
into one simpler one to make like

821
00:45:10,713 --> 00:45:12,323
really dramatic beat improvements.

822
00:45:12,543 --> 00:45:16,493
And so, like, it is great, you
know, finally having just a

823
00:45:16,493 --> 00:45:19,373
little bit of the resources to
be able to do that sort of thing.

824
00:45:19,373 --> 00:45:22,733
And I kind of want to continue to
new more and down the path until

825
00:45:22,733 --> 00:45:24,063
it sort of stops making sense.

826
00:45:24,323 --> 00:45:27,553
Yeah, like, it's kind of one of
those things where you see, I feel

827
00:45:27,553 --> 00:45:30,643
like I've learned what works and
what doesn't from my time working

828
00:45:30,733 --> 00:45:31,923
at other people's companies.

829
00:45:31,923 --> 00:45:36,293
And I'm kind of, you know, Testing all
those hypotheses now, uh, as I build

830
00:45:36,293 --> 00:45:40,253
Knopio and, and, you know, ideally
sharing in my blog and on Twitter and

831
00:45:40,253 --> 00:45:43,823
whatnot, how that's working out and
what I was wrong about or right about.

832
00:45:43,923 --> 00:45:44,253
Yeah.

833
00:45:44,583 --> 00:45:47,893
Thank you so much for taking the
effort of, of sharing your, your

834
00:45:47,893 --> 00:45:50,193
learnings and experiences there.

835
00:45:50,413 --> 00:45:54,243
Highly recommend for, for every
listener to check out your blog that

836
00:45:54,283 --> 00:45:58,351
has its own very unique style, in
the same way as Kinopio has its own

837
00:45:58,351 --> 00:46:02,521
style, your blog has like a very
organic style, which I really like.

838
00:46:02,531 --> 00:46:06,791
It's very inviting to, to read about your,
your different blog posts, et cetera.

839
00:46:06,901 --> 00:46:10,501
I guess, speaking of organic and that
blog, like one of the funny things about

840
00:46:10,501 --> 00:46:14,511
it is it's actually like extremely organic
in the sense of like, I designed the first

841
00:46:14,511 --> 00:46:19,966
version of that blog in 2014 or before
that on a trip to when I was interviewing

842
00:46:19,966 --> 00:46:24,176
at Flickr, newly bought by Yahoo in
San Francisco, back when they used to

843
00:46:24,176 --> 00:46:26,376
fly you out for tech job interviews.

844
00:46:26,506 --> 00:46:30,376
And so I'd, I'd built lots of like
blogs in the past, like personal

845
00:46:30,376 --> 00:46:32,666
blogs, but I kind of wanted like
something new back in the day.

846
00:46:32,666 --> 00:46:36,086
That was a de regard thing to
like start a blog and then get

847
00:46:36,086 --> 00:46:37,466
bored of it and start a new one.

848
00:46:37,686 --> 00:46:41,576
And so this is the one that stuck, but
essentially like, Over the years, I've

849
00:46:41,576 --> 00:46:46,126
been like slowly tweaking design and
slowly adding features like blog post

850
00:46:46,136 --> 00:46:48,176
tags and actually a couple months ago.

851
00:46:48,176 --> 00:46:50,736
I just added commenting and
before that, like a little bit

852
00:46:50,736 --> 00:46:52,036
of newsletter functionality.

853
00:46:52,076 --> 00:46:54,566
So it is very much like this thing.

854
00:46:54,566 --> 00:46:56,506
That's kind of collected pieces of it.

855
00:46:56,791 --> 00:46:57,911
As it's rolled down a hill.

856
00:46:57,991 --> 00:46:58,401
Yeah.

857
00:46:58,451 --> 00:47:04,011
I think there's also this term of digital
gardening, which I am also very drawn to.

858
00:47:04,061 --> 00:47:10,121
I have not evolved yet myself to, to
reach that level of like organic feel.

859
00:47:10,151 --> 00:47:14,441
I think my blog right now is like
much more neutral and traditional.

860
00:47:14,731 --> 00:47:15,091
So.

861
00:47:15,556 --> 00:47:20,426
You've mentioned initially that
you didn't always happen to be an

862
00:47:20,436 --> 00:47:24,256
engineer and a designer, but you
found your way towards design and

863
00:47:24,256 --> 00:47:28,916
engineering by actually starting out
studying biology and urban planning.

864
00:47:29,216 --> 00:47:32,796
So, I'm curious to learn more about
that journey and that transition

865
00:47:33,166 --> 00:47:36,876
and which sort of maybe unique
perspectives this has given you.

866
00:47:37,016 --> 00:47:39,426
Yeah, I went to school for biology
and then I did my grad studies in

867
00:47:39,436 --> 00:47:42,596
urban planning, basically because I
like SimCity and initially because

868
00:47:42,626 --> 00:47:45,496
for biology, because I didn't have
anything else to do in university.

869
00:47:45,646 --> 00:47:48,996
Uh, but from there, like from, especially
from the urban planning side, I'd

870
00:47:48,996 --> 00:47:52,571
always been doing, like, using Adobe
Illustrator for like illustrations and

871
00:47:52,571 --> 00:47:54,131
stuff just for friends and for fun.

872
00:47:54,351 --> 00:47:58,651
But in grad school, I also had to do like
mapping and more formal presentations.

873
00:47:58,651 --> 00:48:01,791
And one of the things I sort of
realized in that environment was like,

874
00:48:01,811 --> 00:48:05,271
we'd have to present this like huge
paper and we'd have these like little

875
00:48:05,271 --> 00:48:08,471
dioramas to go with it with like,
you know, figures and maps and stuff.

876
00:48:08,741 --> 00:48:11,691
And all the people grading it
didn't read the papers because

877
00:48:11,691 --> 00:48:12,531
they were boring as fuck.

878
00:48:12,531 --> 00:48:13,821
They're just like policy and stuff.

879
00:48:14,171 --> 00:48:17,021
But they would be like,
wow, this is so cool.

880
00:48:17,031 --> 00:48:17,561
Wow.

881
00:48:18,041 --> 00:48:22,401
the use of fonts and whatever and great
colors and stuff and so yeah it kind of

882
00:48:22,451 --> 00:48:27,341
like taught me that like oh okay like even
like the most like unapproachable or high

883
00:48:27,341 --> 00:48:31,341
minded academia types they're all kind of
drawn to like what's beautiful or what's

884
00:48:31,341 --> 00:48:35,926
shiny we're all just animals at the end
of the day so It kind of made me, like,

885
00:48:36,086 --> 00:48:39,736
leave the urban planning world and go
more into, like, the illustration world.

886
00:48:39,976 --> 00:48:43,486
And that's where I kind of got my first
job in tech as a staff illustrator for

887
00:48:43,486 --> 00:48:44,796
a company that did, like, banner ads.

888
00:48:44,796 --> 00:48:46,796
Definitely the dregs back in the day.

889
00:48:47,076 --> 00:48:50,866
Um, but from there I did design
work for them, like app design

890
00:48:50,866 --> 00:48:53,616
work, and then from there got
pushed into doing more development

891
00:48:53,626 --> 00:48:55,456
to build things that I designed.

892
00:48:55,706 --> 00:48:58,286
Uh, it was a real kind of
trial by fire situation.

893
00:48:58,336 --> 00:49:02,056
Um, But that's how, that's how
this kind of thing started.

894
00:49:02,156 --> 00:49:04,926
It all started with illustration,
then design, then building

895
00:49:04,926 --> 00:49:05,856
the things that I designed.

896
00:49:06,326 --> 00:49:10,276
Are there some learnings that you
take away from biology or urban

897
00:49:10,276 --> 00:49:14,486
planning that you now apply to
designing or to software engineering?

898
00:49:14,826 --> 00:49:18,386
I guess kind of at a high level way, like
biology and urban planning are both sort

899
00:49:18,386 --> 00:49:23,981
of the The study of systems, like the
systems in your body, or the systems of

900
00:49:23,981 --> 00:49:29,471
how traffic flows on the street, or how,
you know, like cities develop, um, from

901
00:49:29,471 --> 00:49:34,861
like medieval towns into regimented grid,
like, uh, structures and and streets.

902
00:49:34,991 --> 00:49:36,301
And so I guess, um.

903
00:49:36,541 --> 00:49:40,111
One example is like when you see like
how people organize themselves and

904
00:49:40,111 --> 00:49:43,771
their teams or how they, you know,
like identify their projects, there

905
00:49:43,771 --> 00:49:45,281
are kind of a lot of similarities.

906
00:49:45,281 --> 00:49:48,701
It's almost like a pale imitation
of biology and city planning

907
00:49:49,131 --> 00:49:51,451
or in terms of the complexity.

908
00:49:51,481 --> 00:49:55,991
But so I'm really inspired by, like,
the biological process mitosis for one,

909
00:49:56,021 --> 00:50:00,591
where an individual cell gets really
big over time and at a certain point,

910
00:50:00,861 --> 00:50:05,431
moving information from the edge of the
cell to the middle, like the nucleus,

911
00:50:05,431 --> 00:50:07,776
where all the processing is done.

912
00:50:07,896 --> 00:50:11,096
Um, the high level thinking is
done gets it takes too long.

913
00:50:11,146 --> 00:50:15,646
And so what a cell does is instead
of, like, adding scaffolding or trying

914
00:50:15,646 --> 00:50:20,456
to, you know like make that, that
cell more complex than it should be.

915
00:50:20,656 --> 00:50:25,196
It just splits itself into two pieces,
obtaining like the core parts from

916
00:50:25,196 --> 00:50:28,826
both so that each little, little new
piece can be much more efficient.

917
00:50:28,826 --> 00:50:32,256
And I think, you know, that's something
that like, that we do when we try and

918
00:50:32,256 --> 00:50:37,146
like cut down scope, break a big problem
into small problems, or just, you know,

919
00:50:37,156 --> 00:50:39,726
break a big document into little ones.

920
00:50:39,806 --> 00:50:43,406
And that's also why I like, That's
also kind of the heart of the thinking

921
00:50:43,446 --> 00:50:48,116
of cards as an atomic unit of thought
with a character limit, kind of

922
00:50:48,116 --> 00:50:49,776
like a tweet level character limit.

923
00:50:49,986 --> 00:50:53,776
It's because it, that constraint
does force you to think

924
00:50:53,786 --> 00:50:54,966
more, I guess you could say.

925
00:50:55,216 --> 00:50:56,826
Yeah, this is fascinating.

926
00:50:56,846 --> 00:51:01,781
I think there's so many, Ideals in
software engineering that I'm drawn

927
00:51:01,781 --> 00:51:08,031
to such as like composability and like
principle of like locality and now that

928
00:51:08,041 --> 00:51:12,351
you say it, uh, those are like nature
got that figured out like long time

929
00:51:12,351 --> 00:51:17,721
ago where like all of our organs and
like on a much smaller scale, this all

930
00:51:17,721 --> 00:51:22,921
composes and there's things emerging,
us emerging, civilizations emerging.

931
00:51:23,261 --> 00:51:29,076
So yeah, I think there's the great
Case study to study nature and be

932
00:51:29,076 --> 00:51:31,026
inspired for building better products.

933
00:51:31,446 --> 00:51:32,156
Yeah, absolutely.

934
00:51:32,166 --> 00:51:34,676
It's one of those things where you
see it and then you can't unsee it.

935
00:51:35,026 --> 00:51:35,496
Yeah.

936
00:51:35,526 --> 00:51:37,766
Thank you so much for, for
sharing that perspective.

937
00:51:38,256 --> 00:51:43,836
So you're not just a great engineer, but
also a great designer that shows in like

938
00:51:43,846 --> 00:51:45,466
all the products that you're building.

939
00:51:45,706 --> 00:51:50,106
And I think that sort of intersection
of being an engineer and a designer,

940
00:51:50,356 --> 00:51:54,626
I think that's a, Rare trade
that I feel myself very drawn to.

941
00:51:54,626 --> 00:51:56,076
And I want to learn more about that.

942
00:51:56,176 --> 00:52:01,116
Are there any sort of hints or
words of advice that you would

943
00:52:01,116 --> 00:52:05,276
give people how they can, as an
engineer, become a better designer?

944
00:52:05,356 --> 00:52:07,406
Yeah, that's a great question.

945
00:52:07,406 --> 00:52:11,796
I think a lot of the, the applications we
have now, like one example, uh, that we

946
00:52:11,796 --> 00:52:14,871
talked about with, you know, you submit a
form and then you've got to wait For the

947
00:52:14,871 --> 00:52:19,601
form response to come back from the server
before the app lets you do other things.

948
00:52:19,601 --> 00:52:23,681
And a lot of that is caused by a
disassociation or a separation between

949
00:52:23,701 --> 00:52:25,131
what a designer thinks is possible.

950
00:52:25,131 --> 00:52:29,571
And when an engineer is like, like
their level of interest in the design.

951
00:52:29,831 --> 00:52:33,411
And so I think if to answer the question
of like a programmer wanting to do

952
00:52:33,411 --> 00:52:37,861
more design, I think a trap people
fall into is like, there's two traps.

953
00:52:38,121 --> 00:52:41,171
One is, Hey, I need to figure out
how to make things look better.

954
00:52:41,301 --> 00:52:44,841
Pretty before I start and like, you know,
how do they like what is attractive?

955
00:52:44,841 --> 00:52:45,601
What is aesthetic?

956
00:52:45,611 --> 00:52:49,561
So thinking of design as as like,
you know the lipstick on a pig it's

957
00:52:49,561 --> 00:52:53,341
definitely a trap I feel people fall
into but I think the other side to it

958
00:52:53,341 --> 00:52:57,436
is like not understanding that design
is kind of like Being a chameleon

959
00:52:57,436 --> 00:52:58,626
for whatever you're designing for.

960
00:52:58,626 --> 00:53:04,196
So let's say you're designing an app for
nurses to do some sort of nursing task.

961
00:53:04,246 --> 00:53:07,436
The designer's role in that case
isn't necessarily to be like, Hey,

962
00:53:07,436 --> 00:53:08,776
how do I make this button look great?

963
00:53:09,006 --> 00:53:11,096
But to be like, what does the nurse need?

964
00:53:11,386 --> 00:53:12,686
Like, when do they need it?

965
00:53:12,706 --> 00:53:13,706
How do they need it?

966
00:53:13,826 --> 00:53:16,256
And that's things that an
engineer should also know.

967
00:53:16,356 --> 00:53:21,586
And In situations like that, where
both, both sides of the product building

968
00:53:21,596 --> 00:53:25,086
experience, whether that's your own head,
both sides of your own head, or a separate

969
00:53:25,086 --> 00:53:28,006
engineer and developer, they both kind
of come into it with the idea of like,

970
00:53:28,196 --> 00:53:30,566
hey, what's the best thing for a nurse?

971
00:53:30,676 --> 00:53:31,896
Uh, when do they need it?

972
00:53:31,906 --> 00:53:32,776
What do they need?

973
00:53:32,986 --> 00:53:35,046
Like, that's how really
great design happens.

974
00:53:35,176 --> 00:53:38,686
And yeah, an engineer also
has this advantage of knowing,

975
00:53:39,126 --> 00:53:42,536
having access to like, technical
information that a designer doesn't.

976
00:53:42,826 --> 00:53:46,336
So one example in Kinopio is, you know,
as we mentioned, like, you can just

977
00:53:46,366 --> 00:53:50,576
click to type a card, and you can type
freeform text, and that'll be a text

978
00:53:50,576 --> 00:53:54,896
card, or you can drag an image in, or
paste in an image URL from wherever,

979
00:53:54,896 --> 00:53:57,196
and that'll also become a thing.

980
00:53:57,396 --> 00:54:01,366
That's because, as the engineer side
of my brain knows, hey, we can just

981
00:54:01,366 --> 00:54:04,646
use regex and determine what is what.

982
00:54:05,096 --> 00:54:08,476
There may be new opportunities
for that with AI, but the

983
00:54:08,476 --> 00:54:09,876
fundamental idea of, like, just.

984
00:54:10,196 --> 00:54:13,646
Like, knowing that you know something
that someone else doesn't know.

985
00:54:13,786 --> 00:54:18,216
It's like, like, like thinking past what
you can see and kind of knowing the full

986
00:54:18,596 --> 00:54:22,396
possibilities of what you can do is kind
of the most important part of design.

987
00:54:22,556 --> 00:54:24,146
Yeah, that, that's great advice.

988
00:54:24,196 --> 00:54:29,641
Uh, I think about like most things
that you use to build stuff with as

989
00:54:29,641 --> 00:54:34,651
materials that's in the real world, but
also digital materials, whether that's

990
00:54:34,651 --> 00:54:36,731
code or whether that's other things.

991
00:54:37,191 --> 00:54:42,351
And so I think it's actually more
folks should try to assume a bit of

992
00:54:42,361 --> 00:54:44,401
like different disciplines as well.

993
00:54:44,431 --> 00:54:48,201
Like look at the same material from
different angles, from the engineering

994
00:54:48,211 --> 00:54:50,281
angle, but also from the design angle.

995
00:54:50,601 --> 00:54:53,531
I think this is where you can
build much better products.

996
00:54:53,561 --> 00:54:57,521
And also quoting a previous
episode we've done with Rasmus

997
00:54:57,551 --> 00:55:01,201
Andersson, who's referenced this
concept of mechanical empathy.

998
00:55:01,641 --> 00:55:04,851
This is very much from like
a engineering perspective.

999
00:55:04,861 --> 00:55:07,101
What does the material allow me to do?

1000
00:55:07,331 --> 00:55:11,251
What does like the, the hardware
this is running on allow me to do?

1001
00:55:11,261 --> 00:55:15,111
Or what does the web
ecosystem allow me to do?

1002
00:55:15,141 --> 00:55:16,161
Do I use the DOM?

1003
00:55:16,161 --> 00:55:17,051
Do I use the canvas?

1004
00:55:17,701 --> 00:55:20,311
And, uh, those materials
that I have available.

1005
00:55:20,601 --> 00:55:23,061
What does that allow me to,
to build the best product?

1006
00:55:23,291 --> 00:55:26,741
So thank you so much for, for
sharing all of this with us.

1007
00:55:26,871 --> 00:55:31,011
Is there anything that you want to tell
the audience or share with the audience?

1008
00:55:31,371 --> 00:55:34,011
I guess if I want to share one thing,
it's something we've already mentioned.

1009
00:55:34,041 --> 00:55:39,491
Um, my blog, which I have been writing
on and off for, I guess, since 2014.

1010
00:55:39,521 --> 00:55:40,551
Don't read the old articles.

1011
00:55:40,551 --> 00:55:43,131
They suck, but the new
ones are pretty good.

1012
00:55:43,131 --> 00:55:44,711
They're, I kind of try and write about.

1013
00:55:45,131 --> 00:55:48,751
technical or design topics in a
way that's more approachable to

1014
00:55:48,771 --> 00:55:51,281
even non technically minded people.

1015
00:55:51,331 --> 00:55:54,651
They give like, you know, a lot of high
level overviews of how Canopia was made,

1016
00:55:54,651 --> 00:55:56,371
how Glitch is designed, things like that.

1017
00:55:56,451 --> 00:56:00,621
And yeah, check it out if you feel like
reading some good blog posts, I think.

1018
00:56:00,811 --> 00:56:01,431
Perfect.

1019
00:56:01,501 --> 00:56:02,901
I definitely recommend that.

1020
00:56:02,981 --> 00:56:06,711
I've enjoyed the few blog
posts I've read quite a lot.

1021
00:56:06,891 --> 00:56:07,951
So yeah.

1022
00:56:08,121 --> 00:56:12,011
Thank you so much for coming on the
podcast and sharing all of your wisdom.

1023
00:56:12,131 --> 00:56:12,501
Thank you.

1024
00:56:13,091 --> 00:56:14,111
Thanks so much for having me.

1025
00:56:14,882 --> 00:56:17,422
Thank you for listening to
the localfirst.fm podcast.

1026
00:56:17,662 --> 00:56:21,392
If you've enjoyed this episode and haven't
done so already, please subscribe and

1027
00:56:21,392 --> 00:56:23,152
leave a review wherever you're listening.

1028
00:56:23,522 --> 00:56:24,952
Please also tell your friends about it.

1029
00:56:24,962 --> 00:56:28,532
If you think they could be interested
in local-first, if you have feedback,

1030
00:56:28,572 --> 00:56:32,312
questions or ideas for the podcast,
please get in touch via hello at

1031
00:56:32,312 --> 00:56:38,092
localfirst.fm or use the feedback form on
our website, special thanks to Expo and

1032
00:56:38,092 --> 00:56:40,142
Crab Nebula for supporting this podcast.

1033
00:56:40,542 --> 00:56:41,302
See you next time.