WEBVTT
00:00:00.059 --> 00:00:10.699
Developer experience really is just about making it possible for people to achieve the things they're trying to do in the fastest, most joy inspiring way possible.
00:00:12.279 --> 00:00:12.980
Hi everyone.
00:00:13.199 --> 00:00:18.820
And welcome to developer experience a new podcast brought to you by Algolia.
00:00:19.640 --> 00:00:27.489
We chat with guests us to build products for developers about their developer experience strategy, what it means for them, why it's important.
00:00:27.870 --> 00:00:40.049
And so on today's episode is our very first, so we will be diving deeper into what developer experience or DX really means I AMS.
00:00:40.710 --> 00:00:45.560
And today I have two fantastic guests with me to answer this question.
00:00:46.189 --> 00:01:04.150
Adam Wathan is the creator of tailwind CSS, one of the most popular and the fastest growing CSS framework, which popularized utility for CSS he has since then found in his own company tailwind labs, where he builds the best tools for CSS developers.
00:01:04.560 --> 00:01:05.109
Hello Adam.
00:01:05.450 --> 00:01:06.790
Hey, thanks so much for having me on
00:01:07.290 --> 00:01:11.430
Our second guest is Lee Robinson, who is the head of developer relations.
00:01:12.390 --> 00:01:19.590
Verel the company behind next JS, which is rapidly becoming the most popular react based framework out there.
00:01:20.329 --> 00:01:32.379
He has built tons of learning material, including blog posts courses, and you can always count on his video tutorials to learn how to build anything was next highly.
00:01:32.959 --> 00:01:35.019
Hey, thanks for having me really excited to be here.
00:01:35.680 --> 00:01:37.060
So let's dive in.
00:01:37.319 --> 00:01:49.930
You know, when I look at the, at your websites, like the tailwind tells CSS page, I can read stuff like rapidly build modern websites without ever leaving your HTML.
00:01:50.159 --> 00:01:51.370
Then I go to Versace.
00:01:51.510 --> 00:01:59.129
I'm like Versace combines the best developer experience with an obsessive focus on front end user performance.
00:01:59.629 --> 00:02:07.959
And then again, I go on next and it's like, next JS gives you the best developer experience again, with all the features you need for production.
00:02:08.780 --> 00:02:22.960
So how comes that developer experience has become so important that now it is a top selling argument on lending page for up and source, but also commercial products.
00:02:23.520 --> 00:02:24.870
One, why do we care so much?
00:02:25.300 --> 00:02:27.430
Yeah, I mean, I can take a, a stab at it.
00:02:27.469 --> 00:02:44.419
I think there's probably a lot of different elements to it, but I think like the one that stands out to me is being a developer is a, is a bit of a unique job in a lot of ways where most of us that do it for a living, I think also do it because we just like really enjoy it and find a lot of fun in doing it.
00:02:45.120 --> 00:02:50.460
And we love to use tools that make that fun experience even more fun.
00:02:50.461 --> 00:02:50.939
You know what I mean?
00:02:50.979 --> 00:03:13.000
I think a lot of jobs out there, people don't expect to have fun or don't, or don't look to have any fun with it, but when you already kind of enjoy the work that you do and you get to kind of, of be creative, it can be made even more enjoyable when it feels like the tools that you're using are really like, you know, helping you move faster and be more productive and like stay in the flow versus feeling like you're fighting with them.
00:03:13.460 --> 00:03:19.310
And then I think on, on top of that, you know, of course there's just like a lot of demand for developers.
00:03:19.330 --> 00:03:21.189
You know, software is eating the world.
00:03:21.330 --> 00:03:23.349
People want to keep their developers happy.
00:03:23.449 --> 00:03:24.110
You know what I mean?
00:03:24.210 --> 00:03:33.389
So if, if, if you can give people tools that, uh, help them have more fun and help them feel more productive and keep up morale and keep them motivated.
00:03:33.469 --> 00:03:35.030
I think that's, that's kind of good for everybody.
00:03:35.659 --> 00:03:35.949
Yeah.
00:03:36.069 --> 00:03:49.419
And I, I think also increasingly we're seeing people in executive or like higher level positions at companies start to understand empowering their developers and increasing their productivity is having a good return on investment.
00:03:49.759 --> 00:04:04.849
And they're seeing those gains of if our developers are happy, our business is doing better, which is then allowing developers to influence decisions around ending whether that's tools you use or SAS you use, or frameworks that you choose or all those different decisions.
00:04:05.330 --> 00:04:07.770
I think that's, we're finally starting to realize a lot of that.
00:04:08.110 --> 00:04:08.330
Yes.
00:04:08.430 --> 00:04:17.490
And it makes a lot of sense, especially when, considering for example, tailwind or next, or Algolia, we're making products for developers.
00:04:17.829 --> 00:04:21.839
So in that way you build software for developers.
00:04:22.060 --> 00:04:28.120
DX is really just UX in a way you are making it great for your audience.
00:04:28.439 --> 00:04:31.360
And in those cases, the audience is developers,
00:04:31.370 --> 00:04:36.759
Especially when you're a company building tools for developers, of course developers are your customer.
00:04:37.019 --> 00:04:44.149
So you want to attract those customers by basically promising them the best possible experience.
00:04:44.209 --> 00:04:44.629
For sure.
00:04:45.089 --> 00:04:51.550
One thing I'm noticing is that the ecosystem is growing and we're getting all better at building software.
00:04:51.850 --> 00:04:58.189
So there is more and more quality products and so competing quality products available.
00:04:58.329 --> 00:05:00.949
So it's not just like great software.
00:05:01.060 --> 00:05:03.019
Where is the unique differentiator?
00:05:03.480 --> 00:05:07.939
You need something more when you look at next, it's not the first react framework.
00:05:08.579 --> 00:05:13.620
Tell when CSS is not the first utility first, but also CSS framework.
00:05:13.720 --> 00:05:17.300
So it's not just about, Hey, we're making it easier.
00:05:17.800 --> 00:05:19.139
Or our tech is better.
00:05:19.610 --> 00:05:25.009
It's also, you are gonna have, have fun is gonna be easy to use it.
00:05:25.029 --> 00:05:27.170
You are gonna have a steady learning curve.
00:05:27.279 --> 00:05:36.689
Like you're gonna be able to be productive faster, or it's gonna be a better investment of your time than this and this.
00:05:36.920 --> 00:05:37.209
Yeah.
00:05:37.250 --> 00:05:48.399
I, I think one interesting point here is developers get really excited about perform and not only like end user performance, but also increased performance while they're developing locally or what that experience is like.
00:05:49.060 --> 00:06:01.120
And something that's interesting is because of the growing community and more developers at large, you see people experimenting and trying out new solutions to maybe problems that existed in the past with something completely new.
00:06:01.399 --> 00:06:09.560
A great example is like ES build ES build is awesome and it's really paving the way for a new future of dev tooling.
00:06:10.060 --> 00:06:21.829
And the great thing about being at the forefront of developer experience is looking at ideas like ES build and looking at fundamental new approaches to technology and seeing how that changes the developer experience.
00:06:21.831 --> 00:06:30.629
Like when you start your application, it's just immediate and then taking that inspiration and trying to work even harder on your own tooling, trying to make Webpac faster in next JS.
00:06:31.060 --> 00:06:31.350
Yeah.
00:06:31.350 --> 00:06:42.379
I think performance is a great thing to talk about when it comes to developer experience, because it's the one thing that's like, if you can't think of anything else to improve, you know, improve the performance.
00:06:42.449 --> 00:06:45.819
Like it's like, I think there's like a quote, something.
00:06:45.821 --> 00:06:51.500
I think I heard about like Amazon back in the day, which was like focus on the needs that people have that are never going to change.
00:06:51.500 --> 00:06:54.339
Like no one is ever gonna want their packages to be delivered slower.
00:06:54.480 --> 00:06:57.019
So let's just figure out how to get them to them faster and faster, faster.
00:06:57.040 --> 00:07:02.490
And it's a same with developer tooling, no one wants transpiring, their JavaScript to get slower.
00:07:03.129 --> 00:07:21.560
And you know, the feeling that people have when they use something like ES build for the first time or some of the tools that are kind of powered by it, like VT is kind of like a, a popular new, like development environment that just like, because it's using ES build under the hood and like native ES module and taking advantage of all these new technologies, it just boots up like instantly.
00:07:21.959 --> 00:07:27.839
And as a developer that just like brings this huge smile to your face, you know, like you're so used to waiting for everything.
00:07:27.899 --> 00:07:30.240
And when it just feels like things are instant, I don't know.
00:07:30.240 --> 00:07:32.680
It's a, it's a bit of a magical feeling.
00:07:32.699 --> 00:07:35.000
So it's a, a fun one to chase for sure.
00:07:35.470 --> 00:07:35.759
Yeah.
00:07:35.761 --> 00:07:42.310
And it's interesting, you you're speaking of ears build which, which is, is extremely fast, but then VT is built on top of it.
00:07:42.449 --> 00:07:45.750
But what V also brings on top of yeah.
00:07:45.759 --> 00:07:58.230
We're fast and we're using under the hood, the tooling to make it fast is that we are also bringing all that together because VT is not only just like a server, it's also bundling up with, with roll up.
00:07:58.730 --> 00:08:14.540
And when you are looking at the progress on JavaScript tooling, like Rome, there is a lot of excitement around that because it's not only fast best in class, but it also consolidates a lot of similar concerns.
00:08:15.089 --> 00:08:15.379
Yeah.
00:08:16.120 --> 00:08:37.929
I'd love to know what's your opinion on what can greatly makes great DX because when you ask people, they will tell you, okay, it's when you have great documentation or when the software feels intuitive, but is it only a matter of like checking the right boxes or is there more more to it?
00:08:37.950 --> 00:08:38.889
That's a hard question.
00:08:39.090 --> 00:08:42.120
I think, because I think it it's different for each product.
00:08:42.419 --> 00:08:46.320
You know, I think all the examples you gave are, are great ones for me.
00:08:46.321 --> 00:09:02.399
Like a great anchor way to think about it in general is just that the goal of like building these tools, if you really want people to have great experiences with them is you want to be focused the whole time on like, making people feel like they have superpowers when they use like your tool.
00:09:02.840 --> 00:09:06.240
I think I've read this, this kind of like first put into words that way.
00:09:06.519 --> 00:09:27.710
And Kathy Sierra's badass book like a few years ago where she talks about like basically how to make a great camera, not to just is not to think about all the features that you can add to the camera, but it's like, what do we have to do to make sure that when someone takes a photo with this camera, they're like so proud of the photo that they took and that it feels like they did it, it doesn't feel like the tool really even gets the credit.
00:09:27.769 --> 00:09:31.710
It feels like they achieved this outcome and it helped them get there.
00:09:31.711 --> 00:09:31.990
You know?
00:09:32.009 --> 00:09:42.100
So how can you, what decisions can you make when you think something that, that are going to make someone feel like they are kick at the problem that they're trying to solve?
00:09:42.639 --> 00:09:51.259
And sometimes not even really noticing that the tool is a thing that's like letting them do it, you know, like you're, you're not looking to get credit for it in a way, you know what I mean?
00:09:51.289 --> 00:09:56.690
It's, it's really just about focusing on like, how can you make someone super successful?
00:09:56.750 --> 00:10:15.610
And I think like the, the open source example that like stands out to me the most just cuz of my own experience and like my own journey to get to where I was, was when I first started using like, laal back when I was like still in college, in like 2012, compared to what I was used to doing with like vanilla PHP and like writing SQL statements myself.
00:10:15.929 --> 00:10:24.519
And so stuff like that, it was so crazy to me how I could just like get some stuff showing on the screen from a database and click around and stuff with like so little work.
00:10:24.679 --> 00:10:28.559
I just felt like I can build anything now because of like these tools that are here.
00:10:28.860 --> 00:10:36.279
So for me, a lot of it just comes to them to like trying to create that, that feeling by any means necessary.
00:10:36.399 --> 00:10:38.870
And it think, I think it does depend on each project.
00:10:39.110 --> 00:10:47.029
I think with tailwind, for example, some of the elements to that are like agonizing over the class names to try and make them like as guessable as possible.
00:10:47.250 --> 00:10:54.549
And it's never always guessable for everyone, but I do hear that feedback a lot where people, a lot of people feel like they don't even need to read the docs.
00:10:54.551 --> 00:10:56.190
They just like guess and they're right.
00:10:56.250 --> 00:11:09.220
You know, and then even just like designing the tool to accommodate the whole, you know, utility first workflow that like we believe in, in so much, like that's not really a feature of tailwind itself as a technical library.
00:11:09.759 --> 00:11:13.940
You know, it's not like code that we wrote that creates that experience.
00:11:14.100 --> 00:11:21.529
It it's really just like creating something that enables a specific flow and letting people experience kind of like the benefits of that workflow.
00:11:21.549 --> 00:11:24.169
And then documentation, I think is a huge one.
00:11:24.330 --> 00:11:42.159
I think I heard Taylor Atwell say this years ago that he kind of believes that basically given a set of open source tools, like the one with the best documentation is like almost always the one that wins because that's the one where people are gonna be able to do the things that they, they need to do.
00:11:42.620 --> 00:11:56.720
So paying attention to what people are struggling with and, and finding ways to get people over those hurdles, either through documentation or by introducing a feature that fixes that you just wanna just like make sure nothing ever slows people down.
00:11:57.279 --> 00:12:12.240
I, I love the first point you made because something that I have a lot of respect for the tailwind team for is that a underrated benefit of creating a great developer experience is that you notice that design is really rooted in every decision that you make.
00:12:12.690 --> 00:12:14.909
And that's something that I think the tailwind team does really well.
00:12:14.910 --> 00:12:33.659
And that I have a lot of respect for my peers ATL for thinking about really deeply, because what is design in the developer space is a lot more than just how the documentation looks it's like you said, with making sure the class names are guessable, it's down to how you design even APIs for frameworks.
00:12:34.049 --> 00:12:38.700
It's how the user interaction on your site makes it so that it just gets out of the way.
00:12:38.720 --> 00:12:41.779
It makes it really easy to just jump in and get started.
00:12:42.320 --> 00:12:58.769
And from my personal experience, I feel like when I have a really great developer experience, it's always rooted in teams that think very deeply about design and they care deeply and they stress over the little details that other people might not spend the extra time on.
00:12:58.840 --> 00:12:59.129
Yeah.
00:12:59.130 --> 00:13:02.009
Developer experience is a design problem, for sure.
00:13:02.080 --> 00:13:09.610
Like not all developers are the sorts of people who create things that, you know, have great developer experiences.
00:13:09.610 --> 00:13:12.250
Not because like just, just cause it's a different skill.
00:13:12.269 --> 00:13:12.809
You know what I mean?
00:13:13.090 --> 00:13:24.639
It's, it's, it's like magical when you can find people who like have the technical ability to build the thing and also have like the sort of design mind sort of brain to sort of bridge that gap.
00:13:25.379 --> 00:13:41.149
And you get lots of amazing things, you know, coming from that, when you see that, I think like another concrete example of like when I had an experience that made me feel like what, wow, I can't believe like how easily I was able to do that was when I first was playing with incremental static regeneration in next.
00:13:41.769 --> 00:13:45.230
So I had to build like a website for my podcast, full stack radio.
00:13:45.590 --> 00:13:50.950
Cause I didn't like, like the default website that came with podcast host I was using and I was trying to think, okay, well, how am I gonna do this?
00:13:50.970 --> 00:13:56.860
You know, I have to like consume this RSS feed and I have to figure out how to like get all that working.
00:13:56.960 --> 00:14:06.379
Am I gonna have to like run a build script every single time that like I publish a new episode or, um, have something make like an API request and like cash things.
00:14:07.039 --> 00:14:16.370
And then I just started building it out with next expecting like, not really fully think through like the power of that feature at the time, but just like started building it and just see where I ended up.
00:14:16.870 --> 00:14:21.250
And then when I added that first, like I think it's just like get static props, right?
00:14:21.529 --> 00:14:24.610
That's like the API for like the, that stuff added, like get static props.
00:14:24.789 --> 00:14:29.850
All it does is make an Fe request to the RSS feed and then pass it in.
00:14:30.360 --> 00:14:32.169
It's literally like three lines of code.
00:14:32.350 --> 00:14:39.279
And now I have this like fully static podcast site that automatically update it's anytime I publish a new episode, as long as someone visits the page once.
00:14:39.779 --> 00:14:45.559
And I, I just like, I couldn't believe that I was able to do it with like such little code without thinking about anything that had to run on the server.
00:14:45.659 --> 00:14:49.639
And, and in hindsight it's like, well, of course that should be possible.
00:14:49.830 --> 00:14:57.960
Like when you see that it can be done, but it was this magical experience of being able to do something so easily, but also like understanding why it was easy.
00:14:58.059 --> 00:15:05.799
And also like not feeling like there was some magic happening that like was well beyond like my ability to comprehend it.
00:15:05.801 --> 00:15:14.230
You know, it it's, it's straightforward enough that you feel like, again, like you feel like you can take credit for building the website, you know what I mean?
00:15:14.470 --> 00:15:16.230
And it makes you feel like an awesome developer.
00:15:16.230 --> 00:15:22.389
It doesn't make you feel like you just have this like overpowered tool that elevates even someone who doesn't know what they're doing.
00:15:22.390 --> 00:15:25.269
Like you, you know, it's, it's an empowering feeling.
00:15:25.419 --> 00:15:30.710
It's not, it doesn't feel like a crutch, you know, and trying to find out how to design things that way is, is hard.
00:15:30.730 --> 00:15:32.539
But that's what I think you need to think about.
00:15:33.129 --> 00:15:33.419
Yeah.
00:15:33.679 --> 00:15:43.179
The behind the scenes story there is really interesting to me because you know, huge shout out and, and credit to the next JS core team for designing these APIs and, and coming up with this approach.
00:15:43.240 --> 00:15:57.009
But what you don't see is that, you know, that was in the works for years, they had been thinking deeply about, do we build this abstraction on next JS to make it easy, to build static sites?
00:15:57.269 --> 00:16:04.049
So if I roll it back a little bit, like when next JS started, it was focused on server rendering react applications.
00:16:04.710 --> 00:16:08.409
And you know, there were other solutions that existed that would allow you to build everything
00:16:08.409 --> 00:16:09.370
Was server render, right?
00:16:09.370 --> 00:16:12.840
Like you had to write like isomorphic JavaScript for everything that was kind of like the big pitch.
00:16:13.070 --> 00:16:13.360
Yeah.
00:16:13.419 --> 00:16:14.120
100%.
00:16:14.500 --> 00:16:19.960
And you know, there were other solutions out there not even react related, but just allow you to create static sites.
00:16:20.539 --> 00:16:22.639
And we kind of just stepped back.
00:16:22.840 --> 00:16:29.759
I say, we, I wasn't at Verel when this happened, but the team stepped back and just looked at the ecosystem.
00:16:30.340 --> 00:16:32.830
And at this point I was just a happy user of yes.
00:16:33.289 --> 00:17:01.980
And they looked at the ecosystem and they, they understood what worked well and what maybe didn't work as well, or what could be improved a little bit and really deeply thought about how do we condense the API for making a static site into just two methods and how can we make it so that adding new functionality, like allowing your pages to regenerate in the background is just a couple lines of code, extra, such that when we release it, we're not gonna have to completely rewrite this thing in a few years.
00:17:01.980 --> 00:17:05.819
Like making it have an extensible API design from the start,
00:17:06.039 --> 00:17:16.849
People always say, oh, it's about great documentation, like writing great docs and building great DX are all root it in the same need for empathy.
00:17:17.109 --> 00:17:21.650
You need to empathize with the people who are gonna use your product.
00:17:21.829 --> 00:17:22.650
And like, yeah.
00:17:22.651 --> 00:17:29.609
When I, when I think of Algolia, there are many examples, but when you index your data, you might have a lot of data.
00:17:29.789 --> 00:17:31.890
So we are going to batch it for you.
00:17:31.891 --> 00:17:36.000
We're gonna chunk it and batch it for you because otherwise you would need to do it.
00:17:36.619 --> 00:17:45.279
And when you index for the first time, because we know you're gonna be excited about searching it right away, we make all your attributes searchable.
00:17:45.380 --> 00:18:00.680
And then we tell you, you might want to pick which ones are, are searchable, because we know it can be a performance drain, but we don't want to make you go that extra step to do it and to see it work and to be amazed by, by the magic of it.
00:18:00.700 --> 00:18:08.279
So there's really, uh, this sense of empathy of how are people going to, to react when they see what?
00:18:08.569 --> 00:18:22.349
And so that's kind of the continuity of the work that you do when you're a software engineer, when you're a software engineer and you are working with a team, you want to write code that your coworker is not gonna hate you because you wrote it.
00:18:22.769 --> 00:18:31.380
So you're gonna do that, that job of, okay, I'm going to name my variables properly or, or split in my, uh, my PR in a, in a certain way.
00:18:31.799 --> 00:18:44.180
But then you are handing a piece of software to other developers who are not your coworkers who are not supposed to like you, they are using something that you made, but there is no, yeah, there is no tide.
00:18:44.181 --> 00:18:45.740
Like you don't have to be nice to each other.
00:18:46.160 --> 00:19:02.210
And so, yeah, there's really that continuity of you, your work, as I'm, I'm trying to exercise empathy and to make sure that people enjoy what, uh, that they enjoy the experience of working with that.
00:19:02.569 --> 00:19:15.279
I was gonna say, like, I think a thing too, that came to mind that I think is, is one of the things that makes trying to create great developer experiences, hard, that it's easy to just like jump on this idea of, we just wanna make things as easy as possible.
00:19:15.380 --> 00:19:21.880
We wanna make things as automatic as possible, but that never comes like for, for free.
00:19:21.990 --> 00:19:29.880
Even when you see people solve those problems, it's easy to assume or to, to kind of not recognize how much effort went into achieving it.
00:19:29.900 --> 00:19:44.480
But it's easy to try and build things that make some things easy while sort of making some things impossible, you know, and what's really hard is to figure out how to make things easy without like enforcing constraints.
00:19:44.599 --> 00:19:47.039
Some people that are just gonna frustrate them in like different ways.
00:19:47.680 --> 00:19:59.390
Cuz we've all seen like libraries that try to solve a specific problem and you work with it, but there's just like one tiny like deal breaking element of it.
00:19:59.390 --> 00:20:01.470
That's just like, ah, I just need to do this one thing.
00:20:01.529 --> 00:20:07.630
And it's like fundamentally impossible because of like this other decision that was made and now I can't use this tool.
00:20:08.009 --> 00:20:23.819
So I think that's one of like the most challenging elements is, is trying to find these kind of perfect solutions that make things easier without introducing limitations that are significant enough to kind of like ruin that, that magical experience.
00:20:24.099 --> 00:20:32.609
I think like the hardest thing in general about all this stuff is there really, isn't like a way to make a checklist of like, okay, here's like the things that you need to make like easy for people.
00:20:32.799 --> 00:20:39.849
It's it's really just has to be like noticing what could make people's lives better and figuring out how to solve it.
00:20:39.851 --> 00:20:44.369
Like one example that comes to mind for me is the command palette and sublime text.
00:20:44.730 --> 00:20:49.559
I might be wrong, but I feel like that was the first app where I ever saw that concept.
00:20:49.900 --> 00:21:02.359
The idea of a super quickly searchable thing where you could pull it up with one keystroke and you could access basically every function that you could perform in the whole app by searching and just like hitting enter to, to perform it.
00:21:02.779 --> 00:21:19.670
I'd never seen anyone else do that before, before it was always like memorize the key keyboard shortcuts, memorize the keyboard shortcuts, memorize the keyboard shortcuts and the people who took the time to do that, to memorize the keyboard shortcuts were always like, they always looked like wizards to the people who that wasn't natural for.
00:21:19.869 --> 00:21:19.869
Right?
00:21:19.871 --> 00:21:28.980
Like for me, I would always, anytime I wanted to perform any action, any tool, I'd like go up to the menu bar, open it up, find the action, see what the keyboard shortcut and then do it with the keyboard.
00:21:28.980 --> 00:21:31.460
Like I wouldn't let myself click the action in the menu bar.
00:21:31.461 --> 00:21:37.299
You know, otherwise you're not building that muscle memory, but not everyone is kind of has that like built into their DNA.
00:21:37.519 --> 00:21:38.059
You know what I mean?
00:21:38.319 --> 00:21:46.059
So you notice that problem as like a maker of these tools and you think, well, how can I help people not have to move their hand in the mouse?
00:21:46.299 --> 00:21:50.529
Cuz I know that that's like slowing the, these people down and you have to invent a solution for it.
00:21:50.530 --> 00:21:51.009
You know what I mean?
00:21:51.010 --> 00:21:52.650
Like there's no, it's not obvious.
00:21:52.829 --> 00:21:56.690
You know, you have to like work really hard and figure out like what sort of improvements you can make.
00:21:56.809 --> 00:22:06.970
I, I think like sublime in a lot of ways doesn't get enough credit for like completely changing the productivity expectations from tech editors with like the multi cursor stuff.
00:22:06.990 --> 00:22:20.359
And I, I was we reading some old, old hacker news comments about like when sublime first came out and someone said that something else had multiple curses before sublime, but then the creator sublime replied listing all the things that like that even that didn't have.
00:22:20.380 --> 00:22:22.000
And he had never even seen that either.
00:22:22.380 --> 00:22:24.559
So we take some of these things for granted.
00:22:24.560 --> 00:22:31.789
Now, like every modern editor we use has like multiple cursors has a command palette, like Chrome dev tools has a command palette at this point, you know?
00:22:32.130 --> 00:22:42.029
But these things had to be like in invented by someone who like noticed a situation where someone could do something faster and had to just like grind it, coming up with a solution.
00:22:42.529 --> 00:22:56.900
But I guess like if I did have to generalize, like what developer experience is, it really is just about new making it possible for people to achieve the things they're trying to do in the fastest, most joy inspiring way possible.
00:22:57.119 --> 00:23:09.809
You know, like when you do like a big, um, have you ever done like a, a project wide like Redex replace with like unfortunately, um, like placeholders and stuff, you know, where it's like a caps sure.
00:23:09.810 --> 00:23:20.049
This capture group and like replace it with this and like preserve the case or like change the case when you pull something like that off like the feeling that you get from that it's just like, I'm awesome.
00:23:20.490 --> 00:23:20.569
You
00:23:20.609 --> 00:23:21.170
Know, you know what I mean?
00:23:22.710 --> 00:23:27.170
And like that that's possible because like someone created regular expressions, you know what I mean?
00:23:27.490 --> 00:23:37.519
Like regular expressions, like we all like to like kind of poke fun at them or whatever, but in, in some ways they're like one of the most powerful DX tools that exist, you know?
00:23:37.839 --> 00:23:40.480
Cause they do give you that super power that you wouldn't have otherwise.
00:23:40.500 --> 00:23:41.200
So, well,
00:23:41.359 --> 00:23:53.839
It what's interesting to me building off the, like the last part that you said, I think there's a word for this and it's rooted in other creative fields, but like let's say you're a musician like great musicians have great taste.
00:23:54.309 --> 00:24:01.480
They listen and they consume a lot of music, great artists, you know, they go to art galleries and they go view a lot of art.
00:24:01.779 --> 00:24:07.069
And I think with devs too, like great developers have have great taste and they try a lot of tools.
00:24:07.660 --> 00:24:08.950
They experiment with things.
00:24:09.190 --> 00:24:11.430
They, they understand what they like and what they don't like.
00:24:11.690 --> 00:24:19.390
And then all of that knowledge and shared experience helps then funnel back into creating an amazing developer experience in their product too.
00:24:19.490 --> 00:24:21.430
And I think that's where a lot of the inspiration comes too.
00:24:21.750 --> 00:24:32.180
Like I'll try out something like, you know, linear, which is an incredible, and I'm, I'm not building project management stuff, but I see their command K keyboard and I'm like, wow, this is amazing.
00:24:32.329 --> 00:24:35.700
Like I, I need to have this on my site or I need to put this in bursell.com.
00:24:36.130 --> 00:24:36.420
Yeah.
00:24:36.700 --> 00:24:43.859
I, I think it's a really important if you're trying to create great developer experience to really have like a very low pain tolerance.
00:24:44.539 --> 00:24:49.210
I think a lot of people are willing to put up with experiences that could be a lot better.
00:24:49.910 --> 00:25:01.450
So if you want to find opportunities to make things better, I think it's really important to, even though it sounds kind of negative it's to just like convince like be annoyed easily by your tools.
00:25:01.509 --> 00:25:02.410
No, I agree what I mean,
00:25:02.890 --> 00:25:15.920
A, a good example of this is like, it also ties back to empathy to too next JS is definitely not the first framework or tool to do this, but for certain errors, when you run into errors in the command line, it spits out, it says, Hey, here's what you did wrong.
00:25:16.180 --> 00:25:19.200
And then there's a URL to go learn more about it.
00:25:19.309 --> 00:25:22.480
That shows you specifically what went wrong, potentially some code to fix it.
00:25:22.880 --> 00:25:23.599
I I'm guessing that
00:25:23.680 --> 00:25:25.799
Was we're we're in the process of stealing that idea from you.
00:25:26.119 --> 00:25:26.240
I,
00:25:26.829 --> 00:25:33.190
I guess this was probably popularized by like ES lint, because they usually have links to docs for like why this lint or exists.
00:25:33.269 --> 00:25:33.269
Yeah.
00:25:33.329 --> 00:25:34.589
But it helps a lot.
00:25:34.609 --> 00:25:35.990
And it shows empathy for people.
00:25:36.490 --> 00:25:40.630
Not only thinking about the, like the happy path, but the sad path too.
00:25:40.631 --> 00:25:40.910
Yeah.
00:25:41.089 --> 00:25:44.109
You can do so much more with that than you can in just the console, right?
00:25:44.111 --> 00:25:48.740
Like if you limit yourself to just trying to figure out how can I explain this error in two sentences?
00:25:48.759 --> 00:26:08.410
So if it's in the console, like you can't really do much to help people, but if you can link to a page where you can have like embedded code examples and like you might be trying to do this, like here's how, what you should do instead, I'm really looking forward to creating like full blown, like scrollable docs pages for like certain common errors where, you know, we can really help people.
00:26:08.670 --> 00:26:11.369
And it helps us too, because like then we have less GitHub issues.
00:26:11.710 --> 00:26:11.930
Yes.
00:26:12.569 --> 00:26:13.009
Whatever, you know,
00:26:13.289 --> 00:26:22.609
A side benefit of that too, is that if you're going to a website and you have analytics on it, you get this nice ranked list of like, what are the errors that people are running into.
00:26:23.029 --> 00:26:30.279
And interestingly, we've, we're gonna talk about this at next year conference next week, but we've been working on integr ES lent directly into next JS.
00:26:30.660 --> 00:26:40.519
So the intention here is like, rather than even having to go through that process of like clicking out, ideally you get in editor feedback, like, Hey, you shouldn't do this specific thing.
00:26:40.750 --> 00:26:41.559
It's gonna break your
00:26:41.559 --> 00:26:41.720
App.
00:26:41.900 --> 00:26:50.200
That's actually a whole interesting topic in general, I think is ideas for improving kind of error situations that people run into as like a whole class.
00:26:50.309 --> 00:26:55.440
Like that's a whole subcategory of like developer experience, I think where there's lots of room to, to do stuff.
00:26:55.500 --> 00:27:04.470
And I'm interested in figuring out ways to improve there because the only idea I have right now is to do what you guys do with the, the, the links in, in the console.
00:27:04.829 --> 00:27:17.309
And, and we have stuff like in our like intelligence plugin, it'll like warn you, if you have applied like two conflicting classes, you know, if you have like flex and block, it'll be like, uh, don't do this.
00:27:17.380 --> 00:27:21.910
Like only one of these can work and we can't guarantee you, which one is working, stuff like that.
00:27:22.049 --> 00:27:22.829
So there
00:27:23.039 --> 00:27:30.980
Is one thing that I, that to me is extremely important when we talk about DX, is that again, not to forget that it's UX.
00:27:31.759 --> 00:27:38.220
And so there are many existing patterns that apply from existing UX research.
00:27:38.720 --> 00:27:49.049
And one of the things that I really value is look how people use your product, look at what frustrates them, look at the feedback that you get.
00:27:49.069 --> 00:27:54.769
And yes, granted sometimes you can get lost in feedback and it's important to be able to pick the right things.
00:27:54.829 --> 00:28:04.880
But an example is that when we rebuilt the, the search on the Algolia documentation, we decided, okay, it's not just gonna be a new, pretty search.
00:28:04.890 --> 00:28:13.160
We're gonna build a search that caters to developers who are looking in our docs.
00:28:13.161 --> 00:28:18.079
So it's our specific docs, the way it works, the ecosystem we have and all that.
00:28:18.259 --> 00:28:29.430
And so we made a lot of decisions based on that, because we are the prime users of that, that document, but we can also know what people search and what doesn't yield, any results.
00:28:29.849 --> 00:28:35.990
And so, for example, that's how we decided, Hey, in the documentation, you're going to have a preview.
00:28:36.170 --> 00:28:46.180
So if you go on the documentation of Algolia you type something and when you navigate a results, instead of having to go there and see, oh yeah, that's actually what I'm looking for.
00:28:46.319 --> 00:28:47.500
You're gonna see a preview.
00:28:48.000 --> 00:28:52.940
And that is rooted in seeing people go and try.
00:28:52.960 --> 00:29:00.140
And because yeah, you show a result that is one line because you want it to be compact and people go, and then it's not the right page.
00:29:00.160 --> 00:29:02.220
So they come back and they do the search again.
00:29:02.240 --> 00:29:03.900
So they have to reopen it, et cetera.
00:29:04.319 --> 00:29:11.210
So there's that you also have the pattern of, uh, let's say you wanna say, you want to find how to index in PHP.
00:29:11.589 --> 00:29:20.490
So it's gonna be nice if you are able to filter on PHP, but if we're like, okay, let's provide you a dropdown and you're gonna select your language.
00:29:20.799 --> 00:29:24.809
Then you have to use your mouse and you have to leave the focus like the, the input.
00:29:25.309 --> 00:29:33.440
And when you actually look at people using the search and you say, okay, search for indexing in PHP, they will type indexing in PHP.
00:29:33.779 --> 00:29:35.880
So why not put that here?
00:29:35.950 --> 00:29:45.079
Like let's put patterns and put the developer experience or the user experience in the places that people expect them to be in.
00:29:45.309 --> 00:29:53.079
This is definitely something, for example, in tailwind that I use a lot that I can see is that it's not only gonna be about one place.
00:29:53.190 --> 00:30:00.039
It's not just the documentation or the product, but it's also the entire ecosystem that you build around it.
00:30:00.740 --> 00:30:05.230
Like tailwind intelligence in vs code is one of my favorite extension.
00:30:05.329 --> 00:30:06.829
It does so much for me.
00:30:06.830 --> 00:30:23.500
And I'm so happy about it because it makes me a lot faster having the, the errors in the console, like there is an error and having the link to the documentation in reacting next, in view, in it removes so much friction.
00:30:24.000 --> 00:30:31.579
But also I know that there is someone like me who probably went through that and decided, Hey, it's a good pattern.
00:30:31.859 --> 00:30:35.140
I know that someone is going to have a lot of pain in that place.
00:30:35.400 --> 00:30:38.779
So we're gonna put it here because that's where they're going to look.
00:30:39.210 --> 00:30:39.500
Yeah.
00:30:39.809 --> 00:30:42.930
It's obvious that you've really thought out about the entire ecosystem.
00:30:43.630 --> 00:30:47.609
Not only from I'm, I'm working with the library, but then, okay.
00:30:47.611 --> 00:30:48.529
I need some icons.
00:30:48.680 --> 00:30:51.529
Okay, well, we have this, you know, all these icons, you can pull off the shelf.
00:30:51.880 --> 00:30:52.170
Okay.
00:30:52.171 --> 00:30:56.849
But now I need to create a model and now I need to create some kind of JavaScript interactive thing.
00:30:56.880 --> 00:30:57.170
Okay.
00:30:57.279 --> 00:30:59.009
Well, now we have this headless UI package.
00:30:59.029 --> 00:31:04.599
That's gonna work with your favorite framework or tool of tool and going even further than with like tail one UI.
00:31:04.601 --> 00:31:05.480
It's like, well, okay.
00:31:05.480 --> 00:31:08.759
But I wanna see this in like a real world application, show me some real code.
00:31:08.760 --> 00:31:09.599
And it's like, here you go.
00:31:09.601 --> 00:31:10.440
Here's some free code.
00:31:11.589 --> 00:31:11.880
Yeah.
00:31:11.900 --> 00:31:15.799
Thanks on the note of what you were saying, Sarah, with like some of the documentation stuff.
00:31:16.000 --> 00:31:28.950
And, and even like the, the previous stuff that Algolia does with the search that makes me think of like something even sublime does that still, I think vs code doesn't do where if you hit like command P and start typing a file sublime previews it immediately.
00:31:28.951 --> 00:31:33.029
Whereas like vs code, you have to commit, you know, you have to say, uh, that's the file I want enter.
00:31:33.099 --> 00:31:33.390
Okay.
00:31:33.391 --> 00:31:34.069
Now I can see it.
00:31:34.140 --> 00:31:36.309
Just like little details like that make a big difference.
00:31:36.470 --> 00:31:45.619
I, I think like something we do in the docs that is painful as hell for me, but is, uh, I think worth it is there's so much redundancy in our documentation.
00:31:45.970 --> 00:31:56.339
Like so many things are explained seven different times on seven different pages, because I've tried really hard to think about like, what are all the ways someone might look for this information?
00:31:56.359 --> 00:32:08.289
So if you wanna learn how to like customize the different opacity values that are available, but there's a whole section of the documentation on C tailwind, but then on the opacity page, right at the bottom, there's an example of like how to customize it right there.
00:32:08.309 --> 00:32:08.609
You know?
00:32:08.869 --> 00:32:15.730
And we, we do that in a lot of places to try and just like, make sure that no matter what door someone comes in, like they still find it.
00:32:15.730 --> 00:32:24.880
Even if it means we have to duplicate it, which means it's harder for us to maintain and it's more work, but at the end of the day, everyone always figures out how to do what they want to do.
00:32:25.150 --> 00:32:25.440
Yeah.
00:32:25.640 --> 00:32:27.799
I can definitely empathize on, on that.
00:32:27.800 --> 00:32:34.720
Especially docs because like the Algolia docs is, is huge because the Algolia ecosystem is huge.
00:32:34.789 --> 00:32:36.279
Like Algolia is the company.
00:32:36.460 --> 00:32:46.200
And when you say Algolia you think the search engine, but it's actually so big, you have the engine and then you have the open source, like the UI libraries, the, the API clients, et cetera.
00:32:46.779 --> 00:33:01.470
And it's easy to think, very like objectively, okay, I'm going to create one page or one section per project because it makes sense to document them that way, but that's not actually how people use it.
00:33:01.490 --> 00:33:10.430
And unless you're really, uh, a huge company that has a lot of different products and it they're all very contained, usually you're creating an ecosystem.
00:33:10.769 --> 00:33:21.380
And so, yeah, you might have one small page on the tailwind in intelligence plugin, but you're probably going to talk about it in many other place is because that's where people expect it.
00:33:21.799 --> 00:33:30.579
And that's, that's kind of the way that we, we tried building the documentation is thinking, what is the path that people are gonna take to achieve something?
00:33:30.599 --> 00:33:35.180
People don't really care about your products, the product itself.
00:33:35.420 --> 00:33:36.619
It does not matter to them.
00:33:36.690 --> 00:33:42.450
What matters is, what tools do you, if people so they can achieve what they have to achieve.
00:33:42.750 --> 00:34:01.920
And one very important thing to remember, especially when we we're all in the, like the tech business and we we're selling software building software is that search is one small concern that, that someone has when they're building something CSS, same thing like styling is concern, JavaScript.
00:34:02.019 --> 00:34:09.880
And even like how to build a website is one concern in the whole strategy of a company that is building something entirely different.
00:34:09.900 --> 00:34:19.039
So they will never be as invested as we are in our product and thinking that, oh yeah, everything is about search or a style or whatever, you know?
00:34:19.539 --> 00:34:24.989
So it, you needs to be stressed that people don't care about the product itself.
00:34:24.990 --> 00:34:31.309
They care about what they can achieve when you feel smarter, when you feel empowered and it's the same with docs.
00:34:31.311 --> 00:34:36.670
And it goes back to the, the guidelines of the UJS documentation are my favorite ever.
00:34:37.250 --> 00:34:49.179
And there is this one thing where, where it says like, yeah, people have a certain amount of energy and it de it depletes a lot slower when you make them feel smart.
00:34:49.489 --> 00:35:12.010
When you make them feel dumb, like you can have the smartest tech ever, if people feel dumb or behind or less done, because they can't understand it, it's going to Dee lead that their energy a lot faster than if every time you teach them some something, they feel empowered and that's ultimately what they care about.
00:35:12.159 --> 00:35:16.210
It's not about the product, but it's about what's you and luck.
00:35:16.360 --> 00:35:16.650
Yeah.
00:35:17.010 --> 00:35:17.010
Yeah.
00:35:17.010 --> 00:35:19.289
People will always remember that feeling for sure.
00:35:19.360 --> 00:35:26.519
Like the lasting impression is not necessarily the outcome of what they built, but the feeling that was left over, did I love this tool?
00:35:26.579 --> 00:35:27.480
Did I hate this tool?
00:35:27.481 --> 00:35:28.400
Would I use it again?
00:35:28.570 --> 00:35:29.239
Definitely.
00:35:29.780 --> 00:35:31.280
I'd love to know maybe.
00:35:31.500 --> 00:35:32.880
And I'm gonna put you on the spotlight.
00:35:33.699 --> 00:35:57.349
Is there any recent example of incredible DX and you're not allowed to say either tailwind or Versace because, or next JS, because it's too easy, but that blew you away, but not, not only in an anecdotal way, but maybe in a way that you are thinking it's gonna hint what we can expect to see in developer experience in the upcoming years.
00:35:57.900 --> 00:35:58.190
Yeah.
00:35:58.670 --> 00:36:03.630
ES build has really impressed me and the tooling that's been built around it.
00:36:03.650 --> 00:36:07.429
And it's given me like a renewed appreciation for performance.
00:36:07.710 --> 00:36:11.309
I think, I don't know, maybe it's cyclical or something, but it feels like things are fast.
00:36:11.449 --> 00:36:13.110
And then we kind of just get used to them being fast.
00:36:13.250 --> 00:36:16.590
And then we just make things better and add more features and do cooler things.
00:36:17.019 --> 00:36:20.460
And then things kind of get slow again, but it happens gradually and you don't really notice.
00:36:20.599 --> 00:36:22.420
And then someone figures out how to make it fast again.
00:36:22.420 --> 00:36:25.340
And you're like, whoa, I forgot how awesome things being fastest.
00:36:26.559 --> 00:36:42.369
So playing with, um, with some of that stuff has, has really just, uh, gotten me more excited about pro performance than ever and making performance improvements to our own stuff and, and, and really kind of embedding it as like a core value into, into the work that we do.
00:36:42.710 --> 00:36:49.730
So, yeah, that, that's kind of the one that stands out the most for me is like ES build then by extension, uh, V when it came out and playing around with that,
00:36:50.329 --> 00:36:52.409
I, I definitely agree with both of those for me.
00:36:52.809 --> 00:37:05.239
I have two, one of'em is linear that I briefly mentioned earlier, but they have, it must be like a core company, ethos, or just a product ethos, but they really stress, like everything should happen.
00:37:05.599 --> 00:37:07.800
I think like in a hun under a hundred milliseconds.
00:37:08.320 --> 00:37:16.280
And when you use their product, you can really tell that they have performance benchmarks and that they make sure that these interactions complet as fast as possible.
00:37:16.340 --> 00:37:19.030
So it just feels fast when you use it.
00:37:19.179 --> 00:37:25.150
Another one too, for me, just like context and history, I guess, is that I started as a front end developer.
00:37:25.150 --> 00:37:29.510
And then eventually I stumbled into figuring out how to use a database slowly, very slowly.
00:37:29.969 --> 00:37:35.309
And I, I still wouldn't call myself like an expert in the distributed world of backends.
00:37:35.311 --> 00:37:36.789
Like there's really a lot there.
00:37:37.449 --> 00:37:43.420
And I've recently been trying out planet scale, which is like a new, a new solution for your backend.
00:37:43.639 --> 00:37:50.099
And it's built on my SQL and the test, which is like this open source software that they used at YouTube and like a bunch of other big companies.
00:37:50.119 --> 00:37:54.619
But the interesting thing about it is it's a bunch of, well, there's a lot of ex get hub people.
00:37:55.559 --> 00:38:01.889
And the, the UX flow when I used it is like the mental model of GitHub branches.
00:38:02.030 --> 00:38:10.690
And like the thing that I already understood and conceptually knew how to work with like the GI model and then copy pasted onto databases.
00:38:11.309 --> 00:38:16.130
So when I started to use it, I was like, oh yeah, you just make a new branch and you like, apply your schema change.
00:38:16.190 --> 00:38:19.969
And then you commit that schema change back to your main branch.
00:38:20.139 --> 00:38:21.320
And it just works.
00:38:21.340 --> 00:38:32.039
And I was like, oh my gosh, like this reimagining of that, how that workflow should act for helping front end developers like understand the back end actually really wowed me.
00:38:32.039 --> 00:38:32.519
That's awesome.
00:38:33.119 --> 00:38:35.920
So, yeah, I wanted to mention vs, but Adam, you took it.
00:38:35.940 --> 00:38:39.920
So I'm gonna shamelessly plug, uh, Algolia here.
00:38:40.340 --> 00:38:41.599
One really cool thing.
00:38:41.840 --> 00:38:51.519
And, and I worked on it, so it's totally subjective, but, uh, the auto complete library, we just pushed the V one of the auto complete library of Algolia recently.
00:38:51.619 --> 00:38:58.789
And what's really cool in it for developers is that there is so much knowledge that has been accumulated over the years.
00:38:59.269 --> 00:39:07.829
Uh, Al GOIA regarding auto complete that I cannot think of anything that you could not do with this library.
00:39:08.170 --> 00:39:13.110
If what you have to build is an auto complete and I've, and I've really pushed it myself.
00:39:13.110 --> 00:39:17.260
Like I've, I, I worked on it, but also, uh, played with it.
00:39:17.320 --> 00:39:32.380
And one of the recent things that I've tried building with it is replicating the Omni surge that you have in, in Firefox the quantum bar, which is actually filled with awesome, delightful UX patterns that are very specific.
00:39:32.480 --> 00:40:06.840
And that can be very, very hard to reproduce and, and building that, building that experience that is so complex with autocomplete is a delight because all those patterns and all those abstractions and it, and I think it goes back to, yeah, one of the things that I love about N JS, all those abstractions have been so well thought out that it works and you feel like that's the right level and lower would be too hard because I would have to pluck too many things myself, but higher would remove the control that I want.
00:40:06.989 --> 00:40:07.480
Awesome.
00:40:07.849 --> 00:40:08.519
Great example,
00:40:09.360 --> 00:40:12.360
Lee, Adam, where can people go to find you online?
00:40:12.659 --> 00:40:20.469
You can find me at Le Rob do IO or on Twitter at Lero with three E's because somebody else already took the other one.
00:40:21.550 --> 00:40:23.949
Uh, mostly I'm just on Twitter at Adam wain
00:40:24.250 --> 00:40:32.269
And I'm on Twitter at front stuff, underscore IO, and then you can find anything and everything about algolia@algolia.com.
00:40:33.469 --> 00:40:36.230
Lee, Adam thinks a lot for doing this.
00:40:36.289 --> 00:40:37.659
It was super interesting.
00:40:37.860 --> 00:40:40.019
I wish we could stay two extra hours.
00:40:40.250 --> 00:40:40.539
Yeah.
00:40:40.541 --> 00:40:41.460
Thanks so much for having us.
00:40:41.489 --> 00:40:41.780
Yeah.
00:40:41.780 --> 00:40:42.139
Thank you.
00:40:44.050 --> 00:40:48.300
This was developer experience, a podcast brought to you by Algolia.
00:40:48.880 --> 00:40:51.699
You can find this podcast on your favorite podcast platform.
00:40:52.599 --> 00:40:59.809
If you want to know more about Algolia check us out@algolia.com and we are at Alia on Twitter.
00:00:00.059 --> 00:00:10.699
Developer experience really is just about making it possible for people to achieve the things they're trying to do in the fastest, most joy inspiring way possible.
00:00:12.279 --> 00:00:12.980
Hi everyone.
00:00:13.199 --> 00:00:18.820
And welcome to developer experience a new podcast brought to you by Algolia.
00:00:19.640 --> 00:00:27.489
We chat with guests us to build products for developers about their developer experience strategy, what it means for them, why it's important.
00:00:27.870 --> 00:00:40.049
And so on today's episode is our very first, so we will be diving deeper into what developer experience or DX really means I AMS.
00:00:40.710 --> 00:00:45.560
And today I have two fantastic guests with me to answer this question.
00:00:46.189 --> 00:01:04.150
Adam Wathan is the creator of tailwind CSS, one of the most popular and the fastest growing CSS framework, which popularized utility for CSS he has since then found in his own company tailwind labs, where he builds the best tools for CSS developers.
00:01:04.560 --> 00:01:05.109
Hello Adam.
00:01:05.450 --> 00:01:06.790
Hey, thanks so much for having me on
00:01:07.290 --> 00:01:11.430
Our second guest is Lee Robinson, who is the head of developer relations.
00:01:12.390 --> 00:01:19.590
Verel the company behind next JS, which is rapidly becoming the most popular react based framework out there.
00:01:20.329 --> 00:01:32.379
He has built tons of learning material, including blog posts courses, and you can always count on his video tutorials to learn how to build anything was next highly.
00:01:32.959 --> 00:01:35.019
Hey, thanks for having me really excited to be here.
00:01:35.680 --> 00:01:37.060
So let's dive in.
00:01:37.319 --> 00:01:49.930
You know, when I look at the, at your websites, like the tailwind tells CSS page, I can read stuff like rapidly build modern websites without ever leaving your HTML.
00:01:50.159 --> 00:01:51.370
Then I go to Versace.
00:01:51.510 --> 00:01:59.129
I'm like Versace combines the best developer experience with an obsessive focus on front end user performance.
00:01:59.629 --> 00:02:07.959
And then again, I go on next and it's like, next JS gives you the best developer experience again, with all the features you need for production.
00:02:08.780 --> 00:02:22.960
So how comes that developer experience has become so important that now it is a top selling argument on lending page for up and source, but also commercial products.
00:02:23.520 --> 00:02:24.870
One, why do we care so much?
00:02:25.300 --> 00:02:27.430
Yeah, I mean, I can take a, a stab at it.
00:02:27.469 --> 00:02:44.419
I think there's probably a lot of different elements to it, but I think like the one that stands out to me is being a developer is a, is a bit of a unique job in a lot of ways where most of us that do it for a living, I think also do it because we just like really enjoy it and find a lot of fun in doing it.
00:02:45.120 --> 00:02:50.460
And we love to use tools that make that fun experience even more fun.
00:02:50.461 --> 00:02:50.939
You know what I mean?
00:02:50.979 --> 00:03:13.000
I think a lot of jobs out there, people don't expect to have fun or don't, or don't look to have any fun with it, but when you already kind of enjoy the work that you do and you get to kind of, of be creative, it can be made even more enjoyable when it feels like the tools that you're using are really like, you know, helping you move faster and be more productive and like stay in the flow versus feeling like you're fighting with them.
00:03:13.460 --> 00:03:19.310
And then I think on, on top of that, you know, of course there's just like a lot of demand for developers.
00:03:19.330 --> 00:03:21.189
You know, software is eating the world.
00:03:21.330 --> 00:03:23.349
People want to keep their developers happy.
00:03:23.449 --> 00:03:24.110
You know what I mean?
00:03:24.210 --> 00:03:33.389
So if, if, if you can give people tools that, uh, help them have more fun and help them feel more productive and keep up morale and keep them motivated.
00:03:33.469 --> 00:03:35.030
I think that's, that's kind of good for everybody.
00:03:35.659 --> 00:03:35.949
Yeah.
00:03:36.069 --> 00:03:49.419
And I, I think also increasingly we're seeing people in executive or like higher level positions at companies start to understand empowering their developers and increasing their productivity is having a good return on investment.
00:03:49.759 --> 00:04:04.849
And they're seeing those gains of if our developers are happy, our business is doing better, which is then allowing developers to influence decisions around ending whether that's tools you use or SAS you use, or frameworks that you choose or all those different decisions.
00:04:05.330 --> 00:04:07.770
I think that's, we're finally starting to realize a lot of that.
00:04:08.110 --> 00:04:08.330
Yes.
00:04:08.430 --> 00:04:17.490
And it makes a lot of sense, especially when, considering for example, tailwind or next, or Algolia, we're making products for developers.
00:04:17.829 --> 00:04:21.839
So in that way you build software for developers.
00:04:22.060 --> 00:04:28.120
DX is really just UX in a way you are making it great for your audience.
00:04:28.439 --> 00:04:31.360
And in those cases, the audience is developers,
00:04:31.370 --> 00:04:36.759
Especially when you're a company building tools for developers, of course developers are your customer.
00:04:37.019 --> 00:04:44.149
So you want to attract those customers by basically promising them the best possible experience.
00:04:44.209 --> 00:04:44.629
For sure.
00:04:45.089 --> 00:04:51.550
One thing I'm noticing is that the ecosystem is growing and we're getting all better at building software.
00:04:51.850 --> 00:04:58.189
So there is more and more quality products and so competing quality products available.
00:04:58.329 --> 00:05:00.949
So it's not just like great software.
00:05:01.060 --> 00:05:03.019
Where is the unique differentiator?
00:05:03.480 --> 00:05:07.939
You need something more when you look at next, it's not the first react framework.
00:05:08.579 --> 00:05:13.620
Tell when CSS is not the first utility first, but also CSS framework.
00:05:13.720 --> 00:05:17.300
So it's not just about, Hey, we're making it easier.
00:05:17.800 --> 00:05:19.139
Or our tech is better.
00:05:19.610 --> 00:05:25.009
It's also, you are gonna have, have fun is gonna be easy to use it.
00:05:25.029 --> 00:05:27.170
You are gonna have a steady learning curve.
00:05:27.279 --> 00:05:36.689
Like you're gonna be able to be productive faster, or it's gonna be a better investment of your time than this and this.
00:05:36.920 --> 00:05:37.209
Yeah.
00:05:37.250 --> 00:05:48.399
I, I think one interesting point here is developers get really excited about perform and not only like end user performance, but also increased performance while they're developing locally or what that experience is like.
00:05:49.060 --> 00:06:01.120
And something that's interesting is because of the growing community and more developers at large, you see people experimenting and trying out new solutions to maybe problems that existed in the past with something completely new.
00:06:01.399 --> 00:06:09.560
A great example is like ES build ES build is awesome and it's really paving the way for a new future of dev tooling.
00:06:10.060 --> 00:06:21.829
And the great thing about being at the forefront of developer experience is looking at ideas like ES build and looking at fundamental new approaches to technology and seeing how that changes the developer experience.
00:06:21.831 --> 00:06:30.629
Like when you start your application, it's just immediate and then taking that inspiration and trying to work even harder on your own tooling, trying to make Webpac faster in next JS.
00:06:31.060 --> 00:06:31.350
Yeah.
00:06:31.350 --> 00:06:42.379
I think performance is a great thing to talk about when it comes to developer experience, because it's the one thing that's like, if you can't think of anything else to improve, you know, improve the performance.
00:06:42.449 --> 00:06:45.819
Like it's like, I think there's like a quote, something.
00:06:45.821 --> 00:06:51.500
I think I heard about like Amazon back in the day, which was like focus on the needs that people have that are never going to change.
00:06:51.500 --> 00:06:54.339
Like no one is ever gonna want their packages to be delivered slower.
00:06:54.480 --> 00:06:57.019
So let's just figure out how to get them to them faster and faster, faster.
00:06:57.040 --> 00:07:02.490
And it's a same with developer tooling, no one wants transpiring, their JavaScript to get slower.
00:07:03.129 --> 00:07:21.560
And you know, the feeling that people have when they use something like ES build for the first time or some of the tools that are kind of powered by it, like VT is kind of like a, a popular new, like development environment that just like, because it's using ES build under the hood and like native ES module and taking advantage of all these new technologies, it just boots up like instantly.
00:07:21.959 --> 00:07:27.839
And as a developer that just like brings this huge smile to your face, you know, like you're so used to waiting for everything.
00:07:27.899 --> 00:07:30.240
And when it just feels like things are instant, I don't know.
00:07:30.240 --> 00:07:32.680
It's a, it's a bit of a magical feeling.
00:07:32.699 --> 00:07:35.000
So it's a, a fun one to chase for sure.
00:07:35.470 --> 00:07:35.759
Yeah.
00:07:35.761 --> 00:07:42.310
And it's interesting, you you're speaking of ears build which, which is, is extremely fast, but then VT is built on top of it.
00:07:42.449 --> 00:07:45.750
But what V also brings on top of yeah.
00:07:45.759 --> 00:07:58.230
We're fast and we're using under the hood, the tooling to make it fast is that we are also bringing all that together because VT is not only just like a server, it's also bundling up with, with roll up.
00:07:58.730 --> 00:08:14.540
And when you are looking at the progress on JavaScript tooling, like Rome, there is a lot of excitement around that because it's not only fast best in class, but it also consolidates a lot of similar concerns.
00:08:15.089 --> 00:08:15.379
Yeah.
00:08:16.120 --> 00:08:37.929
I'd love to know what's your opinion on what can greatly makes great DX because when you ask people, they will tell you, okay, it's when you have great documentation or when the software feels intuitive, but is it only a matter of like checking the right boxes or is there more more to it?
00:08:37.950 --> 00:08:38.889
That's a hard question.
00:08:39.090 --> 00:08:42.120
I think, because I think it it's different for each product.
00:08:42.419 --> 00:08:46.320
You know, I think all the examples you gave are, are great ones for me.
00:08:46.321 --> 00:09:02.399
Like a great anchor way to think about it in general is just that the goal of like building these tools, if you really want people to have great experiences with them is you want to be focused the whole time on like, making people feel like they have superpowers when they use like your tool.
00:09:02.840 --> 00:09:06.240
I think I've read this, this kind of like first put into words that way.
00:09:06.519 --> 00:09:27.710
And Kathy Sierra's badass book like a few years ago where she talks about like basically how to make a great camera, not to just is not to think about all the features that you can add to the camera, but it's like, what do we have to do to make sure that when someone takes a photo with this camera, they're like so proud of the photo that they took and that it feels like they did it, it doesn't feel like the tool really even gets the credit.
00:09:27.769 --> 00:09:31.710
It feels like they achieved this outcome and it helped them get there.
00:09:31.711 --> 00:09:31.990
You know?
00:09:32.009 --> 00:09:42.100
So how can you, what decisions can you make when you think something that, that are going to make someone feel like they are kick at the problem that they're trying to solve?
00:09:42.639 --> 00:09:51.259
And sometimes not even really noticing that the tool is a thing that's like letting them do it, you know, like you're, you're not looking to get credit for it in a way, you know what I mean?
00:09:51.289 --> 00:09:56.690
It's, it's really just about focusing on like, how can you make someone super successful?
00:09:56.750 --> 00:10:15.610
And I think like the, the open source example that like stands out to me the most just cuz of my own experience and like my own journey to get to where I was, was when I first started using like, laal back when I was like still in college, in like 2012, compared to what I was used to doing with like vanilla PHP and like writing SQL statements myself.
00:10:15.929 --> 00:10:24.519
And so stuff like that, it was so crazy to me how I could just like get some stuff showing on the screen from a database and click around and stuff with like so little work.
00:10:24.679 --> 00:10:28.559
I just felt like I can build anything now because of like these tools that are here.
00:10:28.860 --> 00:10:36.279
So for me, a lot of it just comes to them to like trying to create that, that feeling by any means necessary.
00:10:36.399 --> 00:10:38.870
And it think, I think it does depend on each project.
00:10:39.110 --> 00:10:47.029
I think with tailwind, for example, some of the elements to that are like agonizing over the class names to try and make them like as guessable as possible.
00:10:47.250 --> 00:10:54.549
And it's never always guessable for everyone, but I do hear that feedback a lot where people, a lot of people feel like they don't even need to read the docs.
00:10:54.551 --> 00:10:56.190
They just like guess and they're right.
00:10:56.250 --> 00:11:09.220
You know, and then even just like designing the tool to accommodate the whole, you know, utility first workflow that like we believe in, in so much, like that's not really a feature of tailwind itself as a technical library.
00:11:09.759 --> 00:11:13.940
You know, it's not like code that we wrote that creates that experience.
00:11:14.100 --> 00:11:21.529
It it's really just like creating something that enables a specific flow and letting people experience kind of like the benefits of that workflow.
00:11:21.549 --> 00:11:24.169
And then documentation, I think is a huge one.
00:11:24.330 --> 00:11:42.159
I think I heard Taylor Atwell say this years ago that he kind of believes that basically given a set of open source tools, like the one with the best documentation is like almost always the one that wins because that's the one where people are gonna be able to do the things that they, they need to do.
00:11:42.620 --> 00:11:56.720
So paying attention to what people are struggling with and, and finding ways to get people over those hurdles, either through documentation or by introducing a feature that fixes that you just wanna just like make sure nothing ever slows people down.
00:11:57.279 --> 00:12:12.240
I, I love the first point you made because something that I have a lot of respect for the tailwind team for is that a underrated benefit of creating a great developer experience is that you notice that design is really rooted in every decision that you make.
00:12:12.690 --> 00:12:14.909
And that's something that I think the tailwind team does really well.
00:12:14.910 --> 00:12:33.659
And that I have a lot of respect for my peers ATL for thinking about really deeply, because what is design in the developer space is a lot more than just how the documentation looks it's like you said, with making sure the class names are guessable, it's down to how you design even APIs for frameworks.
00:12:34.049 --> 00:12:38.700
It's how the user interaction on your site makes it so that it just gets out of the way.
00:12:38.720 --> 00:12:41.779
It makes it really easy to just jump in and get started.
00:12:42.320 --> 00:12:58.769
And from my personal experience, I feel like when I have a really great developer experience, it's always rooted in teams that think very deeply about design and they care deeply and they stress over the little details that other people might not spend the extra time on.
00:12:58.840 --> 00:12:59.129
Yeah.
00:12:59.130 --> 00:13:02.009
Developer experience is a design problem, for sure.
00:13:02.080 --> 00:13:09.610
Like not all developers are the sorts of people who create things that, you know, have great developer experiences.
00:13:09.610 --> 00:13:12.250
Not because like just, just cause it's a different skill.
00:13:12.269 --> 00:13:12.809
You know what I mean?
00:13:13.090 --> 00:13:24.639
It's, it's, it's like magical when you can find people who like have the technical ability to build the thing and also have like the sort of design mind sort of brain to sort of bridge that gap.
00:13:25.379 --> 00:13:41.149
And you get lots of amazing things, you know, coming from that, when you see that, I think like another concrete example of like when I had an experience that made me feel like what, wow, I can't believe like how easily I was able to do that was when I first was playing with incremental static regeneration in next.
00:13:41.769 --> 00:13:45.230
So I had to build like a website for my podcast, full stack radio.
00:13:45.590 --> 00:13:50.950
Cause I didn't like, like the default website that came with podcast host I was using and I was trying to think, okay, well, how am I gonna do this?
00:13:50.970 --> 00:13:56.860
You know, I have to like consume this RSS feed and I have to figure out how to like get all that working.
00:13:56.960 --> 00:14:06.379
Am I gonna have to like run a build script every single time that like I publish a new episode or, um, have something make like an API request and like cash things.
00:14:07.039 --> 00:14:16.370
And then I just started building it out with next expecting like, not really fully think through like the power of that feature at the time, but just like started building it and just see where I ended up.
00:14:16.870 --> 00:14:21.250
And then when I added that first, like I think it's just like get static props, right?
00:14:21.529 --> 00:14:24.610
That's like the API for like the, that stuff added, like get static props.
00:14:24.789 --> 00:14:29.850
All it does is make an Fe request to the RSS feed and then pass it in.
00:14:30.360 --> 00:14:32.169
It's literally like three lines of code.
00:14:32.350 --> 00:14:39.279
And now I have this like fully static podcast site that automatically update it's anytime I publish a new episode, as long as someone visits the page once.
00:14:39.779 --> 00:14:45.559
And I, I just like, I couldn't believe that I was able to do it with like such little code without thinking about anything that had to run on the server.
00:14:45.659 --> 00:14:49.639
And, and in hindsight it's like, well, of course that should be possible.
00:14:49.830 --> 00:14:57.960
Like when you see that it can be done, but it was this magical experience of being able to do something so easily, but also like understanding why it was easy.
00:14:58.059 --> 00:15:05.799
And also like not feeling like there was some magic happening that like was well beyond like my ability to comprehend it.
00:15:05.801 --> 00:15:14.230
You know, it it's, it's straightforward enough that you feel like, again, like you feel like you can take credit for building the website, you know what I mean?
00:15:14.470 --> 00:15:16.230
And it makes you feel like an awesome developer.
00:15:16.230 --> 00:15:22.389
It doesn't make you feel like you just have this like overpowered tool that elevates even someone who doesn't know what they're doing.
00:15:22.390 --> 00:15:25.269
Like you, you know, it's, it's an empowering feeling.
00:15:25.419 --> 00:15:30.710
It's not, it doesn't feel like a crutch, you know, and trying to find out how to design things that way is, is hard.
00:15:30.730 --> 00:15:32.539
But that's what I think you need to think about.
00:15:33.129 --> 00:15:33.419
Yeah.
00:15:33.679 --> 00:15:43.179
The behind the scenes story there is really interesting to me because you know, huge shout out and, and credit to the next JS core team for designing these APIs and, and coming up with this approach.
00:15:43.240 --> 00:15:57.009
But what you don't see is that, you know, that was in the works for years, they had been thinking deeply about, do we build this abstraction on next JS to make it easy, to build static sites?
00:15:57.269 --> 00:16:04.049
So if I roll it back a little bit, like when next JS started, it was focused on server rendering react applications.
00:16:04.710 --> 00:16:08.409
And you know, there were other solutions that existed that would allow you to build everything
00:16:08.409 --> 00:16:09.370
Was server render, right?
00:16:09.370 --> 00:16:12.840
Like you had to write like isomorphic JavaScript for everything that was kind of like the big pitch.
00:16:13.070 --> 00:16:13.360
Yeah.
00:16:13.419 --> 00:16:14.120
100%.
00:16:14.500 --> 00:16:19.960
And you know, there were other solutions out there not even react related, but just allow you to create static sites.
00:16:20.539 --> 00:16:22.639
And we kind of just stepped back.
00:16:22.840 --> 00:16:29.759
I say, we, I wasn't at Verel when this happened, but the team stepped back and just looked at the ecosystem.
00:16:30.340 --> 00:16:32.830
And at this point I was just a happy user of yes.
00:16:33.289 --> 00:17:01.980
And they looked at the ecosystem and they, they understood what worked well and what maybe didn't work as well, or what could be improved a little bit and really deeply thought about how do we condense the API for making a static site into just two methods and how can we make it so that adding new functionality, like allowing your pages to regenerate in the background is just a couple lines of code, extra, such that when we release it, we're not gonna have to completely rewrite this thing in a few years.
00:17:01.980 --> 00:17:05.819
Like making it have an extensible API design from the start,
00:17:06.039 --> 00:17:16.849
People always say, oh, it's about great documentation, like writing great docs and building great DX are all root it in the same need for empathy.
00:17:17.109 --> 00:17:21.650
You need to empathize with the people who are gonna use your product.
00:17:21.829 --> 00:17:22.650
And like, yeah.
00:17:22.651 --> 00:17:29.609
When I, when I think of Algolia, there are many examples, but when you index your data, you might have a lot of data.
00:17:29.789 --> 00:17:31.890
So we are going to batch it for you.
00:17:31.891 --> 00:17:36.000
We're gonna chunk it and batch it for you because otherwise you would need to do it.
00:17:36.619 --> 00:17:45.279
And when you index for the first time, because we know you're gonna be excited about searching it right away, we make all your attributes searchable.
00:17:45.380 --> 00:18:00.680
And then we tell you, you might want to pick which ones are, are searchable, because we know it can be a performance drain, but we don't want to make you go that extra step to do it and to see it work and to be amazed by, by the magic of it.
00:18:00.700 --> 00:18:08.279
So there's really, uh, this sense of empathy of how are people going to, to react when they see what?
00:18:08.569 --> 00:18:22.349
And so that's kind of the continuity of the work that you do when you're a software engineer, when you're a software engineer and you are working with a team, you want to write code that your coworker is not gonna hate you because you wrote it.
00:18:22.769 --> 00:18:31.380
So you're gonna do that, that job of, okay, I'm going to name my variables properly or, or split in my, uh, my PR in a, in a certain way.
00:18:31.799 --> 00:18:44.180
But then you are handing a piece of software to other developers who are not your coworkers who are not supposed to like you, they are using something that you made, but there is no, yeah, there is no tide.
00:18:44.181 --> 00:18:45.740
Like you don't have to be nice to each other.
00:18:46.160 --> 00:19:02.210
And so, yeah, there's really that continuity of you, your work, as I'm, I'm trying to exercise empathy and to make sure that people enjoy what, uh, that they enjoy the experience of working with that.
00:19:02.569 --> 00:19:15.279
I was gonna say, like, I think a thing too, that came to mind that I think is, is one of the things that makes trying to create great developer experiences, hard, that it's easy to just like jump on this idea of, we just wanna make things as easy as possible.
00:19:15.380 --> 00:19:21.880
We wanna make things as automatic as possible, but that never comes like for, for free.
00:19:21.990 --> 00:19:29.880
Even when you see people solve those problems, it's easy to assume or to, to kind of not recognize how much effort went into achieving it.
00:19:29.900 --> 00:19:44.480
But it's easy to try and build things that make some things easy while sort of making some things impossible, you know, and what's really hard is to figure out how to make things easy without like enforcing constraints.
00:19:44.599 --> 00:19:47.039
Some people that are just gonna frustrate them in like different ways.
00:19:47.680 --> 00:19:59.390
Cuz we've all seen like libraries that try to solve a specific problem and you work with it, but there's just like one tiny like deal breaking element of it.
00:19:59.390 --> 00:20:01.470
That's just like, ah, I just need to do this one thing.
00:20:01.529 --> 00:20:07.630
And it's like fundamentally impossible because of like this other decision that was made and now I can't use this tool.
00:20:08.009 --> 00:20:23.819
So I think that's one of like the most challenging elements is, is trying to find these kind of perfect solutions that make things easier without introducing limitations that are significant enough to kind of like ruin that, that magical experience.
00:20:24.099 --> 00:20:32.609
I think like the hardest thing in general about all this stuff is there really, isn't like a way to make a checklist of like, okay, here's like the things that you need to make like easy for people.
00:20:32.799 --> 00:20:39.849
It's it's really just has to be like noticing what could make people's lives better and figuring out how to solve it.
00:20:39.851 --> 00:20:44.369
Like one example that comes to mind for me is the command palette and sublime text.
00:20:44.730 --> 00:20:49.559
I might be wrong, but I feel like that was the first app where I ever saw that concept.
00:20:49.900 --> 00:21:02.359
The idea of a super quickly searchable thing where you could pull it up with one keystroke and you could access basically every function that you could perform in the whole app by searching and just like hitting enter to, to perform it.
00:21:02.779 --> 00:21:19.670
I'd never seen anyone else do that before, before it was always like memorize the key keyboard shortcuts, memorize the keyboard shortcuts, memorize the keyboard shortcuts and the people who took the time to do that, to memorize the keyboard shortcuts were always like, they always looked like wizards to the people who that wasn't natural for.
00:21:19.869 --> 00:21:19.869
Right?
00:21:19.871 --> 00:21:28.980
Like for me, I would always, anytime I wanted to perform any action, any tool, I'd like go up to the menu bar, open it up, find the action, see what the keyboard shortcut and then do it with the keyboard.
00:21:28.980 --> 00:21:31.460
Like I wouldn't let myself click the action in the menu bar.
00:21:31.461 --> 00:21:37.299
You know, otherwise you're not building that muscle memory, but not everyone is kind of has that like built into their DNA.
00:21:37.519 --> 00:21:38.059
You know what I mean?
00:21:38.319 --> 00:21:46.059
So you notice that problem as like a maker of these tools and you think, well, how can I help people not have to move their hand in the mouse?
00:21:46.299 --> 00:21:50.529
Cuz I know that that's like slowing the, these people down and you have to invent a solution for it.
00:21:50.530 --> 00:21:51.009
You know what I mean?
00:21:51.010 --> 00:21:52.650
Like there's no, it's not obvious.
00:21:52.829 --> 00:21:56.690
You know, you have to like work really hard and figure out like what sort of improvements you can make.
00:21:56.809 --> 00:22:06.970
I, I think like sublime in a lot of ways doesn't get enough credit for like completely changing the productivity expectations from tech editors with like the multi cursor stuff.
00:22:06.990 --> 00:22:20.359
And I, I was we reading some old, old hacker news comments about like when sublime first came out and someone said that something else had multiple curses before sublime, but then the creator sublime replied listing all the things that like that even that didn't have.
00:22:20.380 --> 00:22:22.000
And he had never even seen that either.
00:22:22.380 --> 00:22:24.559
So we take some of these things for granted.
00:22:24.560 --> 00:22:31.789
Now, like every modern editor we use has like multiple cursors has a command palette, like Chrome dev tools has a command palette at this point, you know?
00:22:32.130 --> 00:22:42.029
But these things had to be like in invented by someone who like noticed a situation where someone could do something faster and had to just like grind it, coming up with a solution.
00:22:42.529 --> 00:22:56.900
But I guess like if I did have to generalize, like what developer experience is, it really is just about new making it possible for people to achieve the things they're trying to do in the fastest, most joy inspiring way possible.
00:22:57.119 --> 00:23:09.809
You know, like when you do like a big, um, have you ever done like a, a project wide like Redex replace with like unfortunately, um, like placeholders and stuff, you know, where it's like a caps sure.
00:23:09.810 --> 00:23:20.049
This capture group and like replace it with this and like preserve the case or like change the case when you pull something like that off like the feeling that you get from that it's just like, I'm awesome.
00:23:20.490 --> 00:23:20.569
You
00:23:20.609 --> 00:23:21.170
Know, you know what I mean?
00:23:22.710 --> 00:23:27.170
And like that that's possible because like someone created regular expressions, you know what I mean?
00:23:27.490 --> 00:23:37.519
Like regular expressions, like we all like to like kind of poke fun at them or whatever, but in, in some ways they're like one of the most powerful DX tools that exist, you know?
00:23:37.839 --> 00:23:40.480
Cause they do give you that super power that you wouldn't have otherwise.
00:23:40.500 --> 00:23:41.200
So, well,
00:23:41.359 --> 00:23:53.839
It what's interesting to me building off the, like the last part that you said, I think there's a word for this and it's rooted in other creative fields, but like let's say you're a musician like great musicians have great taste.
00:23:54.309 --> 00:24:01.480
They listen and they consume a lot of music, great artists, you know, they go to art galleries and they go view a lot of art.
00:24:01.779 --> 00:24:07.069
And I think with devs too, like great developers have have great taste and they try a lot of tools.
00:24:07.660 --> 00:24:08.950
They experiment with things.
00:24:09.190 --> 00:24:11.430
They, they understand what they like and what they don't like.
00:24:11.690 --> 00:24:19.390
And then all of that knowledge and shared experience helps then funnel back into creating an amazing developer experience in their product too.
00:24:19.490 --> 00:24:21.430
And I think that's where a lot of the inspiration comes too.
00:24:21.750 --> 00:24:32.180
Like I'll try out something like, you know, linear, which is an incredible, and I'm, I'm not building project management stuff, but I see their command K keyboard and I'm like, wow, this is amazing.
00:24:32.329 --> 00:24:35.700
Like I, I need to have this on my site or I need to put this in bursell.com.
00:24:36.130 --> 00:24:36.420
Yeah.
00:24:36.700 --> 00:24:43.859
I, I think it's a really important if you're trying to create great developer experience to really have like a very low pain tolerance.
00:24:44.539 --> 00:24:49.210
I think a lot of people are willing to put up with experiences that could be a lot better.
00:24:49.910 --> 00:25:01.450
So if you want to find opportunities to make things better, I think it's really important to, even though it sounds kind of negative it's to just like convince like be annoyed easily by your tools.
00:25:01.509 --> 00:25:02.410
No, I agree what I mean,
00:25:02.890 --> 00:25:15.920
A, a good example of this is like, it also ties back to empathy to too next JS is definitely not the first framework or tool to do this, but for certain errors, when you run into errors in the command line, it spits out, it says, Hey, here's what you did wrong.
00:25:16.180 --> 00:25:19.200
And then there's a URL to go learn more about it.
00:25:19.309 --> 00:25:22.480
That shows you specifically what went wrong, potentially some code to fix it.
00:25:22.880 --> 00:25:23.599
I I'm guessing that
00:25:23.680 --> 00:25:25.799
Was we're we're in the process of stealing that idea from you.
00:25:26.119 --> 00:25:26.240
I,
00:25:26.829 --> 00:25:33.190
I guess this was probably popularized by like ES lint, because they usually have links to docs for like why this lint or exists.
00:25:33.269 --> 00:25:33.269
Yeah.
00:25:33.329 --> 00:25:34.589
But it helps a lot.
00:25:34.609 --> 00:25:35.990
And it shows empathy for people.
00:25:36.490 --> 00:25:40.630
Not only thinking about the, like the happy path, but the sad path too.
00:25:40.631 --> 00:25:40.910
Yeah.
00:25:41.089 --> 00:25:44.109
You can do so much more with that than you can in just the console, right?
00:25:44.111 --> 00:25:48.740
Like if you limit yourself to just trying to figure out how can I explain this error in two sentences?
00:25:48.759 --> 00:26:08.410
So if it's in the console, like you can't really do much to help people, but if you can link to a page where you can have like embedded code examples and like you might be trying to do this, like here's how, what you should do instead, I'm really looking forward to creating like full blown, like scrollable docs pages for like certain common errors where, you know, we can really help people.
00:26:08.670 --> 00:26:11.369
And it helps us too, because like then we have less GitHub issues.
00:26:11.710 --> 00:26:11.930
Yes.
00:26:12.569 --> 00:26:13.009
Whatever, you know,
00:26:13.289 --> 00:26:22.609
A side benefit of that too, is that if you're going to a website and you have analytics on it, you get this nice ranked list of like, what are the errors that people are running into.
00:26:23.029 --> 00:26:30.279
And interestingly, we've, we're gonna talk about this at next year conference next week, but we've been working on integr ES lent directly into next JS.
00:26:30.660 --> 00:26:40.519
So the intention here is like, rather than even having to go through that process of like clicking out, ideally you get in editor feedback, like, Hey, you shouldn't do this specific thing.
00:26:40.750 --> 00:26:41.559
It's gonna break your
00:26:41.559 --> 00:26:41.720
App.
00:26:41.900 --> 00:26:50.200
That's actually a whole interesting topic in general, I think is ideas for improving kind of error situations that people run into as like a whole class.
00:26:50.309 --> 00:26:55.440
Like that's a whole subcategory of like developer experience, I think where there's lots of room to, to do stuff.
00:26:55.500 --> 00:27:04.470
And I'm interested in figuring out ways to improve there because the only idea I have right now is to do what you guys do with the, the, the links in, in the console.
00:27:04.829 --> 00:27:17.309
And, and we have stuff like in our like intelligence plugin, it'll like warn you, if you have applied like two conflicting classes, you know, if you have like flex and block, it'll be like, uh, don't do this.
00:27:17.380 --> 00:27:21.910
Like only one of these can work and we can't guarantee you, which one is working, stuff like that.
00:27:22.049 --> 00:27:22.829
So there
00:27:23.039 --> 00:27:30.980
Is one thing that I, that to me is extremely important when we talk about DX, is that again, not to forget that it's UX.
00:27:31.759 --> 00:27:38.220
And so there are many existing patterns that apply from existing UX research.
00:27:38.720 --> 00:27:49.049
And one of the things that I really value is look how people use your product, look at what frustrates them, look at the feedback that you get.
00:27:49.069 --> 00:27:54.769
And yes, granted sometimes you can get lost in feedback and it's important to be able to pick the right things.
00:27:54.829 --> 00:28:04.880
But an example is that when we rebuilt the, the search on the Algolia documentation, we decided, okay, it's not just gonna be a new, pretty search.
00:28:04.890 --> 00:28:13.160
We're gonna build a search that caters to developers who are looking in our docs.
00:28:13.161 --> 00:28:18.079
So it's our specific docs, the way it works, the ecosystem we have and all that.
00:28:18.259 --> 00:28:29.430
And so we made a lot of decisions based on that, because we are the prime users of that, that document, but we can also know what people search and what doesn't yield, any results.
00:28:29.849 --> 00:28:35.990
And so, for example, that's how we decided, Hey, in the documentation, you're going to have a preview.
00:28:36.170 --> 00:28:46.180
So if you go on the documentation of Algolia you type something and when you navigate a results, instead of having to go there and see, oh yeah, that's actually what I'm looking for.
00:28:46.319 --> 00:28:47.500
You're gonna see a preview.
00:28:48.000 --> 00:28:52.940
And that is rooted in seeing people go and try.
00:28:52.960 --> 00:29:00.140
And because yeah, you show a result that is one line because you want it to be compact and people go, and then it's not the right page.
00:29:00.160 --> 00:29:02.220
So they come back and they do the search again.
00:29:02.240 --> 00:29:03.900
So they have to reopen it, et cetera.
00:29:04.319 --> 00:29:11.210
So there's that you also have the pattern of, uh, let's say you wanna say, you want to find how to index in PHP.
00:29:11.589 --> 00:29:20.490
So it's gonna be nice if you are able to filter on PHP, but if we're like, okay, let's provide you a dropdown and you're gonna select your language.
00:29:20.799 --> 00:29:24.809
Then you have to use your mouse and you have to leave the focus like the, the input.
00:29:25.309 --> 00:29:33.440
And when you actually look at people using the search and you say, okay, search for indexing in PHP, they will type indexing in PHP.
00:29:33.779 --> 00:29:35.880
So why not put that here?
00:29:35.950 --> 00:29:45.079
Like let's put patterns and put the developer experience or the user experience in the places that people expect them to be in.
00:29:45.309 --> 00:29:53.079
This is definitely something, for example, in tailwind that I use a lot that I can see is that it's not only gonna be about one place.
00:29:53.190 --> 00:30:00.039
It's not just the documentation or the product, but it's also the entire ecosystem that you build around it.
00:30:00.740 --> 00:30:05.230
Like tailwind intelligence in vs code is one of my favorite extension.
00:30:05.329 --> 00:30:06.829
It does so much for me.
00:30:06.830 --> 00:30:23.500
And I'm so happy about it because it makes me a lot faster having the, the errors in the console, like there is an error and having the link to the documentation in reacting next, in view, in it removes so much friction.
00:30:24.000 --> 00:30:31.579
But also I know that there is someone like me who probably went through that and decided, Hey, it's a good pattern.
00:30:31.859 --> 00:30:35.140
I know that someone is going to have a lot of pain in that place.
00:30:35.400 --> 00:30:38.779
So we're gonna put it here because that's where they're going to look.
00:30:39.210 --> 00:30:39.500
Yeah.
00:30:39.809 --> 00:30:42.930
It's obvious that you've really thought out about the entire ecosystem.
00:30:43.630 --> 00:30:47.609
Not only from I'm, I'm working with the library, but then, okay.
00:30:47.611 --> 00:30:48.529
I need some icons.
00:30:48.680 --> 00:30:51.529
Okay, well, we have this, you know, all these icons, you can pull off the shelf.
00:30:51.880 --> 00:30:52.170
Okay.
00:30:52.171 --> 00:30:56.849
But now I need to create a model and now I need to create some kind of JavaScript interactive thing.
00:30:56.880 --> 00:30:57.170
Okay.
00:30:57.279 --> 00:30:59.009
Well, now we have this headless UI package.
00:30:59.029 --> 00:31:04.599
That's gonna work with your favorite framework or tool of tool and going even further than with like tail one UI.
00:31:04.601 --> 00:31:05.480
It's like, well, okay.
00:31:05.480 --> 00:31:08.759
But I wanna see this in like a real world application, show me some real code.
00:31:08.760 --> 00:31:09.599
And it's like, here you go.
00:31:09.601 --> 00:31:10.440
Here's some free code.
00:31:11.589 --> 00:31:11.880
Yeah.
00:31:11.900 --> 00:31:15.799
Thanks on the note of what you were saying, Sarah, with like some of the documentation stuff.
00:31:16.000 --> 00:31:28.950
And, and even like the, the previous stuff that Algolia does with the search that makes me think of like something even sublime does that still, I think vs code doesn't do where if you hit like command P and start typing a file sublime previews it immediately.
00:31:28.951 --> 00:31:33.029
Whereas like vs code, you have to commit, you know, you have to say, uh, that's the file I want enter.
00:31:33.099 --> 00:31:33.390
Okay.
00:31:33.391 --> 00:31:34.069
Now I can see it.
00:31:34.140 --> 00:31:36.309
Just like little details like that make a big difference.
00:31:36.470 --> 00:31:45.619
I, I think like something we do in the docs that is painful as hell for me, but is, uh, I think worth it is there's so much redundancy in our documentation.
00:31:45.970 --> 00:31:56.339
Like so many things are explained seven different times on seven different pages, because I've tried really hard to think about like, what are all the ways someone might look for this information?
00:31:56.359 --> 00:32:08.289
So if you wanna learn how to like customize the different opacity values that are available, but there's a whole section of the documentation on C tailwind, but then on the opacity page, right at the bottom, there's an example of like how to customize it right there.
00:32:08.309 --> 00:32:08.609
You know?
00:32:08.869 --> 00:32:15.730
And we, we do that in a lot of places to try and just like, make sure that no matter what door someone comes in, like they still find it.
00:32:15.730 --> 00:32:24.880
Even if it means we have to duplicate it, which means it's harder for us to maintain and it's more work, but at the end of the day, everyone always figures out how to do what they want to do.
00:32:25.150 --> 00:32:25.440
Yeah.
00:32:25.640 --> 00:32:27.799
I can definitely empathize on, on that.
00:32:27.800 --> 00:32:34.720
Especially docs because like the Algolia docs is, is huge because the Algolia ecosystem is huge.
00:32:34.789 --> 00:32:36.279
Like Algolia is the company.
00:32:36.460 --> 00:32:46.200
And when you say Algolia you think the search engine, but it's actually so big, you have the engine and then you have the open source, like the UI libraries, the, the API clients, et cetera.
00:32:46.779 --> 00:33:01.470
And it's easy to think, very like objectively, okay, I'm going to create one page or one section per project because it makes sense to document them that way, but that's not actually how people use it.
00:33:01.490 --> 00:33:10.430
And unless you're really, uh, a huge company that has a lot of different products and it they're all very contained, usually you're creating an ecosystem.
00:33:10.769 --> 00:33:21.380
And so, yeah, you might have one small page on the tailwind in intelligence plugin, but you're probably going to talk about it in many other place is because that's where people expect it.
00:33:21.799 --> 00:33:30.579
And that's, that's kind of the way that we, we tried building the documentation is thinking, what is the path that people are gonna take to achieve something?
00:33:30.599 --> 00:33:35.180
People don't really care about your products, the product itself.
00:33:35.420 --> 00:33:36.619
It does not matter to them.
00:33:36.690 --> 00:33:42.450
What matters is, what tools do you, if people so they can achieve what they have to achieve.
00:33:42.750 --> 00:34:01.920
And one very important thing to remember, especially when we we're all in the, like the tech business and we we're selling software building software is that search is one small concern that, that someone has when they're building something CSS, same thing like styling is concern, JavaScript.
00:34:02.019 --> 00:34:09.880
And even like how to build a website is one concern in the whole strategy of a company that is building something entirely different.
00:34:09.900 --> 00:34:19.039
So they will never be as invested as we are in our product and thinking that, oh yeah, everything is about search or a style or whatever, you know?
00:34:19.539 --> 00:34:24.989
So it, you needs to be stressed that people don't care about the product itself.
00:34:24.990 --> 00:34:31.309
They care about what they can achieve when you feel smarter, when you feel empowered and it's the same with docs.
00:34:31.311 --> 00:34:36.670
And it goes back to the, the guidelines of the UJS documentation are my favorite ever.
00:34:37.250 --> 00:34:49.179
And there is this one thing where, where it says like, yeah, people have a certain amount of energy and it de it depletes a lot slower when you make them feel smart.
00:34:49.489 --> 00:35:12.010
When you make them feel dumb, like you can have the smartest tech ever, if people feel dumb or behind or less done, because they can't understand it, it's going to Dee lead that their energy a lot faster than if every time you teach them some something, they feel empowered and that's ultimately what they care about.
00:35:12.159 --> 00:35:16.210
It's not about the product, but it's about what's you and luck.
00:35:16.360 --> 00:35:16.650
Yeah.
00:35:17.010 --> 00:35:17.010
Yeah.
00:35:17.010 --> 00:35:19.289
People will always remember that feeling for sure.
00:35:19.360 --> 00:35:26.519
Like the lasting impression is not necessarily the outcome of what they built, but the feeling that was left over, did I love this tool?
00:35:26.579 --> 00:35:27.480
Did I hate this tool?
00:35:27.481 --> 00:35:28.400
Would I use it again?
00:35:28.570 --> 00:35:29.239
Definitely.
00:35:29.780 --> 00:35:31.280
I'd love to know maybe.
00:35:31.500 --> 00:35:32.880
And I'm gonna put you on the spotlight.
00:35:33.699 --> 00:35:57.349
Is there any recent example of incredible DX and you're not allowed to say either tailwind or Versace because, or next JS, because it's too easy, but that blew you away, but not, not only in an anecdotal way, but maybe in a way that you are thinking it's gonna hint what we can expect to see in developer experience in the upcoming years.
00:35:57.900 --> 00:35:58.190
Yeah.
00:35:58.670 --> 00:36:03.630
ES build has really impressed me and the tooling that's been built around it.
00:36:03.650 --> 00:36:07.429
And it's given me like a renewed appreciation for performance.
00:36:07.710 --> 00:36:11.309
I think, I don't know, maybe it's cyclical or something, but it feels like things are fast.
00:36:11.449 --> 00:36:13.110
And then we kind of just get used to them being fast.
00:36:13.250 --> 00:36:16.590
And then we just make things better and add more features and do cooler things.
00:36:17.019 --> 00:36:20.460
And then things kind of get slow again, but it happens gradually and you don't really notice.
00:36:20.599 --> 00:36:22.420
And then someone figures out how to make it fast again.
00:36:22.420 --> 00:36:25.340
And you're like, whoa, I forgot how awesome things being fastest.
00:36:26.559 --> 00:36:42.369
So playing with, um, with some of that stuff has, has really just, uh, gotten me more excited about pro performance than ever and making performance improvements to our own stuff and, and, and really kind of embedding it as like a core value into, into the work that we do.
00:36:42.710 --> 00:36:49.730
So, yeah, that, that's kind of the one that stands out the most for me is like ES build then by extension, uh, V when it came out and playing around with that,
00:36:50.329 --> 00:36:52.409
I, I definitely agree with both of those for me.
00:36:52.809 --> 00:37:05.239
I have two, one of'em is linear that I briefly mentioned earlier, but they have, it must be like a core company, ethos, or just a product ethos, but they really stress, like everything should happen.
00:37:05.599 --> 00:37:07.800
I think like in a hun under a hundred milliseconds.
00:37:08.320 --> 00:37:16.280
And when you use their product, you can really tell that they have performance benchmarks and that they make sure that these interactions complet as fast as possible.
00:37:16.340 --> 00:37:19.030
So it just feels fast when you use it.
00:37:19.179 --> 00:37:25.150
Another one too, for me, just like context and history, I guess, is that I started as a front end developer.
00:37:25.150 --> 00:37:29.510
And then eventually I stumbled into figuring out how to use a database slowly, very slowly.
00:37:29.969 --> 00:37:35.309
And I, I still wouldn't call myself like an expert in the distributed world of backends.
00:37:35.311 --> 00:37:36.789
Like there's really a lot there.
00:37:37.449 --> 00:37:43.420
And I've recently been trying out planet scale, which is like a new, a new solution for your backend.
00:37:43.639 --> 00:37:50.099
And it's built on my SQL and the test, which is like this open source software that they used at YouTube and like a bunch of other big companies.
00:37:50.119 --> 00:37:54.619
But the interesting thing about it is it's a bunch of, well, there's a lot of ex get hub people.
00:37:55.559 --> 00:38:01.889
And the, the UX flow when I used it is like the mental model of GitHub branches.
00:38:02.030 --> 00:38:10.690
And like the thing that I already understood and conceptually knew how to work with like the GI model and then copy pasted onto databases.
00:38:11.309 --> 00:38:16.130
So when I started to use it, I was like, oh yeah, you just make a new branch and you like, apply your schema change.
00:38:16.190 --> 00:38:19.969
And then you commit that schema change back to your main branch.
00:38:20.139 --> 00:38:21.320
And it just works.
00:38:21.340 --> 00:38:32.039
And I was like, oh my gosh, like this reimagining of that, how that workflow should act for helping front end developers like understand the back end actually really wowed me.
00:38:32.039 --> 00:38:32.519
That's awesome.
00:38:33.119 --> 00:38:35.920
So, yeah, I wanted to mention vs, but Adam, you took it.
00:38:35.940 --> 00:38:39.920
So I'm gonna shamelessly plug, uh, Algolia here.
00:38:40.340 --> 00:38:41.599
One really cool thing.
00:38:41.840 --> 00:38:51.519
And, and I worked on it, so it's totally subjective, but, uh, the auto complete library, we just pushed the V one of the auto complete library of Algolia recently.
00:38:51.619 --> 00:38:58.789
And what's really cool in it for developers is that there is so much knowledge that has been accumulated over the years.
00:38:59.269 --> 00:39:07.829
Uh, Al GOIA regarding auto complete that I cannot think of anything that you could not do with this library.
00:39:08.170 --> 00:39:13.110
If what you have to build is an auto complete and I've, and I've really pushed it myself.
00:39:13.110 --> 00:39:17.260
Like I've, I, I worked on it, but also, uh, played with it.
00:39:17.320 --> 00:39:32.380
And one of the recent things that I've tried building with it is replicating the Omni surge that you have in, in Firefox the quantum bar, which is actually filled with awesome, delightful UX patterns that are very specific.
00:39:32.480 --> 00:40:06.840
And that can be very, very hard to reproduce and, and building that, building that experience that is so complex with autocomplete is a delight because all those patterns and all those abstractions and it, and I think it goes back to, yeah, one of the things that I love about N JS, all those abstractions have been so well thought out that it works and you feel like that's the right level and lower would be too hard because I would have to pluck too many things myself, but higher would remove the control that I want.
00:40:06.989 --> 00:40:07.480
Awesome.
00:40:07.849 --> 00:40:08.519
Great example,
00:40:09.360 --> 00:40:12.360
Lee, Adam, where can people go to find you online?
00:40:12.659 --> 00:40:20.469
You can find me at Le Rob do IO or on Twitter at Lero with three E's because somebody else already took the other one.
00:40:21.550 --> 00:40:23.949
Uh, mostly I'm just on Twitter at Adam wain
00:40:24.250 --> 00:40:32.269
And I'm on Twitter at front stuff, underscore IO, and then you can find anything and everything about algolia@algolia.com.
00:40:33.469 --> 00:40:36.230
Lee, Adam thinks a lot for doing this.
00:40:36.289 --> 00:40:37.659
It was super interesting.
00:40:37.860 --> 00:40:40.019
I wish we could stay two extra hours.
00:40:40.250 --> 00:40:40.539
Yeah.
00:40:40.541 --> 00:40:41.460
Thanks so much for having us.
00:40:41.489 --> 00:40:41.780
Yeah.
00:40:41.780 --> 00:40:42.139
Thank you.
00:40:44.050 --> 00:40:48.300
This was developer experience, a podcast brought to you by Algolia.
00:40:48.880 --> 00:40:51.699
You can find this podcast on your favorite podcast platform.
00:40:52.599 --> 00:40:59.809
If you want to know more about Algolia check us out@algolia.com and we are at Alia on Twitter.
