8 ms·

Learnable Programming (2012)

166 points by noyesno 6y ago

djmips 6y ago
"People understand what they can see. If a programmer cannot see what a program is doing, she can't understand it." I think about this all the time. In my area I see a lot of programmers who don't do a great job at writing optimal code but it's not because they are lazy or stupid but because they cannot understand something they cannot see. This is why some kind of appropriate visual idiom for efficient core usage and time spent is a necessity in any project that cares about efficiency. I still don't think we have found the best visual idiom but we have to keep trying to make obvious visually, the way a computer really works.
- danybittel 6y ago
  I don't think there is a "best" way of doing it, it depends a lot of what the program is doing. Sometimes it's a tree, a graph, a list, rich text and so on. I think it would really be helpful if it was dead simple, to setup a visualization of a class or a group of classes, directly in code (as part of the PL) and have them update in real time. Right now it's "execute, dump graphviz code, drop it into graphiz". Then hopefully every class has a visualization just like every class (should) have Tests. Right now almost all of my classes have a "string Debug() const", method, to see it's content.
- zby 6y ago
  Well - the quote is not true. People who are blind can also understand things. Visual is only one way of understanding.
glenvdb 6y ago
I love this kind of stuff, but it feels like shooting fish in a barrel when the examples used are inherently visual. Lots of programming deals with abstract "things" that don't naturally lend themselves to being visualised, and it's there that some of the the more difficult challenges of programming exist (perhaps because they're difficult to visualise in the first place). I'd like to see Bret's brilliance tackle visualising those types of examples. Maybe most of it simply can't be visualised, but I feel like there's a lot of unrealised potential in that space.
- Swizec 6y ago
  > Maybe most of it simply can’t be visualized I feel like having programmed consistently since I was 9 (24years now, wow) this is my biggest strength. When it comes to code and architecture I sortof just see it in my mind. It’s very plastic. Like a malleable thing that my brain does without really knowing how or why. It’s just there. Can’t even put it into words. Can’t draw it either. Like when you ask math people how they do some of the really complex stuff
  - subjectsigma 6y ago
    This comment resonated a lot with me. Here's something I was thinking about recently: 1) I also started programming very young, maybe eight or nine years old. 2) My first language was Python and I still program in Python today, the programming language with the motto "there's only one way to do it". At some point I had to write Perl for a summer job and it's TMTOWTDI attitude and many symbols nearly broke my brain, I hated it for most of the summer. 3) I used vim and then emacs for a very long time, and recently started using Visual Studio Code and Pycharm. This made me realize that one of my favorite features of any editor was actually the minimap VSC provides on the side by the scrollbar (which Pycharm does not by default provide). Not having it, having it, and then not having it again made me realize I utilized it a surprising amount even though it's a seemingly trivial feature compared to, say, code completion or syntax highlighting. It was just very fast for me to jump around a large file by clicking on the minimap; I knew where to click to jump to the function or class I wanted. 4) I am a vicious style guide zealot. I got poo-poo'ed once by a coworker for submitting a large commit where the only changes were renaming things to snake_case. But the code just looked wrong to me, I had to do it. I write C/C++ in K&R style and find it difficult to read code not indented as such. I was sitting on my lunch break and all these things kind of crashed together into a great epiphany - maybe the reason I program in this specific way is because the code has to look a certain way in my head. Like I'm literally imagining a sort of minimap in my brain and if the syntax, conventions, order, spacing, etc. are wrong it screws up my very visual model because it literally looks wrong. The more rigidly the code follows the rules, the more visually consistent it is and the easier it is to structure. Your comment makes me wonder if there really is some semi-visual, semi-textual model that certain programmers form of their code, which is ever-present but really hard to express in other ways. I also wonder if this is a common thing, and if it helps or hurts when programming.
thewebcount 6y ago
I've only read the first few sections and am already agreeing fully. In fact, I don't think he goes far enough: > Likewise, guessing the third argument of the "ellipse" function isn't "learning programming". It's simply a barrier to learning. It's even worse than that. The "ellipse" function should only take 2 arguments - a point and a size (or 2 points if that's your thing). I see so much of this sort of terrible API design, especially in graphics where good API design makes things so much clearer and easier to use. Writing out a point and a size as 4 variables is madness.
- KMag 6y ago
  > The "ellipse" function should only take 2 arguments - a point and a size (or 2 points if that's your thing). How do you handle ellipses with different eccentricities? There are several equivalent representations of ellipses, one of which is the two foci and the sum of the distances from the edge to the two foci... so two points and a distance (or you could use two points and the major axis, etc., etc.) A pair of points don't uniquely define one ellipse. Likewise, a center and a "size" doesn't uniquely define an ellipse.
  - drdeca 6y ago
    I think maybe they meant for an ellipse drawing function which, like the one depicted in the webpage, only allows ellipses with both axis either horizontal or vertical, and was suggesting that the "size" argument would have 2 numbers to it.
    - thewebcount 6y ago
      Yes, that's what I meant. Obviously there are other ways to represent other types of ellipses, but given the constraints of the example in the article, I thought that was clear.
  - Izkata 6y ago
    > A pair of points don't uniquely define one ellipse. What if the two points were the corners of an enclosing rectangle? This is how, for example, Gimp does the ellipse selector tool.
euske 6y ago
I teach CS to freshmen. The author keeps telling something is "a wrong question", but I feel that he is tackling a wrong problem. The problems shown here are rather syntactic/superficial - it's mostly a matter of language/tool proficiency. The real problem I commonly see among students is to systematically verbalize a thought that you're initially unaware of - e.g. take the binary search for example. The idea can be easily understood, but realizing that a range can be expressed with two numbers (high & low) is hard. Another example is to enumerate all permutations of given items. It's easy to imagine what are the expected result for a certain input, but it's not easy to describe the systematic process - it'd require some mental leap. These are what many people are struggling with, and something we still don't know how to teach.
- kreddor 6y ago
  This is so spot on. I teach CS as well and just taking a problem and dividing it into small tasks to be solved is something many students struggle with even near the end of our programme. This "mental leap" (the bridge between the problem and the steps to solve it using code) is the real barrier in my opinion. Most students won't have a problem understanding a solution when presented with it and wrongly thinks that just understanding a solution is the end goal, when arriving at it is the real challenge.
  - Mauricebranagh 6y ago
    That's interesting breaking a problem down into steps seems such an intuitive approach. Coming from a technical programming background Middle Out is the methodology I often use BTW Which level are you teaching at? I would expect University students to be capable of "taking a problem and dividing it into small tasks "
    - kreddor 6y ago
      I agree. To me, it's the only approach, but I've been doing it for so long. On some level, the students understand this as well, but doing it is a different matter, especially when it comes to programming. I teach on some very practice-orientated higher education programmes in Denmark at the level of a bachelor's degree. We tend to get different types of students than those who would apply for a bachelor's degree at one of our universities, which could also be part of the explanation.
emmanueloga_ 6y ago
imho we are still riding the peak of inflated expectations when it comes to Bret Victor stuff. I'd rather see focus in making our current batch of tools way better rather than looking for direct manipulation methods, A.I. assisted no-code environments, novel user interfaces, retro-futuristic hypercard-excel mashups, etc etc</grinch> :-p To be fair "seeing" doesn't necessarily mean drawing vector graphics, any advance helping reveal hidden structure of a codebase or generate better documentation would also allow us to better "see" the working of the code... I'm all for that! I hope things like model driven development get a second renaissance at some point, without the burden of UML, the sad XML reputation, "extreme programming" BS and such. One project I like that's futuristic, and yet has reasonable goals, is Unison [1]. 1: https://www.unisonweb.org/ https://www.unisonweb.org/
- Kwantuum 6y ago
  > To be fair "seeing" doesn't necessarily mean drawing vector graphics, any advance helping reveal hidden structure of a codebase or generate better documentation would also allow us to better "see" the working of the code... I'm all for that! This is basically what a good debugging environment is. Some of the best tooling out there is the dev-tools of modern browsers: you get a regular debugger where you can step through code and see the state, you also get some performance and memory visualization tools, you get an interactive html editor in which changes are reflected in real time, you get color pickers when modifying css colors, you can visualize the timing of requests, and you get autocomplete propositions all over the place.
  - emmanueloga_ 6y ago
    100% agree, debuggers are often neglected. Chrome's debugger is one of the exceptions. Java has great debuggers too. Debuggers are about the dynamics of the program... I'm thinking more about the static structure of the codebase. Tools like sourcegraph [1] address some of that. The STEPS report [2] comes to mind for other cool ideas in this direction: it is easier to navigate the code if there's less of it! 1: https://about.sourcegraph.com/ https://about.sourcegraph.com/ 2: http://www.vpri.org/pdf/tr2012001_steps.pdf http://www.vpri.org/pdf/tr2012001_steps.pdf
ipsum2 6y ago
For context, Khan Academy used some of Bret Victor's writings as inspiration for their teachable programming courses back in 2012. A lot of their work was well-intended but missed the point of his essays, and this is Bret's response. Not sure if Khan Academy improved their course afterwards.
drdeca 6y ago
Does it work though? Suppose I want to minimize the time taken from someone having not done any programming, to implementing a B+ tree. Is this really what you would recommend? Also, sometimes code takes a long enough time to run that one can't instantly show the results upon changing some code. That's not something you can dismiss with "that's just asking the wrong question". There are actually things that need computing, and some of them can't be done quickly. I wonder if a good measure of a programming curriculum might be, how quickly can a student become able to make something self-hosting (though, the curriculum should have various natural stopping points before this point, depending on what skills they personally need).
- tobr 6y ago
  > Also, sometimes code takes a long enough time to run that one can't instantly show the results upon changing some code. That’s true, but it’s not a good argument for not giving instant feedback when it is possible.
dang 6y ago
Discussed at the time: https://news.ycombinator.com/item?id=4577133 https://news.ycombinator.com/item?id=4577133
mettamage 6y ago
I've read this post time and time again. But I'd like to mention, for me learnable programming is and has been firing up a debugger. I'm learning 3 things because of it: 1. See how state changes 2. See what hidden state there is 3. See how state changes if I interact with it. E.g. in C by changing register values or variables. In Python by changing variables.
- mettamage 6y ago
  I would also like to mention that university TAs/teachers didn't teach me how to use one (never). I just ran into a CS student that already happened to be an experienced programmer, and he showed me.
nbaksalyar 6y ago
If you liked this article, you should not ignore Bret Victor's recommendation to read Seymour Papert's "Mindstorms" [1]. Whilst "Learnable Programming" is a critique of programming education approaches, Papert's book can be seen as a critique of the education system. It was truly ahead of this time. This book describes ideas behind Logo/Turtle and its use for teaching programming, but it goes beyond just that - it's more about teaching everything through programming, including maths and geometry. Shameless plug: I'm also trying to implement these ideas at Low-Level Academy [2], teaching systems programming concepts in a visual way. [1] http://worrydream.com/refs/Papert%20-%20Mindstorms%201st%20ed.pdf http://worrydream.com/refs/Papert%20-%20Mindstorms%201st%20e... [2] https://lowlvl.org/ https://lowlvl.org/
Wowfunhappy 6y ago
I want this IDE. I want to be able to write a loop and see a timeline of all the steps, arranged like these video concepts. Certainly for teaching children—the 11-year-olds I taught at Girls Who Code pre-COVID would absolutely benefit from something like this—and possibly even for my own use when debugging certain types of problems, depending on the editor's robustness. This article was written eight years ago, and every year since, it has been dutifully posted to Hacker News, where we all stare in wonder at the concept... and yet nothing like this exists yet? "Why has no one else done a ton of work (that I'm also not planning to do)?" is never a great question, so I don't want to be too flippant... but seriously, it would be an excellent project, either for someone stuck at home in lock down, or possibly even as the basis for some sort of coding education startup.

