Angie Chang: How I Learned to Code

What did you study in college?

After barely passing the Computer Science major requirements at UC Berkeley, I decided to focus on easier topics to graduate with: English and Social Welfare.

How did you get into tech?

When I graduated I had years of building websites under my belt, so my first job was at a venture-backed startup. I quickly learned how lonely it can be as a woman on an all-male engineering teams, so I went on to start Women 2.0 to meet like-minded entrepreneurial women in tech, and then two years later started Bay Area Girl Geek Dinners to meet even MORE of them! Women in tech DO exist in droves!

Angie

What are you currently working on?

Currently I'm working to change the ratio of women in engineering as Director of Growth at Hackbright Academy. An accelerated software development program solely for women, we attract students from all over the world and pair them with software engineer mentors to help them find work in tech. Now our students are working at partner companies and commanding some pretty impressive salaries after graduating from the 10-week program.

When did you get into programming?

In high school we got AOL at home and I was fascinated by the Internet. I looked at the HTML behind the simple webpages in 1999, and learned to write my own code and put up webpages. As a shy and quiet student, I supported my friends in leadership positions by creating their websites, and they started referring me to paid positions. And so it goes.

How did you learn to program?

Learning to program is simply being curious about how things work. How does this webpage render? What makes that do that? You peek behind the curtain, like they did in Wizard of Oz, and find that it's lines of code that eventually make sense after you do a lot of Googling and asking questions.

mentoring

Google is a great resource for learning to program, as well as simply hanging out with other people who like to code. When sitting next to another person on their laptop coding (I think we call this "co-working" now), you can ask questions aloud and have them answered right away.

Your 140 character tip for aspiring founders?

Just start asking questions out loud - over Twitter, Facebook, LinkedIn - and you will learn from the answers you receive. Start iterating on your idea, and it will snowball.

Every Child Can Learn To Code

We are proud to partner with Google and Mozilla in supporting Code Club UK as it expands across the globe. We’ve seen the impact coding has on children first hand at Codecademy, and we are excited to watch Code Club open in more countries.

Github

Code Club UK is a volunteer network of after-school coding clubs that exposes children aged 9 to 11 to programming. Their open source Code Club World initiative now extends the same opportunity to children everywhere, with materials in Norwegian, Ukranian, German, Brazilian Portuguese and Dutch — as well as hosting them on GitHub for programmers worldwide to translate and use in their own coding clubs.

Their mission — "to give every child in the world a chance to learn to code — complements our own and we can't wait to see everyone, young and old, have the opportunity to learn to program. Onwards!

Your Guide to Semicolons in JavaScript

This is a guest post by moderator Alex J. If you see him in the forums, say hello!

When do you need a semicolon? Here's a handy cheat sheet...

Required: When two statements are on the same line

The semicolon is only obligatory when you have two or more statements on the same line:

var i = 0; i++        // <-- semicolon obligatory
                      //     (but optional before newline)
var i = 0             // <-- semicolon optional
    i++               // <-- semicolon optional

Optional: After statements

The semicolon in JavaScript is used to separate statements, but it can be omitted if the statement is followed by a line break (or there’s only one statement in a {block}). A statement is a piece of code that tells the computer to do something. Here are the most common types of statements:

var i;                        // variable declaration
i = 5;                        // value assignment
i = i + 1;                    // value assignment
i++;                          // same as above
var x = 9;                    // declaration & assignment
var fun = function() {...};   // var decl., assignmt, and func. defin.
alert("hi");                  // function call

All of these statements can end with a ; but none of them must. Some consider it a good habit to terminate each statement with a ; – that makes your code a little easier to parse, and to compress: if you remove line breaks you needn't worry about several statements ending up unseparated on the same line.

Avoid!

1. After a closing curly bracket

You shouldn’t put a semicolon after a closing curly bracket }. The only exceptions are assignment statements, such as var obj = {};, see above.

