Icebergs and teaching/learning programming
Tags: programming, education, css
Published: 2021-04-05 17:52:58

---
title: Icebergs and teaching/learning programming
published: true
description: Inspired by some critical knowledge about icebergs, I came across a “baby idea” for how we could teach and learn programming and programming languages.
tags: programming, education, css
cover_image: https://notlaura.com/wp-content/uploads/2021/03/iceberg-3-1200x928.png
---

This post was originally published <a href="https://notlaura.com/icebergs-and-teaching-learning-programming/">on my blog</a> on March 17, 2021.

<!-- wp:paragraph -->
<p><em>This post is an expanded snippet from my <a href="https://notlaura.com/now/">Now page</a>, originally written March 15. It is a "baby idea", or, an idea that is new to me, and in time, will develop into something else or will fizzle out or will reveal that it already exists under a different name, and I can learn more about that.</em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>While watching Numberphile videos about the Mandelbrot set (<a href="https://www.youtube.com/watch?v=FFftmWSzgmk">this one</a> and <a href="https://www.youtube.com/watch?v=NGMRB4O922I&amp;list=PLt5AfwLFPxWJ8GCgpFo5_OSyfl7j0nOiu&amp;index=11">this one</a>), I discovered the mathematician <a href="http://www.hannahfry.co.uk/">Hannah Fry</a> via Youtube’s recommendation of <a href="https://youtu.be/ROnjZDdt8O8">her 2014 talk titled <em>I predict a riot!</em></a> about complexity science applied to the 2011 London riots. I looked at <a href="https://twitter.com/fryRsquared">her Twitter account</a> and saw <a href="https://twitter.com/GlacialMeg/status/1362557149147058178">this tweet from climate scientist @GlacialMeg about icebergs</a>, and that they are very frequently drawn incorrectly:&nbsp;as they are often drawn with the tip above a mass below, icebergs would actually float on their sides, not top to bottom.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In one of my talks, I used an iceberg to describe the relationship between declarative and imperative code, and generally to show that the code we write is at "the tip of the iceberg": </p>
<!-- /wp:paragraph -->

<!-- wp:gallery {"ids":[8418,8417],"linkTo":"none","align":"wide"} -->
<figure class="wp-block-gallery alignwide columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://notlaura.com/wp-content/uploads/2021/03/Captura-de-Pantalla-2021-03-15-a-las-2.03.30-p.-m.-1200x678.png" alt="Image of an iceberg with the tip above the water being declarative CSS, and below the water, C++ and Rust" data-id="8418" data-full-url="https://notlaura.com/wp-content/uploads/2021/03/Captura-de-Pantalla-2021-03-15-a-las-2.03.30-p.-m..png" data-link="https://notlaura.com/?attachment_id=8418" class="wp-image-8418"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://notlaura.com/wp-content/uploads/2021/03/Captura-de-Pantalla-2021-03-15-a-las-2.03.54-p.-m.-1200x680.png" alt="Image of an iceberg with the &quot;tip&quot; being &quot;the code we write&quot; and the majority base being &quot;what makes it work&quot;" data-id="8417" data-full-url="https://notlaura.com/wp-content/uploads/2021/03/Captura-de-Pantalla-2021-03-15-a-las-2.03.54-p.-m..png" data-link="https://notlaura.com/?attachment_id=8417" class="wp-image-8417"/></figure></li></ul><figcaption class="blocks-gallery-caption">Slides from my 2018 talk <em><a href="https://www.youtube.com/watch?v=cCeqH6m_K20">The Algorithms of CSS</a></em>, showing icebergs that would realistically be floating on their sides, not top to bottom as they are drawn.</figcaption></figure>
<!-- /wp:gallery -->

<!-- wp:paragraph -->
<p>Indeed, the iceberg I drew would in reality be floating on its side (or possibly upside down depending on the asymmetry). Here is an example using the <a href="https://joshdata.me/iceberger.html">Iceberger visualization tool by Joshua Tauberer</a>:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":8420,"width":610,"height":471,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
<figure class="wp-block-image size-large is-resized is-style-default"><img src="https://notlaura.com/wp-content/uploads/2021/03/Captura-de-Pantalla-2021-03-15-a-las-2.06.37-p.-m.-1200x928.png" alt="An image of a side to side iceberg showing Rust/C++ at one end, CSS at the other end above the water, and a point below the water." class="wp-image-8420" width="610" height="471"/><figcaption>How the iceberg from my slides would actually float according to the <a href="https://joshdata.me/iceberger.html">Iceberger tool</a> by <a href="https://joshdata.me">Joshua Tauberer</a>.</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>This new knowledge of an iceberg's true floating behavior synthesized with my existing programming languages iceberg plus recent inquiries into computer science education research has produced a new "baby idea": Maybe, instead of learning/teaching (web) programming from "the top down", or from CSS/HTML to JS to algorithms and data structures, or from declarative "easier" to learn languages to imperative "harder" to learn languages, we could teach/learn programming in a side-to-side and layer-to-layer fashion e.g. teach/learn HTML/CSS <em>with</em> its implementation, teach/learn declarative programming <em>with</em> imperative programming. Maybe, we could teach/learn different slices of programming by centering the interconnected nature of topics in programming and computer science. Maybe, we could teach _____ by centering _____.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here's what it the above iceberg might look like with some layers:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":8421,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
<figure class="wp-block-image size-large is-style-default"><img src="https://notlaura.com/wp-content/uploads/2021/03/iceberg-2-1200x928.png" alt="An image of the side to side iceberg showing Rust/C++ at one end, CSS at the other end, and jagged lines going down the iceberg, with a question mark at the third corner." class="wp-image-8421"/><figcaption>Layers of knowledge (created with the <a href="https://joshdata.me/iceberger.html">Iceberger tool</a> by <a href="https://joshdata.me">Joshua Tauberer</a>).</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Now, since each layer covers so much ground, you can move between them and build upon existing knowledge by way of concepts that are language agnostic. For example, if the layer after CSS / browser mechanics is React / compilers, you could move between those layers with the concept of trees. Like this:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":8422,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
<figure class="wp-block-image size-large is-style-default"><img src="https://notlaura.com/wp-content/uploads/2021/03/iceberg-3-1200x928.png" alt="An image of the side to side iceberg showing Rust/C++ at one end, CSS at the other end, and jagged lines going down the iceberg, with a question mark at the third corner. There is another jagged line going through the center of all layers labeled &quot;trees&quot;." class="wp-image-8422"/><figcaption>Trees are a concept that could connect many layers in the iceberg (created with the <a href="https://joshdata.me/iceberger.html">Iceberger tool</a> by <a href="https://joshdata.me">Joshua Tauberer</a>).</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>And, since trees and other platform-agnostic concepts are in so many places, you are sure come across them in every layer, and they can be a kind of knowledge lifeline you can always come back to when things aren't making sense. Discrete math and logic provide some very useful programming lifelines that I am learning about now, and I believe there are other programming lifelines stemming from art and design knowledge, and likely other areas I have yet to discover. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Also, you may notice that in the realistically floating iceberg representations above, the third corner of the iceberg, the one most underwater, is labeled with a question mark.&nbsp;I'm not sure what that corner would be in this metaphor, and perhaps that is because I haven't gotten there yet in my own knowledge of programming, and therefore, an indication of the accuracy of this metaphor!</p>
<!-- /wp:paragraph -->