I’ve Cried Over a Semicolon; 5 Tips for Teaching and Learning Code

At this point in my career, I’m at a sweet spot of enough knowledge to know how to code, but not too much expertise to have forgotten what it’s like to learn how to code. As I teach more and more introductory programming, I’m also caught in a sweet spot of finally being proud of myself as a programmer, and also realizing how much further I’m getting from the students I teach. As I watch my students struggle, I’m reminded all too freshly of the literal tears I wasted when I was first learning to code, while also forgetting the concepts I didn’t understand at that point. This article will walk through some of the early barriers to learning to code, and some of the ways that we can better support students when they hit those barriers.

First and foremost, when teaching anything in programming, I think it’s important to reference back to what it was like for us personally when we first touched computer code. We have to remember that the students coming in may already have the idea that “you’re either a programmer or you’re not. You either think a certain way, or you don’t”. They’re already assuming that we have “it” (whatever “it” in programming is). It’s vital that we reference how difficult, time consuming, foreign, and confusing it was when we first learned to program.* If that doesn’t apply to you, then that’s wonderful. Please share your secrets! But know that many students will feel this way. So, let’s collectively knock ourselves down a peg, and remember to communicate that it was once difficult for us too.

So, let’s collectively knock ourselves down a peg, and remember to communicate that it was once difficult for us too.

So much of my identity got tangled up in “being a programmer”. Not only was I a perfectionist student, never trained in the art of ‘tinkering’, but I had already attached the idea that programmers were smart people; the smartest in society. I could go on and on about where that comes from in the media and portrayals of mad scientists and computer geeks; but I can just say that I already valued being a good programmer as a measure of my worth as an intelligent person in the world. For some of us, we don’t have that misconception! And we start more ‘blank slate’ than that. But it’s important that educators keep in mind that some students will come in with harmful preconceived notions of who they are supposed to be, and that we can try to mediate that from the beginning.

Let’s talk a little bit about the things we forget our students may not know yet, that play such a huge role in hindering their learning.

1. File Structure and Navigating Directories

We take this one for granted! Please keep in mind that no one is formally learning about file structure in gradeschool to middle school (I mean, maybe they are in specialized programs, but let’s just not assume this is the norm! In my “computer class” in school I learned about Word and typing). Forget about typing these kinds of things into the Command Prompt or Terminal! Instead, opening that scary black box makes students think that they’re going to break their entire computer or accidentally infiltrate the CIA. So let’s talk about file structure and what’s going on, and how to navigate it with text.

C:Users/yimmy/Desktop/Courses/ComputerScience/myprogram.py
C:Users/yimmy/Desktop/Courses/ComputerScience/images/photo1.png
C:Users/yimmy/Desktop/Courses/ComputerScience/js/javascript_file.js
C:Users/yimmy/Desktop/Pictures/mycat.png

Above, I have a few examples of file paths. We start with “C:” which is your main hard disk, or the main system files. Also known as the “root” directory of your computer, or the starting point for most of the paths you would use as a beginner programmer! In your folders, you might also see “This PC” which contains the C: drive. Just think about this as the starting point of navigating files.

Navigating files in a Windows machine with an actual mouse is the same process as typing it into a Command Prompt or Terminal, it just has pictures to click on instead of typing it out! But for programming, the program doesn’t have the pictures or the clicks. It has the text to navigate to different folders and files.

Typing it out like I have above is actually exactly the same as clicking and navigating through folders on your computer with your mouse. Imagine clicking on the “C:” folder, then “Users”, then “yimmy”, then “Desktop”, then “Courses”, then “ComputerScience”, and finally finding the file “myprogram.py”. You might be wondering why you don’t use the whole file path when working with every program, like when you’re writing HTML and Javascript. Often, the path looks like this:

js/app.js
images/myface.png
../images/myface.png

Here’s where we introduce the idea of relative paths. You might have your folder entitled “WebProject” which contains images, js, and index.html. index.html is the HTML file that needs to access js and images, maybe css as well. But if you are accessing from within a javascript file, you need to refer “up” to get back to the point where you can access images. This is because you’ve gone “down” a level, when you clicked into editing a file in the js folder.

An example web project with an index.html file and two folders

The “../” syntax means going back “up” in the path if you’re thinking about it like clicking in your Finder or File Explorer, or “back” if you’re thinking about it in writing out the entire path. The below code would actually bring you “up” or “back” twice. In our example, where you are residing in “WebProject/js/javascript.js”, the below code would bring you out of WebProject entirely into a new folder called OtherFolder, because you’ve gone “up” twice. I know this is a ton to wrap your head around, but hopefully this is some grounding information that can help you explore your files in a more code-like way.

../../OtherFolder/file.txt

