How to Experiment

[00:00:00]
>> Matias Gonzalez: So how can we approach experimentation in our pipeline? And more importantly, how can we share those ideas with other designers, clients, other developers? Let's say you're working on a project and you want to try a new technique. Usually, what I like to do is I'll actually like to create two completely different websites. One's going to be like one experimentation website where I can create like fast prototypes, and I don't care if I'm repeating code.

[00:00:34]
I just want to get my idea up and running and validate that as quick as possible. And then once we are happy and we have iterated all of the designs, we can go into the final website and actually implement that and iterate on the performance, pay a closer attention to accessibility, and we know we are working with like already validated ideas. So we're not going to add, if we are trying new ideas on our final websites, we might end up with a lot of noise if we are not organized.

[00:01:18]
So usually to structure experiments I create one website where every page is like its own mini sandbox and here I can just have a different like components folder for every page. I don't care about abstracting too early. The reason for that is that again, if I'm playing with some implementation that I really don't know the final solution, I don't want to go ahead and create the perfect extraction from scratch.

[00:01:50]
I just want to be able to copy my code over and over and play with it until I'm happy with that, and it's also nice to have all the versions in case I want to like revisit them. One example is when I was working on the Vercel ship project, the theme was fluid compute, so we knew we wanted to do some fluid simulations. And first I didn't know how to do the simulations, so I use a structure to code a lot of different experiments that I could use to like learn different rendering techniques and test different approaches until we find the right version of it.

[00:02:42]
And finally when we were happy with one experimentation, we went ahead and do the real implementation of it and adding the last layer of performance and optimizations. So in order to learn different tips and tricks to use in our websites, we're going to use one of these experimentation repositories. We're going to learn different animation techniques and we're also going to talk a lot about performance and accessibility.

[00:03:18]
Do you suggest using a mono repo? I usually prefer to just have one link to share, so what I usually do is just having one website and every page is going to be like a different experiment instead of having like multiple applications. Of course if you feel more comfortable just having multiple applications, you can have a mono repo, but then you will have to deploy every experiment separately, and that can be like a lot of work.

[00:03:53]
So you just should have, if you just have one website, you can just deploy that and share the link and just have a menu with all of your experiments. You could also use code sandbox, but I usually, since I usually use Cursor to code, I do prefer to have my repository locally. So to get started, I would use pnpm, but you can use npm, it's the same, so I would do pnpm install and then pnpm run dev.

[00:04:22]
And it will just start the application on localhost. So the way this repository is structured, it is using Next.js so here on the source folder and inside of the app folder we will find like different experiments. Every one of these is going to be a page, and inside of every experiment would have the starter and the solution. So if you want to preview what we're doing, you can just change the import from the page from starter to solution.

[00:05:05]
And if I go into localhost and open the first one, we can just see what the first solution looks like. Let's go ahead and change it back to starter.