Try Or Else

How to Get Your Code into your Computer - Choosing a Text Editor

2012-11-24T15:29:00.000-08:00

One of the first challenges I ran into when learning to program was figuring out how to get my program into my computer. Based on the examples I was reading in my Perl book, I was pretty sure punchcards were no longer in use, and that I would need to use a text editor of some sort. I don't think I knew it was called a text editor at the time, though. So, I did what any good business school student would do and opened Microsoft Word. Wrong. I found that Word is good for writing essays, bad for writing code. So, I went to the opposite end of the spectrum of Microsoft text editors, and opened Notepad. Also wrong, but I didn't realize this for a very long time. I wrote a lot of Perl scripts in Notepad, and it really hurt my eyes. I didn't realize I had options, and I didn't know what I was missing. I will first discuss what I was missing out on by using Notepad, then I will go through some of the best options.

What is essential in a text editor

Remember that, although your code is intended to be executed by a computer, it should be easily readable by humans. Well organized, well documented code is the most important aspect of readability, but a good text editor can make a huge difference, too.

Monospace font

You may have accidentally set the font of one of your Word documents to Courier, and thought "Why would anyone ever want a font so ugly?" Hold your tongue. Beauty is in the eye of the beholder, and for a software developer there is not much more beautiful than properly formatted code. See the difference for your self.

Code in Monospace

if (this.fontType === 'monospace') {
enjoy();
} else {
gougeEyes();
}

Code in Times

if (this.fontType === 'monospace') {
enjoy();
} else {
gougeEyes();
}

Syntax Highlighting

Any text editor worth its salt will provide syntax highlighting for all major programming languages, as well as the ability to add highlighting for other languages (see extensibility below). The first time I wrote a PHP file in gedit, I got really excited because of the extremely basic syntax highlighting I saw.

Note, the computer can understand your code without syntax highlighting (and with any font type you choose, including wingdings), but syntax highlighting is essential for the developer's sanity. Try finding the syntax error below with and without syntax highlighting.

Without Highlighting

function sendMessage() {

var message = 'I love syntax highlighting, don't you?';

alert(message);

}

With Highlighting

function sendMessage() {

var message = 'I love syntax highlighting, don't you?';

alert(message);

}

This particular color scheme may be a bit ugly, but Blogger didn't give me a lot to work with. And I think the point is clear. Syntax highlighting makes coding much easier.

What is really nice to have in a text editor

In my opinion, you can go very far with a text editor that offers only the two features mentioned above. However, I have added a short, non-comprehensive list of other features that can really improve your experience.

Extensibility

At LinkedIn, we switched from using JSPs (Java based templates) to Dust, a new JavaScript-based templating language. Because Dust is new, syntax highlighting was not available in most text editors (it is now for Vim and Textmate). Extensible text editors allow plugins, which can add many features the core text editor doesn't already offer. Not necessary, but really useful.

Autocompletion

When you are writing code, you end up writing the same words over and over again. Variables, function names, class names, etc. are repeated several times throughout your code. If you misspell a single instance of one of these words, you will run into trouble. Many text editors offer some form of autocompletion, from simple implementations (like Vim's ctrl+n, which just looks for matches of other words in the file that start with the same characters) to smarter, more complex versions (like Visual Studio's IntelliSense, which makes intelligent guesses for autocompletion based on context as well as characters typed).

Keyboard Shortcuts

I love keyboard shortcuts. So much that I almost called this feature essential. I rarely use the mouse when I use a computer, and I really hate user interfaces that absolutely require you to use a mouse (like Mac OS X's modal popups - why doesn't tab work in those things?). In a text editor, keyboard shortcuts should make it easy to navigate, rearrange, and modify your code.

Debugging Tools

We'll get to this in more detail below, but it's worth mentioning here. Some text editors only a part of a larger system - an integrated development environment, or IDE. Debugging tools are a large part of what (from my perspective) make IDEs useful. Debugging tools of some sort are essential to software development, but they can exist outside of the text editor (web developers use web browsers like Chrome and Firefox for this purpose), so I have classified them as nice-to-have. Debugging is a huge part of software development, and deserves an entire post (or an entire blog) of its own, so I'll leave it at that for now.