As someone who has taught code across ages, I’ve seen this skill be taken for granted (by myself too!). I once taught a group of sixth graders some JavaScript and we spent an entire unplanned half hour teaching about how to extract a Zip file (where else would they have learned?). I took it entirely for granted that they would know how to do this, and that was one of my many mistakes as a practitioner. It’s not glamorous work, learning to extract Zip files or configure file paths. It’s much more exciting to build a game, or make a website. But maybe as instructors we can highlight the achievements of learning file relationships and how that really is a building block of learning to code, and that it’s something to be super proud of.

2. Setting Up My Computer for Coding

“So what, we just speak to the computer and it follows commands, or what?”

Some cheat codes from the Sims to max out your Sims skills. It’s actually using objects, attributes, functions, and more. I didn’t know, I just wanted my Sims to be champion Bakers.

My first programming language was Python. I was 20 years old in a college class I had to take as a requirement for my Cognitive Science major. I wrote my very first line of code in that class, and my only prior experience with typing commands into a computer was when I would use cheat codes in the Sims. I knew that you used Ctrl + C while in the game, and that’s how you opened the magical “console” to type commands to let you wreak havoc in the Sim world, but first of all, I’d never connected any of that to “programming” and for actual programming, where was my console? The best advice I’ve got is to set up something called an IDE: Integrated Development Environment. It’s an application on your computer where you can write and edit code. I use one called Atom. This application is going to be the space where you type out code that you may either “run” (like Python programs), or open in the browser (like HTML). Here’s a bit of what that looks like:

Here’s a little setup from Atom where I have a JavaScript file open next to my index.html file. See if you can guess where the names in my list come from! :D

This is your creator space as a beginner programmer. This is where you will compose your symphonies! It’s up to other programs in the machine to interpret your code; like in the browser (Google Chrome or Firefox or Safari or whatever), or for running programs from your Command Prompt or Terminal (you might not touch those yet, and that’s fine!). But your IDE is where you type and sometimes test, and it is your communicator portal to your computer, with those other programs already in there that interpret your code language. There are different interpreters for different languages, all of them taking your English-like code and turning it into signals that the hardware itself can understand and represent. I always hated the “you don’t need to know about that so just don’t worry about it” explanation, but to make programs you don’t need to know about that yet. I always liked to deeply understand what was happening in my machine, but that takes time and practice. If you have more questions, (which you will!), ask! Also I’m recognizing that I’m writing this post to both the instructors and the students. I’m hoping that whoever reads this can figure out where they stand and what they need as they read along. For instructors, remember that all of this stuff is brand new and also part of the learning. For students, remember that some of this stuff really does come in time and you’re being thrown into this sometimes unfairly. But setting up your environment will get you closer to not tearing your hair out.

3. How Does a Machine Read My Code? Why do I need a semicolon?

I touched on this a little bit above, but for me this was crucial to understanding what was going on. What was I even typing into the machine? Where did it go? Why did I need to be so specific? I knew what I meant when I missed a semicolon or a space, why couldn’t the computer just figure it out? Especially if we have autocorrect and text prediction in things like email, this program seriously couldn’t figure out I meant to include a semicolon? Well, those are smart insights and I dream of a world where our IDEs (remember those?) help us out just like email and texting interfaces do. But it’s important to recognize that the way we communicate with a computer is different than social nuance. Despite all the amazing technology out there, that feels like a person sometimes (ALEXA, looking at you), code itself is just code. It’s a language that actual, physical, electrical hardware can understand. And actual, physical, electrical hardware is very literal. Each and every piece of a programming language is actually a higher-level representation of 1s and 0s in a machine. You’ve probably heard this before, about 1s and 0s and binary code. What it’s referring to is the “on” and “off” switches of electrical current in a piece of actual, physical, electrical hardware (the chunk of metal you’re reading this on right now!). It’s really amazing that we can communicate with it at all, considering it’s just a bunch of electrical currents that are either on or off in combination. But anyways, one way you might communicate to a machine is by flipping switches. This is binary code. Below, I wrote “this is binary.” Each little chunk is a letter of the alphabet, with “00100000” representing a space (there’s two! can you see them?)

01010100 01101000 01101001 01110011 00100000 01101001 01110011 00100000 01100010 01101001 01101110 01100001 01110010 01111001 00101110 0001010

You can imagine it would be very tiring to have to write out binary code for every little thing you wrote to a computer, and also very uninterpretable to the programmer. So we made “code” where when we type, we have some other program “interpret” it for the computer out of sight and out of mind. That way, we can type the words “this is binary.” and the interpreter will turn it into “01010100 01101000 01101001 01110011 00100000 01101001 01110011 00100000 01100010 01101001 01101110 01100001 01110010 01111001 00101110 0001010” for the computer to read. So, programming languages are exactly that. They are languages “on top of” binary (and sometimes other programming languages) that make it easier for us to control what happens within a computer. All of the “syntax” has been predefined by the authors of the programming language, and underneath that is an interpreter that will make it communicable to the actual, physical, electrical hardware (the machine). Again, you don’t have to worry about that, but it’s cool to start piecing together what is happening when you type magic commands into a metal box.

