I’m writing this after 32 oz of coffee while listening to Muse’s “Knights of Cydonia” on a loop because that seems like a good idea to my overcaffeinated brain. So if anything is off, I preemptively blame it on the jittery madness that drove me to drink that much coffee with no real deadlines approaching this morning. I’m not counting these 70 words in my wc.
Since the last post I downloaded Brackets (brackets.io), which is an open source web development platform. It’s running on my Windows desktop, but I may download its Ubuntu version to try it on my Linux-based laptop. Mostly what I’ve been doing in the past week — besides trying to figure out what bizarre method Google used for its Music program’s shuffling algorithm — has been taking apart various sites to see how the developers/whoever’s back there making it makes their sites tick. I’ll be examining SMBC (smbc-comics.com), Penny Arcade (penny-arcade.com) and the Cheat’s Strong Bad homepage (homestarrunner.com/sbsite/).
SMBC’s content is, as I mentioned in the last report, well documented and neat. As someone with experience in code, the readability of Weinersmith’s site is a treat. Naming conventions are followed; indents are consistent; and dense code is broken up with comments labeling each section. For example: in line 138, a comment announces that the “TOP AD AREA” code will immediately follow the line. Indeed, the next line is <div id=”ad-top”>. Well played, Weinersmith.
After that is another “Project Wonderful Ad Box Code,” which appeared earlier. Line 148 dictates the end of the “TOP AD AREA.” Because of the extensive comments, the site is very easy to take apart and understand. However, looking at the page itself (not its code), there doesn’t seem to be much content. SMBC is actually a fairly sparse-looking site. It certainly doesn’t seem like something that would take 523 lines of code to describe (approximately. Weinersmith leaves plenty of blank spaces to maintain readability). And looking through a few random pages, a few variants show that the length can vary slightly from page to page due to blog post lengths. However, the vast majority of the code remains constant from page to page. The content was, therefore, likely coded once and is now just reapplied with specific elements made so minimal effort is needed for code maintenance from day to day.
Penny Arcade, perhaps interestingly, also uses naming conventions but does not use commenting to nearly the extent SMBC does. In fact, there are only 4 lines of comments in their 719 lines of code (besides the few which are to temporarily remove a function from the site. Penny Arcade is also a much larger site than SMBC in terms of its staffing. The site hosts 3 comics which are updated regularly throughout the week (7 comics/week — the same as SMBC), its own merchandise store (SMBC’s is an external site) as well as its own forums in addition to sponsoring and running three gaming conventions (PAX East/West/Prime), two podcasts, web video series and the charity “Child’s Play.” Penny Arcade has, as it has grown to this sprawling thing over the years, become a company that has dedicated web developers on staff. The code for the sites is maintained by professionals who already understand the code, so the only things they need notes on are to remind themselves. As a programmer, I do appreciate the desire to free oneself from the shackles of annotating ever single detail so someone else can read your code without reading your code. Theoretically, comments are unnecessary if naming conventions are followed; they are, however, nonetheless helpful in quickly diagnosing problems in code.
Finally, the treat of the Strong Bad homepage, “WELCOME TO YOUR DOOM!!” In his sbemail webseries, the fictional character Strong Bad has his pet “Cheat” make a webpage for him. Every single thing about the site is wrong by conventions of design. The top banner is broken into 4 frames with white boarder between each (some browsers also display scroll bars on the .jpeg images in each box, meaning the boxes are sized independently of their contained images. There are rotating .gif images below that. The words “still under construction” appear in any context at all. The interesting part to me, though, was that the source code is just 13 lines (with lots of blank space). The content is pushed to other style sheets, out to 2 removed from the primary source. So even with the site being poorly executed, there’s still an element of good design here through its organization.
Next step is to build something stupid followed by something good.