Teaching Coding

Proposed computer programming standards

So this is my first try at creating computer programming standards. Note that these are not general “tech” standards, as tech can mean a lot of things (for example in Montessori it can have little to do with computers). Instead of talking about computers I say “computing machines” to mean any device that is controlled by a processor, which today can mean everything from your car to a fighter jet to your coffee maker. I’ve tried to minimize just learning a particular programming language, which is what most programming classes today do; mostly that is in the “Process and Application” section. I’ve created 8 categories that I think envelop the experience of working with computing machines, but I’ve probably missed something.

The categories I’ve chosen are:

  • Algorithms, meaning developing procedures to solve problems
  • Process & Application, meaning the general rules of procedural programs (loops, conditionals, etc.) and turning algorithms into actual code
  • Data & Classification, meaning the different ways that computing machines store data, such as data types (string, integer, etc.) and more complex data structures (objects) and databases
  • Logic, meaning the rules that apply to booleans and conditionals
  • Environment and Interface, meaning both the input and output devices of computing machines and also the user interfaces of software
  • Network and communication, meaning all the different ways computing machines talk to each other
  • Physical computing and sensing, meaning devices controlled by computers that do work in the world and analyze it
  • Debugging, meaning understanding the kinds of unexpected behavior we get from computing machines and how we can analyze and come up with solutions for them

There are other categories that I’ve debated including. Two specifically are: Hardware and History of Computation. The first is how computers physically work; this should be in here and the whole thing could be expanded to Computer Science standards, but I don’t know exactly what they are yet. The second is how the idea of computation has developed, going from Al-Kwarizmy developing algorithmic processes through Charles Babbage and Ada Lovelace developing the ideas behind doing it with machines, Alan Turing developing the theoretical underpinning of modern computation and John von Nuemann inventing the architecture of the computer, programmers like Margaret Hamilton writing the code for Apollo, and so on. This content is essential to include because it will engage more humanities-inclined students, but I don’t know if it belongs in standards.

The standards have levels ranking from what I might expect a young grade schooler to be able to learn up to what I think a small percentage of advanced high schoolers might potentially learn. The goal is to create an “all-some-few” approach to lesson design in which every level of learner is challenged and engaged.

