In recent years the web has made a major comeback in the world of development. After the initial era of developing mobile apps, it seems web apps have now taken back popularity. The web stack of HTML, Javascript, and CSS has been around for decades, but just in the last few years updated versions of all of them have been published: HTML5, ES6 and ES7, and CSS3. It is somewhat weird to think that “Modern Javascript” is now one of the most widely used languages and feels very new despite its history.Developer forums such as StackOverflow have become a necessity because of the ever-changing nature of these languages, as well as compatibility issues across browsers, encouraging the creation of tools such as Babel. With Javascript as one of the most portable languages, no wonder there are several new frameworks coming out such as React and Typescript, to name a couple. The open source community has certainly embraced Javascript with package managers like npm and Facebook’s yarn.
One unique aspect to web development is that it is in fact on the web. What I mean by that is that for developing Python you have to install Python on your local machine, in order to develop for mobile you need an emulator or actual phone to test their code on. However, developing web-related technologies has the unique aspect that things can be tested directly on production websites as opposed to releasing new versions and having users install updates. With that in mind, instead of sharing code with people to share ideas, why not share websites that are already running that code? It’s even easier.
One such tool does exactly that—codepen.io makes for a development platform specifically for sharing code, but code that automatically runs as soon as the page loads. I first learned about it when my friend and Systems partner, Dave, told me about it. He was in the midst of creating a mini 3D game aspect in Javascript when our class had ended and it was time to leave. It was inspiring to watch him editing variables and watching the site recompile his code for him after every change. Once he showed it to me and explained what it was, I knew that I wanted to create an account for myself and learn how to use it more. I had seen it before online on various articles and tutorials, but it seemed bulky somehow and I was turned off by it initially. Now that I know how it works and what it can do, I use it all the time now whenever I am creating small snippets of CSS or Javascript that I want to test out.
Let’s say you’re developing some large-scale project for a website, but you just want to perfect the UI of some small component first, and then integrate it with your big project. On Codepen you can do exactly that—it’s perfect for bootstrapping a small idea you have without needing to worry about setup. It has three separate editors: one for Javascript, one for CSS, and one for HTML. They’re also entirely resizable, so you can close up any editors you don’t need to use. It will also recompile and run your code for you any time you make changes, so you can instantly see the results and continue testing. It’s a perfect little sandbox to test all of your UI ideas, or even small Javascript functions you need to test out.
Here is what the UI looks like:
Another thing that I love about Codepen is that it saves all of your pens to a unique URL, which also keeps your changes if you edit and save it later. The great thing about this is that you can immediately share all of your code with a friend just by sending them the link. They can also fork the pen (similar to a repo on GitHub) so they can create their own version and save it to their account. You can also use codepen anonymously without ever creating an account (it’s just easy and nice to keep all of yours pens stored in one account).
Here is an example pen that I have personally created:
Another great thing about codepen is that it is so customizable with options to support various languages and frameworks. It supports all of the commonly used CSS preprocessors, Vendor Prefixing, and you can include other stylesheets by URL. Similarly, for Javascript, it supports Babel, coffeescript, and you can of course insert custom script urls and thereby use frameworks such as React with Babel to compile your code. I actually found this out by going through this tutorial on React’s official website since the article links to their code examples on codepen. And of course, if you visit the pen you can immediately start editing it and changing things in order to learn.
Another thing you can do is embed pens directly in other sites, including this blog post. Here is one I have created:
(Unfortunately there is some referrer issue that does not allow this to work on WordPress without a plugin :|
But you can click on the link and visit the site.)
This is a great feature because it is an entirely sandboxed environment within another webpage for displaying and showing off code, which is another great way to share information. I have certainly learned from various articles on css-tricks (this one for example) since it is so easy to read the code that runs the examples. Including these runnable code examples inside of otherwise normal articles makes for a pleasant and enriching reading experience for developers. It reminds me of Jupyter notebooks like this Julia example, except I think it does even better for separating the two. You can have a completely normal article about any topic and can still include working code examples within it.
Codepen is a helpful tool for practice and education. It encourages people to share their code with others and fosters a community for web developers to share ideas with each other. In my opinion, the most beautiful part of Computer Science is sharing creative ideas with others, collaborating and inspiring each other. Codepen is a great platform to do this, and I have enjoyed sharing and editing pens by myself and others.