WEBVTT

00:00:00.080 --> 00:00:03.989
Now,
with all those latest changes implemented,

00:00:04.080 --> 00:00:06.490
have one problem in this project here
though.

00:00:06.580 --> 00:00:10.160
Actually, a problem
which existed right from the start.

00:00:10.260 --> 00:00:13.880
The formatting is not what I wanna have
here, and obviously, that will

00:00:13.980 --> 00:00:17.940
differ.
That might be exactly the formatting you

00:00:17.980 --> 00:00:20.760
want single quotes instead of double
quotes.

00:00:20.770 --> 00:00:24.600
And by default, right now,
at the point of time where I'm recording

00:00:24.700 --> 00:00:27.140
Code gives me double quotes in my code.

00:00:27.240 --> 00:00:29.980
Not a huge issue,
but not the code style I want.

00:00:30.000 --> 00:00:33.660
If I were writing my code manually,
I might have a

00:00:33.700 --> 00:00:37.440
formatter installed
that automatically formats the code files

00:00:37.520 --> 00:00:40.320
them or when I press the appropriate
shortcut.

00:00:40.340 --> 00:00:43.540
But since I'm using Cloud Code here to
write the code, that's not

00:00:43.620 --> 00:00:47.180
happening. And that's, therefore,
where another important feature comes into

00:00:47.200 --> 00:00:51.120
play: hooks.
Let's say we have a formatter, in

00:00:51.220 --> 00:00:55.180
my case here, OxFormat, which
is a relatively new formatter for

00:00:55.220 --> 00:00:58.260
the JavaScript ecosystem,
and I add a script to

00:00:58.300 --> 00:01:02.220
package.json format, where I just

00:01:02.440 --> 00:01:06.080
run that package like this. With
that saved,

00:01:06.360 --> 00:01:09.360
I can also add a configuration file.

00:01:09.440 --> 00:01:12.980
I can create one with this command here,
using this formatting

00:01:13.060 --> 00:01:16.640
package. And in there, I can add my

00:01:17.320 --> 00:01:21.260
formatting rules, like for example,
that I want single

00:01:21.380 --> 00:01:25.120
quotes also in JSX files. Let's say

00:01:25.160 --> 00:01:27.840
that's the formatting schema I wanna use.

00:01:27.880 --> 00:01:31.680
Now, with that package installed,
I can run the format

00:01:31.720 --> 00:01:35.460
command, the format script,
which I just added to package

00:01:35.760 --> 00:01:39.580
JSON, this one here. And that will format

00:01:39.660 --> 00:01:43.640
all my files, and for example,
use single quotes now

00:01:43.700 --> 00:01:47.400
here. Okay, so I can do that.
But right now, I would have to

00:01:47.440 --> 00:01:51.100
manually do that after every change that's
implemented by

00:01:51.200 --> 00:01:54.120
Cloud Code,
which might not be what I want.

00:01:54.140 --> 00:01:58.000
And that's where this hooks feature
offered by Cloud Code can

00:01:58.100 --> 00:02:01.720
come in handy.
The idea behind Cloud Code hooks

00:02:01.780 --> 00:02:05.720
react to certain events emitted by Cloud
Code,

00:02:05.760 --> 00:02:09.720
for example, that it edited a file,
and you can then run any code

00:02:09.758 --> 00:02:13.240
of your choice in reaction to that change.

00:02:13.260 --> 00:02:17.220
And you can add hooks in the local
settings

00:02:17.300 --> 00:02:21.100
JSON file that's not checked into version
control, into the local one

00:02:21.200 --> 00:02:25.140
that is,
or also in the global one on your system

00:02:25.180 --> 00:02:28.640
across projects. Here,
I'll use the local one that

00:02:28.660 --> 00:02:32.620
control. There, in that JSON object,

00:02:32.660 --> 00:02:36.570
you can add a hooks node,
and then add as many hooks as

00:02:36.600 --> 00:02:40.520
you want.
And you do add a new hook by first

00:02:40.530 --> 00:02:43.440
to which you wanna react. And attached,
you'll find a link to the official

00:02:43.520 --> 00:02:47.340
documentation that lists all hook events
to which you can react.

00:02:47.380 --> 00:02:51.360
You, for example, got pre-tool-use,
which is a hook that allows

00:02:51.400 --> 00:02:54.549
you to execute code whenever Cloud Code is

00:02:54.620 --> 00:02:58.460
about to use a tool, and the tool
is something like

