Discover how minor syntax errors can cause major headaches and see practical debugging in action using JSON and Python templates. Learn to craft clear, error-free code through real-world examples featuring popular movie quotes.
Key Insights
- Highlights the challenges of debugging JSON syntax, emphasizing that errors flagged in one area (like missing commas) may mislead developers by initially pointing to unrelated characters or brackets.
- Shows practical troubleshooting involving Python's Jinja template engine, illustrating how copy-pasting content can introduce problematic curly quotes, causing errors specifically within template code rather than server-side logic.
- Demonstrates a step-by-step improvement of output readability by adding HTML Unicode entities (such as speech balloons) to visually enhance quotes from popular movies like Pulp Fiction and Silence of the Lambs.
Note: These materials offer prospective students a preview of how our classes are structured. Students enrolled in this course will receive access to the full set of materials, including video lectures, project-based assignments, and instructor feedback.
This is a lesson preview only. For the full lesson, purchase the course here.
Let's see if there's any alternative to retyping these double quotes. But wait, look at that little error. Look at that squiggle.
Oh, look at that squiggle. And here's an error, and here's an error. So it doesn't like—aha, see the little squiggle? That means a red error, and there's another squiggle.
So it doesn't like that. Type JSON object. That's fine, right? All right, that's fine.
What's up with this squiggle? role: system = [. Does it not like content? Please provide—oh, here. A comma.
There, there's a missing comma here. Okay. Which means I didn't have the comma here.
You know, that means I didn't have the comma where I copied it from. User content. Ah, yeah.
You don't like that. Well, okay. Yeah, it didn't have a comma here.
Okay. We should be good now. So it's not always the character that it thinks it is.
It's missing the comma, and then it flagged it on a curly brace. Wow, the site can't be reached now. Okay.
Now what? Rerun the server. Sending… Really? Unexpected character.
"Cinema expert"—it doesn't like that. Starting content.
It doesn't like that. It's pointing at this. Invalid syntax.
Content. You are a cinema expert. Okay.
Why is that bad? You're a helpful assistant. Comma. Do we not have a comma? User, system.
We need a comma after each property—well, the first one anyway—and a comma between the list items.
These dictionaries. Right. Go again.
It's not that it won't work. It's just a bit of a pain. Okay.
When you copy-paste unexpected char, it thinks that's the problem. Of course, it doesn't really think that's the problem. Did these squiggles get messed up when I pasted them? Because I did copy-paste.
Title. A single quote I should absolutely be able to have. Single quotes inside double quotes.
That is not a problem. I already asked for that. In.
Look. Single quotes inside double quotes—not a problem.
Oh. Is it throwing the error here? Oh, snap. Look.
Yes. See? Yes. It's not even here.
It's throwing it on the template, not the server. Okay. Look.
Here. Let me show you. Okay.
It was the template that got the offending quotes, right? The curly quotes. Those red quotes there—they're curly quotes.
So I was looking to fix the server code, and the problem all along was in the template code, right? Because there's Python here too, now. Due to the Jinja template. Okay.
That ought to fix it. Alrighty. We should be good to go now.
Now, if you want to show this to students. Oh, there you go. Shawshank Redemption.
There. Okay. Can we have another one besides Shawshank? I'm going to tell it not to give Shawshank as a result.
Ah, boy. Alright. Huh.
Is it saying Shawshank every time? Oh my goodness. Okay. Okay.
Nah, I don't want Shawshank. Anything but Shawshank, which I consider overrated.
You know, I know it's your favorite movie. Sorry. I'm just trying to show you how to engineer your prompt.
There. Now you're cooking with gas. Yes.
Yes. Okay. Now, I bet you it gave us more than two stars for a movie like that.
You had Bruce Willis, Samuel L. Jackson, and John Travolta, and all these other stars. Uma Thurman. Vin Rhames.
So, I'm going to go for three, two and three. We want four stars. Four different actors.
We'll put commas between the names. And we'll do the same with the quotes. We'll do two more quotes.
If we wanted to get really into it, we could make the stars and quotes come out as bullet-pointed lists or something, but this is fine. Or run a loop where we go through everything. Let's see if it gives us Pulp Fiction again.
Yeah. There it is. John Travolta, Samuel L. Jackson, Uma Thurman, Bruce Willis.
Say what again? Say what again? I dare you. I double dare you. Oh man, I shot Marvin in the face.
That's when you know you found something special. Okay, good. Yeah, yeah, yeah.
Yeah, yeah. Let's run it again and see if it serves up the same movie, but with different quotes. I suspect it will.
Nope. Silence of the Lambs. Okay.
Now, if we wanted to make the quotes stand out a little bit more, we could use an HTML entity indicating speech or dialogue—like a speech balloon, right?
Yeah, yeah, yeah. That thing. I don't want the emoji.
I want the HTML special character that indicates a speech balloon. Speech balloon.
Unicode character. Here we go. That's what we want.
Okay, we'll put it in the book. Stars. Quotes.
There's one. One and two. And three.
Stars. Yeah, let's do one for stars. Indicating star.
We'll say star. Oh, no. They're just listed.
They're not on their own lines. Forget that. Alright.
Let's see if we can tighten this up. Make it single-spaced. Maybe 1.2. There you go.
And then we have to add this. One, two, three. These will all appear on the same line.
It's just easier to read. Stars. Okay.
And then these guys—the quotes—will appear with a little speech balloon. I don't know how that's going to look, but I'm curious to see. So you've got this dictionary, and we're grabbing the various properties.
We're looking up by key and returning the value. Getting the value from the dictionary. Get the value by looking it up by key.
We're assuming at least four stars and four quotes. If there is no item at index three—like there aren't four quotes—it might throw us an error, actually, in the engine. It would be better to run a loop until you've run out of quotes, but this is kind of hard.
Not really the best way, but it involves the least amount of programming. Otherwise, we have to run a loop in here in Jinja, which we don't really want to do. Not right now.
Okay. So, Control-Z. Lab, go.
I mean, it's obviously not really a lab, right? This should be more of just a lesson. All right. We're sending the request.
Okay. Look. It rubs the lotion on the skin.
Or else it gets the hose again. All right. I ate his liver.
Some fava beans and a nice Chianti. Slurp Okay. Good.
Silence of the Lambs. We're getting it. It's working.
Say what? Again, I double dare you. All right. Fantastic.
The HTML page runner with the data for the first movie chosen by the AI. And final code. 11 is good.
Look at all that stuff. All right. And we want that little final code.
Lab 03. Lab 03. HTML.
CSS. Too much. It's not necessary.
That is a great list of Hollywood movies—just add 'AI answer to' in front of that.