December 2, 2014

How I Built Websites in 1996 recently wrote What It Takes to Build a Website. It's an extremely well-written article that got me thinking about I build websites. At first, I was thinking about just sharing the article on Twitter with a quick comment saying this is how things should be done, but then I thought about my LinkedIn profile that's basically just a list of technologies that I've used. I've decided to write a series of posts (my first series, actually) that go into detail of how I built websites, starting with the first one I've ever wrote up, working my way to the way I write them today. You can expect five posts in this series, as each of these years were significant to my career life (I don't like using the term career here for some unknown reason):

  1. How I Built Websites in 1996
  2. How I Built Websites in 2004
  3. How I Built Websites in 2008
  4. How I Built Websites in 2012
  5. How I Built Websites in 2014

Full disclaimer for this post, I'm not 100% sure that 1996 was the first year that I built a website, but the story goes like this:

The first time I was ever exposed to the idea of creating a website was when I was in 5th grade. One day my teacher, Mr. Kolberg, showed my class a website that he made; it was a pretty typical 90's website that was just a list of stuff that he liked. I remember thinking, "Hey, I can do that," so 11 year old me went home that night, logged onto America Online (AOL), and searched for "How to make a website" on Yahoo! (Ironically, this isn't much different than what I do today, I just use a better internet service provider and better search engine).

The Basics - Dynamic HTML (HTML, CSS, JavaScript)

I read up a little bit on HTML and quickly became interested in DHTML (dynamic HTML, basically, just adding CSS and JavaScript to a static webpage). Then I found my favorite site (at the time), Dynamic Drive. This was a script kiddies' dream. The site had JavaScript code to password protect your pages (it just used string manipulation, so the "password" was visible when you viewed the website's source; eventually the code got better to just redirect you to "[insert password/string here].html"), disable right-clicking (you had to protect your source code and images somehow!), and image-replacement mouseover effects (because it took JavaScript code to do this back in the day).

Eventually, my parents found out that I taught myself how to do all of this and they started buying me books. I cannot thank them enough for supporting my interests (not only with programming, but every other ADD induced hobby like playing the guitar for a summer, playing countless of hours of video games before and after school instead of homework, and participating in literally every sport that the community offered). My favorite series at the time were the visual quick start guides published by Peachpit Press (I still have these books).

Notepad, FrontPage, and Dreamweaver (Oh my!)

Back then, there weren't too many ways of developing large websites. Windows Notepad was my primary software to write HTML files. Somehow I discovered FrontPage (packaged with Microsoft Office back then) and that was the first time that I could easily apply a template to multiple HTML files without copying and pasting. Eventually, I stumbled on Macromedia's Dreamweaver (before Adobe bought it) and used that for a little bit. I never really used FrontPage or Dreamweaver much (I liked the control that writing the HTML "by hand" gave me).

An Intoduction to Scripting Languages -- CGI/Perl

The template problem brought me to my first experience with programming. I wanted a way that I could generate content for my website without changing the template (header and footer), so I started using CGI/Perl (I wanted to know what the random cgi-bin folder was). I remember writing code that took the "page" parameter from the URL and searched for the appropriate text file in a directory, this allowed me to create new pages by creating a new text file. All of my pages could now use index.cgi?page=[some page].

Perl also helped me solve the other two major features that 90's websites had:

  1. Page counters (You had to brag about how popular you were somehow, right?)
  2. Contact forms (Because using mailto: opened up Outlook, and who used Outlook?)

I dabbled around a little bit with ASP/VBScript and PHP for the same reasons I used Perl, but ultimately stuck with Perl because all of the providers at the time supported Perl for free, and it cost money for ASP or PHP hosting, and I didn't have the courage to ask my parents to cover the monthly cost (strangely enough, that's also why I never played Everquest).

This is also when I first started understanding/using SMTP servers. I remember at some point downloading my own server that I could use whenever I was connected to my parent's dialup Internet. I started using a service called DigitalRice for free POP/SMTP email.

Publishing Content Using Web-Based File Upload (or FTP when I was lucky)

Back then, AOL made it pretty easy to upload websites. Each screen name had it's own space available if you used keyword "ftp" or "upload." That's how I published my first website and how I met other kids that were doing the same thing as me. Eventually I broke away from relying on AOL and moved over to Geocities and Angelfire. Unfortunately, these sites shut down or have vastly improved since then and the sites I created back then have been lost.

Maybe I'll scour the Internet someday for "CDocken420" (before I knew what 420 meant), "CDocken421" (because I couldn't use 420 after I found out what it was), "CDocken124," "SolXii" (my "handle" back in the day), "Turbo7694," "Gopher7694" (my brother's nickname for me), "Defendrix" (my first "company" name thanks to a random name generator, "Urban Oath" was another), and other terms/names I used back then.

The Dark Side

Back then, AOL had a fairly solid underground warez community that I leeched off. That's where I got my first copy of Visual Basic, Borland C++ (but never used it, I just knew it was programming), Photoshop, Bryce 3D (those 3D space landscapes were unreal), Maya, 3D Studio Max, Dreamweaver, and Flash; I'm sure there was the occasional music software download, like FL Studio, but I mainly stuck to programming and graphic design. I'd find out what software the industry at the time was using by looking at job postings at either Blizzard or Square (the opening cinematic from Final Fantasy 10 is still one of my favorites of all time and it was the reason I almost went to the Art Institute for animation).

I got into the "progging" scene a little bit (AOHell) and played around with things like FateX (by Magenta), Fate Zero (by MaGuS), Gothic Nightmare, and HaVoK. I picked up OneClick for Mac OS 7 back then and wrote my own "phader" scripts. I remember using the handle "SolXii" and that I was introduced to the scene by my neighbor, "sh0tg" (With a zero, not an o... it started out as "sh0tgun"). Eventually I moved out of private AOL chatrooms and onto ICQ and IRC.

I learned how to set up a sandbox on my computer and watch people try to hack me and I'd occasionally leave text files on the hacker's desktop saying "Stop that" or "I know what you're doing." I was never into hacking (it was common knowledge that everyone eventually got caught), but I liked learning how to do it literally "just to know how."

Eventually, I stumbled on some software called Hotline where I was able to download anything I could ever want (or even think that I want). I'm talking guides on lock picking, hacking, phishing, nutrition, survival (literally anything). I liked reading about random stuff like that; I was mainly into the text files, but there was also a lot of music, pictures, videos, and software.

After I had a sizable amount of stuff (sizable for that time, at least), I decided to host my own server after I figured out it would be a lot easier to get this stuff by asking people to upload their files in exchange for downloading mine; this quickly stopped when I started finding porn on my computer (and not the kind of porn that a teenage kid would want, this was some pretty bad stuff).

My Resume

In an effort to wrap this nostalgic post up, my resume probably would have looked something like the following:

Platforms: Mac OS 7, Windows 3.1/95/98

Languages: HTML, DHTML, JavaScript/JScript, CSS, Perl/CGI

Technologies: FTP, POP, SMTP, FrontPage, Dreamweaver, Photoshop, VisualBasic

Services: Web Hosting (AOL, Geocities, Angelfire), Email Hosting/Providing (DigitalRice)

I wouldn't have listed the stuff that I didn't know all that well. I didn't get too deep into Flash, Maya, and 3d Studio Max or the obvious underground stuff. If there were any automation tools or version control software, I didn't use them. I didn't use a database at this time (text files were the closest I got). No frameworks or anything like that. I just ran into problems and hacked together solutions.

Somehow, I don't think my experience is that much different than anyone else that started making websites in the mid/late 90's (especially if they were teenagers). If things were different for you, I'd love to hear from you on Twitter.