Overview of an open-source web development environment

Dock Street Media

Thought I'd start this whole news off with a little peek behind the curtain of my open-source development environment. I'll try my best not to sound like a typical computer guy and explain things in plain terms. It always frustrated me that other tech people seem to assume that because you read this, you know the difference between "server-side" and "client-side."

First off, I'm completely self-taught. This means I was doing everything wrong for a while before figuring it all out. By the time I figured it all out, the open source community had created a world where anyone, including me, could freely develop websites without expensive proprietary software like Dreamweaver, Visual Studio, and Photoshop. Open source simply means code (source) that is freely (openly) developed by a community of web developers.

I don't have anything against for-profit software providers. I just know now that they only survive because their consumer base has enough knowledge to make them believe they can do it themselves, but do not have the skills necessary to do it without a lot of help. So they pay a month's rent to use something that does most of the work for them. They assume that creating a complicated thing like a website either costs a lot because you have to hire someone or because you have to purchase expensive software.

Some don't really care about how a site works as long as it looks nice, many settle for simple site builder sites like Intuit or Square Space or some web-based news platform like Newsger. To the person who just wants a simple "who we are" and "what we do" kind of website, these options are fine. I learned the hard way that creating something novel and making it work exactly the way you want necessitates dirty hands.

Enough preaching. Let's get to it.

On the web:

  • Good Web Host. If you are an absolute neophyte, this is the company you pay for a domain name like YOURSITE.COM and then host the site files that are seen when people direct their browser to the domain name. GoDaddy is probably the most well-known domain and hosting provider. I use Dreamhost. They're pretty good and have a pretty intuitive interface. They have good customer service and answer your emails pretty quickly, which is nice. At this point, it's just what I'm used to. Shop around. They're all pretty similar. If you're going to set up your own web server or host from your own machine, I can't help you. Likely you know more than I do about this subject anyway.

    [ Update July 28, 2014: I've since learned a good deal about server administration and now use Rackspace. It provides a lot more control than a "retail" web host like GoDaddy or Dreamhost. I've found that knowing the Linux/Apache side of a web application is extremely useful and powerful. ]

  • HTML / CSS. HTML and CSS are the most basic languages you need to know to be a web designer.  HTML is a system of tags (e.g. <span>Some nice red text.</span>) that instruct your browser how to display text, images, video, and the like.  CSS is a system of instructions (e.g. span {color:red;}) that interacts with those HTML tags and adds style to the individual elements in your web page.  While HTML can exist without CSS,  CSS does nothing without HTML.  But for our purposes, consider them inseparable.
  • JavaScript.  JavaScript is a client-side scripting language.  In other words, it loads when a user (client) visits your web page and then can do a bunch of different things on the client's side.  For example, when you go to a site and click a link and something pops up without reloading your page, that is JavaScript.  There are multiple JavaScript libraries out there that make it easier to write.  The one I use most is called JQuery.  If you're just starting web design or development, I recommend you wait to learn the basics before getting into JavaScript.  If you already know it, then I imagine this post is like reading a kid's book.
  • Linux - Like any computer that runs Windows or Mac OS, your web server requires an operating system. My web server runs Linux. If you pay for a web host like me, it's unlikely that you'll need to work with Linux at all.
  • Apache - This open source web server software is used by most web sites.  Without getting too into how it works, Apache is necessary for serving your website files to the world. If you don't know Apache, it's OK.  Like the operating system, the Apache administration and maintenance is something you pay your web host to do for you, headache-free. No offense to all the network administrator guys and girls out there.
  • MySQL - This is your database. It can hold billions and billions of records, which is absolutely necessary for the massive-scale sites we see today like YouTube, Facebook, and Twitter.  Even small newss require a database.  Unless you know that your site will only ever be a few pages large, then you will need to familiarize yourself with a database.  MySQL is a very popular database and, of course, open source and free to all.
  • PHP.  PHP is the most popular open-source server-side scripting language around.  To those unfamiliar, "server-side" means it lives on your web server and queries your database when visitors visit your site and then spits back your dynamic web pages.  This way, you can use one page template to display billions of different records that are stored in the database.  In the olden days, you would have had to create a billion pages.  This type of language is similar to .NET (ASP), Java, and C#.
  • PHPMyAdmin. This is the PHP-based program that allows you to interface with your MySQL database. It is built into Dreamhost, so it's all I really need to work with my database. It is also built into XAMPP (see below), so pointing to http://localhost/phpmyadmin/ allows you to build as many databases as you need for as many sites as you need.

On my computer:

  • XAMPP. This is the biggest piece of the puzzle. Before XAMPP, I was uploading my files and refreshing my website every time I made a change. XAMPP imitates your web server applications, including Apache, MySQL, and PHP on your computer. This allows you to update your code and immediately see the changes by pointing your browser to "http://localhost/examplesite/" without transferring your files (via FTP) to a web server.
  • Notepad++. I edit HTML, CSS, PHP, and JavaScript code with a simple text editor. Notepad++ is similar to the text editor that comes with your computer, but it makes it easy to format your code, and gives you those little red wiggly lines to let you know you messed up some of the syntax.
  • FileZilla. This open-source FTP (file transfer protocol) client allows you to transfer files from your laptop to your web server. I develop on my local machine and upload to the web server at times when I'm ready.
  • Firebug. Although I download all of the major browsers - Firefox, IE, Chrome, Opera, and Safari - to test cross-browser compatibility, I primarily use Firefox. A great plugin that can be added to Firefox is called Firebug. This allows you to debug JavaScript errors, dynamically change CSS styles and see them instantly before modifying your code, and fixing those annoying little layout problems.
  • GIMP. This is just like Photoshop except it's free. It allows you to edit photos and graphics. I don't know what else to say about it.

That's pretty much it for now.  I'll get more into the details later.  Cheers.