00:02:58.480 --> 00:03:02.440
doing web search or editing a file
or reading of

00:03:02.480 --> 00:03:06.240
files.
Whenever Cloud Code does anything about

00:03:06.360 --> 00:03:10.040
execute some code. There also are a lot of

00:03:10.160 --> 00:03:12.310
other events, of course. For example,
also,

00:03:12.360 --> 00:03:16.180
post-tool-use. And
that sounds interesting for us

00:03:16.220 --> 00:03:20.080
here, because that is a hook
that runs after a tool has been called,

00:03:20.230 --> 00:03:24.210
and since, for example,
writing to a file or editing a file is

00:03:24.260 --> 00:03:28.250
a tool call,
that's what we need to format a file after

00:03:28.300 --> 00:03:31.890
it has been edited. So,
it's post-tool-use and

00:03:31.940 --> 00:03:35.080
you must write it exactly as specified in
the

00:03:35.100 --> 00:03:38.930
documentation.
And then this takes an array because you

00:03:38.940 --> 00:03:42.660
register multiple hooks,
multiple code snippets that should

00:03:42.740 --> 00:03:46.480
execute for this event. In that array,
you have

00:03:46.600 --> 00:03:49.680
one object per code snippet you wanna

00:03:49.740 --> 00:03:53.000
execute. And in that code snippet,
you then have a

00:03:53.040 --> 00:03:56.590
matcher, which allows you to specify
which tool was

00:03:56.680 --> 00:04:00.380
used for this hook event.
And for different hook events, the

00:04:00.460 --> 00:04:03.280
matcher expects different things.

00:04:03.300 --> 00:04:07.140
The official documentation
is the way to go, of course, to learn how

00:04:07.260 --> 00:04:11.000
to react to different hook input
and set up your matcher for different

00:04:11.020 --> 00:04:14.860
hooks. In case of the post-tool-use hook,
we

00:04:14.900 --> 00:04:18.870
simply specify the kind of tools we wanna
react to.

00:04:18.880 --> 00:04:22.640
So, after the use of
which tools do we want to execute some

00:04:22.740 --> 00:04:26.210
In my case, that's edit or write,
and you would write it like

00:04:26.280 --> 00:04:30.060
this. So,
use the pipe symbol here to basically

00:04:30.100 --> 00:04:33.140
say that you have multiple matching
options.

00:04:33.180 --> 00:04:37.160
So, whenever the edit or write tool
was used, I want

00:04:37.360 --> 00:04:40.980
to do something. So,
then you can specify your hooks.

00:04:41.020 --> 00:04:44.980
Again,
this is an array because you could have

00:04:45.020 --> 00:04:48.840
whenever the edit or write tools
were used, and you have one

00:04:48.960 --> 00:04:51.340
object per thing that should then happen.

00:04:51.900 --> 00:04:54.500
And in here, you then have the type.

00:04:55.040 --> 00:04:59.030
Type is command, agent, or prompt,
and the two you'll typically use are

00:04:59.140 --> 00:05:02.420
command or prompt. If you were to choose

00:05:02.440 --> 00:05:06.330
prompt,
you would have to add a prompt thereafter,

00:05:06.360 --> 00:05:08.730
simply be injected into the conversation.

00:05:08.760 --> 00:05:12.660
So,
if you know that after a certain event,

00:05:12.780 --> 00:05:16.640
prompt into the context,
into the conversation, you could use such

00:05:16.760 --> 00:05:20.560
a prompt hook for that.
But we're looking for a command here,

00:05:20.620 --> 00:05:23.540
allows us to execute a command

00:05:24.520 --> 00:05:27.680
whenever this hook was called or
when this event

00:05:27.720 --> 00:05:31.660
happened.
And the command you specify here is a bash

00:05:31.700 --> 00:05:34.980
command,
so a command you could execute in your

00:05:35.000 --> 00:05:38.990
And behind the scenes,
a new terminal session will be opened

00:05:39.020 --> 00:05:42.640
command will be executed. So,
what I wanna make sure is that in that

00:05:42.720 --> 00:05:46.680
session,
we navigate with the CD command into this

00:05:47.560 --> 00:05:51.460
and I'll get back to that.
And then I want to run the

00:05:51.580 --> 00:05:55.080
format command here. I'll also

00:05:55.220 --> 00:05:59.040
forward any errors into this null channel
here, so to

00:05:59.120 --> 00:06:02.824
say, and by addingTrue like