4. Why Are We Doing This (this obscure JavaScript action on this toy data)? I explain with Facebook examples.

My most recent class had an assignment where they added movie titles to a Javascript array. There were 6 titles in the array, and they added one more. One student asked me “Why couldn’t we just add this to the list in the code file? Why do we use JavaScript to add it to the array when we could just type it into the array variable?”

Aha! A brilliant example of optimization. Given their time and energy being put in to getting a for loop to work, or working with “push” or “append” functions, or any of that other work, it would make so much more sense to go add it to the actual movies variable and call it a day! So why are we doing this?!

I used this example: Imagine you are managing all of Facebook’s code, and each User has a list of Friends. Maybe I get a new friend on Facebook, and under this movies JavaScript example, we could just get a programmer to type it in to my file, and now the new friend is added to my list of friends in my code. But now think about scale; There are millions of Facebook users, adding friends every second. Should a programmer be in charge of modifying everyone’s friend list one by one? Or should there be code that does it automatically?

This is where you might hear or introduce the term “hard-coded”. Many things can be “hard-coded”. I (the programmer) could code in the names of all all the friends on Facebook by hand, or I could automatically grab their names and profiles when the User clicks “Add Friend” and add them into the User’s network using code. As programmers, we try to make as much as possible automatic. Instead of writing in that the size of my friends_list is “127”, I use “friends_list.length” so that it changes when the length of the friends_list changes. When learning to code, we use “toy” examples. I’m not sure if this is effective or not. I imagine we couldn’t do it any other way, because when you’re learning to code you need to be able to process all the information in front of you and play with all the different pieces. But as instructors and learners, we should try to tie it back to real code examples in the world; to highlight just how important our programming decisions become as the codebase gets bigger and affects more people.

The feeling of helplessness and frustration is not really at programming itself (though sometimes it sure is a literal trainwreck). The feeling of helplessness is at an undeveloped system of educating everyone about computing and technology.

5. Progress isn’t linear (in life but also in programming)

Imagine this scenario: you’re working on a program and so far it’s been running okay. You add an extra curly brace } and suddenly, on the next time you run it, the entire program is broken and only giving red errors. Are you worse off than when you started, better, the same, or just in a different place all-together? It could be that you’re actually further along than where you were on your last test, because you added in a large chunk of code. But now nothing is showing up and it’s not even running! Well, I may have a surprise for you. If you delete that extra curly brace, you may be the furthest along yet! Just from deleting an extra bracket, or adding a semicolon! So what is progress? This is a reminder that progress isn’t linear at all. This refers to the actual program writing itself; sometimes you’re just missing a semicolon or a space somewhere, and you’re actually almost finished with the assignment or getting the webpage to look like how you want it. It also refers to the learning. Maybe none of it is making sense at all, and you’re almost finished with the whole course, and you feel like you’ve learned nothing and feel more exasperated and frustrated than you’ve ever felt in your life. Sometimes programming “sinks in” later, and it will suddenly make sense in another context at another time. Especially if you find yourself helping another newbie. Now, to me, that advice sounds kind of condescending and annoying to be honest. I hear you saying “well, I don’t want it to sink in! I want you to teach me!!!!”. Well, you’ve discovered a need that we have as an entire society. We aren’t teaching programming. Programming is very new (relatively speaking, compared to things like art and writing), and so is the technology around us. Many people aren’t learning to code at all, or thrust into it in college. The feeling of helplessness and frustration is not really at programming itself (though sometimes it sure is a literal trainwreck). The feeling of helplessness is at an undeveloped system of educating everyone about computing and technology. Many of us are at a point where we are being thrust into programming way late in our lives, with very little foundation, and tons of expectation from the experts that we should just “pick it up”.

So, this is a message to students and instructors; anyone learning or teaching code. We are all coming from very different backgrounds and experience levels; with little to no background in what computing education even is or looks like. Computing itself is an enormous range of topics; computing for what? Writing code? Solving problems? Designing systems? Optimizing a process? Working with data? Building machines? There’s literally infinite computing problems out there, and many of us had never touched a line of code until adulthood. So not only is this a call to computing education researchers like myself and my community, but to instructors everywhere: have compassion and gentleness when recognizing how big of an ask it is for students learning to code. This might be students in school, someone learning on the job, someone learning because they need a website or to fix something in their computer, or even those self-selecting to learn because they like it a lot. We are in a period of time in history where all of this is a guessing game. That doesn’t mean to not trust what your instructors say; they do know how to code and do want you to learn an incredibly useful and widespread skill. But it means that if you find a way to advocate for your way of learning, or if you want to try teaching in a new way, we should try. All the while, keeping in mind that it is almost impossibly difficult to learn to code without the right environment, support, self-confidence, or mentors. So let’s foster those things as well as learning how to properly teach what a for loop is.

All the while, keeping in mind that it is almost impossibly difficult to learn to code without the right environment, support, self-confidence, or mentors. So let’s foster those things as well as learning how to properly teach what a for loop is.