Lesson 32 - More HTML

Today we continued our HTML scrapbook project.

This time we downloaded a picture of a motorbike and opened in vim, because she insisted on doing so. This is how it looked. Behind the vim window, there's the actual motorbike in the browser.

Then we went to edit the "kuvat.html" web page and added a new image tag, pointing to the local file we just downloaded. She writes quite well now, but insists on writing "pyärä" instead of "pyörä". It's a west coast thing.

Now there are two pictures in her scrapbook. I added some CSS to make it look a bit better. She was in a hurry to go to the kitchen to bake cookies, so I guess learning CSS will have to wait...

Lesson 31 - HTML

Today we had a lesson again just before bedtime.

I suggested we do some music stuff with Turtle Roy but she was like "naa, I wanna do vim stuff and go command-line again, it's been a while". So there we went.

We started working on a little scrapbook HTML page. So we fired up vim again.

    vim kuvat.html

She did well. She remembered how to enter insert mode and all. The first thing we added was this:

    <img src="">

What a bunch of meaningless noise that is, isn't it?. I tried to explain that this is an HTML document where you have to have "tags". This particular one is an image tag and the src attribute is used to point the location of the image. She didn't seem to pay much attention. I'm sure she was thinking along the lines of "this markup lang involves way to much boilerplate".

The next thing was to find her first picture. After some discussion we went googling for robot pictures and found one (picking a suitable search term and selecting the picture took quite a while indeed).

The hardest thing on this lesson was copying the image URL to the clipboard (she needs both her hands to do that). And then of course the notion of clipboard was entirely new to her. She insisted on having a look at the clipboard and I tried to explain that you cannot see it because it's inside the computer. You just have to believe that the URL is now on the clipboard honey. Cannot blame her for some scepticism here. State that's hidden from the user, waddup?

Finally we got back into vim and managed to paste the image URL between the quotes in the img tag. And POW! There was our first HTML document. She was quite disappointed in not seeing the picture in vim. But hey, all the WYSIWYG editors are crap, right?

Finally we opened it in the browser from the command-line using

    open kuvat.html

That was it! I hope we'll collect more fancy robot pics in the same scrapbook later. Maybe learn more HTML too.

Reaktor Kids Kode Skool

Yesterday we had the first "code school" for kids at the Reaktor office in Helsinki.

There was about ten parents and even more kids of ages 4 to 10 and we mostly played around with Turtle Roy. I had a very brief intro on the projector and then the kids and the parents just started coding together.

All the kids seemed amazingly concentrated and excited about programming to my surprise. I was prepared for a 30 minute session or so, but they just kept on coding! Only after 1 and half hours the first ones started to leave.

Here are some of the works the kids saved:

• Kiikarit 
• Harjoittelu
• Anna
• Jonas
• X-laatikko

Check out the concentraction here:

Most of the kids and daddies took notes too. This was one of the cutest:

That was amazing! And what's more amazing, I got volunteer daddys to organize the next meeting. Good times!

Lesson 30 - Bear and Daddy

She's learning the violin using method called Colourstrings, where they call the four strings of the violin with names karhu, isi, äiti, lintu (bear, dad, mom, bird in English). 

Today we started teaching the computer how to make the sounds karhu, isi, äiti and lintu. We started by trying how the bear (note G) sounds.

    play g

We played that in unison a few times and it seemed to be in tune with the violin. So we declared

    let karhu = play g

Next was isi, i.e. the note D.

    play d

That also sounded alright, but it revealed to us that our karhu was actually an octave too high. So we redefined 

    let karhu = play g/2

And that sounded perfect. Then we defined

    let isi = play d

And we were done with her patience. Next up: äiti, lintu.

Lesson 29 - Sequencing sounds

She has started to play the violin and likes to sing, play, dance and compose her own songs. Today I added some music capabilities to Turtle Roy to see if we can combine music and programming in our sessions.

First we tried the new play function. The function accepts any frequency and plays it for 500 milliseconds. There are also some predefined notes (c,d,e,f,g,a,b) that can be played.

So we started with

    play c

Then, to compose a sequence of notes into a single action, we used the familiar s function, and this is her first composition on the computer:

    s [play a, play b, play c]

Simple stuff, but demonstrates how you can use the same constructs (functions, lists, sequencing action) to do different things, including speech, music and graphics.

That was enough for today for her. Not for me though. I wanted to introduce parallel execution and multiple sound channels, of course. So now you can

    par [play [c,d,e], play [e,f,g]]

This means she can compose polyphonic music using functional programming techniques. How about that?

It was also fun to discover that the verbs compose and sequence apply to both programming and music and mean closely the same thing. It also occurred to me that music notes are just programs. 

The composer is a programmer and the musicians are CPU cores.

Lessons 27-28 - Haskell and Vim

A couple of days ago we had a lesson where we integrated a bunch of skills. 

We split the iTerm2 window into two panes using cmd-D and then started working on a new program file in the left pane. The coding assignment was to write a Haskell program that asks you "who are you?", then waits for keyboard input and finally greets you like "hello, Juha". 

It is known that there are only 2 hard problems in computer science, namely cache invalidation and naming. We haven't started coding for the browser yet, so for us, there's only naming. After a long consideration, she decided to name our program "housut" (pants). Then she typed it "hosut" and refused to correct the typo. So, we started editing "hosut.hs".

We wrote a single line of code:

    ask=say "who are you"

Naturally it took us a lot of time to decide what we should name our function that asks "who are you". But hey, that's what daddy does at work too. Strugglees with several layers of caches and, of course, naming.

    

