Frogram - this might be the best way to introduce programming to laymen

#beginners #tutorial #webdev #opensource

TL; DR

I created a website, frogram, which aims to introduce programming to anyone who has no previous experience in coding.

Background

Anthony Stewart and I were invited to hold an "Introduction to Programming" workshop for non-STEM students at The University of Manchester. Here is a story of how we ended up building Frogram.

Initial Idea

The initial idea that me and Anthony had, was to teach the basics of Python; then give out some challenges for the participants to work on, e.g. printing hello world 10 times, solve the quadratic equation etc.

However, we see two problems with this approach:

The challenges are not rewarding. There is no incentive for the participants to work on them. Why would they want to print hello world 10 times? They solved the quadratic equation, so what?
It is more like an "Introduction to Python the Programming Language" than an "Introduction to Programming" because the participants are likely to struggle more on language issues, e.g. incorrect indentations, incorrect syntax, rather than logic issues.

Frogger

To make the challenge more rewarding, we have this idea of asking the participants to win the Frogger game by writing some code. The code will essentially control the frog. It is obvious that playing games is much more rewarding than printing hello world 10 times.

The Frograming Language

We invented a frogger-specific language to minimise the time needed for fixing language issues. We want to make the language as minimal and restrictive as possible so that it could provide super helpful error message.

For example, since the available predicates are limited to only isGoalUp|isRiverUp|is(Car|Log|Wall)(Up|Right|Down|Left), if the user types isCardown with a lowercase d, the error message generated would be super specific saying: Expected "Down", "Left", "Right", or "Up" but "d" found. (Thanks to PEG.js for the amazing parser generator!)

Frogram - Frogger x Program

At last, combining the frogger and the frograming language, we have our final Frogram! Go ahead now and check it out! Any feedback would be greatly appreciated. Remember to star it on github. And more importantly share the site to your friends who wish to learn some about programming. And more importantly !

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.