// NO semicolons after }:
if  (...) {...} else {...}
for (...) {...}
while (...) {...}

// BUT:
do {...} while (...);

// function statement: 
function (arg) { /*do this*/ } // NO semicolon after }

2. After the round bracket of an if, for, while or switch statement

It won't harm to put a semicolon after the { } of an if statement (it will be ignored, and you might see a warning that it's unnecessary). But a semicolon where it doesn't belong (such as after the round (brackets) of an if, for, while, or switch statement) is a very bad idea:

if (0 === 1); { alert("hi") }

// equivalent to:

if (0 === 1) /*do nothing*/ ;
alert ("hi");

This code will alert "hi", but not because 0 equals 1, but because of the semicolon. It makes JavaScript think that you have an empty statement there, and everything to the right of it is treated as no longer belonging to the if conditional and thus independent of it.

Of course there's an exception...

An important quirk: inside the () of a for loop, semicolons only go after the first and second statement, never after the third:

for (var i=0; i < 10; i++)  {/*actions*/}       // correct
for (var i=0; i < 10; i++;) {/*actions*/}       // SyntaxError

How to fix your semicolons

The JavaScript syntax proofing tool JSLint, which is built into the Codecademy code editor, does a pretty good job of finding unnecessary semicolons – or missing ones.

It'll show you yellow warning triangles in code lines. Hovering the mouse over a triangle will tell you if there's a missing semicolon or an unnecessary one. You can generally trust those warnings until you develop an intuition of where to use semicolons and where not to.

Getting Started with Git

This is the first of a three post series by one of our moderators, Joah Gerstenberg.

What's git?

Git is a Version Control System (VCS), a tool used by coders around the world to keep track of their code and the changes they have made to it. A VCS will save a snapshot each time you check your code into the VCS, allowing you to go back to any revision along the way and restore your code to the way it was then.

Every programmer should use a VCS.

Here's why:

Ever made change to your code, but just after you saved the file, you realized that you made a horrible mistake and you need to go back? A VCS lets you quickly jump back to before you made the mistake.

Ever wanted to be able to prove (or disprove) that one particular line of code is breaking your project? A VCS lets you see multiple revisions of your code to enable you to do just that.

Ever wanted to try out a new innovative feature in your project without accidentally messing up the project altogether? A VCS lets you create parallel deviations to your code which can later be merged into the final project.

Step 1: Download git

Although not alone with alternatives such as SVN or Mercurial, Git is by far the most popular VCS available.

Get started with git by downloading the appropriate package from Git's Download Page for your OS. Git installs by default as a command-line tool, so follow the appropriate instructions to access the git command line for your OS (in Mac and Linux, simply go to the Terminal).

From there, all you need to do is cd into the directory your code is stored in, and git init. That will initiate a versioned git repository in the current directory you are in.

Step 2: Add a new revision

When you are ready to add a new revision to the git repository's records, simply (while cd'd into the git repository) git add what you want to add to this specific revision. For example, if your folder was like this:

- Code # <== this is a git repo
|- index.html
|- js
 |- script.js
|- css
 |- style.css
|- img
|- .git # <== this is a hidden directory, but exists if {Code} is a git repo

And you just wanted to add the changes in /js to your current revision, simply use git add js, or if you wanted to just add the style.css file, you would use git add css/style.css.

Step 3: Commit your revision

Git uses the term "commit" for the different versions recorded to connote that you are "committing" the current code to the pretty-much-permanent record held by the git repo. Once you have git add'd the files you want to be a part of your next commit, simply use git commit -m "Your Commit Message Here".

Git highly recommends that you include a commit message as a part of your commit, so that you, and anyone else looking at your code, can easily recognize what the current version of the code does. One less-known trick that you can use while using the git command line is that you can use git commit -m "" --allow-empty-message, and bypass having to supply a message with your commit.

Step 4: To the Internet!

By following the above instructions, all your code and commits associated with it will be stored locally on your computer. This is perfectly acceptable, but in my next post I'll discuss the more popular approach; storing your code online with a service such as GitHub.

