Teaching the basics and beyond

[badlydrawnrob]

How do you teach Elm to complete beginners? To kids? To bootcamps that are on a track to start a career in programming?

I’ve read quite a few resources, having learned Lisp through How To Design Programs, and Elm through Elm in Action. I’ve taught kids Python with Code Combat and Ozaria — originally I learned Python through Codecademy. And still, I’m only good at an educational level and very small apps! I’m a hobbyist, not a professional.

So all that said, I think nothing beats a good structured book (ideally with a mentor) such as the Head First Series, making a notes file (like a little book) as you go, some code example files, and adding some material to Anki for revision. Documentation in Elm isn’t as good as it could be (not enough examples), but that too.

In my experience, Elm in Action is a great book to begin with, but when it hits Part 3 (Building Bigger) I’m thoroughly confused, and I expect many students will be too. Recursive types and routing is quite difficult, as is larger, nested encoding/decoding json, and the bigger your applications get the harder they become to disentangle and understand. Small apps good, big apps … not so good. At the larger scale, I think it’s better to be working with a professional mentor or understanding company.

So here’s my question for the community:

1. What would you teach to a kid? What would you leave out? Would you use a different language, such as Bootcamp? (there’s a difference between an 8 year old and a 16 year old, and Bootcamp probably suits the younger kids).
2. What would you teach to bootcamp early career starters, who may or may not have done a CompSci degree? (I wish I’d started with How To Design Programs, as it’s a great base for programming)
3. What tools and resources have you (or would you) use for these two cohorts?

I’m hoping in later iterations of Elm Lang some things are made easier, or at the very least explained in a thorough enough way. I think there needs to be it’s own version of How To Design Programs if it’s planning on being an educational tool for functional programming.

What do you all think?

There’s a few posts in here from @johan @Janiczek and @tomka on education, some are tools, some are resources — here’s the links:

• one, two, three

There’s many ways to teach, but functional programming is especially hard to explain. The language is often incredibly academic sounding!

[wolfadex]

There was a session at Elm Camp on Tuesday about education. I unfortunately didn’t write down any links to share. Hoping someone else from that session will chime in as well.