166 points by noyesno 6y ago

"People understand what they can see. If a programmer cannot see what a program is doing, she can't understand it." I think about this all the time. In my area I see a lot of programmers who don't do a great job at writing optimal code but it's not because they are lazy or stupid but because they cannot understand something they cannot see. This is why some kind of appropriate visual idiom for efficient core usage and time spent is a necessity in any project that cares about efficiency. I still don't think we have found the best visual idiom but we have to keep trying to make obvious visually, the way a computer really works.

danybittel 6y ago
I don't think there is a "best" way of doing it, it depends a lot of what the program is doing. Sometimes it's a tree, a graph, a list, rich text and so on. I think it would really be helpful if it was dead simple, to setup a visualization of a class or a group of classes, directly in code (as part of the PL) and have them update in real time. Right now it's "execute, dump graphviz code, drop it into graphiz". Then hopefully every class has a visualization just like every class (should) have Tests. Right now almost all of my classes have a "string Debug() const", method, to see it's content.
zby 6y ago
Well - the quote is not true. People who are blind can also understand things. Visual is only one way of understanding.

glenvdb 6y ago

I love this kind of stuff, but it feels like shooting fish in a barrel when the examples used are inherently visual. Lots of programming deals with abstract "things" that don't naturally lend themselves to being visualised, and it's there that some of the the more difficult challenges of programming exist (perhaps because they're difficult to visualise in the first place). I'd like to see Bret's brilliance tackle visualising those types of examples. Maybe most of it simply can't be visualised, but I feel like there's a lot of unrealised potential in that space.

Swizec 6y ago
> Maybe most of it simply can’t be visualized I feel like having programmed consistently since I was 9 (24years now, wow) this is my biggest strength. When it comes to code and architecture I sortof just see it in my mind. It’s very plastic. Like a malleable thing that my brain does without really knowing how or why. It’s just there. Can’t even put it into words. Can’t draw it either. Like when you ask math people how they do some of the really complex stuff
- subjectsigma 6y ago
  This comment resonated a lot with me. Here's something I was thinking about recently: 1) I also started programming very young, maybe eight or nine years old. 2) My first language was Python and I still program in Python today, the programming language with the motto "there's only one way to do it". At some point I had to write Perl for a summer job and it's TMTOWTDI attitude and many symbols nearly broke my brain, I hated it for most of the summer. 3) I used vim and then emacs for a very long time, and recently started using Visual Studio Code and Pycharm. This made me realize that one of my favorite features of any editor was actually the minimap VSC provides on the side by the scrollbar (which Pycharm does not by default provide). Not having it, having it, and then not having it again made me realize I utilized it a surprising amount even though it's a seemingly trivial feature compared to, say, code completion or syntax highlighting. It was just very fast for me to jump around a large file by clicking on the minimap; I knew where to click to jump to the function or class I wanted. 4) I am a vicious style guide zealot. I got poo-poo'ed once by a coworker for submitting a large commit where the only changes were renaming things to snake_case. But the code just looked wrong to me, I had to do it. I write C/C++ in K&R style and find it difficult to read code not indented as such. I was sitting on my lunch break and all these things kind of crashed together into a great epiphany - maybe the reason I program in this specific way is because the code has to look a certain way in my head. Like I'm literally imagining a sort of minimap in my brain and if the syntax, conventions, order, spacing, etc. are wrong it screws up my very visual model because it literally looks wrong. The more rigidly the code follows the rules, the more visually consistent it is and the easier it is to structure. Your comment makes me wonder if there really is some semi-visual, semi-textual model that certain programmers form of their code, which is ever-present but really hard to express in other ways. I also wonder if this is a common thing, and if it helps or hurts when programming.

thewebcount 6y ago

I've only read the first few sections and am already agreeing fully. In fact, I don't think he goes far enough: > Likewise, guessing the third argument of the "ellipse" function isn't "learning programming". It's simply a barrier to learning. It's even worse than that. The "ellipse" function should only take 2 arguments - a point and a size (or 2 points if that's your thing). I see so much of this sort of terrible API design, especially in graphics where good API design makes things so much clearer and easier to use. Writing out a point and a size as 4 variables is madness.

