Codism: An Open Source Code Playground for Web Developers
4 min read
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.
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.
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.
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.
How It Works
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.
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.
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