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/.
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.
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.
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.