Building Blocks of Computer Programming (Literally)

I started teaching myself to program in python a little over a year and a half ago, using a MOOC (Massive Open Online Course) on the edx platform. The course took me directly to practical uses of python, with emphasis on writing working lines of code as soon as possible. I took a handful of MOOCs geared towards python for beginners, and while each took a slightly different approach, none of them spent more than a few minutes covering the abstract ideas behind programming, and I found myself supplementing the MOOC materials with YouTube and Khan academy videos. It took a long time for me to fully grasp basic ideas such as looping. After many hours and a lot of frustration, I eventually got there. However, it took writing out code like the snippet below over and over:

Above I’m adding up a number with itself over and over from a list of numbers. The final number is eight, because the last number to be added up was 4. You can’t see that though from this code. One of the most useful habits I picked up from my first MOOC was using the print statement throughout my code, like so:

Now we can see how the values change with each step of the code. When I was first learning to program, ‘seeing’ the change helped immensely. This is effect was compounded when I went from writing small computer programs (a simple recipe with a few ingredients) to larger programs (several recipes for a elaborate dinner) to modules (a cookbook). Seeing how pieces of code fit together and how the data changed from line to line in complex programs becomes an investment.

As I continue to use python for research and in classes, I still feel like a beginner. My programs are always littered with print statements, even as I use more advanced IDEs (Integrated development environments) that step me through my code to debug. My need to ‘see’ what is happening in programs persists even as I get better at coding. I no longer think this is a beginner need, but an ongoing desire to connect with what I’m building (or what others have built) and ‘seeing’ is the simplest way to do that. I noticed that when I can’t ‘see’ the changes in output in a program, I feel disconnected to my work, and it’s harder to and understand programs and stay motivated .

I recently discovered visual programming and immediately took a deep dive into the topic. Visual programming allows users to describe a process using graphics and graphical elements such as shapes, colors and symbols as opposed to traditional programming, which is entirely text based. I found a community and a paradigm that directly aligned with my process! The MOOCs were great starting points and packed a lot into a few modules, however they seemed to glaze over some of the core concepts in programming in their effort to demonstrate how to write a program as soon as possible. It was difficult to make a connection with what I was working on the focus on pragmatism. Visual programming on the other hand shifts the focus on telling a computer what you want to do, instead of how to do it. It creates a way for programmers to connect their ideas (the ‘what’) together at the onset instead of writing out step by step instructions (or the ‘how’) initially. This allows users to understand basic programming concepts without actually writing any code, and is done by user descriptions of what they want to happen and then allowing the computer to decide how it is done.

This paradigm shift that is being embraced in several areas, and most of all in education. I’m going to show two examples of visual programming applications, but there are several out there!

Let’s start with Blockly (check out the demo). Blocky is a software that allows users to write code in several computer programming languages using blocks. Users fit blocks together to build small programs in their browser. As you assemble your blocks, you can see the written code, or how the computer has interrupted your block arrangement. The blocks can represent a range of items including concepts such as loops, math operations, text operations, and conditional logic. It’s developed by Google, and is open source (see the github). Here’s an example of something I built:

You can see the difference in colors, shapes, and block connecters. The blocks are organized into color categories by function. They fit together according to the rules of programming. I’m also looping over a list of numbers in this case. Here’s the code output in python:

This is the text output of what my blocks created. I connected the blocks of what I wanted my program to do, and Blockly figured out the how without me.

TidyBlocks is another great example of block-based coding. It’s written for the programming language R, and it’s designed for data analysis and visualization. TidyBlocks encapsulates a high level set of items – we’re connecting datasets and operations instead of variables and loops – but the concepts and functions are the same. So the ‘what’ we are working with is different, but the ‘how’ is the same. Since we humans care about the what and the computer cares about how, this works out. That is not to imply that ‘how’ is not important. What I want to show is that we can transfer some of that cognitive load to the computer and automate it. Whether or not that is appropriate depends on the context (see my links at the bottom for augments against this approach).

Using this tool, you can upload a dataset or use an example dataset provided, to transform, aggregate and plot data from that dataset by connecting blocks. You can also see what that code looks like as you build. There are categories of blocks based on their purpose. Below is a visualization and a table of data output, generated from a earthquake dataset. I’m grabbing a dataset, grouping values by a column and plotting two columns in a plot: