On improving my simple codePen clone Junior-Dev-Team

I run a programming course in my kids' primary school since two years with kids between 8 and 10 years old. The main reason for doing it was to get my kids into coding and also to give other kids a chance to get into coding very early.

It is a lot of fun and usually, we code a simple TicTacToe game throughout the course.

To do the programming, kids use an iPad because its the only available hardware in school. And because I do not want to force parents to create accounts for a website like https://codepen.io/, I created a very simple clone that satisfies my needs: https://www.junior-dev-team.de/.

It is currently a very basic Python Flask application with a bit of Tailwind CSS and simple JavaScript. I even do not use a database, but just simple JSON files to manage the projects and accounts.

This is by the way an extremely valuable experience: There is nothing more demanding than a bunch of kids either running into an error or asking what to do next - all at the same time. You can learn a lot about ad-hoc problem-solving and expectation management.

Learning from experience, it is quite hard for the kids to type on the iPads and also for me to figure out bugs on the fly since the normal text areas do not provide any help and also the iPads want to autocorrect all input to proper German.

https://www.junior-dev-team.de/ definitively has some shortcomings, so I am currently improving it:

• replace <textarea>s with https://codemirror.net/

• replace Flask + JSON files with a proper Django application

• replace Tailwind CSS with https://v2.picocss.com/ - I like Tailwind CSS but on the other hand, I find it weird to use.

The problems to get Django up and running, I already explained in https://blog.outsidecode.com/run-django-50-on-a-chromebook.

CodeMirror itself was not too easy for me either. Even if I played a lot with React, I never dived into JavaScript bundling which was quite a hassle for me.

Luckily, I found https://github.com/RPGillespie6/codemirror-quickstart. It helped to bundle it. Thanks to the author, also a JavaScript noob like me is able to use CodeMirror without digging into the details of bundling.

The only things I had to do was to add a language support for HTML and CSS and add a callback function to retrieve changes made in the editor.

I have put the necessary changes to https://github.com/clipka/codemirror-quickstart.

Additionally, my original code had a very basic logic that takes the created HTML, CSS, and JavaScript code and renders it to a div.

To improve it, I found the following interesting blog post that describes a solution to render code to an iframe using blob URLs: https://dev.to/pulljosh/how-to-load-html-css-and-js-code-into-an-iframe-2blc

All in all, just with a bit of ChatGPT, Google and shared information I am able to significantly improve my current solution within a couple of hours of work.

Next step will be the integration of the frontend code described in this post with the initial Django project setup from my last one.