What are your options

Vim

I'll start with Vim because it is the editor I use every day. Vim was publicly released in 1991 - I wasn't using it then, but I would guess it looks about the same today as it did then. Vim is based on vi (Vim = Vi Improved), which was written by Bill Joy in 1976. I wasn't even alive then, but I'm guessing Vim today looks a lot like Vi did then. This is because Vim is a terminal-based editor (though it does have a GUI version).

Vim is lightweight, and is available on perhaps every operating system you will ever see. At first, Vim seems very confusing, because there is more than one mode, and standard OS keyboard shortcuts like copy and paste are a bit different (e.g. you paste by typing "p", not "ctrl+v"). The first time you use Vim, you will get frustrated, because it's a text editor (should be simple) and you don't know how to edit any text.

However, this confusion is short-lived, and the power of Vim's keyboard shortcuts and other native features, as well as the incredible plugins that are freely available make it worth it. If you are familiar with Gmail's keyboard shortcuts, you are already on your way to becoming a Vim user. If you want to learn vim, open a terminal (more on this in a future post), and type "vimtutor".

Emacs (not iMacs)

Emacs was written around the same time as Vi, and it also lives inside the terminal (with an optional GUI version). Emacs is built to be extremely extensible (I've heard it said that "Emacs is a great operating system. The only thing missing is a good text editor."), and keyboard shortcuts are a major part of the Emacs philosophy. Emacs is short for Editor Macros, because users can string sets of keyboard shortcuts into macros, sometimes to the point where it gets a bit silly (see XKCD comic below). Vi/Vim and Emacs are sort of rivals. They are very similar in a lot of ways, and they are both very confusing to new users. Emacs ended up being more confusing for me, so I am (firmly) in the Vim camp.

Notepad++

When I only owned Windows computers, Notepadd++ was my editor of choice (though I now realize I could have been using Vim). As a quick sidenote, Notepad++ is a play on the name of C++, the programming language. The "++" is a increment operator - it means one greater than. So, C++ is one greater than C, and Notepad++ is one greater than Notepad. I haven't used Notepad++ for quite a while, and I never thoroughly explored it's features, but it does have the essentials, and I can say that it is at least "one greater than" Notepad. It is a GUI editor, and all of your standard OS keyboard shortcuts will work as expected. You already know how to use Notepad++.

gedit

After my first few months of programming Perl scripts in Notepad (and a brief stint with C# in Visual Studio), I moved on to a Linux (Ubuntu) development environment. The default GUI editor in Ubuntu is gedit (it's also available for Mac OS and Windows). Gedit has all the essential features, and is at least moderately extensible. Like Notepad++, you already know how to use it. I learned how to write PHP/HTML, CSS, and JavaScript in gedit, and it will always hold a special place in my heart. Apparently it's pronounced "gee - edit", but I always though it was pronounced with a hard g (almost like "get it"). Deciding the correct pronunciation of open source software can be very tricky.

Sublime Text/Textmate

I'm grouping Sublime Text and Textmate together because (a) I haven't used either extensively, (b) I understand that they are very compatible, and (c) they seem to be the cool kids' editors (if we can really say that cool kids have editors). These are GUI editors that you (mostly) already know how to use. They are extensible, and they include some really cool features. You can set up "projects", and that seems to make code searches a bit easier (though I can't imagine they are any faster than ack). One feature that I am very jealous of is Multiple Selections. Sublime Text will let you select all instances of a word, and edit all of them at the same time (kind of like find and replace, except with live editing). You can try both Sublime Text and Textmate for free, but if you decide to make one of them your primary text editor, you will need to pay.

Eclipse/Visual Studio

None of the editors mentioned so far are IDEs. I spend spend most of my time writing JavaScript, so my IDE is a browser. If you are working in languages like Java or Scala, you will probably want to use a full blown IDE, like Eclipse. Eclipse and Visual Studio have all of the essentials and all the nice to haves. They are also much heavier pieces of software, and they are more difficult to learn to use. Eclipse is good for most open source programming languages, and is probably the favorite editor of Java developers. Visual Studio is built for .NET programming.

Choosing the best one

I love Vim, and I recommend Vim, but I recognize that Vim is not the right editor for everyone. If you don't want to spend a few hours learning how to use your text editor, Vim and Emacs (replace hours with weeks for Emacs) are not for you, and Eclipse and Visual Studio are probably out as well. If you are not comfortable using the command line, Vim and Emacs are probably not for you. So, while my first recommendation is Vim, if you are just learning to program, I would go for one of the GUI editors. Notepad++ if you are on Windows, gedit if you are on Linux (and you're cheap), and Sublime Text if you are on Mac (or you're not cheap). I acknowledge that choosing a text editor is not an easy decision. I hope this has helped you. Good luck!

How websites work

2012-11-13T08:32:00.002-08:00

I used to think that computers were magic. Do a search on Google for a place to buy custom alligator skin cowboy boots, and magic happens. Search for an old colleague on LinkedIn and magic happens. The more you learn about computers and programming, the less magic some parts seem. On the flip side, the more magic other parts seem (how does Google do that?)

Today I want to take a bit of the magic out of the way the web works. I'll throw in a bit of history as well.

Web Browsers

A web browser is a piece of software on your computer (click here for more info). It's there to help you access web pages. The first web browser, WorldWideWeb, was created by Sir Tim Berners-Lee in 1990. This is the same guy who invented the actual World Wide Web (as in the web. Yeah, it wasn't Al Gore). The first popular web browser, Mosaic, was launched in 1993 by a college student named Marc Andreessen. Unlike other notable computer scientists, Andreessen graduated from college. He went on to cofound Netscape, which later created a project that was called the "Mosiac Killer", or Mozilla. Sound familiar?