KMag 6y ago
> The "ellipse" function should only take 2 arguments - a point and a size (or 2 points if that's your thing). How do you handle ellipses with different eccentricities? There are several equivalent representations of ellipses, one of which is the two foci and the sum of the distances from the edge to the two foci... so two points and a distance (or you could use two points and the major axis, etc., etc.) A pair of points don't uniquely define one ellipse. Likewise, a center and a "size" doesn't uniquely define an ellipse.
- drdeca 6y ago
  I think maybe they meant for an ellipse drawing function which, like the one depicted in the webpage, only allows ellipses with both axis either horizontal or vertical, and was suggesting that the "size" argument would have 2 numbers to it.
  - thewebcount 6y ago
    Yes, that's what I meant. Obviously there are other ways to represent other types of ellipses, but given the constraints of the example in the article, I thought that was clear.
- Izkata 6y ago
  > A pair of points don't uniquely define one ellipse. What if the two points were the corners of an enclosing rectangle? This is how, for example, Gimp does the ellipse selector tool.

euske 6y ago

I teach CS to freshmen. The author keeps telling something is "a wrong question", but I feel that he is tackling a wrong problem. The problems shown here are rather syntactic/superficial - it's mostly a matter of language/tool proficiency. The real problem I commonly see among students is to systematically verbalize a thought that you're initially unaware of - e.g. take the binary search for example. The idea can be easily understood, but realizing that a range can be expressed with two numbers (high & low) is hard. Another example is to enumerate all permutations of given items. It's easy to imagine what are the expected result for a certain input, but it's not easy to describe the systematic process - it'd require some mental leap. These are what many people are struggling with, and something we still don't know how to teach.

kreddor 6y ago
This is so spot on. I teach CS as well and just taking a problem and dividing it into small tasks to be solved is something many students struggle with even near the end of our programme. This "mental leap" (the bridge between the problem and the steps to solve it using code) is the real barrier in my opinion. Most students won't have a problem understanding a solution when presented with it and wrongly thinks that just understanding a solution is the end goal, when arriving at it is the real challenge.
- Mauricebranagh 6y ago
  That's interesting breaking a problem down into steps seems such an intuitive approach. Coming from a technical programming background Middle Out is the methodology I often use BTW Which level are you teaching at? I would expect University students to be capable of "taking a problem and dividing it into small tasks "
  - kreddor 6y ago
    I agree. To me, it's the only approach, but I've been doing it for so long. On some level, the students understand this as well, but doing it is a different matter, especially when it comes to programming. I teach on some very practice-orientated higher education programmes in Denmark at the level of a bachelor's degree. We tend to get different types of students than those who would apply for a bachelor's degree at one of our universities, which could also be part of the explanation.

emmanueloga_ 6y ago

imho we are still riding the peak of inflated expectations when it comes to Bret Victor stuff. I'd rather see focus in making our current batch of tools way better rather than looking for direct manipulation methods, A.I. assisted no-code environments, novel user interfaces, retro-futuristic hypercard-excel mashups, etc etc</grinch> :-p To be fair "seeing" doesn't necessarily mean drawing vector graphics, any advance helping reveal hidden structure of a codebase or generate better documentation would also allow us to better "see" the working of the code... I'm all for that! I hope things like model driven development get a second renaissance at some point, without the burden of UML, the sad XML reputation, "extreme programming" BS and such. One project I like that's futuristic, and yet has reasonable goals, is Unison [1]. 1: https://www.unisonweb.org/ https://www.unisonweb.org/

Kwantuum 6y ago
> To be fair "seeing" doesn't necessarily mean drawing vector graphics, any advance helping reveal hidden structure of a codebase or generate better documentation would also allow us to better "see" the working of the code... I'm all for that! This is basically what a good debugging environment is. Some of the best tooling out there is the dev-tools of modern browsers: you get a regular debugger where you can step through code and see the state, you also get some performance and memory visualization tools, you get an interactive html editor in which changes are reflected in real time, you get color pickers when modifying css colors, you can visualize the timing of requests, and you get autocomplete propositions all over the place.
- emmanueloga_ 6y ago
  100% agree, debuggers are often neglected. Chrome's debugger is one of the exceptions. Java has great debuggers too. Debuggers are about the dynamics of the program... I'm thinking more about the static structure of the codebase. Tools like sourcegraph [1] address some of that. The STEPS report [2] comes to mind for other cool ideas in this direction: it is easier to navigate the code if there's less of it! 1: https://about.sourcegraph.com/ https://about.sourcegraph.com/ 2: http://www.vpri.org/pdf/tr2012001_steps.pdf http://www.vpri.org/pdf/tr2012001_steps.pdf

ipsum2 6y ago

For context, Khan Academy used some of Bret Victor's writings as inspiration for their teachable programming courses back in 2012. A lot of their work was well-intended but missed the point of his essays, and this is Bret's response. Not sure if Khan Academy improved their course afterwards.

drdeca 6y ago

Does it work though? Suppose I want to minimize the time taken from someone having not done any programming, to implementing a B+ tree. Is this really what you would recommend? Also, sometimes code takes a long enough time to run that one can't instantly show the results upon changing some code. That's not something you can dismiss with "that's just asking the wrong question". There are actually things that need computing, and some of them can't be done quickly. I wonder if a good measure of a programming curriculum might be, how quickly can a student become able to make something self-hosting (though, the curriculum should have various natural stopping points before this point, depending on what skills they personally need).

tobr 6y ago
> Also, sometimes code takes a long enough time to run that one can't instantly show the results upon changing some code. That’s true, but it’s not a good argument for not giving instant feedback when it is possible.

dang 6y ago

Discussed at the time: https://news.ycombinator.com/item?id=4577133 https://news.ycombinator.com/item?id=4577133

mettamage 6y ago

I've read this post time and time again. But I'd like to mention, for me learnable programming is and has been firing up a debugger. I'm learning 3 things because of it: 1. See how state changes 2. See what hidden state there is 3. See how state changes if I interact with it. E.g. in C by changing register values or variables. In Python by changing variables.

mettamage 6y ago
I would also like to mention that university TAs/teachers didn't teach me how to use one (never). I just ran into a CS student that already happened to be an experienced programmer, and he showed me.

nbaksalyar 6y ago

If you liked this article, you should not ignore Bret Victor's recommendation to read Seymour Papert's "Mindstorms" [1]. Whilst "Learnable Programming" is a critique of programming education approaches, Papert's book can be seen as a critique of the education system. It was truly ahead of this time. This book describes ideas behind Logo/Turtle and its use for teaching programming, but it goes beyond just that - it's more about teaching everything through programming, including maths and geometry. Shameless plug: I'm also trying to implement these ideas at Low-Level Academy [2], teaching systems programming concepts in a visual way. [1] http://worrydream.com/refs/Papert%20-%20Mindstorms%201st%20ed.pdf http://worrydream.com/refs/Papert%20-%20Mindstorms%201st%20e... [2] https://lowlvl.org/ https://lowlvl.org/

Wowfunhappy 6y ago

I want this IDE. I want to be able to write a loop and see a timeline of all the steps, arranged like these video concepts. Certainly for teaching children—the 11-year-olds I taught at Girls Who Code pre-COVID would absolutely benefit from something like this—and possibly even for my own use when debugging certain types of problems, depending on the editor's robustness. This article was written eight years ago, and every year since, it has been dutifully posted to Hacker News, where we all stare in wonder at the concept... and yet nothing like this exists yet? "Why has no one else done a ton of work (that I'm also not planning to do)?" is never a great question, so I don't want to be too flippant... but seriously, it would be an excellent project, either for someone stuck at home in lock down, or possibly even as the basis for some sort of coding education startup.