- [Narrator] The further I get into a project,
the more reality sets in,
my designs didn't account for everything.
This is normal.
Web development is iterative,
and understanding user needs are constantly being refined.
When this project started,
the context I had was this wireframe.
Now my context is all of these patterns,
all these patterns that Copilot generated for me.
I'm going to start out by asking Copilot
to generate a new pattern.
One that wasn't in the wireframe.
I'll ask Copilot to create an FAQ pattern.
And this is a total miss.
Copilot thinks that I'm working in a React app.
Let's try again.
Create an FAQ Pattern.
And I'll drag in, for context,
patterns, and the index file.
Let's see how it does this time.
This time it got it right.
I created the FAQ pattern, added it to index,
and here's the file.
Without reviewing any of it,
I'm just going to go ahead and keep this, and jump over,
and let's reload to see what it looks like
with the FAQ Pattern in here.
Clicking doesn't work
because of the limitations on JS on my implementation,
but it's actually a pretty reasonable understanding
of what I needed.
And you could see how helpful context was
in creating the right file.
Now, I'm going to take another direction.
I'm going to drag patterns over to Copilot,
and I'll ask,
"Is there any repetitive code in here I should extract?"
It starts out by identifying that it's pretty repetitive
the way I'm including these patterns.
It also identifies repetition and Tailwind CSS classes,
which is a common problem with Tailwind CSS.
It called out the Mobile Menu Toggle Logic
should be a shared file or function.
And it's funny, it says "Footer and header structures
"are common patterns that could be modularized
"into reusable components," but I think they are.
When I tested writing this video,
one of the things Copilot suggested
was using some kind of template engine
to help modularize these pieces.
The last thing I want to demonstrate here,
is how humans think about things
versus how an LLM, large language model, applies rules.
I'm going to search for the word gray
in the patterns directory.
There's 50 results across these files,
so I'm going to give these files,
as context, to Copilot,
and I'm going to tell it,
"The company colors are blue and white,"
and see what changes it makes.
So, this made quite a few changes,
39 across eight files.
I'm going to accept these,
and I'm going to reload.
I don't know that I would call this a successful change.
Technically, Copilot did what I asked.
The varied grays provided visual clues.
It seems to apply the same color blue
to most of the titling.
Copilot will probably generate code
for anything you ask it to.
However, tight guardrails, context,
and plenty of guidance is what you will need to provide
for the best outcomes.