Create Your Own Hacker Nebula with Angular Blockly

Over the past year, Mady and I have been running an after school coding program at her elementary school called ng-club. We started off just using Scratch and having the kids essentially play games, but we found that while the kids had fun and learned some concepts, they didn’t learn that much about real coding. At one point I tried to show them real JavaScript code and I could quickly tell that almost nothing from Scratch helped them understand the real code. So, I was determined to find a way to bridge the gap between the fun visual programming interfaces and real world coding. I soon discovered a popular Google library called Blockly https://developers.google.com/blockly/. Over the course of a few months, Mady and I built an Angular app that uses Blockly to create a development environment for kids (https://ngclub.app). I also started blogging the specific things we were teaching kids each week at https://ngclub.info. The basic gist, though, is that with Angular and Blockly you can have kids generate JavaScript by dragging code blocks around on the screen. In this talk Mady and I will talk about the Angular Blockly program as well as the approach we took to teaching kids with this software. Note that there isn’t a spot for this in the form, but my intention is to do this talk with my daughter, Madelyn.