The we moved to the right-hand side iTerm2 pane and started the Haskell REPL, namely ghci. Practically that is an interactive environment for running Haskell code, typed on the command-line, or loaded from a source file. We loaded our source file in ghci and called the ask function:

    $ ghci

    Prelude> :l hosut.hs

    Prelude> ask

It worked! But that was definitely enough for that lesson. She ran away and started playing with her sister. But a while later she returned to the computer, started Turtle Roy and drew a rectangle all by herself!

Today we also had a very brief session before sauna. We added a second line to the saved program at "hosut.hs".

    hello = i >>= say

This little function gets user input using the function i and "pipes" the result to the say function, using monadic composition, i.e. the ">>=" function. So there we are, working with Haskell monads in vim. And that was it for lesson 28!

Oh btw it's a pity that people find monads hard to understand. In the example, we were chaining two IO actions together using the monadic bind (>>=). So, for IO and many other monads, the monadic interface just gives you a nice way to "pipe" actions together. An equivalent way to implement hello, using so-called do-notation would be

    hello = do

      name <- i

      say name

That's more like the BASIC programs I wrote as a kid. But why introduce the overhead? Do-notation is just syntactic sugar for monadic composition. Of course, in a more involved example, it would make more sense. Like

    hello = do

      say "what's your name"

      name <- i

      say "what's your salutation"

      salutation <- i

      say ("hello " ++ salutation ++ " " + name)

OOPS, this is starting to become a monad tutorial. ABORT!

Girl B

Today, while waiting for my older daughter to get ready for her lesson, we started a Nerd Preschool with the younger one, who's almost 2. We discovered the mouse (cursor) on the screen and practised moving it around. The target was to start Terminal and then close the window using the red circle in the corner. And that was fun. We did it many times. 

The trackpad is indeed quite hard compared to direct point-and-click of today's touchscreens. But that's using it is learnable skill, as the older one demonstrated by easily scaling the terminal window, dragging from the lower right corner.

Then we practiced typing letters with caps-lock on. She has absolutely no idea which key produces which glyph or how the glyphs are related to the sounds. Yet, it was fun. Learning will occur if repeated.

Lesson 26 - Monadic composition

Today was a day of many firsts.

I had installd iTerm2 on her machine, so that we can easily split the terminal into two panes. It was great fun splitting and closing panes, and switching between them. We will use this skill for great good on the next lesson. This time it was just to get a fun start for a heavy lesson.

Because next we went straight into the world of Haskell and GHCI.

We started by recapping how to run a sequence of actions (I still haven't come up with a good Finnish word for action) using the predefined s function. Actually the s function is a synonym for sequence and part of a set of helpers I've defined for both Haskell and Turtle Roy to make programming a bit faster.

    s [say "mila",say "elena"]

She remembered the list syntax quite well, and autonomically closed the strings and the list with quotes/brackets.

Next, we tried a new function that's also part of my "Napero" predefs for Haskell.

    i

Here i is a shorthand for getLine which reads a line of user input and returns it. The story was that now the computer is asking you a question and you should answer by writing your name. It doesn't actually do much yet. But when "piping" it to say, it's already quite cool. So

    i >>= say

Just like piping in bash, but using a monadic bind (I suppressed the urge to explain monads at this time). Then we celebrated her first Interactive Computer Program!

But that was not enough. We went for the next goal: the first parametric function. So, we wrote a new function "hello" which has a parameter "name":

    let h n = s [say "hello", say n]

Then

    h "mila"

And the computer said "hello mila". And finally

    i >>= h

BOOM! 

I kept on explaining how the parameter thing works but I'm quite sure it will take several recaps to nail it. Finally we had a little Parametericity Quiz, played a bit with iTerm splits and that was it.

Lesson 25 - Birds in Insert Mode

Today I suggested we do some stuff with files but she wanted to use vim and create a new file containing bird species. First we had a look at the quite impressive list of files we had already created, by using ls. She wanted to see what's inside the "vkp" file and used cat to print out the file contents. She had some difficulty remembering cat, but with some tips she remembered it and was able to type it correctly. So, we saw the Finnish weekdays listed in the "vkp" file.

    maanantai tiistai keskiviikko torstai perjantai lauantai sunnuntai
    maanantai tiistai keskiviikko torstai perjantai lauantai sunnuntai
    maanantai tiistai keskiviikko torstai perjantai lauantai sunnuntai

    maanantai tiistai keskiviikko torstai perjantai lauantai sunnuntai

    maanantai tiistai keskiviikko torstai perjantai lauantai sunnuntai

    maanantai tiistai keskiviikko torstai perjantai lauantai sunnuntai

    maanantai tiistai keskiviikko torstai perjantai lauantai sunnuntai

    maanantai tiistai keskiviikko torstai perjantai lauantai sunnuntai

Then she wanted to jump to Turtle Roy, but I insisted we make the bird file first. And so we did. Her writing is improving all the time and she typed "vim linnut" almost without errors. The double consonant nn was the only part where she needed help.

Then with some help she got into insert mode and typed, mostly unhelped the two birds that came into her mind:

    varis harakka:

Oops! She had forgot she had to exit insert mode before using :wq to exit. But the cool thing was that she noticed her error immediately, pressed esc (exit insert mode) and was starting corrective actions by herself when I interrupted her and wanted to know what she was going to do. She said 

    "I'm gonna enter insert mode and delete that colon". 

Pow! I said that's very good, but there's an even easier way to do that. Just type x to delete the character at the cursor. So she did that, then save and exit.

I suggested we have the computer speak the new file but she wanted to have it speak the "vkp" file instead. And indeed she did that. Without any help.

    cat vkp|say

That's it for today! Now, bedtime.