Here are the complete standards:

  1. Algorithms
    1. Overview: many problems can be solved by a planned procedure of steps that can be carried out in a mechanical predictable way by a person or a machine
    2. Levels:
      1. Students can follow simple sets of instructions with only one outcome
      2. Students can distinguish between a mechanical and non-mechanical process
      3. Students can follow a set of instructions with conditional outcomes
      4. Students can describe algorithms verbally and visually
      5. Students can identify commands in a computer language that apply to steps in an algorithm
      6. Students can write a computer program implementing an existing algorithm
      7. Students can modify existing algorithms to get different results
      8. Students can make original naive algorithms to solve a problem
      9. Students can evaluate an algorithm for correctness and efficiency
        1. “Safe move”
        2. Asymptotic notation
      10. Students can understand proofs about the efficiency and accuracy of an algorithm
      11. Students can create an efficient algorithm
  2. Process & Application
    1. Overview: Machines can be programmed to execute algorithms using various coding interfaces that can be interpreted by the machine.
    2. Levels:
      1. Students can apply existing methods with or without parameters to get an output
      2. Students can match basic method keywords with desired outputs and order them in short functional segments
      3. Students can create simple conditional blocks that respond to hardcoded variable states
      4. Students can create conditional loops responding to hard-coded conditions and match them with loops in an algorithm
      5. Students can use main loops that run during the length of the program
      6. Students can create conditionals of moderate complexity that respond to data input by a user, and match them with branches on an algorithm
      7. Students can create iteration loops to move through collections of data based on loops in an algorithm
      8. Students can combine multiple conditionals and loops to create a single-function program
      9. Students can create simple functions matching a subprocess in an algorithm
      10. Students can create multi-function programs based on algorithms they have created
  3. Data & Classification
    1. Machines that do computations and apply algorithms store data of various types in different ways in order to perform operations on it.
    2. Levels:
      1. Students can identify different kinds of information, such as numbers, dates and text
      2. Students see how primitive kinds of data describe different kinds of real-world objects and situations
      3. Students understand that different kinds of operations and methods apply to different types of data
      4. Students can recognize complex data types that contain a number of primitive types and methods
      5. Students can identify how complex data types apply to real-world objects and problems
      6. Students can describe data types as superclasses and subclasses
      7. Students recognize complex data types that contain other complex types have methods or functions with different types as arguments
      8. Students can make original data classes to model real-world objects
      9. Students can identify and share data classes using a markup language such as JSON or XML
  4. Logic
    1. Computers at their core operate by evaluation of logical statements that follow certain logical rules.
      1. Students can classify statements as true and false
      2. Students can evaluate simple conditional statements based on truth or falsity and use them to make choices
        1. (“stand up if you’re wearing blue.”)
      3. Students can evaluate simple conditionals using conjunctions (AND) and disjunctions (OR)
      4. Students can evaluate multi-level conditional statements with basic operators
      5. Students can create basic conditional statements that can be used to solve real-world problems
      6. Students can apply more advanced operators such as XOR and NAND
      7. Students can apply Boolean operators to binary numbers
      8. Students can create complex Boolean operations to solve problems
  5. Environment & Interface
    1. When a human interacts with a machine there must be an interface through which the user provides data and instructions to the machine and the machine can provide information to the user
    2. Levels:
      1. Students understand the difference between input and output and can give some examples of each (not necessarily in a machine)
      2. Students can identify common input devices such as touchscreen, keyboard, mouse and camera, and can identify common output devices such as screen, speakers and printers
      3. Students can type short inputs and place things using a drag-and-drop interface with a plan for expected output
      4. Students can respond to basic computer requests for information, including username and password forms
      5. Students can interact with a computer in a text-based interface and use advanced GUIs
      6. Students can create text-based interactive environments for other users
      7. Students can used advanced GUI and text-based development environments with an expected outcome
      8. Students can create interactive environments for other users
      9. Students can understand and control how a device interacts with a computer at a machine level
  6. Networks & Communication
    1. Many machines communicate with other machines over different types of electronic connections.
    2. Levels:
      1. Students understand that devices they are using are connecting with other devices locally and over the internet
      2. Students can navigate a simple hyperlink environment
      3. Students can enter network addresses (such as URLs) with an expectation of reaching another device
      4. Students can understand and respond to events that occur through interfaces and distinguish them from events internal to the machine
      5. Students understand basic principles of how computers request, serve and interpret served data (what happens when you “go to” a Web page?)
      6. Students can create client-side interfaces that can be served over a network (such as an HTML page)
      7. Students can create interfaces that send and respond to data from the server during use (client-side programming)
      8. Students can create and interpret network requests at a text level
  7. Physical computing and sensing
    1. Processing machines can control other machines that collect information from the world perform physical work in the world according to a program.
    2. Levels:
      1. Students can identify devices that can connect to a machine and do physical work
      2. Students can identify what kind of physical work a device will be able to do
      3. Students can make a physical device do a simple motion or response, (such as spinning  a motor or turning on an LED)
      4. Students can plan simple motions for a connected physical device and explain it algorithmic fashion
      5. Students can convert an algorithm to control a machine into a simple program
      6. Students can plan a series of actions for a physical machine to solve a problem
      7. Students can plan and write a program that will make a physical machine solve a problem
      8. Students can modify physical machines to make them do different things than they were built for
      9. Students can make a physical machine to solve a problem and program it
  8. Debugging
    1. Often machines don’t do what we expected them to do or want them to do, which can result in an error message or in unexpected output. There are different types of errors that can happen in computing and many different reasons they can happen. Debugging is identifying the type and cause of an error and changing our input or the state of a program or machine so we get the output we expected.
    2. Levels:
      1. Students understand that an error message occurs because a program can’t interpret an input or because it’s in an incorrect state
      2. Students understand that an error can be understood by analyzing and changing input or the state of the computer or program
      3. Students can experiment with different types of input to analyze what is causing an error
      4. Students understand the three main kind of errors that occur when programming:
        1. Syntax or compile-time errors: the compiler won’t even try to run a command because it doesn’t understand it
        2. Runtime errors or exceptions: the compiler understands a command and attempts to run it, but the data it is using lead to an operation the computer can’t perform, causing the program to stop with an error (y=5/x, where x = 0)
        3. Unexpected output: the compiler understands a command and it runs without error, but doesn’t give you the output you were planning for
      5. Students can identify some causes of an error, such as unanticipated input, endless loops, memory overflows and incorrect data types
      6. Students can identify the type of error that’s occurring in a program and consider what kinds of actions might change the outcome
      7. Students can analyze error messages and use this information to find the location and cause of an error
      8. Students can anticipate the kinds of errors that might happen in a program and modify the program to avoid them
      9. Students can write methods that deal with exceptions in a way that records or logs useful information, allows the program to continue and gives a user-friendly output

 

Can We Escape the Forever Loop?

If you’ve used Scratch or a similar program to teach coding, it’s likely you’ve helped a student who asked why code like this isn’t working:

When green flag clicked - if(space key pressed) - Move(10)

The student is pressing the space key, but their sprite isn’t moving. They don’t understand why.

“Well,” you say, “that’s easy. What’s happening is the code’s only running once, and it happens instantaneously, so if you’re not already holding down space when the program starts, it sees that the key isn’t down, moves on, and ends the program. All you need to do is wrap it in a forev-”

And I’m going to stop you right there, before you doom the kid to a loop he probably won’t escape for years. Let’s go back in time. It’s likely you at some point learned to code using some kind of a console app, maybe Python or if you are as old as me maybe BASIC. In any case, you probably have written a HelloWorld2 program that went something like this:

name = input("Hi, what's your name?")
print("Hello " + name + "!")

Now let me ask you this. Why do you not need to do something like this?

while(name == "")
    name = input("Hi, what's your name?")
print("Hello nice to meet you " + name + "!")

In other words, how does the compiler know to just sit there and wait for you to enter your name before just moving on and running the program and printing “Hello  !”

If your answer is, “Well, that’s just how console apps work!” then I am a bit disappointed but I’ll give you another chance. Why do console apps work that way? In pretty much any console app, when you use an input command, it knows to sit there and wait until the user has entered some data ending with a linebreak (‘enter’) character.

Formally in programming this is known as an ‘event’. This is any change in state of the compiler’s environment; an event is often user input but doesn’t need to be. It can be a mouse click but it can also be the return of data from a network call or two objects colliding in a video game.

In a simple procedural program the only way to check for an event is to create an endless loop and check repeatedly 30-60 times a second. It’s not just Scratch that does it this way. Processing (and Processing JS in Khan Academy by extension) has the draw() function, which is just a forever loop. Greenfoot has the act() function, same thing. Even Arduino C is centered around the loop() function.