Getting Things Done > Grade Point Average

This post by Alexis Ohanian, co-founder of reddit, was originally published on LinkedIn.

Graduation

We're a generation in debt.

I had a world-class education at the University of Virginia. I met my reddit co-founder Steve Huffman there on move-in day. That chance encounter changed both of our lives. I had some awesome professors. There was the fortuitous trip to Waffle House that convinced me I wanted to be an entrepreneur, not a lawyer. I've written the book about internet entrepreneurship I wish I had back then. But my kids won't have the same education I did. And that's a good thing.

A year ago I sat on a panel at the White House for a room full of deans from universities across the country. We were tasked to talk about entrepreneurship and how to better prepare our nation's undergraduates for an uncertain job market.

"A critical skill I see in great entrepreneurs and employees alike is resourcefulness. Resourcefulness doesn't come from case-studies, it comes from doing things."

This turned out to be quite the applause line.

Paul Graham says the best founders are "relentlessly resourceful."

I've been thinking about that day in D.C. ever since.

Getting Things Done > Grade Point Average

I'm an employer and I don't really care where you went to school or what your GPA was -- I want to know what you've done. Paid off student loan debt by tutoring computer science in New York? Rock on. Raised $20,000 on kickstarter for a daft punk tribute album? Awesome! Started the 'dear photograph' meme? Splendid! Blogged years worth of eating across the world and now creating food-tour-guides? Now we're cooking with bacon.

Read the full article


How Kids Can Learn to Code

Designer Jeffrey Karl illustrated a Codecademy Kids for the iPad app to help more kids learn how to code. While not developed (yet!), his ideas show how to get any child interested in coding.

Why do you think kids should learn to code?

It's not that you need to master code, but everyone should know the basics. I had heard about how the country of Estonia mandated that elementary school students learn how to program, and also how there are not enough code literate people. There's a big barrier to entry to learning how to code - so how do you lower it?

How do you get them started?

One way to make kids excited about coding - or learning anything for that matter - is providing context for whatever subject it is you want to teach them ("If you learn this, you'll be able to..."). Let them know that if they code they'll be able to make their own games, or code their own website, or maybe just having fun with a more game-like or story-driven experience will be enough.

Coding is intimidating even to adults - how does this app help?

I wanted it to feel very tactile, like a child's arts and crafts project — each interactive element in the app is something to move around.

App

I used drag and drop (roughly borrowed from Scratch) to simplify the experience. I had the idea of having pre-made tools; for kids, they don't need to know the intricacies of writing code. So say you want to write an If / Else function in JavaScript. Drag and drop a function from the toolbox onto the looseleaf paper, then go back and grab the If / Else bit and drop it inside of the function. You'll see them expand so you can look at syntax. In the beginning, it's more the structuring of code that matters.

Without badges, what's the motivation for kids to do lessons?

Instead of getting badges for the sake of badges, in this app you're getting robot parts so that you can build a robot of your choice.

Robot

A robot represents a course. We need help building this robot and you do that by completing the lessons. There are different sized lessons so that you can add a leg and an arm, and it's fine to add three arms to make a really big robot (or a really long lesson) too! Each of the sections highlights a different part of the body.

As a game designer, how do you keep kids engaged?

I recently saw a talk given by Sebastian Deterding. He stressed that gamification is more than badges, leaderboards and points; it's about providing a meaningful experience for the user. One way to do that is through creating a fun story. This was basically the solution I used with Codecademy Kids for the iPad: the current system of badges aren't really related in any meaningful way - save the overlapping skill set it takes to complete each. Providing a storyline where kids can help this friendly character, Ratchet the monkey, build the individual parts of a robot is one way to contextualize these lessons for children.


How To Build an App

Did you know you can create an app using JavaScript? Read these three stories of users who went on to do just that.

1. Jonathan and SimpleTax