My brief takeaway from the session and my own experience is Elm is good for teaching anyone of any age/education level. People are using it to teach very young children and at universities. We mostly need more sharing of how to teach programming in general (see Felienne Hermans and http://hedycode.com/ for more on this general topic).

---

Separately @RyanNHG has a brand new series on YouTube that might cover some of this https://youtube.com/playlist?list=PLuGpJqnV9DXq_ItwwUoJOGk_uCr72Yvzb&si=q5MtolBqYU8PGnaj

[gampleman]

I’ve started my kids (9 and 8 yo) on Elm using elm-playground to draw simple pictures. So far they are loving it, but we haven’t gotten far on structure yet. I underestimated how much difficulty text-editing skills are going to cause them so my lessons are going a bit slower than anticipated. But my main goal is to make a very fast feedback loop (graphics programming is great for that) and only teach formal structures as they naturally encounter them.

[badlydrawnrob]

@wolfadex

Felienne Hermans

Oh that’s a shame. I think you’re right about teaching the basics in Elm, but I’m not so sure which things should be left out at an early age. Bootstrap: Algebra teaches basic types but I don’t think it teaches Typed programming in the way Elm expects. Type signatures take a lot of explaining, so perhaps leaving that out is better for kids.

I have her The Programmers Brain book knocking around somewhere, but haven’t read it yet. Hedy seems an interesting (and ambitious) project, although I’m not sure it’s a good idea to cater for every single language! Elm’s compiler seems better for discovering the language through error (at least as levels increase)

Hedy has a rudimentary stepper, which is a nice touch. That’s something Elm should have. I guess Hedy is still a work-in-progress. Have you had time to play around with it at all?

@gampleman

I’ve started my kids (9 and 8 yo) on Elm using elm-playground to draw simple pictures. […] I underestimated how much difficulty text-editing skills are going to cause them

Are you using the Playground package? There doesn’t seem to be much documentation for that. What specifically are they struggling with for text-editing?

Racket has a very nice images teach pack, which can be used with what they call Universe to build little games with a Model View Controller, not too dissimilar to Elm architecture.

There’s really a lot of thought and time gone into Racket’s teachpacks, but besides simple pictures I think it suits ages 16 and above. It’s still quite academic. Bootstrap: Algebra and it’s other courses (see above) would be better for younger kids.

The other problem I’ve found with HTDP’s method is that for younger minds, it seems like a lot of code for not much fun. I previewed a simple UFO landing for 15 year olds. They weren’t super impressed. Impressed about the code, but not about the output, when you’ve got so much visual stimulation these days!

---

Career starters

So there’s some ideas for kids there, but how to you onboard staff? Junior programmers? How do you feel about these coding Bootcamps for adults and how well do you think they prepare you for real projects?

Some might know how to code, some have no experience.

[wolfadex]

@badlydrawnrob

Career starters

I’ve on boarded boot camp graduates a few times and it varies quite a lot. Some are able to catch on quick and be productive, while others really struggle.

@badlydrawnrob

not so sure which things should be left out at an early age

Rob, who led the session on education, mentioned not introducing types till much later. Not sure what advice to give beyond that.

[badlydrawnrob]

Hmm. That’s interesting. Do you know if those who are productive had more experience before the Bootcamp? Do you think the people who struggle is a failing of the Bootcamp itself? 13 weeks for a full stack is a really short deadline!

I’d agree with Rob on types. You’ll discover them through the compiler (and errors) so gradual introduction, starting with simple ones, makes sense to me.

[robvdb]

In the workshops I start out using the Playground, explaining lists (such as a grocery list, or ingredients for a recipe), that your code needs to import the library of shapes (Playground) and that everything outputs to main.
In the process of getting from main = picture [ shape1, shape2.. ] to

main = animation view
view time = ...using time..

the concept of functions is naturally near. I explain functions as little machines that take things and output things and illustrate that with an animation (made in Playground so they can dissect everything).
We encounter situations described as “We throw this shape into rotate (using the pipe) so it can turn it” and “Animation has movement and movement needs time, so we need to throw that in somehow ”

During the course of the workshop series I keep listening to what topics they find interesting and keep teasing them with pieces of hopefully inspiring code that might go over their heads, but have at least some well recognizable parts they can edit/hack/tinker with (didn’t even shy away from elm-physics ) - they might realize how powerful the tool under their hands is, and that they understand part of it, and that their wielding power might increase by learning more about it.

Where they would encounter types differs; in the current course we found out (because of errors) about the difference between integer and floats, and in a previous series a squirrel would be able to look in different directions by moving its eye (in sideview):

look direction =
  case direction of
    Down -> move 5 -5
    Up -> move 5 5
    Forward -> move 5 0

I’d like to post more, but need to code some teasers for them at this moment; always running out of time, always enjoying it

[marciofrayze]

I started a project with that in mind: what if my first programming language ever was Elm when I was a teenager?

I got stuck after 10 lessons, using Elm Playground.

Right now I’m learning how to develop simple games with Elm myself to later get back to this project.

The website is currently in Brazilian Portuguese only: https://elm.dev.br and the source (MIT license) is available here: GitHub - marciofrayze/elm.dev.br: Código fonte do site elm.dev.br

[badlydrawnrob]

I’m bumping this to keep it open and will get back to reply properly tomorrow! I found Elm Playground quite fun until I got to grouping things and trying to animate them. @marciofrayze this looks nice … I’ll have to translate and read it!

[marcw]

Thank you very much for creating elm.dev.br @marciofrayze

@robvdb also mentioned during elm camp that he has started translating it to Dutch and English GitHub - robvandenbogaard/elm.dev.br: Código fonte do site elm.dev.br (This fork aims for adding English and Dutch translations.)

[badlydrawnrob]

Sorry for the delayed response …

Playing with shapes

@robvdb It definitely took me a little while to understand how to properly set up main for different situations. I also found the animation a little tricky too (when using groups of shapes). Interesting that you don’t expect them to know how everything in a program works, but so long as they can tinker with bits of it, they’re happy and feel like they’re making progress?

Definitely think type annotations take a lot of time to explain and get a bit narly as you increase the complexity of the functions. When you start looking at Json.Decode it’s harder to fit in your head, and takes quite a bit of explaining — I wouldn’t feel confident teaching that to teenagers! Simple functions are easy enough to explain.

• Which things did they tend to struggle with?

---

Thinking like a teenager

https://elm.dev.br

@marciofrayze Your examples looks really great! I can get the gist of them even though I can’t read Portugese. Why exactly did you get stuck?

---

@marcw @robvdb Great to hear you’re busy translating things — it’ll be a good read once it’s done. Are you planning to create a sister website, or is there an easy way to compile the site locally?

Teaching languages (and boredom)

Like I’ve mentioned already, lots of thought has been put into the educational teaching language packs of Racket Lang and HTDP book (especially section I, II, and III), and most of all it’s been road-tested with proper schools. I think it’s something to look for inspiration with Elm, too.

The idea of being less about the language and more about the concepts (learning how to think), and gradually scaling up the language so you’re only introduced to what you need per chapter is a healthy one I think.

I should also mention (from experience) that although gamified experiences like CodeCombat or Ozaria aren’t as good as HTDP for teaching concepts and how to think, boredom (and apathy) is a real problem when teaching GCSE and A-Level teens anything, so they do a pretty good job of making things visually appealing. Thats quite a big factor too.

I’ll repeat what I said before:

I previewed a simple UFO landing for 15 year olds. It looks boring. So much code, so little payoff! They’re used to lots of games and visual stimulation these days!

[marciofrayze]

@badlydrawnrob it’s very easy to compile the website. It uses mdbook. Just need to clone the code, install mdbook and run mdbook build. A static website will be created at the book folder.

My goal was to go as far as teaching how to create simple games. When trying to create the first game example, I got stuck. I’m not sure yet if Playground was the best option for that. When trying to create an interactive game, using keyboard and/or mouse and Playground, I was not able to find a nice and simple way to do it and explain it to a beginner. It got too complex too fast.

[badlydrawnrob]

Sounds easy enough, hopefully @robvdb will translate it enough for me to understand what you’ve been working on!

[robvdb]

@badlydrawnrob I went through the translations in my forked repo last week and saw that they need a bit of cleanup and review. I am quite busy, but plan to continue working on it this weekend.

@marciofrayze I agree that with the original Playground package making actual games gets complicated quickly. That is why I experiment with additions to it; one empowering thing would be easy to grasp collision detection and another selectable/clickable shapes. I am trying to find time to rethink parts of the workshop and prepare libs for another run starting September.

This is the approach for collisions in the update function of one of our games, with just the Shapes (can be in groups) as input:

finished =
      avatar time model.player
        |> moveRight model.progress
        |> collidesWith finish

The collision detection code is very crude at the moment (based on radii), but it is very usable.

[badlydrawnrob]

@robvdb Will look forward to seeing it. I think there’s two problems with complexity: css animations are far from ideal and might be where the complexity lies; functional programming is just more difficult than the Racket Lang examples I’ve given.

For instance, I find time more intuitive with the lisp programs. It’s also less strict about types which (depending on your perspective) makes it easier too. It seems you need to put in more thought with animated Elm programs.

On top of that, the modules you’d need to use for animations just aren’t well documented, and there seems to be very few tutorials out there for the Playground module. So you’re both doing a good job!

TL;DR I don’t think I’d want to manage much state with Elm lang as it stands today.

[passiomatic]

In the case you don’t know it yet, since you are using the playground as a starting point I would like to point out to Sunny Land - a platformer I made a while ago.

It uses the WebGL playground package which has few extension to the original Playground API to render tilesets.

It might be too complex for your target audience but it can give you some ideas. For example I created a couple of additional animations to “blink” an element and to translate horizontally a texture, the sky behind the level: sunny-land/src/Animation.elm at main · passiomatic/sunny-land · GitHub

Hope you find it useful!

Update: Playing the game again I’ve noticed that the player speed is super slow on Safari and too fast on Chrome/Firefox. This is a recent change, since it used to work great on all browsers.

[robvdb]

Thanks for mentioning it, and on first sight I’d say no the tile functions are great! I am looking for good angles for the next workshop series, and this might be a perfect continuation of our experiments with maps: pixelating lists of characters into mozaic(-animations) or 3D objects.

Where the house is built with layers of pixelated “floor plans”:

pixelhuis =
 group
  [ gras
  , [["b   2"
     ,"2   2"
     ,"2   2"
     ,"2   2"
     ,"2   2"
     ,"2   2"
     ,"2   2"
     ,"22222"
     ]
..
    ,["rrrrr"
     ,"r   r"
     ,"r   r"
     ,"r   r"
     ,"r   r"
     ,"r   r"
     ,"r   r"
     ,"rrrrr"
     ]
    ,[""
     ," rrr "
     ," rrr "
     ," rrr "
     ," rrr "
     ," rrr "
     ," rrr "
     ,""
     ]
    ]
    |> pixelate3d 25

[marciofrayze]

That’s awesome! Let us know about any future updates and what students think about this