Except for the Arduino, all these are primarily game-creation engines. But real programmers rarely use a continuous loop like that. Most programs with user interaction are instead event-based. This means you create a handler that responds to an event like a mouse-click or key press. In JavaScript, for example, it’s something like this:

document.getElementById("myBtn").addEventListener("click", displayDate);

But that’s advanced programming! You can’t expect a simple program like Scratch to have event handlers. Oh yeah? How about this:

When (space) key pressed - Move 10 steps
An event handler in Scratch!

If you put in the above, it works out of the box. No Green Flag Clicked necessary. Oddly, I always thought of this as the more “basic” approach, probably because there is nothing to “start” the program. But really it could be seen as the more sophisticated approach. They have the start of full event-driven programming. Imagine if they had a block like this:

On event ( ) do:
The event handler Scratch should have

With something like this you would probably still have a few things stuff in the forever loop, but almost everything else – key presses, mouse clicks, collisions, changes in variable values, appearance and disappearance of sprites, etc. etc. – could depend on event handlers. Ideally there would be something to “turn on” the event handlers too, whether a green flag clicked or whatever. There is no reason that couldn’t be in there.

But what difference does it make? Why is the forever loop so bad?

Well, for one thing, if you ever want to teach any other kind of loop it is really difficult to come up with a way to work it in, because it’s already looping. If you try to loop something inside that, it will stop all the rest of the action of the sprite. If you want to iterate, or have a conditional loop, you have to kludge it by creating a counting variable or condition and checking it repeatedly in the forever.

But in an event-driven program with multiple different event “threads” (weird, Scratch has threading too!), other handlers could respond to different events while a previous thread is still executing. This gives you an opportunity to put different kinds of loops in.

More importantly, though, it would give students a better idea of how most programs actually work. They could create an interactive environment like a modern web page.

Also, you will help them understand that a loop that repeats forever without a built-in interrupt condition is normally a really bad idea. Really there usually is some kind of interrupt, whether the stop sign or the pause button in Greenfoot and so on. But that’s outside the program the students are writing.

More importantly, we could get away from the idea that the only reason for programming is to make video games. We’re never going to get anywhere with coding education until kids start making programs that do real things, not just play.

Why Front-End Is So Hard Nowadays

I’ve been thinking about teaching HTML/JavaScript lately and why I don’t do it. One of the main reasons is that front-end as it’s done today is much harder than learning a language like Python or Java or C. This will surprise you if you’re a developer who fell into a Rip Van Winkle type sleep in about 2002.

It used to be that making the “front end” of a web page (basically HTML + stylesheets + JavaScript) was a great way to get started learning to code. After all, you could start with something like this:

<html>
<body>
Hello world!
</body>
</html>

And hey, open that code up in a browser and it will still work! The difference is that in those days, every single element or file you added, no matter how complicated it was, was written by your own hand. You never looked at your file structure and said “what the hell is all this stuff for?” (At least, not if you recently wrote it.) And you could use code that you entirely wrote by hand for professional -level production! Sure, you could by using FrontPage or DreamWeaver, but even then if you spent a little time you’d understand what the code they put in was for.

And if you wanted to see how it was done, you could just go on the web and hit “show source.” You could read everything that made a web page do what it does, and if you spent enough time you could understand it.

Nowadays, however, professional-level front-end almost always involves some kind of “framework.”  The definition of a framework is kind of hazy, but I’m going to use a broad definition that includes everything from Angular to Ruby on Rails to .Net to React, knowing very well that those don’t really go in the same category. What many of them have in common is that there is a moment of instantiation where some huge file structure is automagically constructed for you. It will usually create something like this:

Angular File Tree

And that’s just the top tenth or so of it. Note that depending on the “framework” (again using that term very loosely) your file structure there could include a lot of backend stuff too, for example in Ruby or .Net.

So someone set all this stuff up to make it easier for you, right? No way you were going to make all those files. But here’s the problem: now you have a digital house of cards where if you screw up just the wrong thing the whole thing comes crashing down and stops working.

But, I mean, you can’t just leave it alone either unless you want to publish a page that says “Welcome to [framework]! Click here for a tutorial to make your page.” Presumably you started this whole process because you want to make a website with some content.

So a lot of the time you spend is learning what small tiny fraction of these files it’s (sort of) safe to screw with. And you may work with this framework for a very long time before you know what most of those files ever do. I’ve been doing .Net long enough to at least know what most of the files in an MVC file structure do. But sooner or later they’re going to change the whole framework and everything will be confusing again. If you don’t believe me as anyone who learned Angular 1.

And things get worse when you need to use more than one of these frameworks at the same time, as often you do. If you think that a .Net or an Angular framework alone are confusing, try to figure out how to shuffle these two houses of cards into a single house that still stands.

And forget seeing how someone else does something. Most professional javascript today goes through a minifier, Now if you try to read someone’s script you’ll see something like this:

minified javascript

 

 

 

 

 

 

 

Good luck trying to figure out how that works!

Of course you could still teach people to make a website the old-fashioned way. But the question is, is it worth it? Might it be that the baroque intricacies of cascading stylesheets will become as distant to users in the future as pointer-level memory management is to most people that use languages like Java or Python?

Not sure what to do about this. What people want from a web app nowadays requires these frameworks. But it’s sad to think of how it’s changed.

