WEBVTT
00:00:00.220 --> 00:00:06.799
And we'd never thought about making code development more easy to learn, but that became our most important part.
00:00:06.849 --> 00:00:15.000
After that, after seeing even we had, uh, some children using code Sams to learn, and that was, that felt pretty crazy.
00:00:15.300 --> 00:00:16.600
And that was super cool to see.
00:00:20.359 --> 00:00:25.510
Hi everyone, and welcome to developer experience a podcast by Algolia.
00:00:26.210 --> 00:00:33.750
We chat with guests who build products for developers about their developer experience, strategy, what it means for them, why it's important.
00:00:34.170 --> 00:00:39.310
And so on I'm Sara Deon today, we are doing a special episode.
00:00:39.490 --> 00:00:45.979
Not only because we have an I'm guest once more, but because I'm joined by my new co-host Bryan.
00:00:46.229 --> 00:00:46.859
Hello, Bryan.
00:00:47.280 --> 00:00:47.780
Hey Sarah.
00:00:47.780 --> 00:00:48.299
How's it going?
00:00:48.799 --> 00:00:49.539
I'm going great.
00:00:49.540 --> 00:00:50.020
Thank you.
00:00:50.039 --> 00:00:52.579
Can you briefly introduce you for listeners?
00:00:52.581 --> 00:00:53.179
Don't know you
00:00:53.649 --> 00:00:53.939
Sure.
00:00:53.960 --> 00:00:54.859
So I'm Bryan Robinson.
00:00:55.219 --> 00:00:57.579
I am a senior developer advocate here at Algolia.
00:00:57.581 --> 00:01:04.409
I've been doing some form of web design development for about 15 years, but lot of that time was specified around user experience.
00:01:04.689 --> 00:01:12.530
Uh, so when I finally joined the ranks of developer advocates, it was kind of a natural progression to keep thinking about UX, but for my favorite group of users, developers.
00:01:12.640 --> 00:01:13.129
Awesome.
00:01:13.469 --> 00:01:20.530
And so in today's episode, we are going to talk about fostering developer collaboration in a remote world.
00:01:21.069 --> 00:01:32.120
So working is not something new, especially in the tech industry, but since the beginning of the pandemic in 2019, there's been a wave of tech workers going remote first.
00:01:32.120 --> 00:01:34.920
It was by necessity and then by choice.
00:01:35.620 --> 00:01:39.920
So how do you collaborate when your coworkers are not in the same room?
00:01:40.459 --> 00:01:43.549
Not at the same city country are even continent.
00:01:44.129 --> 00:01:47.469
How did it change our processes and our tools?
00:01:47.810 --> 00:02:07.099
So our guest today to talk about that is Ives van Hoorne creator of code sandbox code sandbox is the most advanced cloud based sandbox environment that lets developers quickly start and share prototypes, but also collaborate on projects, provide bug reproductions.
00:02:07.400 --> 00:02:16.539
And all of that in the browser code sandbox is used at organizations like Atlasian Shopify strive, Microsoft and ourselves.
00:02:16.639 --> 00:02:21.219
We are big code sandbox users at Algolia hello, if
00:02:21.750 --> 00:02:24.289
Hello, good, uh, app new or morning.
00:02:25.110 --> 00:02:31.610
So first off, I want to say congratulations for your involvement in the beta react documentation.
00:02:31.610 --> 00:02:42.090
So we are recording this on Monday 25th of October, and the new react docs just shipped in beta and so congrats to the, the react team first off.
00:02:42.550 --> 00:02:53.280
But what I've seen is that they're using those really fabulous embedded interactive send boxes using send pack, and Sendak is the browser bundler, that powers code sandbox.
00:02:53.740 --> 00:02:58.719
So can you tell us a bit more about this collaboration, how it went, what was your involvement?
00:02:59.430 --> 00:03:01.759
Yeah, the new react documentation.
00:03:02.419 --> 00:03:04.319
It looks super, super nice.
00:03:04.669 --> 00:03:15.360
It's funny because it's been a dream of me and I think of some others since coach SIM started, uh, it was a dream that we could go to the react documentation.
00:03:15.460 --> 00:03:25.150
And it's funny because when the react documentation was released a couple of years ago, we already were talking about, oh, wouldn't it be cool if we could have code sandbox in that react documentation.
00:03:25.330 --> 00:03:29.590
So it's been a dream for a long time and it's super nice to now see it come to life.
00:03:30.169 --> 00:03:40.539
And the, the collaboration started off because the react team was working on, uh, the new documentation, the new project, and they've been working on it for a long time, put a lot of love in it.
00:03:40.610 --> 00:03:41.500
They have rewritten.
00:03:41.770 --> 00:03:50.699
Well, I think they've gone through multiple many iterations before they, uh, released this one, but they were also looking at how to use interactive codes in their documentation.
00:03:50.699 --> 00:03:56.379
Because being able to play with codes is one of the most important ways to learn for a lot of people.
00:03:56.719 --> 00:04:03.569
If you see something and you can immediate type in it and see it update life, then you immediately get that a powerful feeling.
00:04:03.789 --> 00:04:06.009
You feel empowered in, uh, in some way.
00:04:06.550 --> 00:04:11.969
And so they were looking okay, how can we maximally utilize this interactive code?
00:04:12.319 --> 00:04:17.050
They were, I think the reacting was already using, they are already using codes, inbox, uh, quite a bit.
00:04:17.069 --> 00:04:22.120
So they went to us and we had been working on a project called send for a while.
00:04:22.350 --> 00:04:26.839
It's a project that has been released, I think, unofficially a couple years ago.
00:04:27.060 --> 00:04:32.279
And then we put it on the shelf for a while, but this was for us, the perfect moment, Tove it.
00:04:32.281 --> 00:04:36.839
So to say, and send back essentially is what code sandbox uses.
00:04:37.480 --> 00:04:41.949
Uh, so code sandboxes is online code that it, where you have code on the left and a preview on the right.
00:04:41.951 --> 00:04:44.470
And when you change codes, the preview updates.
00:04:44.970 --> 00:04:48.069
And the interesting thing is that we execute all codes in the browser.
00:04:48.250 --> 00:04:57.110
So we have this in browser, JavaScript Butler or compiler and sent back is essentially that we took the existing bundler and put it in a library.
00:04:57.930 --> 00:05:07.100
And with that, we wrote a, some component that allow you to create your own playgrounds, because that was the real thing that the react team needed.
00:05:07.250 --> 00:05:13.220
They wanted to have something so specific for their experience, that they should be able to completely customize it.
00:05:13.240 --> 00:05:18.939
And this is why we started sent back again, because now we have sent back, you can create your own components.
00:05:19.319 --> 00:05:20.699
You can create your own code editor.
00:05:21.040 --> 00:05:22.649
You can at your own file, explore.
00:05:22.649 --> 00:05:31.209
You're gonna create your own tap system, even your own preview, but the library provides you a hook that will allow you to execute the code and give you the results back.
00:05:31.550 --> 00:05:37.329
And this allows the react team to really create a customized experience using the bundler of codes and books.
00:05:37.509 --> 00:05:58.000
And well, that was super interesting because with this is just one implement, you know, send back, but you can use it for so many things you can, for example, the be rep could use it to show transpo codes on the rights, or if you're building a website where students can, uh, go through courses, you could use, send back to create these step by step processes.
00:05:58.379 --> 00:05:59.959
It even has just support.
00:05:59.961 --> 00:06:01.279
So it can run unit tests.
00:06:01.281 --> 00:06:09.240
So you can even evaluate, you can give like tests to students, and then you can use sent back to evaluate whether their code was written correctly and all the tests best.
00:06:09.699 --> 00:06:13.279
So yeah, probably a long description of sent back, but it's been a labor of love.
00:06:13.439 --> 00:06:14.879
I have only started it.
00:06:14.880 --> 00:06:18.709
We've had many people, uh, within code and working on sand back.
00:06:19.050 --> 00:06:25.990
And it's really nice to now see a practical implementation of sand back in the react documentation.
00:06:26.939 --> 00:06:27.230
Yeah.
00:06:27.389 --> 00:06:36.269
I, I think it's really interesting to see because at the, at the core of it, it's still code sandbox running and in your code is still running in code sandbox.
00:06:36.339 --> 00:06:40.500
It's not every, everything is shipped in your side, but you control the experience.
00:06:40.959 --> 00:06:42.339
And I really love that.
00:06:43.199 --> 00:06:52.980
Now, as you were saying, bubble could use it for the rep or maybe pre or could, could use it for the re and it's removing so much friction.
00:06:53.129 --> 00:07:00.689
Like there are so many cool ideas that I feel go in the trash because thet is not staffed enough or we don't have time.
00:07:01.269 --> 00:07:04.009
And now, yeah, you can have great search.
00:07:04.470 --> 00:07:20.959
You can have great code snippets that actually run because people who are specialized on that task who have dedicated their career to making that better are at least a piece of their career to making that better now provide those awesome tools.
00:07:21.139 --> 00:07:35.879
And, and I think what's really interesting is that we're at a stage in web where we can do so many things like a webpage can be so dynamic, but still we have blogs and documentations that are basically text images and that's it.
00:07:35.880 --> 00:07:53.629
And maybe sometimes videos and so sad that we have such a vibrant ecosystem of tools and that we still don't have those pieces of content that could be so much richer when you add something where they can play with it.
00:07:53.769 --> 00:07:58.709
And so I'm really glad to see all those tools emerge and, and definitely for document.
00:07:59.319 --> 00:08:02.980
It definitely gave us ideas, Al Goya, just looking at that.
00:08:03.519 --> 00:08:14.420
And I find it beautiful that you're not restricted to, it's either an eye frame and you don't control anything, or it's gonna be a custom component and it's gonna be six month of your time.
00:08:14.420 --> 00:08:17.620
And you're gonna even come close to what code send box is.
00:08:19.139 --> 00:08:19.420
I agree.
00:08:19.930 --> 00:08:28.290
I think that there are, like you said, there are a lot of ideas probably thrown out the window because the implementation seems too daunting or is too daunting to do.
00:08:28.949 --> 00:08:36.690
And with a library like this, if someone has an idea to, for example, maybe there, there are even better ways to teach.
00:08:36.779 --> 00:08:52.159
Maybe something new will come up where there's a different type editorial, maybe even where people can help each other live, where maybe there is a way for universities, for example, to teach in a different way where you have a physical classroom, not a physical, but a virtual classroom.
00:08:52.700 --> 00:08:56.440
And, uh, the teacher can jump into different code snippets and help students.
00:08:56.441 --> 00:09:03.840
Well, these are all interesting ideas that are now easier to explore because you can use, send back to execute the codes.
00:09:04.259 --> 00:09:09.159
And another nice thing is that we even have the option for you to self-host send back.
00:09:09.620 --> 00:09:17.149
So even if code send books would go down, for example, your examples will still work and well I'm, I'm very much looking forward.
00:09:17.259 --> 00:09:19.429
It's similar to how code send got started.
00:09:19.669 --> 00:09:25.029
When we started building code send books, we had one big use case in mind with a sub couple of sub use cases.
00:09:25.690 --> 00:09:29.750
And people used it for so many other use cases that we didn't expect.
00:09:30.090 --> 00:09:47.500
And I'm hoping that with sent it will be the same thing that people will use send for that we never have imagined when we started, uh, working on sand spec and will make it easier for other people to get introduced, to coding or get more familiar with certain libraries or frameworks or well, anything.
00:09:48.370 --> 00:09:48.659
Yeah.
00:09:48.899 --> 00:10:02.570
And, and you said it like code sandbox started from a simple, but powerful idea was like putting the main tool of a developer, which is, is basically their IDE with the terminal in the browser so that they can build and share their ideas easily.
00:10:02.870 --> 00:10:09.450
And Algolia, especially in my team where we're doing, uh, frontend libraries, we are big code sandbox users.
00:10:09.590 --> 00:10:10.690
We use it for demos.
00:10:10.691 --> 00:10:12.090
We use it for bug reproduction.
00:10:12.549 --> 00:10:14.289
We use it for proof of concepts.
00:10:14.830 --> 00:10:17.480
And we also use it for direct collaboration.
00:10:17.659 --> 00:10:28.039
For example, early this year, we shipped a new search experience in the Algolia docs, but the development work of that started six months before in code sandbox.
00:10:28.100 --> 00:10:31.919
It was like between three people in three different French cities.
00:10:32.539 --> 00:10:36.360
And we were using zoom and code sandbox live, and that's where it all.
00:10:37.250 --> 00:10:45.950
And without such a tool, we would've been like screen sharing a local environment where one person would be coding and we would be pushing and pulling a temp repo.
00:10:46.330 --> 00:10:49.070
And they were just working together alive in the browser.
00:10:49.289 --> 00:10:52.909
So like, it's not just a small, handy feature.
00:10:53.059 --> 00:10:56.149
It's like a massive leap in developer experience.
00:10:56.370 --> 00:11:07.100
And for us, it removes so much friction, especially when we're early in the project, we're ideating you don't want to get anything in the way when you're just like spouting ideas.
00:11:07.100 --> 00:11:08.340
So I'm really interested.
00:11:08.490 --> 00:11:11.860
Like how did you see people use code sandbox over the years?
00:11:11.889 --> 00:11:16.139
Like ways you did not imagine, and how did it shape the product direction?
00:11:17.090 --> 00:11:25.940
So code sand started with the idea that the JavaScript community in particular is very collaborative.
00:11:25.960 --> 00:11:31.940
People share a lot of work, but at the time people shared it in through GitHub repositories.
00:11:32.399 --> 00:11:36.899
And while I was at work, I was at work as a web developer at an auction website.
00:11:37.139 --> 00:11:41.049
I was on vacation at some point, and I got questions for my coworkers about pieces of codes.
00:11:41.230 --> 00:11:45.409
And I couldn't really answer those questions because they just sent me snippets on slack.
00:11:45.410 --> 00:11:49.129
They sent me get the prepository files and I couldn't run the codes.
00:11:49.190 --> 00:11:50.610
And that's when the idea came up.
00:11:50.769 --> 00:11:51.409
That would be interesting.
00:11:51.549 --> 00:11:55.559
So code sandbox was built around that idea.
00:11:55.700 --> 00:12:08.559
We should make it easier for people to share their codes with the environment, instead of only sharing like the static codes actually make it come to life by also running the codes and giving these intelligence on top of it.
00:12:08.740 --> 00:12:10.159
And that's the I first idea of codes.
00:12:10.340 --> 00:12:17.950
And I didn't do much with that idea until I started actually going to university some point, I started feeling unproductive and I thought, okay, this is a nice side project to work on.
00:12:18.129 --> 00:12:21.629
And Goem at the time has gone through so many iterations.
00:12:21.700 --> 00:12:24.110
It's first started as this react component editor.
00:12:24.740 --> 00:12:27.990
Then it became a place where people could write MPM libraries.
00:12:28.259 --> 00:12:31.870
Then it became a place where people could publish online MPM libraries.
00:12:31.870 --> 00:12:39.340
And it's really funny because at this point you see none of that back in code sandbox right now, code send is an online code edit there.
00:12:39.600 --> 00:12:44.700
And it has gone through so many iterations before it really became the code sandbox.
00:12:44.720 --> 00:12:45.460
It is today.
00:12:45.720 --> 00:12:47.980
And that was a, and that was a big learning for me.
00:12:47.980 --> 00:12:50.659
That code SIM started with a very different idea from what it is today.
00:12:51.200 --> 00:12:58.019
And I see many people with, they have an idea, but then they say, I'm not gonna work on it because the idea doesn't sound right.
00:12:58.120 --> 00:13:10.100
It doesn't sound like a good idea, but I think the only way to get really to a great idea is to start working on the idea and to refine it, not holds the hold, the idea too close to heart, be able to be flexible.
00:13:10.919 --> 00:13:12.659
And, uh, that's what happened with coach Sam.
00:13:12.720 --> 00:13:14.889
It was a very different idea year when it started.
00:13:15.149 --> 00:13:22.409
And when it finally was released, it had gone through so many transformations that it had a completely different idea behind it.
00:13:23.110 --> 00:13:31.750
And the funny thing is that when we released code sandbox, people used it for ways that we never imagined.
00:13:31.850 --> 00:13:36.620
We initially built code sandbox as a way for people to very easily collaborate.
00:13:37.039 --> 00:13:42.179
But then for example, people started to use it to learn how to code, because makes sense.
00:13:42.279 --> 00:13:55.259
If you want to learn how to code, you don't want to learn how a terminal works, how test work, how bundling works, how WebEx at the time, uh, worked then, uh, you just want to press a button and have an environment for your set.
00:13:55.830 --> 00:14:00.330
So code cinema started to be used by people who want to learn, how to code start to be used for workshops.
00:14:00.350 --> 00:14:10.330
It started to be used for documentation, and we'd never thought about making code development more easy to learn, but that became our most important part.
00:14:10.340 --> 00:14:18.559
After that, after seeing even we had, uh, some children U using code Sam learn, and that was, that felt pretty crazy.
00:14:18.860 --> 00:14:20.240
And that was super cool to see.
00:14:20.539 --> 00:14:24.879
So code SIM started to really make collaboration between cohorts more easy.
00:14:25.340 --> 00:14:28.799
And then we saw the new use cases that code sandbox enabled.
00:14:29.019 --> 00:14:32.960
And then we changed our prioritization to make development also more accessible.
00:14:33.460 --> 00:14:37.070
So we have for code SIM, we have that we want to make more accessible.
00:14:37.071 --> 00:14:40.389
That's the most important part because development is only becoming more and more important.
00:14:40.990 --> 00:14:42.950
And the second part is that we want to enable collaboration.
00:14:43.649 --> 00:14:50.509
So the humbling thing of this is that I think you can never know how people will use what you build.
00:14:50.620 --> 00:14:56.000
Like it's so hard to predict what people get as value from something.
00:14:56.340 --> 00:15:03.679
The only way to know is to release it and to essentially release fast, because you can build in so many assumptions.
00:15:04.059 --> 00:15:08.039
But the only way that you'll know is when actually people start using it.
00:15:08.059 --> 00:15:17.009
And we've, we've gone into that trap with code sandbox, because we got very demotivated around January, 2017 with code sandbox.
00:15:17.010 --> 00:15:18.129
It was already kind of finished.
00:15:18.649 --> 00:15:23.929
Uh, we still wanted to build a lot of features, but we thought, okay, well, most of it is done and we stopped working on it.
00:15:24.110 --> 00:15:29.129
And then at some point I showed it to friends and they were much more enthusiastic than I was expecting.
00:15:29.399 --> 00:15:32.200
They said that it looked awesome and that they wanted to use it.
00:15:32.259 --> 00:15:35.840
And I thought to myself, but this is just the basic version of code sandbox.
00:15:35.860 --> 00:15:37.759
We can't even publish to MPM yet.
00:15:37.860 --> 00:15:47.279
We can't even import sandbox in other sandboxes, all features, which, which I thought were essential to code sandbox, but they told me that they found it awesome already.
00:15:47.419 --> 00:15:56.870
So at that point we decided, okay, we're gonna build code sandbox as much as, as far as we can, but April 1st is the deadline.
00:15:57.029 --> 00:16:01.429
And if there are any features unfinished on April 1st, we would drop those features.
00:16:01.431 --> 00:16:05.549
And it's funny because one of those features was MPM publishing that was dropped.
00:16:05.649 --> 00:16:07.990
And we released in it on April 2nd, actually.
00:16:08.610 --> 00:16:18.019
And it started growing and it became suddenly it became, it became more popular than we were expecting with the feature set with code at the time.
00:16:18.120 --> 00:16:19.220
And that was so interesting.
00:16:19.221 --> 00:16:30.740
And it started to be used for bug reports, never expected that started to be used for hiring, never expected that either prototyping that we did expect actually, but there were plethora of use cases that we didn't think of.
00:16:30.840 --> 00:16:34.490
So yeah, I think the most important is that you have to release fast.
00:16:34.590 --> 00:16:41.889
You have to get as much feedback feedback as possible because you can't predict what people can use it for and you have to evolve an idea.
00:16:41.950 --> 00:16:42.970
Let the idea evolve.
00:16:43.110 --> 00:16:49.730
If you think of an idea and you think it's not perfect, that's not a problem because you will have enough chance to refine it as you work on the idea.
00:16:50.450 --> 00:16:55.559
I never expected code sandbox to have an origin story that was collaboration focused.
00:16:55.580 --> 00:17:01.240
It feels very much like this online editor that makes it really easy for newbies and, and like people to kind of get up and running.
00:17:01.740 --> 00:17:13.480
But you kind of, you kind of mentioned you pivoted to go towards that, that new and educational focus, but then one of the first features that really kind of took off was that MPM package publishing, that's not a newbie friendly thing.
00:17:13.480 --> 00:17:22.789
So how do you kind of prioritize and know what features are gonna be good for the collaboration set versus the education set and prioritize those accordingly
00:17:23.609 --> 00:17:24.509
Prioritization?
00:17:25.140 --> 00:17:26.910
It's really, it's really an art.
00:17:28.470 --> 00:17:30.349
I don't think I can give a perfect answer.
00:17:31.150 --> 00:17:36.779
Um, it's the most important thing I think is that, well, you have a lot of different inputs.
00:17:36.780 --> 00:17:39.819
You have people giving feedback, how much feedback you get.
00:17:39.839 --> 00:17:46.380
So for example, we had one feature at some point that got by far the most thumbs up, and then, you know, okay, this is probably interesting.
00:17:46.900 --> 00:17:55.440
And you have, uh, data on how people use product that is also very valuable because you know exactly what feature is never used and what feature is used at done.
00:17:55.441 --> 00:18:04.039
And if one feature, for example, if the MPM dependency installing feature is used a lot, then we know, okay, that's something that we can very much improve.
00:18:04.420 --> 00:18:13.829
And then you also have your own hus, just thinking of the stories of how people use code, send books, talking with people and hearing how they, what, what kind of things they use it for.
00:18:13.849 --> 00:18:22.670
That's also very valuable, but even with all that information, you can reliably reliably predict what's to work on.
00:18:22.869 --> 00:18:27.630
And that's why it's very important to have a very fast iteration cycle.
00:18:28.089 --> 00:18:41.579
And it fits very much into the release fast idea that when you have a hunch go immediately for the smallest MVP possible of it, like what is the smallest thing that we can release to be able to test whether it works and release it.
00:18:41.720 --> 00:18:54.970
And ideally that only takes like one or two weeks to, to build that is why the iteration cycle is by far the most important thing for projects and companies, because then you'll not get information and then you either drop it or you continue working on it.
00:18:55.269 --> 00:19:08.690
So, yeah, I, I think these three things, the data, the feedback from people on what they, what they are asking for and knowing how people, user stories of how people use your product, those are the most important things to really think about when deciding what to work on first.
00:19:08.691 --> 00:19:10.480
But even that is not a birth picture.
00:19:10.539 --> 00:19:19.759
You still have to make sure that you build it super fast so that you can get feedback as soon as possible so that, you know, if it's worth, uh, investing more time in
00:19:20.380 --> 00:19:42.829
One thing I find really interesting is also to, to look at the opportunities that are unlocked by technology arriving at a certain stage, because code send is really like leveraging the fact that we have more powerful, full featured browsers and more powerful machines like coat sandbox would not have been possible 10 years or 15 years ago.
00:19:43.049 --> 00:19:55.539
And I think that's really interesting if you make a parallel with, uh, cinema, for example, the French new wave was possible because, uh, technologically, we had cameras that were like, you basically, you could film outside.
00:19:55.599 --> 00:20:02.700
And that's what generated such like a, a stream of, of movies of a certain kind and influenced like overseas.
00:20:03.220 --> 00:20:15.529
I find it really interesting to see all the tools that now that are really web based and like web heavy, you can like Figma, like Figma is really a, a really great example of that.
00:20:15.630 --> 00:20:22.049
Or I don't remember his last name, but Sid, uh, Sid a, I think is building UI dev tools.
00:20:22.050 --> 00:20:36.240
So you can like change your tailwind component, like react, build with tailwind components in the browser with the UI dev tools and all those services that are slowly but surely migrating to the cloud.
00:20:36.259 --> 00:20:38.119
And you can do everything from your browser.
00:20:38.579 --> 00:20:43.799
And I find it really interesting how technology will also change people's minds.
00:20:43.920 --> 00:20:53.640
I started in web in 2005, like, uh, as a kid, I was working in 2005 and it was like, of course you wanted to have some kind of a DUI.
00:20:53.900 --> 00:20:58.559
It was local and you installed it on your computer, but of course you wanted that because it's more fun.
00:20:59.019 --> 00:21:02.160
And then there was a wave of, no, you are gonna use your terminal.
00:21:02.259 --> 00:21:03.359
You're gonna use an editor.
00:21:03.380 --> 00:21:06.869
You're gonna just edit text because you want be, uh, in troll.
00:21:07.289 --> 00:21:10.029
And then we threw a lot of tools out of the window.
00:21:10.210 --> 00:21:15.549
And now we're moving again to tools that feel a lot more user friendly.
00:21:15.730 --> 00:21:17.670
We don't want to have to install anything.
00:21:17.819 --> 00:21:21.269
Basically we don't wanna store anything on our computers.
00:21:21.270 --> 00:21:26.869
We just wanna work in the cloud with things that are already abstracted away where all the complexities abstract.
00:21:27.599 --> 00:21:37.059
So I find interesting how, like there's change of hearts in the community, like regarding what we want to use and what we like.
00:21:37.079 --> 00:21:43.259
And what we say is the thing at a given moment also because technologically, we are able to do that.
00:21:44.130 --> 00:21:45.140
Yeah, I agree.
00:21:45.420 --> 00:21:52.769
I can very much relate through the, the story of having using UI tools to build things.
00:21:52.910 --> 00:21:55.410
And then that all being thrown away.
00:21:55.670 --> 00:21:57.970
That's something, I think that's such a big shape.
00:21:58.410 --> 00:22:05.569
I got introduced to web development through dream Weaver, and I got introduced to development in general, through visual basic.
00:22:06.470 --> 00:22:10.839
And what these tools both in common is that they have a UI component to it.
00:22:10.840 --> 00:22:19.400
They have a UI where you can build your own UI, and then you can sprinkle logic on top of that UI by double click on elements, writing a bit of codes.
00:22:19.539 --> 00:22:30.910
And I think that made development in general, much more accessible to get started with because you have something that, you know, which is a UI that you can use, then that's your stable ground.
00:22:31.329 --> 00:22:38.150
And from there on you venture into the unknown ground, which is code, and you can link those two, just so that is super, super, super valuable.
00:22:38.170 --> 00:22:40.950
And it's such a shame that, that it was removed essentially.
00:22:40.951 --> 00:22:43.829
Well, not of removed, but it's not the default anymore.
00:22:44.289 --> 00:22:59.420
So this is also one of the most important things that with codes we're working on by putting the development environment in the browser or in the cloud, you don't need to install a development environment locally anymore.
00:22:59.799 --> 00:23:10.900
And with that, we want to make it more accessible and more easy for, um, for example, designers to be involved, let's say I'm a developer, I'm working on a UI component.
00:23:10.960 --> 00:23:12.019
I'm implementing the design.
00:23:12.839 --> 00:23:17.819
Now with coach ox, I can actually share a link with the designer and designer can see live, what I'm working on.
00:23:18.039 --> 00:23:22.380
So they don't have to install any development tooling anymore to actually see what I'm working on.
00:23:22.559 --> 00:23:29.700
So that is step one that is already such a huge step forward because now, uh, development is not this walled garden anymore.
00:23:30.369 --> 00:23:38.329
Uh, it's not this, it's not this siloed thing away, but other people can be introduced to the, um, the same environment.
00:23:38.330 --> 00:23:39.609
That's a huge part already.
00:23:40.109 --> 00:23:49.920
And the later step and the next step of code sandbox, uh, that we're working on at code sandbox is also making it possible for designers, for example, to make changes of marketing.
00:23:49.940 --> 00:23:56.640
So we introduce a bit of load, uh, low codes, uh, tooling on top of it, a bit, bit of no code tooling on top of it.
00:23:57.859 --> 00:24:05.390
And, uh, um, that is one of the, that is, that is something that's, uh, future music for code sun, but that is in the end, our goal.
00:24:06.029 --> 00:24:08.750
Cuz if you, for example, look at, look at Figma.
00:24:08.769 --> 00:24:16.269
For example, before Figma, you had design tooling and with those design tooling, you had files and you would share those files with other people.
00:24:16.289 --> 00:24:20.069
You would either use Dropbox, you would use slack, you would use email didn't really matter.
00:24:20.329 --> 00:24:30.019
It was still file sharing and developers, project managers weren't as involved with the design process because they didn't have sketch or Photoshop installed.
00:24:30.440 --> 00:24:32.819
So they wouldn't be able to give very easy feedback.
00:24:32.820 --> 00:24:38.259
They had to ask for a JAK or a P and G or something to actually see what a designer was working on.
00:24:38.680 --> 00:24:41.380
Now, when you go to Figma, I once heard somewhere.
00:24:41.400 --> 00:24:52.849
I'm not sure, uh, when or where, but I believe that more than half of Figma user are non designers, just people giving feedback, people being actually introduced into the design process.
00:24:52.950 --> 00:24:55.369
And because of this, the feedback loop is so much faster.
00:24:55.829 --> 00:25:02.329
You don't have to wait for the tickets on the cambe board to go to in review to then give feedback and have it move back to in progress.
00:25:02.670 --> 00:25:05.970
You can actually, throughout the pro process, you can give feedback it.
00:25:06.039 --> 00:25:11.680
If a designer wants to know something very quickly from an engineer or from a developer, they can just share a link with them.
00:25:11.750 --> 00:25:16.240
They can open it, they can immediately see what's wor what's working and they can immediately give their feedback.
00:25:16.259 --> 00:25:17.279
And that is so valuable.
00:25:17.480 --> 00:25:23.559
I think it allows you to create much faster and it also introduces developers more to design.
00:25:23.799 --> 00:25:33.269
Maybe I can imagine that there would be developers that have, um, that have gotten interest in design because it's now much easier to get started with it.
00:25:33.950 --> 00:25:46.029
I think that we can also do something like this with development, if we can make it possible to share the environment with a link and if we can make it possible, uh, to very easily give feedback in that environment.
00:25:46.089 --> 00:25:56.220
And if we even can make it possible for a designer to, for example, tweak styles through a UI, without having to know how to code, we can even use that opportunity to teach them how to code.
00:25:56.319 --> 00:26:07.299
We can show to the designer, if you change this little, uh, UI, then this code will change in this way and they can then see based on how the code changes, how code maps to UI.
00:26:08.410 --> 00:26:12.450
Um, I think there's a lot of opportunity there and that's really what coach sandbox is about.
00:26:13.130 --> 00:26:20.609
Um, um, I think a big inspiration there is Brett Victor, um, uh, inventing on principle.
00:26:21.450 --> 00:26:26.289
Um, there is so much where that he, he shows, uh, his talks are so great.
00:26:26.290 --> 00:26:36.039
All his talks are great, but what he is saying, actually, it's pretty crazy to think that to update styles, we have to write codes because it doesn't map as easily.
00:26:36.299 --> 00:26:42.200
We have to, as developers, we now had to in our heads find that mapping, create that mapping.
00:26:42.339 --> 00:26:43.960
And then, okay, now it makes sense.
00:26:43.980 --> 00:26:46.880
If you write display flex, it will do this.
00:26:47.720 --> 00:26:50.440
Um, but for many people it's not as obvious.
00:26:50.880 --> 00:26:55.759
And I think that's for example, uh, I, when you learn, for example, tailwind, tailwind is super nice.
00:26:55.779 --> 00:27:04.190
It makes it so much easier too, right UI, but you also had this hurdle at the start you had to, you had to memorize the, the different and uh, class names that you could use.
00:27:04.990 --> 00:27:13.430
Um, and I can imagine that a lot of people first have to learn to use this, but then also have to learn all these tricks to get their visual design well, what they want to have in the visual, uh, way.
00:27:14.210 --> 00:27:14.990
And it is possible.
00:27:15.130 --> 00:27:20.470
It is possible to create low code, no code tooling to make it much easier to, um, to change UI.
00:27:20.471 --> 00:27:31.099
For example, framer is a design tool, but what they have done, for example, they have a component called the stack component and the stack component essentially allows you to put elements in it.
00:27:31.359 --> 00:27:37.900
And these elements will then be rendered next to each other or, uh, one up and the other, uh, down below.
00:27:38.559 --> 00:27:57.690
And the funny thing is that a stack component is essentially is just flex box and you can change some, uh, properties of that stack component and you can then change whether it should be next to each other or whether it should align on the Y axis, whether it should be, uh, centered, but under the hoods, they actually just vendor CSS with display flex.
00:27:58.029 --> 00:28:03.930
So that is one prime example of how you can, for example, make flex, uh, a more accessible thing.
00:28:04.230 --> 00:28:06.799
Well, I went, went a bit on a tangent.
00:28:07.000 --> 00:28:22.680
I don't know even how the first, uh, what the question was, but I think that there's so much opportunity in making development more accessible and more collaborative, not even, not only through between developers, but even through marketing design developments.
00:28:23.279 --> 00:28:23.480
So yeah,
00:28:23.920 --> 00:28:27.190
I love this idea of, of collaboration, not just between developers.
00:28:27.589 --> 00:28:30.789
Uh, it, once upon a time in a past life, I led a design team.
00:28:30.930 --> 00:28:42.190
And I remember a time when we sat down, we were gonna teach the design team a little bit about SAS, you know, SCSS and, and the first step that our Beely did was all right, we need to make sure we have node installed on your computer.
00:28:42.750 --> 00:28:47.539
All right, now we have to have this installed on your computer and, and you could just see the designer's eyes plays over.
00:28:48.039 --> 00:28:57.400
And so when it came to it doing QA against designs, I would go into dev tools and like, you know, adjust things and get the developers, the exact values that I wanted for everything.
00:28:58.279 --> 00:29:12.849
But the other designers couldn't do that, but having some sort of visual, or like you said, low code or no code where they can specify some values and see it in real time, we've got things like VBU, you know, for, for browser based stuff, but that's still a step removed from the code base.
00:29:12.869 --> 00:29:15.210
You still have to like share that and insert it.
00:29:15.211 --> 00:29:22.890
But if we had something like that in say a code sandbox type environment that can be inserted into a GI repo and, and basically we're off to the races.
00:29:24.009 --> 00:29:24.650
Uh, yeah, exactly.
00:29:24.720 --> 00:29:25.210
Exactly.
00:29:25.609 --> 00:29:25.609
Yeah.
00:29:25.611 --> 00:29:29.039
That's, that's a, exactly what we want to do, uh, with codes and books.
00:29:29.099 --> 00:29:30.680
We first want to make it accessible.
00:29:30.880 --> 00:29:38.640
What we first wanna make both possible for designers to see what you're working on next step is that we can make it possible for designers to change styling.
00:29:39.119 --> 00:29:41.519
Um, but we update the codes underneath.
00:29:41.819 --> 00:29:48.599
So instead of having to then copy paste values and send them to developers, uh, they can actually open a pool request.
00:29:48.619 --> 00:29:53.640
And that's interesting because that means that we also have to make, get more accessible.
00:29:54.140 --> 00:30:01.589
We need to make it easy for a designer, for example, to open a pool request on top of another pool request or to open request on top of Maine.
00:30:02.049 --> 00:30:10.509
But I think it's possible because if you look at the core flows of, of, um, of kids, um, it's creating a commit.
00:30:10.859 --> 00:30:15.309
Well, first of all, creating a branch, creating a commit and opening a politic quest.
00:30:16.049 --> 00:30:25.099
If we can simplify that flow a lot, then I think we can also even make it possible for, to open port quests as suggestions to, uh, existing port quests.
00:30:25.480 --> 00:30:38.579
And then it becomes really interesting because especially now that we're working in a remote world where sometimes there is a huge time zone difference between people, every loop, every cycle of communication is very costly.
00:30:38.920 --> 00:30:47.690
So if a developer asks for feedback from a design, the designer checks eight hours later and says, oh no, this color needs to be blue instead of green.
00:30:48.069 --> 00:30:59.450
And then eight hours later, the developer implements it and asks the designer again for feedback, eight hours later, you already have so many, so many time spent on just back and forth.
00:30:59.509 --> 00:31:06.559
But if the designer could immediately come back to the saying, okay, now this button should actually be, uh, blue instead of green.
00:31:06.619 --> 00:31:09.799
And they can immediately also open a little pull request to it.
00:31:10.430 --> 00:31:14.480
Then you eliminated, I think, two, two parts of the communication there.
00:31:14.940 --> 00:31:18.160
And that would save so much time also on the product duration itself.
00:31:18.829 --> 00:31:19.119
Yeah.
00:31:19.519 --> 00:31:22.559
Like having, having worked in docs, same for technical, right?
00:31:23.019 --> 00:31:31.670
Like it, there is a lot of value in like content in a single place and, and using systems like GI or using repositories in general.
00:31:32.539 --> 00:31:37.869
Like it's really helpful, but the whole processes around it is really a nightmare.
00:31:37.890 --> 00:31:45.539
And I think it's great that we start also, um, that we stop looking at it.
00:31:45.540 --> 00:31:51.099
Like it's a pride that, oh, I master GI or I understand code like the, the, it's not a medal.
00:31:51.101 --> 00:31:52.740
There's nothing to be proud of.
00:31:52.740 --> 00:32:06.690
Like, it's great if you, if you're able to, to deliver great solutions to solve problems, but ultimately, uh, there, there's no pride in understanding a cryptic tool that the rest of humanity does not understand.
00:32:07.269 --> 00:32:10.890
And, and you know, like listeners, if you don't agree, you can look it up.
00:32:10.891 --> 00:32:13.930
But the average person learns by example.
00:32:14.730 --> 00:32:39.000
Uh, maybe it, it's not the case for everybody, but the average person learns by example, it's a lot easier to learn from something that you see, you can touch, like with your own sensitive is done, trying to understand from something very abstract and, and Bryan, you, you outlined it really well when you look at any language or tool and you see that you have to install whatever thing that you've never heard about.
00:32:39.150 --> 00:32:49.079
Like, I know that if I was not already in love with, with, with the field and tech in general, I'd be like, you know what, I, I don't have time for this and I don't have time.
00:32:49.180 --> 00:32:54.319
And I don't have the curiosity because the reward, uh, is not there.
00:32:54.430 --> 00:33:14.750
Like I'm aware of the rewards because I've been in the field, but if you're just start starting out and you don't have that patience and you, and you don't have that curiosity that comes with time, then there's no way that you're gonna invest your time into like jumping through all the hoops.
00:33:15.190 --> 00:33:34.180
I think that's a really important point that it enables co collaboration with not only like other developers at already the same level as you, and who are already willing to, to jump through those hoops, but other people who might benefit from the underlying systems that are actually really solid.
00:33:35.740 --> 00:33:36.019
I agree.
00:33:36.259 --> 00:33:41.690
I think that's, and we've been talking now mostly about designers, but there are so many other roles within the company.
00:33:41.829 --> 00:33:52.210
So for example, what if you could make it possible to, to write content and maybe underneath it's, uh, in visual way, and maybe underneath it changes, adjacent file or an MDX file or an MD file.
00:33:52.470 --> 00:33:57.809
But if you can make that process visual, then suddenly you make it also possible for other people to work on top of kits.
00:33:57.810 --> 00:34:01.480
And I think get itself, you is very powerful.
00:34:01.750 --> 00:34:09.119
It's a very powerful tool and it allows, and it's also a nice I way because it allows people to really integrate with anything.
00:34:09.179 --> 00:34:18.280
It allows people to integrate with GitHub, have these hooks on top of it, or it allows people to integrate with any kind of code editor, but GI is very cryptic.
00:34:18.309 --> 00:34:20.119
It's, it's, it's not, it's not intuitive.
00:34:20.769 --> 00:34:32.429
So if you can build an intuitive layer on top of GIS, while still retaining the power of GIS keeping making, and having the possibility to tap into the existing ecosystem that already revolves around GIS.
00:34:32.789 --> 00:34:46.820
I think that is a very interesting challenge, but a very worth it's a very worthwhile challenge too, too, because it's only, it enables other people besides developers who went through the hoops to learn gifts, to also contribute to a code base.
00:34:47.719 --> 00:34:50.539
So that's actually a really good segue to, to my next question.
00:34:50.769 --> 00:34:53.500
Like another big aspect for me of collaboration.
00:34:54.300 --> 00:35:07.610
Uh isn't, it's not just with your teammates, it's with users and as a library maintainer, uh, an important part of my day is to help out users to interact with people that I don't work with directly.
00:35:07.989 --> 00:35:17.329
So you're investigating tickets, you're solving issues, et cetera, and Algolia specifically, but in many other, like I know tailwind uses code sandbox.
00:35:17.369 --> 00:35:21.889
A lot for that, uh, code sandbox has become really central to, to the process.
00:35:22.110 --> 00:35:30.639
Like we, we can ask, uh, users to provide issuer productions as code sandbox, you know, and they don't even have to come up with it.
00:35:30.659 --> 00:35:40.119
We can provide them with starters that we have in GitHub and they can open it directly in code sandbox, but also, and that might be my favorite feature.
00:35:40.179 --> 00:36:00.469
And you know, it, because I tweeted that at you, if you've set up code sandbox CI in your project and you open a poor request, and in that poor request, you reference an issue that has a reproduction sandbox in it, then code sandbox will act it, and it will rebuild the sandbox with your changes in it.
00:36:01.130 --> 00:36:08.750
And this removes so much friction for users, for maintainers, for reviewers, anybody participating in, in the CI process.
00:36:08.860 --> 00:36:13.829
Because, you know, when I see that notification that, oh, there is a new commit or a new thing.
00:36:14.690 --> 00:36:28.139
If I know beforehand that I will have to clone it locally to try and see if it works and build a thing, maybe I'm gonna think, eh, you know what, I'll check this out in three hours because I'm, I'm focused right now.
00:36:28.141 --> 00:36:31.139
And I don't want it to take an hour to do that.
00:36:31.400 --> 00:36:40.969
But if I know for a fact that it's gonna take five minutes and I'm, it's not gonna break my concentration, then it makes the process a lot smoother for everybody.
00:36:40.989 --> 00:36:44.449
And you don't have people waiting for me, uh, to, to take action.
00:36:44.590 --> 00:36:47.530
So ultimately it's better for collaboration.
00:36:47.849 --> 00:36:49.489
It's better for UX in general.
00:36:50.030 --> 00:37:00.039
So I I'd love to know, like, if you can tell us a bit more about code sandbox, CI what it is and what, what are the, the goals to, to help out library maintainers.
00:37:01.070 --> 00:37:01.360
Yeah.
00:37:01.360 --> 00:37:16.280
What you mentioned there is also a very interesting point that if you reduce the feedback loop, and if you reduce the friction to build something, then the, I think that the quality of what you're building goes up as well, because you have more iterations that you can spend on something.
00:37:16.340 --> 00:37:21.909
But also there are just things that sometimes are super, super, super small.
00:37:22.059 --> 00:37:30.869
Like someone wants to have the margin, a couple pixels changed, or someone wants you to fix this little bug that happens in 10,000 cases.
00:37:31.340 --> 00:37:42.340
Sometimes I think that I notice this myself that if it's, uh, if it's trouble to, if I need to do a lot to fix it, then I think, okay, I postpone and postpone it until I didn't, until I forget about it.
00:37:42.800 --> 00:37:46.460
If you make it very easy, then these changes are until be fixed faster.
00:37:46.679 --> 00:37:53.460
So I think that's an interesting thing that even improve by improving the speed of the feedback loop and the iteration cycle.
00:37:53.559 --> 00:38:23.920
You will also be able to create a more high quality product doesn't matter what kind of product you're building well anyway, so to the original, uh, question, uh, of code CI another, uh, for code sandbox, when we released code sandbox, we didn't see the bug report case at all, never expected that bug reports would be a case where code sandbox would be used, um, until the author of react form by the time react, uh, Redux form.
00:38:24.079 --> 00:38:25.480
I think his name is Eric.
00:38:26.000 --> 00:38:29.760
He started to use it for bug reports and I was thinking, wow, that is genius.
00:38:29.989 --> 00:38:32.840
That is such a nice way to use, uh, sandboxes.
00:38:32.860 --> 00:38:35.960
And since then, it's become a really, really, really big use case.
00:38:36.739 --> 00:38:51.559
So when code sandbox just kept funding in 2019, um, we were thinking, okay, what is a very quick and nice way that we can give a lot of value to people using code sandbox?
00:38:52.340 --> 00:38:58.429
And we didn't want to change code sandbox itself because code sandbox was used for a lot of different use cases.
00:38:58.530 --> 00:39:00.989
And that's something that we really liked about code sandbox.
00:39:01.369 --> 00:39:09.550
So essentially we wanted to build a new service that you could use alongside code sandbox, but it would make code SIM more powerful for a certain type of use case.
00:39:09.929 --> 00:39:12.309
And that use case was open source maintaining.
00:39:13.030 --> 00:39:17.539
Um, we saw that code SIMIX was used a lot already by, uh, maintainers for bug reports.
00:39:18.769 --> 00:39:22.150
So we were thinking, okay, how can we make that flow more valuable?
00:39:22.250 --> 00:39:27.150
And we started to look at how maintainers used, uh, codes and books.
00:39:27.210 --> 00:39:34.070
And the general flow that we saw happening often is that as a library, maintainer, you ask in the issue.
00:39:34.329 --> 00:39:43.980
If someone can give you a codes and books reproducible, then you check that reproducible on code sand books, you see the bug and then you fix it.
00:39:44.039 --> 00:39:48.460
And then in the PR you referred your original issue, like fixes this issue.
00:39:48.639 --> 00:39:52.420
And once you verify that it works, then you merge it.
00:39:52.420 --> 00:39:53.219
And the issue is closed.
00:39:53.489 --> 00:39:54.340
That was one flow.
00:39:54.599 --> 00:39:59.329
The other flow is that someone opened so bug re report and they have a code sandbox in there.
00:39:59.349 --> 00:40:16.489
And that someone else fixes that issue and refers to the original issue as fixes this, in that case, one of the maintainers will have to get that code sandbox from the original issue in some way, install that new version of, uh, the PR and then verify that it works.
00:40:16.550 --> 00:40:19.159
So they will have to download the PR locally.
00:40:19.699 --> 00:40:25.920
And while for GitHub, that's even harder because if it's an outside maintainer, then you have to cl the repository separately.
00:40:26.139 --> 00:40:27.840
So that was the flows that we looked at.
00:40:27.900 --> 00:40:36.699
And then one immediate fix that we were thinking of is that every time you open a port request, we should build a new sandbox.
00:40:36.699 --> 00:40:38.050
We should create a new inbox.
00:40:38.869 --> 00:40:46.170
And with that MPM version of that port request directly installed, and that was one side to it.
00:40:46.389 --> 00:40:51.170
We should also make it possible for you to install that MPM version locally.
00:40:51.269 --> 00:40:59.760
So essentially what we built was a little MPM publishing tool that would, um, that would build your library for every port request.
00:40:59.860 --> 00:41:03.159
So that, and give you back a sandbox with the pre-install version of the library.
00:41:04.019 --> 00:41:09.719
And this is funny because at the start of this, uh, podcast, I was talking about the three different inputs.
00:41:10.239 --> 00:41:13.119
Uh, in this, we kind of only used one input.
00:41:13.539 --> 00:41:18.880
We, we neglected data, we neglected, uh, we neglected, uh, user request.
00:41:19.369 --> 00:41:21.429
We immediately just went for the user story.
00:41:21.619 --> 00:41:22.710
What is the user story?
00:41:22.730 --> 00:41:24.789
And how can we help that help with that?
00:41:24.791 --> 00:41:30.949
But this felt like such an valuable user story, such an effective user story that we started working on it.
00:41:30.949 --> 00:41:33.599
And we asked a react team if they wanted to use this.
00:41:34.099 --> 00:41:36.039
And the react team was also very excited about this.
00:41:36.041 --> 00:41:37.920
They gave us a lot of feedback as well.
00:41:37.980 --> 00:41:43.800
So we did, we did seek out feedback before finally releasing it, but when we released it, we saw more and more people using it.
00:41:44.070 --> 00:41:48.719
That was the, that was bit of how we built it, but we built it very quickly.
00:41:48.920 --> 00:41:52.199
I think in total, we were working on it for, uh, three weeks.
00:41:52.929 --> 00:41:59.590
And with even those little, with that little time, we were able to create a lot of, make it very valuable.
00:42:00.010 --> 00:42:04.750
So now if you open a port request, then we, and it mentions an existing issue like you mentioned.
00:42:04.989 --> 00:42:09.389
And, uh, we take that sandbox from the original issue, install the new version of the library from the port request.
00:42:09.409 --> 00:42:13.900
So that maintainers just have to open a sandbox to see if it's actually its the issue.
00:42:14.119 --> 00:42:17.340
And the other nice thing is that this is not built inside code sandbox.
00:42:17.340 --> 00:42:25.460
It's kind of like a thing that you can use next to code sandbox and it uses code sandbox, but uh, doesn't change functionality within code sandbox.
00:42:26.349 --> 00:42:26.639
Yeah.
00:42:26.840 --> 00:42:32.679
I think you also raised a good point is that, you know, it, it doesn't have to be a religion of oh yeah.
00:42:33.070 --> 00:42:37.909
Only we only take user feedback and, and everything has to be vetted by users.
00:42:38.170 --> 00:42:40.550
Or we only do what we think is good.
00:42:40.550 --> 00:42:50.550
Like sometimes when you have a hunch, sometimes it's nice to follow it, but it doesn't have like to be a hard rule of, we always do it like this or we always do it like that.
00:42:50.670 --> 00:42:57.860
I like that you bring some like just logical thing king into, Hey, you know, we don't know enough on this use case.
00:42:57.880 --> 00:43:05.940
So let's ask people, but on this, we've already seen people use it so much that we have a pretty good idea that it's gonna work.
00:43:05.960 --> 00:43:08.019
So yeah, I think, I think that's really interesting.
00:43:08.639 --> 00:43:10.820
We are reaching the end of this show.
00:43:10.960 --> 00:43:22.530
So I will ask you to wrap this up the, a traditional question of the show, which is how do you define great DX and what's your personal level of expectations?
00:43:23.630 --> 00:43:40.760
One thing that I really like to think about always when building something is that you need to build for two flows, essentially you need to build the accessible flow, which is flow where someone doesn't know about the feature or they are looking for the feature, but they don't know where to find it.
00:43:40.780 --> 00:43:43.880
So you need to, for example, make it accessible by the mouse.
00:43:43.940 --> 00:43:47.239
That's, let's say you're building a feature where you can create a new file.
00:43:47.539 --> 00:43:49.719
You want to make it accessible by the mouse that you can right.
00:43:50.000 --> 00:43:52.199
Click right, click on a document and you have this new file.
00:43:52.420 --> 00:43:54.159
That's the accessible way to do it.
00:43:54.460 --> 00:44:05.750
But I think alongside that, you also need to think about the power user way, um, the way that, um, where you can do it very fast, ideally without using the mouse.
00:44:05.929 --> 00:44:08.750
So it's either a shortcut, it's something in the commands.
00:44:09.050 --> 00:44:15.349
For example, something where someone can use it very quickly because they use need to, uh, use it often.
00:44:15.809 --> 00:44:20.739
So I think you need to, for a certain feature, you need to think about both flows and implement both.
00:44:21.760 --> 00:44:30.260
And once you've finished that feature, you need to look at ways how you can teach people to go as quickly as possible from the accessible flow to the power user flow.
00:44:30.480 --> 00:44:31.679
That's the interesting challenge.
00:44:31.789 --> 00:44:40.840
Like how can you teach someone as quickly as possible what the shortcut is and help them help them get more productive in the tool that you're building.
00:44:41.659 --> 00:44:50.000
And two examples of companies, uh, that I think are doing this really, really, really, really, really well when it comes to UX is, uh, super human.
00:44:50.001 --> 00:44:54.510
That's an email client and linear, that's a task management tool.
00:44:55.460 --> 00:45:02.230
They have both have some very good UX where everything's accessible through the commandlets.
00:45:02.289 --> 00:45:10.630
If I, if I want to change the status of a, of a task in linear, I can open a commandlet and set, uh, do and type set status and it, I will get the command.
00:45:10.949 --> 00:45:17.940
But the interesting thing is next to that command in the commandlet, I will also see the keyboard shortcuts and I will have this little visual.
00:45:18.579 --> 00:45:19.780
I will have very quick.
00:45:19.980 --> 00:45:29.860
I will see it very shortly, but it will be if I do set status from, from the commandlet 10 times at that point, the com the keyboard shortcut will be in my brain.
00:45:29.880 --> 00:45:31.139
And then next time I won't use it.
00:45:31.141 --> 00:45:52.789
And that super interesting if you have that mentality of making, making every feature accessible, but also have them have, have it, have a power user flow, and then getting from that accessible, teaching them as fast as possible, essentially to go to that power user, because it will make your developer tool more powerful because people can do more with it faster.
00:45:53.409 --> 00:46:01.190
It will also make the person using your tool feel more powerful because they know how to use your tool fast.
00:46:01.449 --> 00:46:09.989
And it will be a big enjoyment for a lot of people just to feel smart in knowing that, you know, how to quickly use the tool that it's your tool of trade.
00:46:09.990 --> 00:46:14.780
So to say, so, yeah, that's, uh, that's one of things that I would, uh, look out for
00:46:15.349 --> 00:46:17.300
Bryan, how do you define grade DX?
00:46:17.320 --> 00:46:19.539
What's your personal level of expectations,
00:46:20.460 --> 00:46:28.579
Kind, what you just touched upon, like the ability to find and learn your user flows, uh, is super important.
00:46:28.581 --> 00:46:30.820
That's actually like one of the tenets of usability, right.
00:46:30.920 --> 00:46:32.139
Is, is learn ability.
00:46:32.159 --> 00:46:39.809
It needs to be something that you can figure out, but then you take a step further and you say, how quick can a user accomplish the task they want to do.
00:46:40.019 --> 00:46:41.889
Those are two almost equal levels.
00:46:41.989 --> 00:46:44.210
And so I think that's, that's super important.
00:46:44.269 --> 00:46:53.449
But for me, tools, I usually look for things that allow me to break things, but not in an unrecoverable way, cuz I'm a breaking things, driven developer.
00:46:53.451 --> 00:47:02.800
And so I like to break things, fix it, break things, fix it and making sure that is as quick a flow as possible to me is a really big dev tool DX important thing.
00:47:03.949 --> 00:47:08.559
Awesome Eve, thank you so much for chatting with us today.
00:47:08.579 --> 00:47:13.280
It was a really great conversation, Bryan, thank you for co-hosting with me today.
00:47:13.280 --> 00:47:15.989
That was a first and I think that went really well.
00:47:16.139 --> 00:47:17.070
Totally a pleasure.
00:47:17.329 --> 00:47:24.670
So for you listening at home, maybe at the office, maybe doing your morning, run your dishes or planning your next OKRs.
00:47:25.510 --> 00:47:26.750
I hope you had a blast.
00:47:26.849 --> 00:47:33.480
Thanks a lot for following developer experience and stay tuned for the next episode, which will be led by Bryan.
00:47:34.400 --> 00:47:34.400
Woo.
00:47:35.440 --> 00:47:35.840
All right, bye.
00:47:36.039 --> 00:47:36.039
Bye.
00:47:38.070 --> 00:47:42.320
This was developer experience a podcast brought to you by Algolia.
00:47:42.820 --> 00:47:45.800
You can find this podcast on your favorite podcast platform.
00:47:46.219 --> 00:47:52.789
We are on Spotify, Apple Podcast, Google podcast, Pandora, Overcast, everywhere.
00:47:53.449 --> 00:48:00.510
If you want to know more about Algolia check us out on algolia.com and we are at Algolia on Twitter.
00:00:00.220 --> 00:00:06.799
And we'd never thought about making code development more easy to learn, but that became our most important part.
00:00:06.849 --> 00:00:15.000
After that, after seeing even we had, uh, some children using code Sams to learn, and that was, that felt pretty crazy.
00:00:15.300 --> 00:00:16.600
And that was super cool to see.
00:00:20.359 --> 00:00:25.510
Hi everyone, and welcome to developer experience a podcast by Algolia.
00:00:26.210 --> 00:00:33.750
We chat with guests who build products for developers about their developer experience, strategy, what it means for them, why it's important.
00:00:34.170 --> 00:00:39.310
And so on I'm Sara Deon today, we are doing a special episode.
00:00:39.490 --> 00:00:45.979
Not only because we have an I'm guest once more, but because I'm joined by my new co-host Bryan.
00:00:46.229 --> 00:00:46.859
Hello, Bryan.
00:00:47.280 --> 00:00:47.780
Hey Sarah.
00:00:47.780 --> 00:00:48.299
How's it going?
00:00:48.799 --> 00:00:49.539
I'm going great.
00:00:49.540 --> 00:00:50.020
Thank you.
00:00:50.039 --> 00:00:52.579
Can you briefly introduce you for listeners?
00:00:52.581 --> 00:00:53.179
Don't know you
00:00:53.649 --> 00:00:53.939
Sure.
00:00:53.960 --> 00:00:54.859
So I'm Bryan Robinson.
00:00:55.219 --> 00:00:57.579
I am a senior developer advocate here at Algolia.
00:00:57.581 --> 00:01:04.409
I've been doing some form of web design development for about 15 years, but lot of that time was specified around user experience.
00:01:04.689 --> 00:01:12.530
Uh, so when I finally joined the ranks of developer advocates, it was kind of a natural progression to keep thinking about UX, but for my favorite group of users, developers.
00:01:12.640 --> 00:01:13.129
Awesome.
00:01:13.469 --> 00:01:20.530
And so in today's episode, we are going to talk about fostering developer collaboration in a remote world.
00:01:21.069 --> 00:01:32.120
So working is not something new, especially in the tech industry, but since the beginning of the pandemic in 2019, there's been a wave of tech workers going remote first.
00:01:32.120 --> 00:01:34.920
It was by necessity and then by choice.
00:01:35.620 --> 00:01:39.920
So how do you collaborate when your coworkers are not in the same room?
00:01:40.459 --> 00:01:43.549
Not at the same city country are even continent.
00:01:44.129 --> 00:01:47.469
How did it change our processes and our tools?
00:01:47.810 --> 00:02:07.099
So our guest today to talk about that is Ives van Hoorne creator of code sandbox code sandbox is the most advanced cloud based sandbox environment that lets developers quickly start and share prototypes, but also collaborate on projects, provide bug reproductions.
00:02:07.400 --> 00:02:16.539
And all of that in the browser code sandbox is used at organizations like Atlasian Shopify strive, Microsoft and ourselves.
00:02:16.639 --> 00:02:21.219
We are big code sandbox users at Algolia hello, if
00:02:21.750 --> 00:02:24.289
Hello, good, uh, app new or morning.
00:02:25.110 --> 00:02:31.610
So first off, I want to say congratulations for your involvement in the beta react documentation.
00:02:31.610 --> 00:02:42.090
So we are recording this on Monday 25th of October, and the new react docs just shipped in beta and so congrats to the, the react team first off.
00:02:42.550 --> 00:02:53.280
But what I've seen is that they're using those really fabulous embedded interactive send boxes using send pack, and Sendak is the browser bundler, that powers code sandbox.
00:02:53.740 --> 00:02:58.719
So can you tell us a bit more about this collaboration, how it went, what was your involvement?
00:02:59.430 --> 00:03:01.759
Yeah, the new react documentation.
00:03:02.419 --> 00:03:04.319
It looks super, super nice.
00:03:04.669 --> 00:03:15.360
It's funny because it's been a dream of me and I think of some others since coach SIM started, uh, it was a dream that we could go to the react documentation.
00:03:15.460 --> 00:03:25.150
And it's funny because when the react documentation was released a couple of years ago, we already were talking about, oh, wouldn't it be cool if we could have code sandbox in that react documentation.
00:03:25.330 --> 00:03:29.590
So it's been a dream for a long time and it's super nice to now see it come to life.
00:03:30.169 --> 00:03:40.539
And the, the collaboration started off because the react team was working on, uh, the new documentation, the new project, and they've been working on it for a long time, put a lot of love in it.
00:03:40.610 --> 00:03:41.500
They have rewritten.
00:03:41.770 --> 00:03:50.699
Well, I think they've gone through multiple many iterations before they, uh, released this one, but they were also looking at how to use interactive codes in their documentation.
00:03:50.699 --> 00:03:56.379
Because being able to play with codes is one of the most important ways to learn for a lot of people.
00:03:56.719 --> 00:04:03.569
If you see something and you can immediate type in it and see it update life, then you immediately get that a powerful feeling.
00:04:03.789 --> 00:04:06.009
You feel empowered in, uh, in some way.
00:04:06.550 --> 00:04:11.969
And so they were looking okay, how can we maximally utilize this interactive code?
00:04:12.319 --> 00:04:17.050
They were, I think the reacting was already using, they are already using codes, inbox, uh, quite a bit.
00:04:17.069 --> 00:04:22.120
So they went to us and we had been working on a project called send for a while.
00:04:22.350 --> 00:04:26.839
It's a project that has been released, I think, unofficially a couple years ago.
00:04:27.060 --> 00:04:32.279
And then we put it on the shelf for a while, but this was for us, the perfect moment, Tove it.
00:04:32.281 --> 00:04:36.839
So to say, and send back essentially is what code sandbox uses.
00:04:37.480 --> 00:04:41.949
Uh, so code sandboxes is online code that it, where you have code on the left and a preview on the right.
00:04:41.951 --> 00:04:44.470
And when you change codes, the preview updates.
00:04:44.970 --> 00:04:48.069
And the interesting thing is that we execute all codes in the browser.
00:04:48.250 --> 00:04:57.110
So we have this in browser, JavaScript Butler or compiler and sent back is essentially that we took the existing bundler and put it in a library.
00:04:57.930 --> 00:05:07.100
And with that, we wrote a, some component that allow you to create your own playgrounds, because that was the real thing that the react team needed.
00:05:07.250 --> 00:05:13.220
They wanted to have something so specific for their experience, that they should be able to completely customize it.
00:05:13.240 --> 00:05:18.939
And this is why we started sent back again, because now we have sent back, you can create your own components.
00:05:19.319 --> 00:05:20.699
You can create your own code editor.
00:05:21.040 --> 00:05:22.649
You can at your own file, explore.
00:05:22.649 --> 00:05:31.209
You're gonna create your own tap system, even your own preview, but the library provides you a hook that will allow you to execute the code and give you the results back.
00:05:31.550 --> 00:05:37.329
And this allows the react team to really create a customized experience using the bundler of codes and books.
00:05:37.509 --> 00:05:58.000
And well, that was super interesting because with this is just one implement, you know, send back, but you can use it for so many things you can, for example, the be rep could use it to show transpo codes on the rights, or if you're building a website where students can, uh, go through courses, you could use, send back to create these step by step processes.
00:05:58.379 --> 00:05:59.959
It even has just support.
00:05:59.961 --> 00:06:01.279
So it can run unit tests.
00:06:01.281 --> 00:06:09.240
So you can even evaluate, you can give like tests to students, and then you can use sent back to evaluate whether their code was written correctly and all the tests best.
00:06:09.699 --> 00:06:13.279
So yeah, probably a long description of sent back, but it's been a labor of love.
00:06:13.439 --> 00:06:14.879
I have only started it.
00:06:14.880 --> 00:06:18.709
We've had many people, uh, within code and working on sand back.
00:06:19.050 --> 00:06:25.990
And it's really nice to now see a practical implementation of sand back in the react documentation.
00:06:26.939 --> 00:06:27.230
Yeah.
00:06:27.389 --> 00:06:36.269
I, I think it's really interesting to see because at the, at the core of it, it's still code sandbox running and in your code is still running in code sandbox.
00:06:36.339 --> 00:06:40.500
It's not every, everything is shipped in your side, but you control the experience.
00:06:40.959 --> 00:06:42.339
And I really love that.
00:06:43.199 --> 00:06:52.980
Now, as you were saying, bubble could use it for the rep or maybe pre or could, could use it for the re and it's removing so much friction.
00:06:53.129 --> 00:07:00.689
Like there are so many cool ideas that I feel go in the trash because thet is not staffed enough or we don't have time.
00:07:01.269 --> 00:07:04.009
And now, yeah, you can have great search.
00:07:04.470 --> 00:07:20.959
You can have great code snippets that actually run because people who are specialized on that task who have dedicated their career to making that better are at least a piece of their career to making that better now provide those awesome tools.
00:07:21.139 --> 00:07:35.879
And, and I think what's really interesting is that we're at a stage in web where we can do so many things like a webpage can be so dynamic, but still we have blogs and documentations that are basically text images and that's it.
00:07:35.880 --> 00:07:53.629
And maybe sometimes videos and so sad that we have such a vibrant ecosystem of tools and that we still don't have those pieces of content that could be so much richer when you add something where they can play with it.
00:07:53.769 --> 00:07:58.709
And so I'm really glad to see all those tools emerge and, and definitely for document.
00:07:59.319 --> 00:08:02.980
It definitely gave us ideas, Al Goya, just looking at that.
00:08:03.519 --> 00:08:14.420
And I find it beautiful that you're not restricted to, it's either an eye frame and you don't control anything, or it's gonna be a custom component and it's gonna be six month of your time.
00:08:14.420 --> 00:08:17.620
And you're gonna even come close to what code send box is.
00:08:19.139 --> 00:08:19.420
I agree.
00:08:19.930 --> 00:08:28.290
I think that there are, like you said, there are a lot of ideas probably thrown out the window because the implementation seems too daunting or is too daunting to do.
00:08:28.949 --> 00:08:36.690
And with a library like this, if someone has an idea to, for example, maybe there, there are even better ways to teach.
00:08:36.779 --> 00:08:52.159
Maybe something new will come up where there's a different type editorial, maybe even where people can help each other live, where maybe there is a way for universities, for example, to teach in a different way where you have a physical classroom, not a physical, but a virtual classroom.
00:08:52.700 --> 00:08:56.440
And, uh, the teacher can jump into different code snippets and help students.
00:08:56.441 --> 00:09:03.840
Well, these are all interesting ideas that are now easier to explore because you can use, send back to execute the codes.
00:09:04.259 --> 00:09:09.159
And another nice thing is that we even have the option for you to self-host send back.
00:09:09.620 --> 00:09:17.149
So even if code send books would go down, for example, your examples will still work and well I'm, I'm very much looking forward.
00:09:17.259 --> 00:09:19.429
It's similar to how code send got started.
00:09:19.669 --> 00:09:25.029
When we started building code send books, we had one big use case in mind with a sub couple of sub use cases.
00:09:25.690 --> 00:09:29.750
And people used it for so many other use cases that we didn't expect.
00:09:30.090 --> 00:09:47.500
And I'm hoping that with sent it will be the same thing that people will use send for that we never have imagined when we started, uh, working on sand spec and will make it easier for other people to get introduced, to coding or get more familiar with certain libraries or frameworks or well, anything.
00:09:48.370 --> 00:09:48.659
Yeah.
00:09:48.899 --> 00:10:02.570
And, and you said it like code sandbox started from a simple, but powerful idea was like putting the main tool of a developer, which is, is basically their IDE with the terminal in the browser so that they can build and share their ideas easily.
00:10:02.870 --> 00:10:09.450
And Algolia, especially in my team where we're doing, uh, frontend libraries, we are big code sandbox users.
00:10:09.590 --> 00:10:10.690
We use it for demos.
00:10:10.691 --> 00:10:12.090
We use it for bug reproduction.
00:10:12.549 --> 00:10:14.289
We use it for proof of concepts.
00:10:14.830 --> 00:10:17.480
And we also use it for direct collaboration.
00:10:17.659 --> 00:10:28.039
For example, early this year, we shipped a new search experience in the Algolia docs, but the development work of that started six months before in code sandbox.
00:10:28.100 --> 00:10:31.919
It was like between three people in three different French cities.
00:10:32.539 --> 00:10:36.360
And we were using zoom and code sandbox live, and that's where it all.
00:10:37.250 --> 00:10:45.950
And without such a tool, we would've been like screen sharing a local environment where one person would be coding and we would be pushing and pulling a temp repo.
00:10:46.330 --> 00:10:49.070
And they were just working together alive in the browser.
00:10:49.289 --> 00:10:52.909
So like, it's not just a small, handy feature.
00:10:53.059 --> 00:10:56.149
It's like a massive leap in developer experience.
00:10:56.370 --> 00:11:07.100
And for us, it removes so much friction, especially when we're early in the project, we're ideating you don't want to get anything in the way when you're just like spouting ideas.
00:11:07.100 --> 00:11:08.340
So I'm really interested.
00:11:08.490 --> 00:11:11.860
Like how did you see people use code sandbox over the years?
00:11:11.889 --> 00:11:16.139
Like ways you did not imagine, and how did it shape the product direction?
00:11:17.090 --> 00:11:25.940
So code sand started with the idea that the JavaScript community in particular is very collaborative.
00:11:25.960 --> 00:11:31.940
People share a lot of work, but at the time people shared it in through GitHub repositories.
00:11:32.399 --> 00:11:36.899
And while I was at work, I was at work as a web developer at an auction website.
00:11:37.139 --> 00:11:41.049
I was on vacation at some point, and I got questions for my coworkers about pieces of codes.
00:11:41.230 --> 00:11:45.409
And I couldn't really answer those questions because they just sent me snippets on slack.
00:11:45.410 --> 00:11:49.129
They sent me get the prepository files and I couldn't run the codes.
00:11:49.190 --> 00:11:50.610
And that's when the idea came up.
00:11:50.769 --> 00:11:51.409
That would be interesting.
00:11:51.549 --> 00:11:55.559
So code sandbox was built around that idea.
00:11:55.700 --> 00:12:08.559
We should make it easier for people to share their codes with the environment, instead of only sharing like the static codes actually make it come to life by also running the codes and giving these intelligence on top of it.
00:12:08.740 --> 00:12:10.159
And that's the I first idea of codes.
00:12:10.340 --> 00:12:17.950
And I didn't do much with that idea until I started actually going to university some point, I started feeling unproductive and I thought, okay, this is a nice side project to work on.
00:12:18.129 --> 00:12:21.629
And Goem at the time has gone through so many iterations.
00:12:21.700 --> 00:12:24.110
It's first started as this react component editor.
00:12:24.740 --> 00:12:27.990
Then it became a place where people could write MPM libraries.
00:12:28.259 --> 00:12:31.870
Then it became a place where people could publish online MPM libraries.
00:12:31.870 --> 00:12:39.340
And it's really funny because at this point you see none of that back in code sandbox right now, code send is an online code edit there.
00:12:39.600 --> 00:12:44.700
And it has gone through so many iterations before it really became the code sandbox.
00:12:44.720 --> 00:12:45.460
It is today.
00:12:45.720 --> 00:12:47.980
And that was a, and that was a big learning for me.
00:12:47.980 --> 00:12:50.659
That code SIM started with a very different idea from what it is today.
00:12:51.200 --> 00:12:58.019
And I see many people with, they have an idea, but then they say, I'm not gonna work on it because the idea doesn't sound right.
00:12:58.120 --> 00:13:10.100
It doesn't sound like a good idea, but I think the only way to get really to a great idea is to start working on the idea and to refine it, not holds the hold, the idea too close to heart, be able to be flexible.
00:13:10.919 --> 00:13:12.659
And, uh, that's what happened with coach Sam.
00:13:12.720 --> 00:13:14.889
It was a very different idea year when it started.
00:13:15.149 --> 00:13:22.409
And when it finally was released, it had gone through so many transformations that it had a completely different idea behind it.
00:13:23.110 --> 00:13:31.750
And the funny thing is that when we released code sandbox, people used it for ways that we never imagined.
00:13:31.850 --> 00:13:36.620
We initially built code sandbox as a way for people to very easily collaborate.
00:13:37.039 --> 00:13:42.179
But then for example, people started to use it to learn how to code, because makes sense.
00:13:42.279 --> 00:13:55.259
If you want to learn how to code, you don't want to learn how a terminal works, how test work, how bundling works, how WebEx at the time, uh, worked then, uh, you just want to press a button and have an environment for your set.
00:13:55.830 --> 00:14:00.330
So code cinema started to be used by people who want to learn, how to code start to be used for workshops.
00:14:00.350 --> 00:14:10.330
It started to be used for documentation, and we'd never thought about making code development more easy to learn, but that became our most important part.
00:14:10.340 --> 00:14:18.559
After that, after seeing even we had, uh, some children U using code Sam learn, and that was, that felt pretty crazy.
00:14:18.860 --> 00:14:20.240
And that was super cool to see.
00:14:20.539 --> 00:14:24.879
So code SIM started to really make collaboration between cohorts more easy.
00:14:25.340 --> 00:14:28.799
And then we saw the new use cases that code sandbox enabled.
00:14:29.019 --> 00:14:32.960
And then we changed our prioritization to make development also more accessible.
00:14:33.460 --> 00:14:37.070
So we have for code SIM, we have that we want to make more accessible.
00:14:37.071 --> 00:14:40.389
That's the most important part because development is only becoming more and more important.
00:14:40.990 --> 00:14:42.950
And the second part is that we want to enable collaboration.
00:14:43.649 --> 00:14:50.509
So the humbling thing of this is that I think you can never know how people will use what you build.
00:14:50.620 --> 00:14:56.000
Like it's so hard to predict what people get as value from something.
00:14:56.340 --> 00:15:03.679
The only way to know is to release it and to essentially release fast, because you can build in so many assumptions.
00:15:04.059 --> 00:15:08.039
But the only way that you'll know is when actually people start using it.
00:15:08.059 --> 00:15:17.009
And we've, we've gone into that trap with code sandbox, because we got very demotivated around January, 2017 with code sandbox.
00:15:17.010 --> 00:15:18.129
It was already kind of finished.
00:15:18.649 --> 00:15:23.929
Uh, we still wanted to build a lot of features, but we thought, okay, well, most of it is done and we stopped working on it.
00:15:24.110 --> 00:15:29.129
And then at some point I showed it to friends and they were much more enthusiastic than I was expecting.
00:15:29.399 --> 00:15:32.200
They said that it looked awesome and that they wanted to use it.
00:15:32.259 --> 00:15:35.840
And I thought to myself, but this is just the basic version of code sandbox.
00:15:35.860 --> 00:15:37.759
We can't even publish to MPM yet.
00:15:37.860 --> 00:15:47.279
We can't even import sandbox in other sandboxes, all features, which, which I thought were essential to code sandbox, but they told me that they found it awesome already.
00:15:47.419 --> 00:15:56.870
So at that point we decided, okay, we're gonna build code sandbox as much as, as far as we can, but April 1st is the deadline.
00:15:57.029 --> 00:16:01.429
And if there are any features unfinished on April 1st, we would drop those features.
00:16:01.431 --> 00:16:05.549
And it's funny because one of those features was MPM publishing that was dropped.
00:16:05.649 --> 00:16:07.990
And we released in it on April 2nd, actually.
00:16:08.610 --> 00:16:18.019
And it started growing and it became suddenly it became, it became more popular than we were expecting with the feature set with code at the time.
00:16:18.120 --> 00:16:19.220
And that was so interesting.
00:16:19.221 --> 00:16:30.740
And it started to be used for bug reports, never expected that started to be used for hiring, never expected that either prototyping that we did expect actually, but there were plethora of use cases that we didn't think of.
00:16:30.840 --> 00:16:34.490
So yeah, I think the most important is that you have to release fast.
00:16:34.590 --> 00:16:41.889
You have to get as much feedback feedback as possible because you can't predict what people can use it for and you have to evolve an idea.
00:16:41.950 --> 00:16:42.970
Let the idea evolve.
00:16:43.110 --> 00:16:49.730
If you think of an idea and you think it's not perfect, that's not a problem because you will have enough chance to refine it as you work on the idea.
00:16:50.450 --> 00:16:55.559
I never expected code sandbox to have an origin story that was collaboration focused.
00:16:55.580 --> 00:17:01.240
It feels very much like this online editor that makes it really easy for newbies and, and like people to kind of get up and running.
00:17:01.740 --> 00:17:13.480
But you kind of, you kind of mentioned you pivoted to go towards that, that new and educational focus, but then one of the first features that really kind of took off was that MPM package publishing, that's not a newbie friendly thing.
00:17:13.480 --> 00:17:22.789
So how do you kind of prioritize and know what features are gonna be good for the collaboration set versus the education set and prioritize those accordingly
00:17:23.609 --> 00:17:24.509
Prioritization?
00:17:25.140 --> 00:17:26.910
It's really, it's really an art.
00:17:28.470 --> 00:17:30.349
I don't think I can give a perfect answer.
00:17:31.150 --> 00:17:36.779
Um, it's the most important thing I think is that, well, you have a lot of different inputs.
00:17:36.780 --> 00:17:39.819
You have people giving feedback, how much feedback you get.
00:17:39.839 --> 00:17:46.380
So for example, we had one feature at some point that got by far the most thumbs up, and then, you know, okay, this is probably interesting.
00:17:46.900 --> 00:17:55.440
And you have, uh, data on how people use product that is also very valuable because you know exactly what feature is never used and what feature is used at done.
00:17:55.441 --> 00:18:04.039
And if one feature, for example, if the MPM dependency installing feature is used a lot, then we know, okay, that's something that we can very much improve.
00:18:04.420 --> 00:18:13.829
And then you also have your own hus, just thinking of the stories of how people use code, send books, talking with people and hearing how they, what, what kind of things they use it for.
00:18:13.849 --> 00:18:22.670
That's also very valuable, but even with all that information, you can reliably reliably predict what's to work on.
00:18:22.869 --> 00:18:27.630
And that's why it's very important to have a very fast iteration cycle.
00:18:28.089 --> 00:18:41.579
And it fits very much into the release fast idea that when you have a hunch go immediately for the smallest MVP possible of it, like what is the smallest thing that we can release to be able to test whether it works and release it.
00:18:41.720 --> 00:18:54.970
And ideally that only takes like one or two weeks to, to build that is why the iteration cycle is by far the most important thing for projects and companies, because then you'll not get information and then you either drop it or you continue working on it.
00:18:55.269 --> 00:19:08.690
So, yeah, I, I think these three things, the data, the feedback from people on what they, what they are asking for and knowing how people, user stories of how people use your product, those are the most important things to really think about when deciding what to work on first.
00:19:08.691 --> 00:19:10.480
But even that is not a birth picture.
00:19:10.539 --> 00:19:19.759
You still have to make sure that you build it super fast so that you can get feedback as soon as possible so that, you know, if it's worth, uh, investing more time in
00:19:20.380 --> 00:19:42.829
One thing I find really interesting is also to, to look at the opportunities that are unlocked by technology arriving at a certain stage, because code send is really like leveraging the fact that we have more powerful, full featured browsers and more powerful machines like coat sandbox would not have been possible 10 years or 15 years ago.
00:19:43.049 --> 00:19:55.539
And I think that's really interesting if you make a parallel with, uh, cinema, for example, the French new wave was possible because, uh, technologically, we had cameras that were like, you basically, you could film outside.
00:19:55.599 --> 00:20:02.700
And that's what generated such like a, a stream of, of movies of a certain kind and influenced like overseas.
00:20:03.220 --> 00:20:15.529
I find it really interesting to see all the tools that now that are really web based and like web heavy, you can like Figma, like Figma is really a, a really great example of that.
00:20:15.630 --> 00:20:22.049
Or I don't remember his last name, but Sid, uh, Sid a, I think is building UI dev tools.
00:20:22.050 --> 00:20:36.240
So you can like change your tailwind component, like react, build with tailwind components in the browser with the UI dev tools and all those services that are slowly but surely migrating to the cloud.
00:20:36.259 --> 00:20:38.119
And you can do everything from your browser.
00:20:38.579 --> 00:20:43.799
And I find it really interesting how technology will also change people's minds.
00:20:43.920 --> 00:20:53.640
I started in web in 2005, like, uh, as a kid, I was working in 2005 and it was like, of course you wanted to have some kind of a DUI.
00:20:53.900 --> 00:20:58.559
It was local and you installed it on your computer, but of course you wanted that because it's more fun.
00:20:59.019 --> 00:21:02.160
And then there was a wave of, no, you are gonna use your terminal.
00:21:02.259 --> 00:21:03.359
You're gonna use an editor.
00:21:03.380 --> 00:21:06.869
You're gonna just edit text because you want be, uh, in troll.
00:21:07.289 --> 00:21:10.029
And then we threw a lot of tools out of the window.
00:21:10.210 --> 00:21:15.549
And now we're moving again to tools that feel a lot more user friendly.
00:21:15.730 --> 00:21:17.670
We don't want to have to install anything.
00:21:17.819 --> 00:21:21.269
Basically we don't wanna store anything on our computers.
00:21:21.270 --> 00:21:26.869
We just wanna work in the cloud with things that are already abstracted away where all the complexities abstract.
00:21:27.599 --> 00:21:37.059
So I find interesting how, like there's change of hearts in the community, like regarding what we want to use and what we like.
00:21:37.079 --> 00:21:43.259
And what we say is the thing at a given moment also because technologically, we are able to do that.
00:21:44.130 --> 00:21:45.140
Yeah, I agree.
00:21:45.420 --> 00:21:52.769
I can very much relate through the, the story of having using UI tools to build things.
00:21:52.910 --> 00:21:55.410
And then that all being thrown away.
00:21:55.670 --> 00:21:57.970
That's something, I think that's such a big shape.
00:21:58.410 --> 00:22:05.569
I got introduced to web development through dream Weaver, and I got introduced to development in general, through visual basic.
00:22:06.470 --> 00:22:10.839
And what these tools both in common is that they have a UI component to it.
00:22:10.840 --> 00:22:19.400
They have a UI where you can build your own UI, and then you can sprinkle logic on top of that UI by double click on elements, writing a bit of codes.
00:22:19.539 --> 00:22:30.910
And I think that made development in general, much more accessible to get started with because you have something that, you know, which is a UI that you can use, then that's your stable ground.
00:22:31.329 --> 00:22:38.150
And from there on you venture into the unknown ground, which is code, and you can link those two, just so that is super, super, super valuable.
00:22:38.170 --> 00:22:40.950
And it's such a shame that, that it was removed essentially.
00:22:40.951 --> 00:22:43.829
Well, not of removed, but it's not the default anymore.
00:22:44.289 --> 00:22:59.420
So this is also one of the most important things that with codes we're working on by putting the development environment in the browser or in the cloud, you don't need to install a development environment locally anymore.
00:22:59.799 --> 00:23:10.900
And with that, we want to make it more accessible and more easy for, um, for example, designers to be involved, let's say I'm a developer, I'm working on a UI component.
00:23:10.960 --> 00:23:12.019
I'm implementing the design.
00:23:12.839 --> 00:23:17.819
Now with coach ox, I can actually share a link with the designer and designer can see live, what I'm working on.
00:23:18.039 --> 00:23:22.380
So they don't have to install any development tooling anymore to actually see what I'm working on.
00:23:22.559 --> 00:23:29.700
So that is step one that is already such a huge step forward because now, uh, development is not this walled garden anymore.
00:23:30.369 --> 00:23:38.329
Uh, it's not this, it's not this siloed thing away, but other people can be introduced to the, um, the same environment.
00:23:38.330 --> 00:23:39.609
That's a huge part already.
00:23:40.109 --> 00:23:49.920
And the later step and the next step of code sandbox, uh, that we're working on at code sandbox is also making it possible for designers, for example, to make changes of marketing.
00:23:49.940 --> 00:23:56.640
So we introduce a bit of load, uh, low codes, uh, tooling on top of it, a bit, bit of no code tooling on top of it.
00:23:57.859 --> 00:24:05.390
And, uh, um, that is one of the, that is, that is something that's, uh, future music for code sun, but that is in the end, our goal.
00:24:06.029 --> 00:24:08.750
Cuz if you, for example, look at, look at Figma.
00:24:08.769 --> 00:24:16.269
For example, before Figma, you had design tooling and with those design tooling, you had files and you would share those files with other people.
00:24:16.289 --> 00:24:20.069
You would either use Dropbox, you would use slack, you would use email didn't really matter.
00:24:20.329 --> 00:24:30.019
It was still file sharing and developers, project managers weren't as involved with the design process because they didn't have sketch or Photoshop installed.
00:24:30.440 --> 00:24:32.819
So they wouldn't be able to give very easy feedback.
00:24:32.820 --> 00:24:38.259
They had to ask for a JAK or a P and G or something to actually see what a designer was working on.
00:24:38.680 --> 00:24:41.380
Now, when you go to Figma, I once heard somewhere.
00:24:41.400 --> 00:24:52.849
I'm not sure, uh, when or where, but I believe that more than half of Figma user are non designers, just people giving feedback, people being actually introduced into the design process.
00:24:52.950 --> 00:24:55.369
And because of this, the feedback loop is so much faster.
00:24:55.829 --> 00:25:02.329
You don't have to wait for the tickets on the cambe board to go to in review to then give feedback and have it move back to in progress.
00:25:02.670 --> 00:25:05.970
You can actually, throughout the pro process, you can give feedback it.
00:25:06.039 --> 00:25:11.680
If a designer wants to know something very quickly from an engineer or from a developer, they can just share a link with them.
00:25:11.750 --> 00:25:16.240
They can open it, they can immediately see what's wor what's working and they can immediately give their feedback.
00:25:16.259 --> 00:25:17.279
And that is so valuable.
00:25:17.480 --> 00:25:23.559
I think it allows you to create much faster and it also introduces developers more to design.
00:25:23.799 --> 00:25:33.269
Maybe I can imagine that there would be developers that have, um, that have gotten interest in design because it's now much easier to get started with it.
00:25:33.950 --> 00:25:46.029
I think that we can also do something like this with development, if we can make it possible to share the environment with a link and if we can make it possible, uh, to very easily give feedback in that environment.
00:25:46.089 --> 00:25:56.220
And if we even can make it possible for a designer to, for example, tweak styles through a UI, without having to know how to code, we can even use that opportunity to teach them how to code.
00:25:56.319 --> 00:26:07.299
We can show to the designer, if you change this little, uh, UI, then this code will change in this way and they can then see based on how the code changes, how code maps to UI.
00:26:08.410 --> 00:26:12.450
Um, I think there's a lot of opportunity there and that's really what coach sandbox is about.
00:26:13.130 --> 00:26:20.609
Um, um, I think a big inspiration there is Brett Victor, um, uh, inventing on principle.
00:26:21.450 --> 00:26:26.289
Um, there is so much where that he, he shows, uh, his talks are so great.
00:26:26.290 --> 00:26:36.039
All his talks are great, but what he is saying, actually, it's pretty crazy to think that to update styles, we have to write codes because it doesn't map as easily.
00:26:36.299 --> 00:26:42.200
We have to, as developers, we now had to in our heads find that mapping, create that mapping.
00:26:42.339 --> 00:26:43.960
And then, okay, now it makes sense.
00:26:43.980 --> 00:26:46.880
If you write display flex, it will do this.
00:26:47.720 --> 00:26:50.440
Um, but for many people it's not as obvious.
00:26:50.880 --> 00:26:55.759
And I think that's for example, uh, I, when you learn, for example, tailwind, tailwind is super nice.
00:26:55.779 --> 00:27:04.190
It makes it so much easier too, right UI, but you also had this hurdle at the start you had to, you had to memorize the, the different and uh, class names that you could use.
00:27:04.990 --> 00:27:13.430
Um, and I can imagine that a lot of people first have to learn to use this, but then also have to learn all these tricks to get their visual design well, what they want to have in the visual, uh, way.
00:27:14.210 --> 00:27:14.990
And it is possible.
00:27:15.130 --> 00:27:20.470
It is possible to create low code, no code tooling to make it much easier to, um, to change UI.
00:27:20.471 --> 00:27:31.099
For example, framer is a design tool, but what they have done, for example, they have a component called the stack component and the stack component essentially allows you to put elements in it.
00:27:31.359 --> 00:27:37.900
And these elements will then be rendered next to each other or, uh, one up and the other, uh, down below.
00:27:38.559 --> 00:27:57.690
And the funny thing is that a stack component is essentially is just flex box and you can change some, uh, properties of that stack component and you can then change whether it should be next to each other or whether it should align on the Y axis, whether it should be, uh, centered, but under the hoods, they actually just vendor CSS with display flex.
00:27:58.029 --> 00:28:03.930
So that is one prime example of how you can, for example, make flex, uh, a more accessible thing.
00:28:04.230 --> 00:28:06.799
Well, I went, went a bit on a tangent.
00:28:07.000 --> 00:28:22.680
I don't know even how the first, uh, what the question was, but I think that there's so much opportunity in making development more accessible and more collaborative, not even, not only through between developers, but even through marketing design developments.
00:28:23.279 --> 00:28:23.480
So yeah,
00:28:23.920 --> 00:28:27.190
I love this idea of, of collaboration, not just between developers.
00:28:27.589 --> 00:28:30.789
Uh, it, once upon a time in a past life, I led a design team.
00:28:30.930 --> 00:28:42.190
And I remember a time when we sat down, we were gonna teach the design team a little bit about SAS, you know, SCSS and, and the first step that our Beely did was all right, we need to make sure we have node installed on your computer.
00:28:42.750 --> 00:28:47.539
All right, now we have to have this installed on your computer and, and you could just see the designer's eyes plays over.
00:28:48.039 --> 00:28:57.400
And so when it came to it doing QA against designs, I would go into dev tools and like, you know, adjust things and get the developers, the exact values that I wanted for everything.
00:28:58.279 --> 00:29:12.849
But the other designers couldn't do that, but having some sort of visual, or like you said, low code or no code where they can specify some values and see it in real time, we've got things like VBU, you know, for, for browser based stuff, but that's still a step removed from the code base.
00:29:12.869 --> 00:29:15.210
You still have to like share that and insert it.
00:29:15.211 --> 00:29:22.890
But if we had something like that in say a code sandbox type environment that can be inserted into a GI repo and, and basically we're off to the races.
00:29:24.009 --> 00:29:24.650
Uh, yeah, exactly.
00:29:24.720 --> 00:29:25.210
Exactly.
00:29:25.609 --> 00:29:25.609
Yeah.
00:29:25.611 --> 00:29:29.039
That's, that's a, exactly what we want to do, uh, with codes and books.
00:29:29.099 --> 00:29:30.680
We first want to make it accessible.
00:29:30.880 --> 00:29:38.640
What we first wanna make both possible for designers to see what you're working on next step is that we can make it possible for designers to change styling.
00:29:39.119 --> 00:29:41.519
Um, but we update the codes underneath.
00:29:41.819 --> 00:29:48.599
So instead of having to then copy paste values and send them to developers, uh, they can actually open a pool request.
00:29:48.619 --> 00:29:53.640
And that's interesting because that means that we also have to make, get more accessible.
00:29:54.140 --> 00:30:01.589
We need to make it easy for a designer, for example, to open a pool request on top of another pool request or to open request on top of Maine.
00:30:02.049 --> 00:30:10.509
But I think it's possible because if you look at the core flows of, of, um, of kids, um, it's creating a commit.
00:30:10.859 --> 00:30:15.309
Well, first of all, creating a branch, creating a commit and opening a politic quest.
00:30:16.049 --> 00:30:25.099
If we can simplify that flow a lot, then I think we can also even make it possible for, to open port quests as suggestions to, uh, existing port quests.
00:30:25.480 --> 00:30:38.579
And then it becomes really interesting because especially now that we're working in a remote world where sometimes there is a huge time zone difference between people, every loop, every cycle of communication is very costly.
00:30:38.920 --> 00:30:47.690
So if a developer asks for feedback from a design, the designer checks eight hours later and says, oh no, this color needs to be blue instead of green.
00:30:48.069 --> 00:30:59.450
And then eight hours later, the developer implements it and asks the designer again for feedback, eight hours later, you already have so many, so many time spent on just back and forth.
00:30:59.509 --> 00:31:06.559
But if the designer could immediately come back to the saying, okay, now this button should actually be, uh, blue instead of green.
00:31:06.619 --> 00:31:09.799
And they can immediately also open a little pull request to it.
00:31:10.430 --> 00:31:14.480
Then you eliminated, I think, two, two parts of the communication there.
00:31:14.940 --> 00:31:18.160
And that would save so much time also on the product duration itself.
00:31:18.829 --> 00:31:19.119
Yeah.
00:31:19.519 --> 00:31:22.559
Like having, having worked in docs, same for technical, right?
00:31:23.019 --> 00:31:31.670
Like it, there is a lot of value in like content in a single place and, and using systems like GI or using repositories in general.
00:31:32.539 --> 00:31:37.869
Like it's really helpful, but the whole processes around it is really a nightmare.
00:31:37.890 --> 00:31:45.539
And I think it's great that we start also, um, that we stop looking at it.
00:31:45.540 --> 00:31:51.099
Like it's a pride that, oh, I master GI or I understand code like the, the, it's not a medal.
00:31:51.101 --> 00:31:52.740
There's nothing to be proud of.
00:31:52.740 --> 00:32:06.690
Like, it's great if you, if you're able to, to deliver great solutions to solve problems, but ultimately, uh, there, there's no pride in understanding a cryptic tool that the rest of humanity does not understand.
00:32:07.269 --> 00:32:10.890
And, and you know, like listeners, if you don't agree, you can look it up.
00:32:10.891 --> 00:32:13.930
But the average person learns by example.
00:32:14.730 --> 00:32:39.000
Uh, maybe it, it's not the case for everybody, but the average person learns by example, it's a lot easier to learn from something that you see, you can touch, like with your own sensitive is done, trying to understand from something very abstract and, and Bryan, you, you outlined it really well when you look at any language or tool and you see that you have to install whatever thing that you've never heard about.
00:32:39.150 --> 00:32:49.079
Like, I know that if I was not already in love with, with, with the field and tech in general, I'd be like, you know what, I, I don't have time for this and I don't have time.
00:32:49.180 --> 00:32:54.319
And I don't have the curiosity because the reward, uh, is not there.
00:32:54.430 --> 00:33:14.750
Like I'm aware of the rewards because I've been in the field, but if you're just start starting out and you don't have that patience and you, and you don't have that curiosity that comes with time, then there's no way that you're gonna invest your time into like jumping through all the hoops.
00:33:15.190 --> 00:33:34.180
I think that's a really important point that it enables co collaboration with not only like other developers at already the same level as you, and who are already willing to, to jump through those hoops, but other people who might benefit from the underlying systems that are actually really solid.
00:33:35.740 --> 00:33:36.019
I agree.
00:33:36.259 --> 00:33:41.690
I think that's, and we've been talking now mostly about designers, but there are so many other roles within the company.
00:33:41.829 --> 00:33:52.210
So for example, what if you could make it possible to, to write content and maybe underneath it's, uh, in visual way, and maybe underneath it changes, adjacent file or an MDX file or an MD file.
00:33:52.470 --> 00:33:57.809
But if you can make that process visual, then suddenly you make it also possible for other people to work on top of kits.
00:33:57.810 --> 00:34:01.480
And I think get itself, you is very powerful.
00:34:01.750 --> 00:34:09.119
It's a very powerful tool and it allows, and it's also a nice I way because it allows people to really integrate with anything.
00:34:09.179 --> 00:34:18.280
It allows people to integrate with GitHub, have these hooks on top of it, or it allows people to integrate with any kind of code editor, but GI is very cryptic.
00:34:18.309 --> 00:34:20.119
It's, it's, it's not, it's not intuitive.
00:34:20.769 --> 00:34:32.429
So if you can build an intuitive layer on top of GIS, while still retaining the power of GIS keeping making, and having the possibility to tap into the existing ecosystem that already revolves around GIS.
00:34:32.789 --> 00:34:46.820
I think that is a very interesting challenge, but a very worth it's a very worthwhile challenge too, too, because it's only, it enables other people besides developers who went through the hoops to learn gifts, to also contribute to a code base.
00:34:47.719 --> 00:34:50.539
So that's actually a really good segue to, to my next question.
00:34:50.769 --> 00:34:53.500
Like another big aspect for me of collaboration.
00:34:54.300 --> 00:35:07.610
Uh isn't, it's not just with your teammates, it's with users and as a library maintainer, uh, an important part of my day is to help out users to interact with people that I don't work with directly.
00:35:07.989 --> 00:35:17.329
So you're investigating tickets, you're solving issues, et cetera, and Algolia specifically, but in many other, like I know tailwind uses code sandbox.
00:35:17.369 --> 00:35:21.889
A lot for that, uh, code sandbox has become really central to, to the process.
00:35:22.110 --> 00:35:30.639
Like we, we can ask, uh, users to provide issuer productions as code sandbox, you know, and they don't even have to come up with it.
00:35:30.659 --> 00:35:40.119
We can provide them with starters that we have in GitHub and they can open it directly in code sandbox, but also, and that might be my favorite feature.
00:35:40.179 --> 00:36:00.469
And you know, it, because I tweeted that at you, if you've set up code sandbox CI in your project and you open a poor request, and in that poor request, you reference an issue that has a reproduction sandbox in it, then code sandbox will act it, and it will rebuild the sandbox with your changes in it.
00:36:01.130 --> 00:36:08.750
And this removes so much friction for users, for maintainers, for reviewers, anybody participating in, in the CI process.
00:36:08.860 --> 00:36:13.829
Because, you know, when I see that notification that, oh, there is a new commit or a new thing.
00:36:14.690 --> 00:36:28.139
If I know beforehand that I will have to clone it locally to try and see if it works and build a thing, maybe I'm gonna think, eh, you know what, I'll check this out in three hours because I'm, I'm focused right now.
00:36:28.141 --> 00:36:31.139
And I don't want it to take an hour to do that.
00:36:31.400 --> 00:36:40.969
But if I know for a fact that it's gonna take five minutes and I'm, it's not gonna break my concentration, then it makes the process a lot smoother for everybody.
00:36:40.989 --> 00:36:44.449
And you don't have people waiting for me, uh, to, to take action.
00:36:44.590 --> 00:36:47.530
So ultimately it's better for collaboration.
00:36:47.849 --> 00:36:49.489
It's better for UX in general.
00:36:50.030 --> 00:37:00.039
So I I'd love to know, like, if you can tell us a bit more about code sandbox, CI what it is and what, what are the, the goals to, to help out library maintainers.
00:37:01.070 --> 00:37:01.360
Yeah.
00:37:01.360 --> 00:37:16.280
What you mentioned there is also a very interesting point that if you reduce the feedback loop, and if you reduce the friction to build something, then the, I think that the quality of what you're building goes up as well, because you have more iterations that you can spend on something.
00:37:16.340 --> 00:37:21.909
But also there are just things that sometimes are super, super, super small.
00:37:22.059 --> 00:37:30.869
Like someone wants to have the margin, a couple pixels changed, or someone wants you to fix this little bug that happens in 10,000 cases.
00:37:31.340 --> 00:37:42.340
Sometimes I think that I notice this myself that if it's, uh, if it's trouble to, if I need to do a lot to fix it, then I think, okay, I postpone and postpone it until I didn't, until I forget about it.
00:37:42.800 --> 00:37:46.460
If you make it very easy, then these changes are until be fixed faster.
00:37:46.679 --> 00:37:53.460
So I think that's an interesting thing that even improve by improving the speed of the feedback loop and the iteration cycle.
00:37:53.559 --> 00:38:23.920
You will also be able to create a more high quality product doesn't matter what kind of product you're building well anyway, so to the original, uh, question, uh, of code CI another, uh, for code sandbox, when we released code sandbox, we didn't see the bug report case at all, never expected that bug reports would be a case where code sandbox would be used, um, until the author of react form by the time react, uh, Redux form.
00:38:24.079 --> 00:38:25.480
I think his name is Eric.
00:38:26.000 --> 00:38:29.760
He started to use it for bug reports and I was thinking, wow, that is genius.
00:38:29.989 --> 00:38:32.840
That is such a nice way to use, uh, sandboxes.
00:38:32.860 --> 00:38:35.960
And since then, it's become a really, really, really big use case.
00:38:36.739 --> 00:38:51.559
So when code sandbox just kept funding in 2019, um, we were thinking, okay, what is a very quick and nice way that we can give a lot of value to people using code sandbox?
00:38:52.340 --> 00:38:58.429
And we didn't want to change code sandbox itself because code sandbox was used for a lot of different use cases.
00:38:58.530 --> 00:39:00.989
And that's something that we really liked about code sandbox.
00:39:01.369 --> 00:39:09.550
So essentially we wanted to build a new service that you could use alongside code sandbox, but it would make code SIM more powerful for a certain type of use case.
00:39:09.929 --> 00:39:12.309
And that use case was open source maintaining.
00:39:13.030 --> 00:39:17.539
Um, we saw that code SIMIX was used a lot already by, uh, maintainers for bug reports.
00:39:18.769 --> 00:39:22.150
So we were thinking, okay, how can we make that flow more valuable?
00:39:22.250 --> 00:39:27.150
And we started to look at how maintainers used, uh, codes and books.
00:39:27.210 --> 00:39:34.070
And the general flow that we saw happening often is that as a library, maintainer, you ask in the issue.
00:39:34.329 --> 00:39:43.980
If someone can give you a codes and books reproducible, then you check that reproducible on code sand books, you see the bug and then you fix it.
00:39:44.039 --> 00:39:48.460
And then in the PR you referred your original issue, like fixes this issue.
00:39:48.639 --> 00:39:52.420
And once you verify that it works, then you merge it.
00:39:52.420 --> 00:39:53.219
And the issue is closed.
00:39:53.489 --> 00:39:54.340
That was one flow.
00:39:54.599 --> 00:39:59.329
The other flow is that someone opened so bug re report and they have a code sandbox in there.
00:39:59.349 --> 00:40:16.489
And that someone else fixes that issue and refers to the original issue as fixes this, in that case, one of the maintainers will have to get that code sandbox from the original issue in some way, install that new version of, uh, the PR and then verify that it works.
00:40:16.550 --> 00:40:19.159
So they will have to download the PR locally.
00:40:19.699 --> 00:40:25.920
And while for GitHub, that's even harder because if it's an outside maintainer, then you have to cl the repository separately.
00:40:26.139 --> 00:40:27.840
So that was the flows that we looked at.
00:40:27.900 --> 00:40:36.699
And then one immediate fix that we were thinking of is that every time you open a port request, we should build a new sandbox.
00:40:36.699 --> 00:40:38.050
We should create a new inbox.
00:40:38.869 --> 00:40:46.170
And with that MPM version of that port request directly installed, and that was one side to it.
00:40:46.389 --> 00:40:51.170
We should also make it possible for you to install that MPM version locally.
00:40:51.269 --> 00:40:59.760
So essentially what we built was a little MPM publishing tool that would, um, that would build your library for every port request.
00:40:59.860 --> 00:41:03.159
So that, and give you back a sandbox with the pre-install version of the library.
00:41:04.019 --> 00:41:09.719
And this is funny because at the start of this, uh, podcast, I was talking about the three different inputs.
00:41:10.239 --> 00:41:13.119
Uh, in this, we kind of only used one input.
00:41:13.539 --> 00:41:18.880
We, we neglected data, we neglected, uh, we neglected, uh, user request.
00:41:19.369 --> 00:41:21.429
We immediately just went for the user story.
00:41:21.619 --> 00:41:22.710
What is the user story?
00:41:22.730 --> 00:41:24.789
And how can we help that help with that?
00:41:24.791 --> 00:41:30.949
But this felt like such an valuable user story, such an effective user story that we started working on it.
00:41:30.949 --> 00:41:33.599
And we asked a react team if they wanted to use this.
00:41:34.099 --> 00:41:36.039
And the react team was also very excited about this.
00:41:36.041 --> 00:41:37.920
They gave us a lot of feedback as well.
00:41:37.980 --> 00:41:43.800
So we did, we did seek out feedback before finally releasing it, but when we released it, we saw more and more people using it.
00:41:44.070 --> 00:41:48.719
That was the, that was bit of how we built it, but we built it very quickly.
00:41:48.920 --> 00:41:52.199
I think in total, we were working on it for, uh, three weeks.
00:41:52.929 --> 00:41:59.590
And with even those little, with that little time, we were able to create a lot of, make it very valuable.
00:42:00.010 --> 00:42:04.750
So now if you open a port request, then we, and it mentions an existing issue like you mentioned.
00:42:04.989 --> 00:42:09.389
And, uh, we take that sandbox from the original issue, install the new version of the library from the port request.
00:42:09.409 --> 00:42:13.900
So that maintainers just have to open a sandbox to see if it's actually its the issue.
00:42:14.119 --> 00:42:17.340
And the other nice thing is that this is not built inside code sandbox.
00:42:17.340 --> 00:42:25.460
It's kind of like a thing that you can use next to code sandbox and it uses code sandbox, but uh, doesn't change functionality within code sandbox.
00:42:26.349 --> 00:42:26.639
Yeah.
00:42:26.840 --> 00:42:32.679
I think you also raised a good point is that, you know, it, it doesn't have to be a religion of oh yeah.
00:42:33.070 --> 00:42:37.909
Only we only take user feedback and, and everything has to be vetted by users.
00:42:38.170 --> 00:42:40.550
Or we only do what we think is good.
00:42:40.550 --> 00:42:50.550
Like sometimes when you have a hunch, sometimes it's nice to follow it, but it doesn't have like to be a hard rule of, we always do it like this or we always do it like that.
00:42:50.670 --> 00:42:57.860
I like that you bring some like just logical thing king into, Hey, you know, we don't know enough on this use case.
00:42:57.880 --> 00:43:05.940
So let's ask people, but on this, we've already seen people use it so much that we have a pretty good idea that it's gonna work.
00:43:05.960 --> 00:43:08.019
So yeah, I think, I think that's really interesting.
00:43:08.639 --> 00:43:10.820
We are reaching the end of this show.
00:43:10.960 --> 00:43:22.530
So I will ask you to wrap this up the, a traditional question of the show, which is how do you define great DX and what's your personal level of expectations?
00:43:23.630 --> 00:43:40.760
One thing that I really like to think about always when building something is that you need to build for two flows, essentially you need to build the accessible flow, which is flow where someone doesn't know about the feature or they are looking for the feature, but they don't know where to find it.
00:43:40.780 --> 00:43:43.880
So you need to, for example, make it accessible by the mouse.
00:43:43.940 --> 00:43:47.239
That's, let's say you're building a feature where you can create a new file.
00:43:47.539 --> 00:43:49.719
You want to make it accessible by the mouse that you can right.
00:43:50.000 --> 00:43:52.199
Click right, click on a document and you have this new file.
00:43:52.420 --> 00:43:54.159
That's the accessible way to do it.
00:43:54.460 --> 00:44:05.750
But I think alongside that, you also need to think about the power user way, um, the way that, um, where you can do it very fast, ideally without using the mouse.
00:44:05.929 --> 00:44:08.750
So it's either a shortcut, it's something in the commands.
00:44:09.050 --> 00:44:15.349
For example, something where someone can use it very quickly because they use need to, uh, use it often.
00:44:15.809 --> 00:44:20.739
So I think you need to, for a certain feature, you need to think about both flows and implement both.
00:44:21.760 --> 00:44:30.260
And once you've finished that feature, you need to look at ways how you can teach people to go as quickly as possible from the accessible flow to the power user flow.
00:44:30.480 --> 00:44:31.679
That's the interesting challenge.
00:44:31.789 --> 00:44:40.840
Like how can you teach someone as quickly as possible what the shortcut is and help them help them get more productive in the tool that you're building.
00:44:41.659 --> 00:44:50.000
And two examples of companies, uh, that I think are doing this really, really, really, really, really well when it comes to UX is, uh, super human.
00:44:50.001 --> 00:44:54.510
That's an email client and linear, that's a task management tool.
00:44:55.460 --> 00:45:02.230
They have both have some very good UX where everything's accessible through the commandlets.
00:45:02.289 --> 00:45:10.630
If I, if I want to change the status of a, of a task in linear, I can open a commandlet and set, uh, do and type set status and it, I will get the command.
00:45:10.949 --> 00:45:17.940
But the interesting thing is next to that command in the commandlet, I will also see the keyboard shortcuts and I will have this little visual.
00:45:18.579 --> 00:45:19.780
I will have very quick.
00:45:19.980 --> 00:45:29.860
I will see it very shortly, but it will be if I do set status from, from the commandlet 10 times at that point, the com the keyboard shortcut will be in my brain.
00:45:29.880 --> 00:45:31.139
And then next time I won't use it.
00:45:31.141 --> 00:45:52.789
And that super interesting if you have that mentality of making, making every feature accessible, but also have them have, have it, have a power user flow, and then getting from that accessible, teaching them as fast as possible, essentially to go to that power user, because it will make your developer tool more powerful because people can do more with it faster.
00:45:53.409 --> 00:46:01.190
It will also make the person using your tool feel more powerful because they know how to use your tool fast.
00:46:01.449 --> 00:46:09.989
And it will be a big enjoyment for a lot of people just to feel smart in knowing that, you know, how to quickly use the tool that it's your tool of trade.
00:46:09.990 --> 00:46:14.780
So to say, so, yeah, that's, uh, that's one of things that I would, uh, look out for
00:46:15.349 --> 00:46:17.300
Bryan, how do you define grade DX?
00:46:17.320 --> 00:46:19.539
What's your personal level of expectations,
00:46:20.460 --> 00:46:28.579
Kind, what you just touched upon, like the ability to find and learn your user flows, uh, is super important.
00:46:28.581 --> 00:46:30.820
That's actually like one of the tenets of usability, right.
00:46:30.920 --> 00:46:32.139
Is, is learn ability.
00:46:32.159 --> 00:46:39.809
It needs to be something that you can figure out, but then you take a step further and you say, how quick can a user accomplish the task they want to do.
00:46:40.019 --> 00:46:41.889
Those are two almost equal levels.
00:46:41.989 --> 00:46:44.210
And so I think that's, that's super important.
00:46:44.269 --> 00:46:53.449
But for me, tools, I usually look for things that allow me to break things, but not in an unrecoverable way, cuz I'm a breaking things, driven developer.
00:46:53.451 --> 00:47:02.800
And so I like to break things, fix it, break things, fix it and making sure that is as quick a flow as possible to me is a really big dev tool DX important thing.
00:47:03.949 --> 00:47:08.559
Awesome Eve, thank you so much for chatting with us today.
00:47:08.579 --> 00:47:13.280
It was a really great conversation, Bryan, thank you for co-hosting with me today.
00:47:13.280 --> 00:47:15.989
That was a first and I think that went really well.
00:47:16.139 --> 00:47:17.070
Totally a pleasure.
00:47:17.329 --> 00:47:24.670
So for you listening at home, maybe at the office, maybe doing your morning, run your dishes or planning your next OKRs.
00:47:25.510 --> 00:47:26.750
I hope you had a blast.
00:47:26.849 --> 00:47:33.480
Thanks a lot for following developer experience and stay tuned for the next episode, which will be led by Bryan.
00:47:34.400 --> 00:47:34.400
Woo.
00:47:35.440 --> 00:47:35.840
All right, bye.
00:47:36.039 --> 00:47:36.039
Bye.
00:47:38.070 --> 00:47:42.320
This was developer experience a podcast brought to you by Algolia.
00:47:42.820 --> 00:47:45.800
You can find this podcast on your favorite podcast platform.
00:47:46.219 --> 00:47:52.789
We are on Spotify, Apple Podcast, Google podcast, Pandora, Overcast, everywhere.
00:47:53.449 --> 00:48:00.510
If you want to know more about Algolia check us out on algolia.com and we are at Algolia on Twitter.
