Codism: An Open Source Code Playground for Web Developers
Introduction
I've been programming for almost three years and the thing that I find the most fascinating are tools like compilers, transpilers or anything that makes life easy for other developers.
Some time ago, I was discussing compiler construction with my best friend Waasiq. We talked about tokenizers, parsers, ASTs etc and this got me thinking, how are online tools able to compile HTML, CSS and JavaScript? What about LeetCode and Hackerrank that can compile languages like C++, Java and tens of others?
After thinking about it, I realized that there are simpler ways to get these things done. You don't need to write your own compilers if you want to create something similar to LeetCode and Hackerrank. For some reason, if you do decide to start writing your own compilers, it is going to take you a life time to come up with your own compilers for all the different languages.
We will discuss how LeetCode, Hackerrank and Algoexpert type sites work IE how do they compile the code and run tests on them. Codepen and other such tools may follow similar concepts and the keyword here is "concept." These sites may entail complexities but on a basic level, they are the same.
Motivation
This project is purely for educational/learning purposes. I'm not creating this in order to compete with Codepen. I'm just doing this for fun and for my own learning.
Journey
I'm also going to document all the progress I make on Codism. So, make sure to follow me here and on Linkedin as well as on Dev. Also join our Discord channel called, Dev's Hub.
Codism
Codism is an open source Codepen like tool where you can start writing HTML, CSS and JavaScript. Sometimes you may want to have a quick UI session but creating files and folders is a tedious task and not to forget that it might create a mess when all you wanted to see was how to center a div. For things like these, tools like Codepen can be extremely handy.
How It Works
Codism takes your markup, styles, scripts and compiles them right inside the browser using a clever "hack". The preview is an isolated iframe which is not affected by external CSS or JavaScript and has a completely isolated scope where you may add HTML, CSS and JavaScript using the code editors.
Compiling HTML
The HTML is directly added to the preview module whenever HTML code editor detect changes. Updating HTML also refreshes JavaScript afterwards in order to ensure that any event listeners that were lost during re-rendering are re-attached. This isn't complex and isn't even compiling by any measures.
Compiling CSS
The CSS resource is added after it is "compiled." When the CSS code editor detect changes, it takes the CSS as a string and turns it into a blob using the Blob web API. At this point the blob/file is inside our memory and we need a reference to it in order to access it. To create a reference, we use the URL web API.
After that, we create a link tag and assign the URI reference to the CSS blob using the href attribute. We must ensure to remove the previous CSS from the preview because if we don't, we'll end up with a memory leak where CSS files keep piling up, not to forget that the styles written previous will persist. When we add the CSS successfully to the preview module, browser automatically handles all the parsing and styling. This is the clever "hack" I referred to.
Compiling JS
This isn't different from how we load CSS resources. As soon as the JavaScript code editor detect changes, it takes the JS as a string, turns it into a blob using the Blob web API and creates a reference to it using URL web API.
Like with CSS, we make sure to remove any previous JavaScript and append the brand new JavaScript to the preview module. We also refresh HTML before adding the new JavaScript. The reason for refreshing HTML is any residual event listeners that were previously applied to the Markup.
Roadmap
Codism will have a lot more features in the future. I'll share what things I'm planning to add to Codism.
- Add preprocessors like SASS, LESS, PUG.
- Allows users to load CSS and JS libraries and modules using CDNs.
- Make the code editor experience robust by adding autocomplete type features.
- Ability to sign-up and sign-in.
- Ability to save code as projects and share them.
Collaborate
Since, this is an open source project, I encourage you to collaborate on it. Pick any features you may like or any bugs you may want to solve and start hacking! Even if you want to improve the README file on Github, that is also something I'd appreciate.
Collaborate at: https://github.com/hasnaindev/codism