Help, I’m supposed to teach tech! What should they know?

Yesterday I got a message from a teacher on Twitter. She mostly teaches science but this year she’s supposed to teach a 9-week tech class. She said she was “not a techy but willing to learn” and asked me what I thought the kids should know by the time they are done. I was flattered to be asked, and it inspired me to write an answer I was happy with, especially the six things I think kids should learn in a tech class. Here’s a slightly modified version of what I wrote:

Thanks so much for asking this; it gives me a reason to re-think what I want my own students to learn. I started out thinking about specific concrete skills (using variables or understanding files, eDebuggingtc.), but realized that those aren’t the most important things.

The things that I think kids should learn from technology education are skills that all good programmers and engineers have, but aren’t specifically tech skills. Some of the main ones are:

  • Think algorithmically: learn to plan out a sequence of steps that can solve a problem
  • Break down a problem: separate it into smaller parts that are easier to solve than the original problem
  • Debug independently: when a solution you have isn’t working, start testing smaller parts of the solution to see which part isn’t giving you the result you were expecting so you can hunt down the problem
  • Modularize solutions: look for ways you can re-use parts of earlier solutions that worked in other problems
  • Open-source your solutions: put your solution in a form that your peers can understand them and use different parts as needed.
  • Import solutions into your own: when a peer has come up with a good way to solve a problem that’s part of the problem you’re working on, don’t re-invent the wheel. Use a modified version of their idea, while giving them credit of course.

Of course these are huge goals and not easy to impart to a student even if you have whole year with them, let alone 9 weeks. You didn’t say how many classes you have a week, but I’d focus on just a couple of them, maybe the first and second or first and third.

As for what specifically to do, this is challenging even if you are given clear goals, let alone if you don’t. I’m sure you already have, but the first thing I’d do is feel out the administration more to try to get a better idea of what they expect to come out of it.

Assuming they really don’t have a particular goal in mind, my advice is to be a little bit ambitious and aim for a target you might not achieve at least the first few times around. If you’re a Google Apps school, the students will learn how to use the apps in their other classes pretty quickly on their own. If this is the main focus of your class I predict they and you will be bored very soon.

Khan Academy ProgrammingOne of the things I highly recommend for this is the Khan Academy tech classes. It’s easy for the kids to log in with their Google Drive accounts and for you to create a class where you can monitor them. The classes are very self-directed, with videos accompanying an interactive programming window, so if students have headphones they can all proceed at a pace that works for them. As a teacher I’m sure you know that with any subject some students will take to it like a fish to water and others will have a great deal of difficulty. This is doubly true for programming.

Some things you might have them learn are:

If you continue to do this class and your school is willing to spend a little money (really very little) on some hardware, I’d recommend ordering some Arduinos from Adafruit. and teach kids to make some simple electronic devices such as these ones .

 

Best first “pro” language (part 2 – Javascript)

Javascript LogoThis is part of a series on what is the best first ‘pro’ language, meaning something that’s actually used for professional applications. Last week I talked about Python, this week I’ll attempt to face the monster that Javascript has become.

I’m old enough to remember when people didn’t even really consider Javascript a programming language. They called it a “scripting” language or some other diminutive. To be fair, in those days they weren’t necessarily wrong. In the late 90s and early 2000s when I was in the Web business, Javascript was good for nothing but juggling the HTML Document Object Model. The DOM is the complex framework in the browser the controls the appearance and content of your web page. It’s what gets changed when text changes on a rollover or a menu drops down.

That is what made me think, once, that Javascript was a good first language for all its flaws. One of the challenges of any programming language is getting the students’ work in front of other people in a way they can see what the students have accomplished. Java used to be able to do this with Java Applets that ran on a browser. But Applets are dead as a doornail because Oracle could never deal with the security vulnerabilities they entailed, so browser makers stopped running them. With Javascript, if your students can make a simple rollover or dropdown, you can put it live and tell people to come see it.

But there are serious obstacles to this approach. The main problem is that first the students must learn HTML, Cascading Style Sheets and the Document Object Model. HTML is pretty easy, you can teach them enough to be able to do something useful in a month or two. But CSS and the DOM are convoluted and unpredictable, scarred with the remnants of the late 90s browser wars when the two major browsers roamed the earth with DOMs completely different from the World Wide Web Consortium’s official version, and hapless front-end developers had to kluge their Javascript to deal with all of them at the same time.

For all that it might still be worth it it Javascript was sitting still enough to be able to get students to the point they could do a simplified version of what web front end programmers do today. But real-world Javascript has been transforming itself at a terrifying pace. In a way it no longer makes sense to think of Javascript as a single programming language. It’s more like the flu; just because you could deal with last season’s version, it doesn’t necessarily help you with the next one.

Javascript ModulesEvery few months, it seems, everyone is excited about a new front-end “framework.” Frameworks are new downloadable modules of Javascript and CSS that come up with some (supposedly) better way of handling things in the DOM of various browsers. A few years ago everyone was using jQuery, which isn’t exactly a framework maybe but was an easy way to do a lot of visual things like dropdown menus and more importantly get fresh information from the server without loading a whole new page using AJAX. But Google had developed their own way to do that using a framework called Angular which is based on the Model View Controller web paradigm. At the same time Facebook developed a framework called React that wasn’t made for client-server interactions but which many people consider better than Angular for dealing with events in the user interface. Now Google has made Angular 2 which is very different from Angular.

