I’ve gotten plenty of incredulous looks in my life when people have asked me why I program and how I got work as a developer despite not being a traditional Computer Science student.

The answer begins in high school.

The full story of how I found myself programming is a long one which will get its own post at some point. Like a lot of youngsters in the mid-2000s, it involved practicing making my own sites with simple HTML tags on Angelfire. After moving on from static HTML pages to PHP tutorials, I went exploring for a project. I believed, then and now, project-based learning was most effective for me. This led me to Judgify.

What Was Judgify?

One night in Fall 2006, while watching some reality TV show with my parents, I was talking with my dad about the progress I was making through some introductory PHP books. We were discussing the latest news in the web startup world that was growing at the time with the rise of Facebook.

Our startup talk led to us going through some of the ridiculous ideas of the time. Somewhere in the middle of this, my dad came up with the idea for a website like HotOrNot, but instead of people, you would vote on judging anything. Everything would/could be broken down into categories such as songs and movies. Naturally, the easiest way to name a start is to take a verb (to judge) and add a suffix it doesn’t normally have.

I wrote Judgify through the winter to summer of 2007, learning what I need along the way from a variety of PHP, MySQL, HTML, and CSS resources online.

Anyone can recreate Judgify by copying the code from Github, uploading it to a server with PHP and MySQL installed, and running the installation script (Not sure on version compatibility, as PHP 4 was still dominant at the time and MySQL wasn’t yet owned by Oracle).

Resources

HTML: HTML Dog” is one of the simplest, best HTML tutorials I’ve come across in the past decade.

CSS: CSS Zen Garden A great way to learn how to make beautiful designs without images, only CSS.

PHP and MySQL: Practical PHP Programming Tutorial is another easy read that slowly walks you through PHP from knowing nothing to being able to build the basics of programming an interactive website.

A special shout-out goes to the GameFAQs Web Design message board. The community has mostly aged and left since I was a teenager. However, memories of the core group of 15-20 year olds working together to study technology in the evenings after school will stick with me for life.

After analyzing Judgify’s code seven years later, I have jotted down three things I did right and three things I would improve if I were to start this project today.

Things Done Right

A (Rudimentary) Installation Script

In the “config” directory, there is a simple install.php file. Fill out your database information in the config.php file and open install.php in the browser and it will setup up the Judgify database. This allows anyone to easily copy the code and quickly get Judgify set up on their server.

Imageless Design

In the mid-2000s, high-speed internet was hitting its stride. Web developers, on the other hand, were still worried about compatibility with visitors with slow connections. To provide support for those on 1990s internet and as a backlash against the abuse of Adobe Flash sites, a certain section of the web dev community promoted designing websites to not use any images. All the colors and shapes would be drawn by the browsing using CSS (Cascading Style Sheets) code. The Judgify codebase has a “css” folder containing the standard CSS and an “ie7.css” file for users coming from Internet Explorer 7.

Homemade Forums and Blog Integrated with Judgify Accounts

Along with the product as I previously described it, I included some custom forum and blogging code. The forum, based on the GameFAQs format, allowed our tens of users to interact and the blog allowed me to update the homepage. The “forum” folder contains various files for viewing topics and making comments. If you’re going to add forums to your site, I’d probably go with PunBB (I used it before making my own), but the Judgify forum code gives you a sense of how internet forums are structured.

Things I Would Fix

Spaghetti Code

With my aged eyes, the most immediate way to improve the codebase is to clean up all the spaghetti. “Spaghetti” code, for the uninitiated, is code that mixes different control structures and types of code so as to be harder to understand. In this case, the main problem is that the back-end control flows and database queries are intermingled with the code which displays the site to the page.

Movie.php serves as a simple example of what I’m describing:


echo'

';
echo'

';
$query=mysql_query("SELECT `id`,`name`,`date_added` FROM `movie` ORDER BY `id` DESC LIMIT 20");
while ($data=mysql_fetch_assoc($query)) { echo'

';}
echo'

Newest Movies
',$data['name'],'	',date("F j, Y", $data['date_added']),'

';
echo'

';


What’s problem with this block of code? The interaction with the database is right next to the code which displays its result. Why is this bad? Well, an application of this sort makes quite a few calls to the database, as seen in a lot of the files in Judgify’s code. The commonly accepted best practice is to separate code that does database and heavy computing work from the code which displays the results to the user on screen. A popular architecture for organizing code in that fashion is “Model-View-Controller”. Without too much detail, “Views” have code which displays the page, and “Controllers” control the processes of the application. If you were to update or write Judgify today, you’d probably want to use a PHP framework based on MVC such as CakePHP or CodeIgniter.

XSS and CSRF could be improved

Cross-site scripting (XSS) and Cross-Site Request Forgery (CSRF) are two common types of web application attacks. You can research them more at the links. Judgify itself only had limited protection from these kinds of attacks and was not tested extensively. I did add some protection to the application, as shown in the following line from “forum/makepost.php”:


$_POST['text']=mysql_real_escape_string(trim(htmlentities($_POST['text'])));


The function “htmlentities” takes any arrows and quotations marks used to make HTML and converts it into non-html text. This way an attacker can not insert HTML code into your application, as it all gets converted to and from regular, non-HTML text.

“Trim” removes spaces from the beginning and end of text.

“mysql_real_escape_string” escapes special character, like slashes. “Escaping” in a coding context means specifying between where you want to use a character as itself or in the context of programming. As you’ve seen throughout code, the dollar sign acts as a special character in programming context. Add a “” in front of it in some instances would “escape” it so it is no longer special (This is just a top-of-the-head example).

I should note that these were written in 2006 for PHP 4. I know that “mysql_real_escape_string” is considered outdated and better methods of security have been included since PHP 5.

Security Through Obscurity

This is a “technique” toward software security that is almost always a bad idea. So naturally 16 year old me did it. The idea is that if you give something a unreadable name or hide it away in a hard-to-find folder, it’s secure because nobody can find it. Without locking that folder in a cabinet though, if someone does stumble across your files, then you’re defenseless. The “admin” and “security” folders themselves have no security, so if someone knows the address to “security/install.php”, they can open the file and affect your database. This is pretty resolvable at the folder and file level by managing visitor and user access privileges.

Reflections on Getting Started

This pros and cons list was not meant to be comprehensive. Just sharing some brief ideas on issues to look at when writing code as a beginner and things to look back on after programming for a while.

I wrote Judgify originally for one reason: to learn. Videogames and websites had gotten me to question how they work. Judgify was my first little step into the programming world outside of some introductory high school CS classes. For anyone looking to get started, all you need is an idea. Maybe more importantly, you need to be brazen enough to try building the idea yourself. Don’t fear the difficulty of learning how technology works. I understand that it’s a lot easier when you’re a clueless teenager. In many ways, I wish I still was.