Jonathan never wanted to become a programmer, he wanted to learn to solve problems. With Code Year, he got the skills to do that. Now he’s building an app to simplify doing your taxes.

2. Ryan and Sworkit

Last year Ryan was looking for ways to learn to code. After trying books, videos and articles, he stumbled upon Codecademy. Armed with the skills he learned there, Ryan wanted to build something of his own.

3. Michael and GVING

When Michael Perry founded GVING, he knew he would have to learn to code eventually. With Codecademy (and the help of some friends) he finally met his goal.

Code in the Classroom

This is an excerpt of an article by Jon L. Denby of NYU explaining a Coding 101 course using our curriculum. If you're interested in using Codecademy in the classroom, get started here.

"If you don't speak 'computer' in our current economy, it's a little like not being able to read the street signs; it's a major handicap," says Leibovitz.

Thankfully, there is no shortage of students eager to learn.

Leibovitz's first class, co-taught with programmer David Hu in fall 2012, had only 50 seats available. They were all reserved in less than three minutes of class registration opening, and the wait list grew to 120 students.

While teaching courses at NYU Steinhardt like Video Game Theory, Video Game Industry, and Digital Literacy, Professor Leibovitz realized that many of his students lacked an understanding of how digital systems actually worked. He was looking for a simple way to teach his students computer programming when he stumbled upon the Codecademy website:

I realized it was a really, really good solution for several reasons. First of all, it was something that was modular. You could do it on your own time. You could do several units, or all the units or tracks. It really gave you options.

It was also based on real-world, complete projectsI mean every single track that you have there is based on building a game, building a tip-calculator, building a Blackjack game, building a choose-your-own-adventure game—all kinds of real-world projects. It was written in this language that I thought would resonate tremendously well with our students because it was down to earth, it was English, it was easy to understand.

Continue reading here.

Getting Comfortable in the Terminal: Linux

This is a guest post by Daniel Seymour, one of the Codecademy moderators, with editing help from Alex Craig and Dustin Goodman.

"I see a blinking cursor. WHAT DO I DO?!"

When you hear the word "command line", "terminal," or "little window that tells a computer what to do but only has a flashing cursor in it," what comes to mind? Do you scream and hide under your bed? Or do you look at me inquisitively and wonder why I would bring such a scary thing up?

Terminal

I hate to tell you this, but you MUST conquer your fear of the terminal (if you have a fear) and learn how to use that annoying little window with a flashing line in it. A *nix (Unix (like Mac), Linux) system is an operating system that can enable you to do some rather amazing stuff quite quickly, if you know what you are doing in the terminal. Before I start throwing terms at you I need to define a few.

Basic Terms

OS:
Operating System, the program that tells the different pieces of hardware how to work together to make a comprehensive system.
GUI:
Graphical User Interface, essentially the little window that has buttons you can click that often hides the power of the terminal.
Terminal:
Part of the computer that allows you to issue commands to the computer and directly interface with the OS.
Executable:
Executable file, file used to execute a program on your computer.

Now that you have a rudimentary computer vocabulary, you can start conquering your fear. I use the terminal all the time and am able to do basic things faster, such as pushing to Github, connecting to a network, etc. I currently use a command-line-based Linux distribution. On the rare occasion that I have to use Windows, most of the basic jobs of the computer, such as connecting to a wifi network, take so long that I feel like I am waiting for a marathon to end.

Step 1: Find your Terminal

So how should you start conquering your fear? I would suggest finding the terminal on your system. For this first part, I am going to assume that you are using a Linux distribution such as Ubuntu, Linux Mint, Fedora, OpenSUSE, or Debian (to name a few). On any regular GUI-based Linux system, go to the applications menu and search for terminal. When you find it, open it and stare at that blinking cursor for a few seconds while saying, “I will learn to use this thing.” :) (You can skip the staring if you want.)

Step 2: Start an Application