But there are a million other different approaches and ways to use Javascript, including add-ons that do “polyfills” which trick browsers into using features they don’t have built in, completely different languages like Typescript that “transpile” into Javascript so browsers can run it, the npm module loader and Node.js, which is a version of JS that can be used on the server side where languages like Java, Ruby or Python would normally go. Javascript itself has added new features like returning functions from functions; ECMA16, the new version of JS, has a bunch of entirely new syntax even though it mostly does the same thing the old version does. This post at Hacker News gives an idea of how confusing Javascript is today even for people who used to think they knew it.

None of this is necessarily bad; it may just be Javascript growing up and becoming a mature programming language. But maybe not a safe environment for a learner to be wandering around in. Of course you don’t need to learn Angular or React or Node or whatever to learn Javascript; by itself it can still be a pretty simple language. But if you learn it all by itself you lose the advantages of being able to put your programs in front of the user, and you have to deal with all of the other weaknesses of the language.

And there are a lot.

When Javascript was new it attempted to integrate the then cutting-edge paradigm of coding, which was Object Oriented Programming. This might make you think it had a lot in common with the similarly named Java, but it was an illusion. Java, like any other OOP language, is built around classes which become objects in a program. Javascript doesn’t have classes, it has “prototypes,” which are like classes in the sense that raisins are like chocolate chips in your cookie.

People have been trying to make prototypes more mature so they work like classes (in ECMA16 you can even call them classes, though they’re not really). But along the way everyone got bored and started chasing in the new shiny object in the programming world: functional programming.

I’m just learning pure FP myself (Haskell is the gold standard in the way that Java is the gold standard of OOP), so I can’t say if JS handles FP any better than it handles OOP. But this kind of tacking on is what makes Javascript such a hard language to follow. James Nicoll said of English, “We don’t just borrow words; on occasion, English has pursued other languages down alleyways to beat them unconscious and rifle their pockets for new vocabulary.” This describes the expansion of Javascript perfectly.

Then there is the ugly way that Javascript deals with data types. Some languages, like C or Java, are very strict about declaring what kind of data a variable can hold. Other languages like Python keep that away from the user but behind the scenes still have a good idea of what the data type of a variable is. And when you say x = 10 but you want x to increment by 0.01 you can tell Python to make x a float instead of an Integer.

Number data types in C and JavascriptIf you say x = 10 in Javascript then x’s datatype is…number. As far as JS is concerned x could become 87 billion or 0.0003. But as far as JS is concerned x could become the lyrics of the national anthem or a graphical DOM element. This is very, very far from the way a computer’s memory works, so when a student moves to a language that’s even implicitly typed like Python, let along statically typed like Java, they are going to be in for a terrible shock.

