In Code Review, a bunch of fansubbers from different technical backgrounds will discuss the code we see in anime. Have a scene you want us to review? Let us know!
Please note that these articles contain spoilers!
Dagashi Kashi is a charming slice of life about Japanese snacks. The main character, Kokonotsu, is an aspiring manga artist who runs his father's snack shop. His father hopes Kokonotsu will take it over after he retires. A corporate conglomerate one day asks to buy the store, and Kokonotsu's father agrees on the condition they can convince his son to run the store. Each episode is a love letter to different snacks.
In Season 2 Episode 9 we see a comedic scene where Kokonotsu and his friend Hajime are working together to create a website for the store. The two start with a simple design, but start adding more and more over the top effects and innuendo and having a good time. The scene is interspersed with images of the HTML Hajime is supposedly writing.
HyperText Markup Language (HTML) is the foundational layer of websites and is how they lay their structure out. Elements consist of tags and content. In the picture here, the
<p> defines a tag and the white text after it is the content. Tags can also have optional attributes. When defining a link to another page, you need a way to tell the browser where a user should be directed, and you do so by adding an
href attribute. Putting the tag and content together forms an element. HTML elements are structured as a tree where each element can contain multiple other elements called children, which can also contain multiple other children, so on and so forth.
HTML is whitespace insensitive (indentation and line breaks don't have significance), but traditionally is written and indented in a way that illustrates its tree structure. A simple website usually has a header, a page title, some content, and a footer. In a tree structure, that might look like this:
Page/ ├─ Header/ │ ├─ Website Name │ ├─ Navigation Links ├─ Content/ │ ├─ Page Title │ ├─ Page Content ├─ Footer/ │ ├─ Copyright │ ├─ Sub Navigation
The top of the website, called the Header, might consist of the website name on the left side of the screen and a few navigation links on the right. If you translate this structure into HTML, it might look like this:
<body> <div id="header"> <h1 id="website-name">Website Name</h1> <div id="navigation-links">Navigation Links</div> </div> <div id="content"> <h2>Page Title</h2> <p>Page content</p> </div> <div id="footer"> <p>Copyright</p> <div id="sub-navigation">Sub Navigation</div> </div> </body>
Functionally, this is equivalent to writing everything in one line, but if you were to do that it becomes difficult to read and edit:
<body><div id="header"><h1 id="website-name">Website Name</h1><div id="navigation-links">Navigation Links</div></div><div id="content"><h2>Page Title</h2><p>Page Content</p></div><div id="footer"><p>Copyright</p><div id="sub-navigation">Sub Navigation</div></div></body>
In the screenshots of HTML Hajime writes, we can see that it isn't written in a way that has a consistent alignment. Some items are correctly indented, but there are elements indented when they shouldn't be. Look at
<div id="pageTop"> in the image below. You can see that has an extra indent it shouldn't. If it were correctly indented, it would be aligned with the
</div> above it.
Ultimately, this HTML will be functional, but stylistically it is written in a way that will frustrate others editing it because it doesn't convey the tree structure.
Another problem that doesn't impact the functionality of the code is the syntax highlighting. Syntax highlighting is something that exists purely to help the author write code. The program you use to edit the HTML will display tags, attributes, and content in different colors to help distinguish what type they are. Think of syntax highlighting like spellcheck. Microsoft Word doesn't save any of that information in the document, but displays it while you are authoring something to help you.
The HTML shown in this sequence doesn't have consistent syntax highlighting, which is not great since it pretty much defeats the entire purpose of having it. In the image above, you can see most Tags are displayed in a brown color except for the
p tags, which are blue. The
a tags also have different colors when these should all be consistent, so why aren't they?
This is a little meta, but my guess is because the quotation marks are smart quotes that are usually inserted by programs such as Microsoft Word. These glyphs don't work in HTML, which needs dumb quotes. The smart quotes in the HTML is a problem in the code, and I would hazard a guess that that's why the syntax highlighting breaks. Most editors seem to handle them fine and colorize the text appropriately (see the Codepen above), but I would not be surprised to find them breaking syntax highlighting in an editor (perhaps intentionally, given the purpose of syntax highlighting is to help find bugs. One could argue syntax highlighting should break given the usage of incorrect quotes in HTML).
The last thing I want to call out is the comments in the HTML. Back around 2008, it was a popular practice to indicate what section of code you were closing by leaving an HTML comment naming the element.
<div id="pageTop"> <p>Imagine</p> <p>Hundreds</p> <p>Of lines</p> <p>In here</p> </div> <!-- /#pageTop -->
The content in the
<!-- --> tags is an HTML comment, so essentially, browsers will ignore it when rendering a webpage. Authors of Wordpress themes and other website templates that had a ton of nodes would use them as reminders for sections that were being closed off. Here, the
/#pageTop means "we are closing an element with an ID of pageTop" (the hash is used in CSS to indicate the ID attribute in HTML and became a popular shorthand). The practice is a bit outdated as files have been split up into smaller components and text editors have become more advanced, but it's a fun dose of nostalgia to see it pop up here.
Watching the pair add more and more ridiculous effects to the website before realizing they've overdone it was pretty fun for me because that's an arc a lot of people go through when working on a website for the very first time. There's a general phase of "this is cool! Let's add it" before you realize it doesn't help reinforce the purpose of the website and begin to scale it back to something that is more sane and manageable. This scene reminded me of the Geocities era a little bit, when people did this for fun.
Overall, the code in Dagash Kashi is bad. Although a lot of the problems are aesthetic, the use of smart quotes means that the HTML just won't work.
Dagashi Kashi gets “Changes Requested” on their Pull Request.