This is a project created as a programming exercise and built as a Single Page Application (SPA). It was inspired by Dave Geddes' (@geddski) awesome learning app Grid Critters.
I had such a good time going through Dave's Flexbox Zombies course that when I started Grid Critters I wanted to not just code along with the exercises but also build a browser-based environment where I could replicate the lessons of the game. This was strictly for my own learning purposes and would maybe be used as portfolio piece if I got it working.
Beyond Dave's very cool concept of turning learning & memorization into game play, what I was completely floored by was how cool the in-browser code editor was and wanted to see if I could replicate it. I loved the interaction between the code I typed and the instant results I saw on the screen.
Now at the time, I thought Dave had written all of this from scratch. So beyond him being a bad-ass god of code in my mind, I figured I could learn something by attempting this myself. Heck, if he could do it, maybe I could too...
So, I set to work creating an input element that applied the css I typed as a style rule on a sand-boxed area of the DOM. That was pretty straight-forward and I got it working in a day. The hard part was building a fully-fledged css editor with code indentation, shortcut keys, auto-completion, cut and paste, undo history, syntax highlighting, etc.
I attempted to do this by analyzing Dave's code editor through DevTools. It was incredibly layered and complex, using a content editable <div> for display with a one character wide invisible <textarea> element that received the input and moved on screen as you typed. It is what produced the blinking cursor and provided the illusion that you were working in a single integrated editor environment. Meanwhile, content in the underlying div could be styled using complex regex to produce proper syntax highlighting.
So, I got all the pieces working separately and went down that path before finally settling on a middle ground by using a <textarea> for input and a separate <div> below that for display. Maybe one day I'll merge the two but not today. Sometimes good enough is good enough!
I later found out the editor was a well established, giant of a product called Ace - a high performance code editor for the web that has 8 years of industry development behind it and is actively maintained By Ajax.org and Mozilla. It's used by Cloud9 IDE and GitHub.
No wonder it was so cool! It could do just about anything - and when I typed, it just worked! I didn't know this at the time and ignorance is bliss so I set off to build it myself and ended up with what you see here.
This SPA was built using pure HTML5, CSS3, and JavaScript. JSON was used for page data which is loaded synchronously because of the tiny file size. That means it was built with no dependencies on:
While relying on the above can help speed development, I wanted to try my hand at an app that relied solely on the holy trinity of front end development - HTML, CSS, JS. For this reason the app and all its resources is super lightweight and comes in under 90 KB in total size with no compression or optimization.
As mention previously, this was inspired by these two awesome learning applications:
If you are at all interested in learning Flexbox or CSS Grid I would strongly urge you to check out these two courses. They are the reason I can use and understand these technologies today and are also responsible for the inspiration to build this proof-of-concept site.