What’s worse is the casual way that JS “converts” one type into another, especially when you compare them, so for example 0 is “equal” to false is “equal” to an empty string is “equal” to undefined. I put “equal” in quotes because they’re not really equal, Javascript just acts like they are. This leads to Javascript’s ridiculous “triple-equals” comparison convention. As you probably know if you’ve done any programming, a double equals (==) is what you use when you want to know if two things are equal, so for example if(a==b){ //some code } means do whatever’s in the curly brackets if a is equal to b. (This is as opposed to “a = b” which assigns a to be whatever b is.) Double equals work in Javascript too, but because of JS’s ridiculous laziness with type conversion, if you want to make sure they are really equal (same value and same type) you have to say if(a===b) . In other words in Javascript (and only Javascript) you have to say “do this if a is equal to b, but I mean really equal!”

I’m not saying (here at least) that Javascript is a terrible language, but I am saying that Javascript is a terrible first language, with a few exceptions. Khan Academy’s Intro to JS is a good way to get kids’ feet wet with a programming language where they actually have to type the commands. In fact what they will be learning is Processing, a useful beginner programming language, but since this is another example of “do things in the little window by the code,” it does not count as a ‘pro’ language in the sense I’m using it here.

The other reason you might want to teach students JS is if you actually want them to build interactive web pages. In this case first teach students HTML and CSS together (start with CSS right away; in 2016 there is no use at all in teaching simple HTML with no styles). This should go on for about six months or so. At that point they’ll be ready to start manipulating the DOM in simple ways with JS.

Otherwise, let them learn JS when they have learned another language first.

When kids do something stupid on the computer

I am old enough to remember when stores like Radio Shack in the mall had computers sitting on display with nothing but a cursor blinking on a command line. There was no program running, no user interface to interact with. Inevitably the screen would look something like this (edited slightly to keep this blog PG):

trs80HELLO
SYNTAX ERROR: ‘HELLO’ IS NOT A COMMAND
WHAT IS A COMMAND
SYNTAX ERROR: ‘WHAT’ IS NOT A COMMAND
*&!# YOU
SYNTAX ERROR: ‘*&!#’ IS NOT A COMMAND

It’s hard to know what people who put the computers expected to happen. But what looks like vandalism isn’t, really. What probably happened here is that a kid who didn’t know how to work with a computer tried, assuming the computer would be designed to be cooperative. When they found it wasn’t, they had a normal angry reaction.

Recently I was co-teaching a class where the other teacher was teaching kids Blender. I knew Blender less than some of the kids, so I was more a fellow student than a co-teacher. But I’m also a grown-upSuzanne, so I studiously mimicked my co-teacher’s lessons, and soon learned a lot.

Some of the other kids did that too. But others, when it came to selecting the starting shape, picked not a sphere or a column but Suzanne, Blender’s built-in monkey head shape. Then they randomly selected various panels and stretched them in random directions until Suzanne looked like a jigsaw puzzle with a coupla pieces gone.

My co-teacher was incredibly patient, but I could feel his frustration. “Okay, that’s nice,” he said, on seeing the twisted parody of a monkey. “Now start again and follow the instructions please.”

If you’ve taught kids on computers you are familiar with this problem. I encounter the same thing when my kids, instead of naming their objects MySprite call them something like IAMLAZARRRRRR (and then can’t spell it when they try to refer back), or make a video game where all the sprites, the background and the obstacles are Nicholas Cage’s head or Honey Boo-Boo’s mom so you can’t see what’s going on.

To a child psychologist, what is happening is clear and predictable. When introduced to a new environment, kids start testing the extremities and boundaries. They want to see what can happen, what they can get away with. Play is the work of a child, as it’s said, and play is a step in learning.

From a teacher’s point of view, though, the problem is clear. In a specialized field like programming or using an advanced program there are narrow paths to success through wide fields of failure. The keys of a piano can be struck in an infinite number of ways, but only an insignificant portion of those will make a song. There is a tiny chance a kid will discover something useful this way, but the more advanced the system they’re working in the less likely they will.

Also, you have a lesson plan, and they are missing out on it as they screw around! You have got to get them on track NOW or they will be forever behind!

A hint to working with children: when you find yourself saying “I have to fix this NOW,” you’re courting failure (except, obviously, for situations where the children are literally in danger).

Firmly discouraging a child’s play is likely to lead to disinterest and alienation. So what do you do instead?

Here’s what I do:

“That’s a weird result! How did you get that?”

(Yes, I usually know, but I’ll let them tell me.)

“Wow, that’s cool, I’m going to try that later myself! Hey, I want to give you time to experiment later, but can you do the lesson right now, because I don’t want you to get behind.” (Yes, you really do have to give them time to experiment later.)

Of course this always gets them back on task 100% of the time. Haha, just kidding. They will probably continue to screw around and do inappropriate things sometimes. But at least you haven’t discouraged their natural curiosity, and in the future you can start to try to direct it.

As you go along, give them places where exploratory actions can get them useful results. Start to define boundaries for play that will get them somewhere. When they see this happening, they will become eager and want to follow it further. Now they’re on the hook, and you can start to reel them in!

Can coding be taught in an Agile way?

The traditional method of programming lessons continues to be giving a whole class a distinct assignment testing their ability to use whatever programming skill they were supposed to be learning that week: make a loop, get input, etc. The students, if they do the work, are left with a folder full of little programs that do nothing particularly useful. In the best case scenario they may refer back to them in the future as examples.

This is based on a sequential method of teaching programming. Hopefully at the end the students will be required to combine those skills into a more significant program, but I suspect that rarely happens. Even at the college level this method often continues, with the focus on learning the syntax of this or that particular language. It’s only the most advanced students that confront real problems with their programming.

There is a reason for that: a program that addresses a real problem will of necessity be long and involve a bunch of different keywords, concepts and procedures that must be learned in advance. It’s not reasonable for a single student to do it. And students who work together won’t have the skills to make their individual parts combine.

What if we, as software teachers, take the leadership role in making the parts of their program together?

As I’m imagining it, each small group of 2-3 students would be assigned a small part of a big program that is meant to address a real-world problem, such as acquiring real-world data and displaying it in an interesting way. They would only need to learn two or three distinct skills to do that. They’d have to practice this skill a few times first, then they’d be given a unit tester program and told the expected outcome.

Unit testers are already used in college classes, but every student gets the same unit test to solve. In this system I’d imagine each group would have to solve a different unit test. The tests would be designed so that each module that could solve it would fit together to make a working program.

Except of course it probably wouldn’t work together at first. Then they’d have to look at what the others did and see where the problem was. If this was done correctly the students would be having regular meetings every few weeks where they shared their progress and what they got working. In the process of collaborating they’d come to understand what the other units were doing.

But then they wouldn’t learn all the skills! you say. No, not at first. They’d learn one skill, and they’d really learn it. They’d have a bit of understanding of what everyone else did. And they’d have a program that really mattered.

I certainly don’t want to add on to the people abusing the word Agile in programming. Maybe I should use another term. But I think this works towards the sense that Dave Thomas intended. The students’ solutions would, at first, only solve the problems in the most trivial way. Then they’d work through harder and harder unit test cases. It would be up to the students at every point to see what’s missing. By sharing their work with other groups and seeing what they are doing they’d have a sense of collaboration. Ideally they themselves would come up with the distinct problems to be solved which would then be divided between groups.

I’ll be honest, I haven’t done this yet. Maybe it won’t work. But this year I am going to try it. I’ll list the outcome on the blog.

NetBeans: the Missing Step in Coding Education?

NetBeans LogoI’ve been talking about the need for a tool to transition from “move things around the little window by the code” teaching tools like Scratch, Khan Academy coding and Greenfoot. These are all great ways to start kids coding, but they are walled-off playgrounds with no connection to the outside world or even the rest of the computer you’re working on. Is there an accessible tool that allows students to easily do visually interesting things but also gives them access to code that can read and write files, create and connect to databases, and get data off the internet? And then I thought, what was that Java IDE that Sun made back in the 90s with a form builder, is that still around? And so I found myself at Netbeans.org.

Old AOL ScreenNetbeans is anything but a new tool; at 20 or so years old it’s practically geriatric by tech standards. When Netbeans came out Yahoo was the exciting new search engine, Mark Zuckerberg was a working on a media player as a high school project and a large percentage of internet sessions began with loud scratchy modem handshakes to AOL. I feared finding a neglected and forgotten product today, but Netbeans is quite up to date; the standard download comes with JDK 8 and tools for creating pages in Swing or JavaFX, the newer user interface module.
Don’t get me wrong; to do anything in NetBeans you have to know Java. So how does it help? The main way is that it makes creating user interfaces with Swing ridiculously easy using the forms design. To make a window you just select-click on your project, choose new and then choose JFrame form. You’ll see the window in the design view, and to your right you have a bunch of different UI elements like text boxes,  buttons, checkboxes and so on that you can drag and drop right on your frame.

Programming the UI is equally easy. To make an event listener for an element (that’s the code that happens when the button’s clicked or element’s changed or whatever), just double click on the element. You’ll be right UI elementsin the event listener class, so you can just write the code you want it to perform. (You can see more details in my first NetBeans lesson on my YouTube channel).

As I said, you’ll still have to know Java to do actually make the code in the listener, but with NetBeans your students can focus entirely on what they want their code to do rather than dealing with the the clunky Swing UI code or remembering the difference between addGroup() or addContainerGap().

But wait there’s more! NetBeans also makes it easy to create an Entity Class from Database. That means if you have a database connection you can easily make the students connect and start doing SQL commands with Java. It also allows you to create a Web Service Client. I’m not saying either of these are things kids could figure out on their own, but if you do the heavy lifting on the backend you can have kids do some serious programming with data that is not in a little box by the code window.

Apache LogoAfter I got excited about this, I immediately discovered that Oracle is planning on turning NB over to the Apache foundation as an open source project, and a sinking feeling filled my gut. I had experienced something similar before, when I got excited about teaching Microsoft’s fabulous XNA gaming platform in C# right before Microsoft dropped it like a used wad of gum. XNA became Monogame, but at least at the time Monogame was not what XNA had been. So I know well enough that “it’s becoming an open source project” is often the software industry’s equivalent of your parents telling you “the dog is on a beautiful farm where he can run and play all day.”

But Apache is not just any open source foundation; they are behind the most popular *NIX web server and Mozilla one of the most popular browsers – which you may well be viewing this page on – among many other projects like the Thunderbird mail app.

Even more encouraging was the thriving community of NetBeans developers I’ve discovered on Twitter. According to the NetBeans team there are more than a million users of NetBeans today, meaning a lot of commitment to keeping it alive and thriving. I wonder if these people realize NB’s potential as a learning tool for younger students?

I’m not going to get into the debate over whether NetBeans is better than Eclipse. Clearly some developers feel it is, but many more prefer the great purple circle (or one of the other popular IDEs like IntelliJ), and Eclipse may indeed be better for a commercial EE developer. For new students, however, it’s extremely intimidating with not a lot of handholds and no help with sorting out a parallelGroup from a sequentialGroup or a verticalGroup when you’re making a UI.

I’m experimenting now with NB as a teaching tool for students as young as 8th graders. I’ll continue to keep the blog up to date on how it works, and be sure to check out my NetBeans playlist on YouTube as it grows.

Teaching coding: The missing steps

It seems like every day someone is introducing a new tool to get kids into coding. Just recently Apple introduced their Swift Playground, with animations of kids making a weird pear-shaped blob thing move around a 3D world. We have the now-venerable Scratch, and Scratch Jr. for the really little kids, we have Hopscotch, we have the Hour of Code, we have Khan Academy coding and new tools that allow kids to program robots with Scratch-like code chunks. So that means that this generation should produce a huge new batch of computer-literate coders, right?

Missing Steps
Some steps are missing

Alas, probably not. I’m glad these first steps to coding are there, and they are essential. We also have plenty of steps higher up the mountain where adults, college-age kids or particularly motivated high-schoolers can learn more advanced coding: places like Udacity, Coursera, Pluralsight, Code School and so on. What we lack now is the tools, and maybe more importantly the teachers, to get people from these lower steps to the higher ones. It’s like staircase with the middle twenty steps replace by ropes and those wall-knob attachments from rock-climbing gyms. Some people will still get to the higher steps, but not many. Most will get to the top of the bottom row of steps, look around and say “that was fun, I made the robot move and turn; I wonder what we’re doing in art?”

But that’s fine, right? So most kids don’t go on and learn about networking. That’s advanced computer stuff! It’s not like every single computer is attached to some giant computer netw…oh.

Today we’re surrounded by computers, but unlike even ten or fifteen years ago, almost none of those computers does anything by itself!

Even applications that were once entirely local, like Microsoft Office or the Adobe Creative Cloud projects now depend on regular network connections. Remember the last time you were in a coffee shop and the WiFi didn’t work? I bet you didn’t get much done. You probably just put your computer away and got a book out or interacted with actual humans. Almost all computer work today involves having to download something from somewhere or look something up on Google. Even games are networked more often than not.

And it’s just going to get worse. More and more services are moving to the cloud; lots of organizations don’t even use Office anymore in exchange for Google Drive. More and more jobs involve getting complex data from a big cloud using APIs. And when the Internet of Things blows up, even your toaster will have an API.

Move the things around the little screen
Code can do ANYTHING!…in that window

But the programs the kids are learning to do, even a fairly advanced learning environment like Greenfoot that uses actual Java and begins to teach kids about objects and classes, all basically involve moving little shapes around a little screen on the side of the code. And sure sometimes you can blow the little screen up to your full screen, but it’s still a cozy little sandbox that has no contact with the rest of the world, unlike pretty much every other app they interact with.

I’m not saying there is anything wrong with these programs! I use many of them in my teaching. But there are very few places to go now when a kid is ready to get outside of that sandbox. Sure they can start learning Python, and if they’re patient they’ll stick with writing console apps for a month or two until they are able to start using PyGame and make some graphics. They can get into physical computing and start learning Arduino if they have the electronics gear and other hardware to make it possible. But as I mentioned, most Arduino programs (of the sorts most kids do) are actually very simple.

What is needed are tools that make it easy for kids to make simple network requests and access simple databases, tools that take some of the hard parts out (like making complicated database connection strings or working out complex network handshakes), while allowing kids to do the part that’s actually not that hard.

And the ideas aren’t that hard! SQL queries like “SELECT temperature FROM WeatherDatabase WHERE year>1990” or adding parameters to an http query like “?field=accidents&city=Omaha” are not that hard to to understand even for a middle schooler. But getting to the point where you can do that is. For now. It’s time for a tool to change that.

 

 

Best “pro” language to learn first? (Part 1 – Python)

Python LogoA common question I see is what is the best “pro” language for students to start with? There is no one right answer for this, because it depends on the kind of student and what your final objective is. I have some experience teaching a number of languages and know more of them, so I am going to offer some thoughts about starting with different languages that I hope help a teacher decide. When I say a “pro” language, I am speaking about something that is actually used for professional applications. That means obviously not Scratch, but also not something like Processing. These are both great languages to practice with before you learn one of the languages below, but as far as I know no one is creating any commercial applications in Processing or Scratch. I won’t address every possible language, because some of them (like Lisp) I just don’t know much about. I am going to do a series of posts starting with this same paragraph.

The first language I’ll address is Python, because it’s a popular learning language. As a beginning language Python has an enormous amount to recommend it. First of all it’s the most accessible language that I know of that’s actually used for professional code. You can get students doing something very quickly.

Flying with Python
XKCD #353 – Randall Munroe

It also has an enormous number of modules that users can download and include in their programs to get them doing some fairly advanced stuff fairly quickly. The creation of blocks through indenting is different from how most languages do it. But even when your blocks are enclosed in curly brackets as with C-derived languages, indenting them is the expected style. So it’s not so hard to go from:

def addNumbers(a, b):
    “Add some numbers”
    c = a + b
    return c

to:

int addNumbers(int a, int b)
{
    //Add some numbers
    int c = a + b;
    return c;
}

And yet I no longer start my students with Python. Why not? Two reasons:

Notice the main difference about the two functions above, not counting punctuation? Yes, it’s the data type ‘int.’ To me, when students get to this point I want them to be thinking about data types. We expect the function above to be called as addNumbers(20, 50). But in Python, what’s going to stop a person from typing addNumbers(“Hello “, “world”)? If you do that, you’ll get a string back instead of an integer. But if you look at the function you wouldn’t expect that outcome, and you wouldn’t know that if you were passing that answer to a different function that was not capable of handling strings. Worse, if instead you called addNumbers(“20”, “50”) — which could easily happen if the numbers are in variables and you’re careless about how you handle user input — then you’d get back a string that looked like a number (though the wrong number, “2050”).

The second reason is that Python is an interpreted language, not a compiled one. This means that you run a Python program straight from the source code. Python will just run until something doesn’t work, then it will stop with an error. This means students will not be exposed to the crucial difference between two kinds of errors: a compile-time or syntax error and a runtime error or exception. Compiled languages like C have to first be turned into code that the machine can understand. If you attempted to call the addNumbers function as  addNumbers(“20”, “50”) in a compiled language like C, Java or C++ the program would probably* not even compile, and you’d be informed that you tried to use strings where the program expected integers.

Say, however, that you have the user typing in the numbers in a compiled language. You could use code to tell a compiler to turn the user’s input into integers, so “50” becomes 50. The program will compile, because it will work if the user types in the right input. However, if the user types things that can’t be turned into numbers, like “Hello”, “World”, (or a decimal or a very big number that doesn’t fit in the integer data type) the program will probably* stop while running and return an exception. This is a vey different type of problem, and it helps teach students that even if you program does work, you have to prepare for getting the wrong kind of input that can make your program break.

However, you may disagree with me about the importance of these factors. If you just want your students to learn some basic programmatic thinking, Python may be the best starting place. You may feel that dealing with compiling and data types will turn off students who are lukewarm to coding.You might feel that Python is a good “bridge” between something like Processing and compiled, strictly typed languages like Java, then this also might be the best choice for you. And if Python is all you want your students to be able to do then of course teach them Python. After all, I know professional programmers for whom Python is their bread and butter.

If you do decide to teach your kids Python, the Python Software Foundation has a great tutorial here. I would recommend using this as a source rather than a direct teaching tool, unless you have very self-motivated students. Al Sweigart also has a great series of Python books here that I have used to good effect.

Next up I’ll be discussing starting students with Javascript.

*I say “probably” because it depends on the language and compiler; some compilers might just turn them into the number 0; and if it’s C maybe it would just use the pointers to the strings or something so you’d get an answer like -9832386 or something, because C is really hard as I’ll explain in a later post.