Exploring and Deconstructing CodePen

Anita Das

April 5, 2019

ENGL 383: Writing Digital and New Media

Interface Critique

Exploring and Deconstructing CodePen

What is CodePen?

CodePen is an application utilized for code editing, compiling, and showcasing completed projects to other users. Users are able to develop code and test their results in real time. Its target audience is anyone interested in coding at any and all levels of experience. Their interface primarily uses the following languages: HTML, Java, and CSS, but other languages are permissible to utilize as well. CodePen uniquely emphasizes the significance of community building among coders regardless of their background by giving creators the option to share and publish their projects on public dashboards.

The First Impressions:

CodePen has a warm marketing aspect to it. For instance, the descriptions will have casual phrases in their responses to their FAQs section (i.e.: “Remember that your comment must follow our Code of Conduct, so be cool.”) CodePen also uses emojis (as pictured above) to not only appeal to young coders but to establish that their environment is friendly and fun. The right-hand side provides your profile, dashboard, and an exploration page, which I found simple to navigate. While exploring CodePen, I noticed the interface reminded me of Tumblr by providing a blog section. CodePen also reminds me of Pinterest and Instagram since users can explore and save what kind of content they want to see on their dashboard.

I also noticed how there “Picked Pens” and “Picked Projects” which are pens and projects that have received the most fame of all time.

The Pros:

The pros of using CodePen as a coding editing platform is the unique emphasis on community building and networking opportunities. They market CodePen as more than a coding editing interface, but more as a sociable and inspirational environment. CodePen also shows how people use it for the following: “Prototyping new ideas, reduced test cases for bugs, sending clients things to look at, evaluating potential hires, to finding inspiration. People also use CodePen as a sort of resume and portfolio, showing off their best design and development work.”

Also what is different about CodePen is the emphasis on community building, which is something I’ve noticed is lacking in other coding platforms. It’s initially introduced as a “social development environment” platform in its About page, which caught my eye. I thought the first descriptor of CodePen would be “coding editor application” or at least something along those lines, but the fact that CodePen’s About page emphasizes the importance of community building among coders regardless of experience makes the platform appear friendly and approachable. But do these aspects affect its user-friendliness? It might. I shall touch on that in the Cons section. Anyways, CodePen also functions as a networking tool for professionals. On its About page, it mentions how users often use CodePen as a portfolio for their coding projects to showcase to potential employers. I admire this part of CodePen a lot; instead of organizing different files onto your computer and sending them to your employers on different platforms, you can just organize your projects in one platform and send your employer or supervisor your profile. Profiles also allow users to contact creators easily by listing their contact information, suh as their LinkedIn and other forms of social media.

The application’s significance in the coding world comes into play in terms of their priorities. This platform aims to provide a comfortable and user-friendly space for coders who want to edit, compile, and run their programs. They are also given the option to share what they’ve created in the platform itself, or to keep it private, which is something new to me compared to other coding editing platforms. Typically speaking, other coding platforms usually let users edit and compile their work but they are not allowed to save it or showcase it to other users, which is what makes CodePen different. It combines blogging, networking, and forum bonding all in one coding interface.

CodePen also stays true to their priority of connecting users together by implementing monthly Challenges. The Challenges tab presents a monthly theme for users to create projects based on that theme.

The Cons:

The cons of this application are the navigation of finding out certain information. It took me a while to figure out what the difference between a pen and a project was. I had to look up what the difference between a pen and project was. (A pen is code that accomplishes a simple result that only uses the three languages I listed before, and a project is more of an interactive final product that can use more than those three (I.e.: a project on CodePen is like a game that users can play, and a pen can be considered code that can sort a list alphabetically or present a moving visual). And I found the answer on their blog rather than their About/FAQ page, which I personally found unusual and a little out of the way. If your platform focuses on users constructing and showcasing pens and projects, the distinction between the two should be one of the very first aspects that you see on the platform. Users shouldn’t have to Google the difference and find the answer on a CodePen blog post from 2017, as seen below: The difference isn’t really established clearly on the site’s front page. I had to explore different pens and projects to realize that there was a distinction in the first place.

Also another thing I found interesting about CodePen is that their FAQ contained questions that I personally thought were simple to answer and figure out. Supposedly, the most popular question is “How Do I Contact the Creator of a Project?” but if you click on a creator’s name, it takes you to their profile that lists all of their contact information, as pictured below. So I don’t really know how or why that was the supposedly the most frequent question when that process of contacting a creator appears relatively straightforward. As I mentioned before, I thought the distinction between pens and projects needed to be emphasized rather than that questions under their FAQ section. However, the other FAQ is valid. Copying creators’ work is a serious problem in the computer science field in general, and when a platform such as CodePen comes out of the blue with easily accessible projects, users are bound to steal content and slap their own names on projects they never did. However, I found the way they handle plagiarism interesting, and the best part is, they don’t even label it as plagiarism. On CodePen, if you are concerned that someone has stolen your work, the CodePen platform first asks you to identify which category you fall under: “1.) Was this work from elsewhere on the internet that you hold copyright to? Or 2.) Was this work one of your Pens from here on CodePen?” If it’s the copyright scenario, then CodePen will take it down immediately, but the option is a little more complicated.

(Profile to show how accessible creator’s contact info is)

The Conclusion: To Use or Not to Use CodePen?

CodePen accomplishes a community ground for coders, which breaks the stereotype that people who are in coding-heavy fields such as web development, software engineering, etc. are often isolated and work independently, yet CodePen encompasses the community and collaboration that is needed in those technological fields. Though there is a competitive aspect to using CodePen since there are “Picked Pens” and “Picked Projects”, there is more emphasis on exploring and learning from other’s work. CodePen actually reminds me of Instagram in a way: users on the Instagram explore page et a lot of likes and followers, but it is up to the user to strive for Instagram fame. Other than that, it’s more so a platform to showcase your creativity and individuality rather than a virtual competition. The same philosophy applies to CodePen. Because of the inclusion of a Blogs tab and individuals your dashboard with content you want to see, users are not pressured to be the “best” or “most recognized” coder. They are more so encouraged to share and publish their work for their own pleasure and/or their employers to see.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store