WEBVTT

00:01.920 --> 00:07.480
This lecture, I want you to briefly talk about an interesting functionality that windsurf has and that

00:07.480 --> 00:09.440
is called windsurf preview.

00:09.560 --> 00:13.840
So you're going to see here that when we're working on our application it's quite handy that we can

00:13.840 --> 00:17.320
get here a browser window that is directly inside windsurf.

00:17.640 --> 00:20.280
And we can see our application and directly interact with it.

00:20.480 --> 00:21.760
So this is not the perfect browser.

00:21.760 --> 00:23.600
It doesn't have a developer tool.

00:23.920 --> 00:28.360
I think it has an interesting feature which can make our life easier.

00:28.360 --> 00:30.840
So let's say for example we want to change here.

00:30.840 --> 00:34.320
This title of the application is currently Kanban Board.

00:34.360 --> 00:36.520
I'm just going to call it my board.

00:36.640 --> 00:42.120
Now we could say change the title Kanban board into my board as a prompt.

00:42.120 --> 00:43.920
That would work, but sometimes it's interesting.

00:43.920 --> 00:47.040
So we're going to see here send element.

00:47.080 --> 00:53.440
So if we click on this and then we go and select the kind of element that we want to change.

00:53.440 --> 00:58.520
So in this case this title is going to say element added to Cascade.

00:58.760 --> 01:01.890
We're going to see it right here in the prompt down below.

01:02.290 --> 01:05.770
And what I can say is change to my board.

01:06.570 --> 01:07.810
So let's see this in action.

01:08.290 --> 01:11.050
So it has understood that we want to change this.

01:11.050 --> 01:11.770
And there we go.

01:12.370 --> 01:14.050
This feature has now been implemented.

01:14.570 --> 01:16.850
And I would say okay, this is exactly what we wanted.

01:16.850 --> 01:18.810
And it just goes a bit faster.

01:19.130 --> 01:23.690
There's also the possibility of sending console errors just in case there are some errors.

01:23.690 --> 01:27.730
Sometimes the application can be broken and you can click on this button here.

01:27.730 --> 01:33.530
And it's going to send the console errors directly to the prompt, making it easier to troubleshoot

01:33.530 --> 01:34.490
such issues.

01:34.770 --> 01:42.130
So it is a nice feature, which I definitely appreciate when trying to quickly iterate over these applications

01:42.130 --> 01:47.770
and just having everything side by side, it looks much more similar to how lovable is doing things.

01:48.250 --> 01:53.850
So having the application itself and having the chat in the same window without really caring about

01:53.850 --> 01:54.130
the code.

01:54.130 --> 01:56.010
But we can also take a look at the code if you need.