The most basic operation that a user can do from the terminal is start an application. On almost every Linux system, simply using the name of the executable in the /usr/bin directory will start the application. For example, starting the Firefox web browser simply requires typing “firefox” into the command line and pressing enter. You should now see a session of Firefox launch on your desktop. Congratulations! You just executed your first command from the terminal!

Note: Launching an application from the terminal will lock that terminal instance so that you cannot do anything else with it. If you want to be able to use the terminal for other activities, trailing the application executable name with a “&” will put the process in the background of the terminal and you will be able to use the terminal for other things.

Step 3: Get Specific

Launching an application is not all that the terminal can do. You can launch applications and tell the application to edit such and such file (in the case of a text editor, such as Nano, Vim, or Emacs. Nano is the default terminal text editor for most Linux distributions) or you can tell a web browser to launch such and such a web page. For example, the command:

firefox www.codecademy.com

will launch a session of firefox and open the session on the Codecademy home page.

Step 4: Entering Commands

Now that you know how to launch an application, you will also need to know how to traverse the file system straight from the terminal as doing so is a big part of many operations that are done in the terminal.

To start off, enter the command pwd. You should now see something along the lines of

/home/{username}/

The above command stands for Print Working Directory so the directory that you see posted to the terminal is the directory that the terminal is currently in. Now enter the command “ls”. You should now see something along the lines of:

Desktop/    Documents/    Downloads/    Music/    Pictures/    Videos/

And all of the other folders that your home directory contains. The ls command can be thought of as standing for LiSt the contents of the present folder.

A Brief Note on Flags

Before we go any further, you will need to know about flags. Flags are options that are passed to a command that extend the command to accomplish another task at the same time.

Now type the command ls -a (-a meaning all). You should see everything that you saw using the ls command but also you should see a bunch of folders and files that begin with a .. These extra files/folders are “hidden” so as not to clutter up your home directory with files that you may only open once in the life of the computer (if that). As you may have guessed, the difference between a hidden and not hidden file is the beginning dot. The dot tells Linux to hide the folder/file.

Step 5: Change Directories

One last command that you must know to be able to start using the terminal effectively is the cd command. If you type cd by itself, you most likely will go back to your home directory or nothing will happen. This is because the cd command stands for Change Directory.

Because you didn’t pass cd an argument, the terminal has no clue what folder it should enter. The most important cd arguments that you will need to know are {childFolderName}, .., . and ~.

  • {childFolderName} argument tells the terminal to enter the folder in the current directory by the name of {childFolderName}
  • .. tells the terminal to go to the parent folder of the current directory
  • . when used in conjunction with /{folderName} tells the terminal to enter the child folder of the current directory by the name of {folderName}
  • ~ tells the terminal to go back to the home directory (/home/{username}).

Other Useful Commands

Here is a list of other commands that you will probably find useful:

  • mkdir “Makes” a directory in the file system at the specified file path.
  • rm Deletes (“removes”) the file at the specified file path.
  • rmdir Deletes the directory at the specified path.
  • man Opens the MANual pages for the specified command or application. For example, man ls will open the man page that contains all of the information and flag options for the “list” command. This is especially useful to see if a program offers any extra functionality or to figure out how to configure a program.

That's it! Now you're ready to get started in your terminal.

Bringing back keyboard shortcuts

Since introducing the new coding interface the much loved keyboard shortcuts have been amiss. Now we're bringing them back.

Here's a cheat-sheet you can follow

Reset Exercise
Completely messed up a solution? Start fresh.

  • Windows: Alt-R
  • Mac: Option-R

Next Exercise
Peek at the exercises ahead. Get excited by what the section has in store you!

  • Windows: Alt-P
  • Mac: Option-P

Previous Exercise
Want to retrace your steps to solve the current problem? Revisit an exercise to see all you've done!

  • Windows: Alt-O
  • Mac: Option-O

Save and Submit
Ready to see if it works?

  • Windows: Control-Enter
  • Mac: Command-Enter

That's it! To start using them, go try out an exercise like this one in JavaScript.