00:06:02.844 --> 00:06:06.644
this,
I ensure that it will always return a

00:06:06.684 --> 00:06:10.464
that's not horrible in case of formatting,
but I don't want to

00:06:10.524 --> 00:06:14.364
break Claude Code or have it stop its work
just because formatting

00:06:14.444 --> 00:06:17.724
failed. Now,
let's get back to the CD part though.

00:06:17.784 --> 00:06:21.714
What do we put in here? Thankfully,
Claude Code

00:06:21.764 --> 00:06:25.664
gives you a special variable you can use
here to give you a

00:06:25.704 --> 00:06:29.384
dynamic way of resolving the project
directory it's

00:06:29.424 --> 00:06:32.644
currently working in. And that is CLAUDE

00:06:33.224 --> 00:06:37.104
PROJECT DIR, which must be wrapped in

00:06:37.184 --> 00:06:40.424
quotes, which we must escape like this.

00:06:40.484 --> 00:06:43.024
And this is simply a value you get by
Claude Code.

00:06:43.084 --> 00:06:46.694
It will be passed into this hook
automatically, and that gives us a way of

00:06:46.784 --> 00:06:50.024
navigating into the project folder
and running this format command

00:06:50.084 --> 00:06:53.964
there.
And that will now automatically happen in

00:06:54.004 --> 00:06:57.114
whenever Claude Code finished working on a
file.

00:06:57.114 --> 00:07:00.924
And I wanna test this right away.
I'll end my current Claude Code session

00:07:01.004 --> 00:07:03.914
start a new one to make sure hooks
are loaded.

00:07:03.964 --> 00:07:07.744
If you enter slash hooks,
you can also view hooks

00:07:07.864 --> 00:07:11.404
and also set them up. You see,
here's the hook I

00:07:11.704 --> 00:07:15.464
did set up,
but you could also now add hooks through

00:07:15.804 --> 00:07:19.484
that mode or through that, uh, tool here.

00:07:19.584 --> 00:07:23.284
I just find editing it in an adjacent file
a bit easier, but you could use this

00:07:23.324 --> 00:07:27.184
interactive approach here too.
And therefore, now with the hooks loaded,

00:07:27.244 --> 00:07:31.034
we can work on the next feature
and check if formatting does happen.

00:07:31.034 --> 00:07:34.724
And the next feature I wanna work on
is the public sharing feature.

00:07:34.764 --> 00:07:38.664
The idea here simply is that we,
as the owner of a note, can turn

00:07:38.724 --> 00:07:42.384
on public sharing. For a note,
this should generate a unique link

00:07:42.504 --> 00:07:46.444
which other users can follow.
If they follow it, and that includes users

00:07:46.484 --> 00:07:50.204
who did not sign in yet,
they should be able to see the note,

00:07:50.244 --> 00:07:52.744
should not be able to edit or delete it.

00:07:52.754 --> 00:07:56.544
And if we turn off sharing,
the link should not lead anywhere

00:07:56.704 --> 00:07:59.704
anymore. As always,
I'll start in plan mode.

00:07:59.714 --> 00:08:03.684
And as the agent is working on the code
here, if I inspect those public

00:08:03.764 --> 00:08:07.604
sharing pages, for example, on
which it worked, I can see that in there I

00:08:07.624 --> 00:08:11.224
got those single quotes.
So the formatting is applied,

00:08:11.284 --> 00:08:15.024
applied because we have this post tool use
hook

00:08:15.284 --> 00:08:18.964
that runs the format script. Now,
I can see that now

00:08:19.104 --> 00:08:22.644
after creating a note,
I indeed have this public sharing option.

00:08:22.784 --> 00:08:25.864
If I turn this on, I got a link.
If I copy that link

00:08:27.344 --> 00:08:31.224
and I open that in an anonymous session of
my browser, I

00:08:31.284 --> 00:08:35.204
can view that note without editing
or deleting it because here, I'm not

00:08:35.224 --> 00:08:38.164
authenticated. If I turn sharing off

00:08:39.204 --> 00:08:42.784
and I reload this page,
now this gives me a 404

00:08:42.884 --> 00:08:45.844
error,
which is what should happen since sharing

00:08:45.944 --> 00:08:49.744
disabled. So that is working.

00:08:49.754 --> 00:08:53.184
And most importantly, that
is how you can use hooks, for

00:08:53.264 --> 00:08:57.004
example,
to apply some formatting after every file

00:08:57.104 --> 00:08:58.004
creation.