Web browsers can also be called "clients". They make requests to and receive responses from servers. These requests are made using the Hypertext Transfer Protocol (HTTP). HTTP is a set of rules for how information gets passed between clients and servers. The two most common types of HTTP requests are "GET" (generally used for requesting data from the server) and "POST" (generally used for sending data to the server). One of the most common ways to make a GET request is by typing a URL into the browser's address bar, and hitting enter.

URLs and DNS

A Uniform Resource Locator (or URL) is the website's address that you type into the address bar. A URL is made of several parts, but we will focus on just one for now: the domain name. The domain name of this blog is "blogspot.com". The domain name is the name of the server to which you would like your request to be sent. Computers on a network are identified by a number (an IP address), and not by names. So, the name needs to be translated into a number. This happens through a Domain Name System (DNS), very similar to the way that the Contacts app on your phone translates your friends' names into phone numbers.

Servers

A server is a computer. Pretty much any computer can work as a server (including, most likely, the computer you're using to read this). A server has server software that is capable of receiving requests and responding to those requests. In the most simple case, a server receives a request for an HTML document, and sends that HTML document as it's response. The client web browser who requested the HTML document would then translate the HTML and display it as a web page.

There is a lot more to how websites work, but these are the most important parts. In future posts, I will be talking about what HTML is (and is not), how to make websites look good with CSS, how HTML and CSS are not programming languages, and how JavaScript is a programming language, and what it is used for.

Breaking Down Barriers

2012-11-04T14:10:00.000-08:00

The past 10 months have been an amazing journey. I interviewed with LinkedIn about a year ago. I have, since that time, learned a lot about software development. I am amazed at the quality of developers that I am privileged to work with every day, and perhaps more amazed by the diversity of their educational backgrounds. From masters in computer science from Stanford to high school graduates to masters in accounting from BYU (that last one is me).

But I can't help but wonder, how did all these non-computer science folks get into programming? I have written before that getting into programming is hard. There are mental, social, and cultural barriers to entry. It requires great patience and a willingness to be confused a lot. But, clearly it can be done.

The original purpose of this blog was for my brother and I to share the things we learn as we tread in the deep waters through which all outsiders and newcomers must pass. By the length and frequency of our posts, it can be assumed that we haven't learned much. On the contrary. We have just spent so much time learning that we haven't had time to write about it all.

Starting this week, I would like to change that. My (ambitious) plan is to write one or more posts per week. The subject of these posts will be based around breaking down the barriers that most people face when they start programming. I have found that most self-taught programmers operate under a just-get-it-to-work mentality, and concepts like scalability, readability, security, and performance are rarely considered. Once you have learned to program this way, it's hard to change (I would know). Accordingly, I will do my utmost to make all code samples and explanations of high quality. If it's worth learning, it's worth learning right.

Looping through arrays vs. objects in JavaScript

2012-01-07T22:10:00.000-08:00

I learned to program in Python, and that's still where I'm most comfortable.

In Python, lists and dictionaries can both be effectively looped through using: For... In loops. Both of the following work:


list1 = ["a","b"] 
for x in list1:
    print x

OR

dict1 = {"a":1,"b":2}
for key in dict1:
    print dict1[key]

When I started playing around in JavaScript, I naturally tried the same thing, i.e.:


var array1 = ["a","b"];
for (x in array1){
    alert(array[x]);
}

I thought that this was just fine, but when I went through the JavaScript tutorial at W3schools, I saw that they just use a for loop.

Apparently, using "for... in" works most of the time, but it can cause some big problems. It actually iterates through all of the properties of the array object, instead of just the array itself.

I found out that the filtering on my WeRelate project was broken in IE because I used "for...in" on an array.

So, the moral of the story is, "for... in" loops are fine for JavaScript objects, but when you want to loop through an array, do it like this:

var array1 = ["a","b"];

var arrayLength = array1.length;
for (i=0; i< in arrayLength; i++){
    alert(array[i]);
}

It's a little more complicated and harder to read, but it won't cause you grief.

Getting a Perl script to run.

2012-01-03T11:40:00.000-08:00

The first programming language I learned was Perl (if you don't include the few lines of Visual Basic for Applications I had already learned. And you shouldn't because that's not much of a programming language, and I hadn't learned much of it). I learned in 2007 from a book that was published in the early 90's. The book's instructions for installing Perl on one's computer were to send a self-addressed stamped envelope and wait for a floppy disk to be mailed back.

Fortunately, with the wonders of modern technology, you can install Perl in seconds. If you are hesitant about the merits of Perl, the following comic should help. Then, let's continue.

I'll do a post on Regular Expressions (RegEx) later. But now, how to install Perl and run a script:

1. Download Perl here (this is the Active Perl distribution of Perl - you can use another if you choose).

2. Follow the instructions to install. Accept the defaults

3. Create a text file (anywhere on your computer).

3a. Name the file tryorelse.pl, then open it with a text editor (here's a good one for Windows).

4. Copy and paste the following code:

print "Try Or Else.";  # Print message.

<stdin>;      # Prevent console from closing.

5. Save and close. Then double click on the file you created.

6. You should see something like this:

If that worked, Perl is correctly installed on your computer. Now, go find yourself a massive text file and parse it.

JSON and AppEngine

2012-01-03T10:10:00.000-08:00

I spent far too long figuring out how to post JSON from our time tracking extension to Google App Engine. I was using jQuery.post, and no matter what I did, my Python code wouldn't see the incoming post as JSON. It kept telling me that I was receiving an object, instead of a string.

I messed with the way I formatted my JSON string, and messed with the parameters of the jQuery.post call, before I finally figured out that the problem was in my Python code. Instead of accessing the actual string that was sent, I was accessing the whole request object.

My original code looked something like:

activities = json.loads(self.request.POST)

So, I guess App Engine uses Django, and I learned from here that I needed to change my code to:

activities = json.loads(self.request.body)

That grabbed the actual JSON string, which I was then able to convert and use in my Python code.