Have you ever came across the challenge that is implementing a new front-end without the influence of the old code in the new one? Yes, the struggle is real. But it is not the only one. Having to create a whole new project just to learn a specific framework, or to test a library/framework/component on isolation can be dull processes.
When trying to find a solution to overcome these scenarios, I tried a tool that makes our software developer's lives a lot easier: CodePen.
On this article, I'm going to explain what is CodePen, what you can do on this platform, how to do it and also why it can be so useful to speed up your front-end development.
What is CodePen
What is CodePen used for
Gathering or sharing ideas
Thanks to the great community that CodePen has built, there are thousands of users creating and sharing their ideas of front-end components, animations and even almost finished layouts of webpages. If you have some ideas of your own that might be useful to other front-end professionals, this is the perfect place to share them. You just need to make sure your code is free from copyrights.
Style-guide your project
In case you're not interested in using other people's code, you can always use CodePen's online code editor to create the style for your project components. This way you can ensure each one of them is not influenced by code intended to style other components. You can think of it as a blank canvas. My recommendation is to create a pen for each component as you'll be working with less code each time. This way, you're preventing mistakes (like changing code for one component that destroys another) and only realizing it in the end.
Learn a new framework or library
The code editor from CodePen is a great tool to learn how to code a new framework or library. You don’t need to set up a new environment to test and run it every time you want to see the result of your changes. This is possible because the editor view shows the 3 sections of code and the preview at the same time, updating the last one every time something changes on the code.
How CodePen works
Now that you know what CodePen is most used for, let’s explore how it works. The platform is relatively easy to use, but has a lot of features. Some can even go unnoticed, even if you have already used it several times.
Search for pens
Right on the main page, you get a glimpse of what you can search: specific pens, people, projects or collections. You can also check CodePen suggestions (it is a great option to just see other people's code and learn some tricks) or you can hit the search bar to specify what you're looking for. If you are quick to write and press enter, you probably won’t notice that you can explore topics! They are organized by 3 different categories: Frameworks, Libraries and UI patterns. Each topic has its own page where you can explore pens, templates and resources. The list of topics is closed, but you can fill a form and ask for a specific one.
When you finally look at examples, the first thing you encounter is the screenshot of the pen. Here's where you can quickly preview the result of the code and consider if it is something you are interested in. Then you can either click directly on the pen and open the Editor View (where you can play with the code) or click on the expansion arrows, on the right upper corner, to open the Details View. This view will let you comment on the pen, like and follow the author, see and interact with it, like this pen where you can play the xylophone. You can also pin it, to see it or use it later. Those pens will show on the navigation bar inside the “your” section, on the pinned items group.
On the settings, you can also:
- Edit pen details (quite useful when sharing your creations with the community)
- Make a template out of your pen
- Change how many spaces or tabs your code's indentation have
- How the pen will be saved
- Change your pen to private (if pro user)
- Add a personalized screenshot (if pro user)
Besides all of this, you still have access to other features on the Code Editor, including the list of assets for pro members, a console to help on debugging and all the options to export the project. But it does not stop here. One of the most interesting and unnoticed buttons on the Code Editor is "keys". Basically, it's where you have the full list of shortcuts available on CodePen, including the auto-complete feature, that just like me you probabily thought it did not exist.
How to add images on CodePen
If you are a CodePen Pro member, adding an image can be really simple:
- Access the "Assets" on the footer
- Add your image if you haven’t previously
- Copy the URL to use on your code.
If, just like me, you are using the free version, you’ll have to host your photo somewhere online in order to have a link ready to use. Besides Google photos you have Imgur , ImgBB and a lot of other websites that offer free hosting to your photos. Upload it and copy the link. Now you can use it as an img src, background-image, etc.
How to download your code
The easiest way to download your pen is to simply copy & paste the code into your project. That’s what I usually do. Nevertheless, you can download the pen as a zip file or save it as a Github gist. The second button, counting from the right on the footer, is "Export". Click on it and select your favorite option.
CodePen for React
Flutter and Vue on CodePen
On CodePen, it's also possible to use Flutter and Vue, but you won’t be able to select them just like you did with React. Remember the topics when I explained how to search on CodePen? It’s only through them that you can access Vue and Flutter personalized editors. Go to the "Explore Topics" page, select the one you want and, on the right top corner, you'll find the "Open editor" button. On these editors, you’ll only have 2 sections: one for code and the other for preview.
How to share CodepPen's code
You can share your pen in two ways: either by using the social media share button or the embedded functionality. To share it on social media, you can do it directly from the "Details View" or from the last button on the Editor View's footer. To share using the embedded code, you have to select "Embedded" on the Editor View's footer (3rd option from right) and copy the generated code. This method is great if you want to show your pen on a website by incorporating something like the Details View.
Warning: if you want to share another person's pen, make sure to copy it first. Use the "Fork" feature (4th option of Code Editor's footer) and it will copy the pen exactly as it is. You never know if the author will delete it or change something on the pen.
If you choose to use a different preprocessor, like SCSS instead of CSS, but your project only supports regular CSS, don’t worry. You have the option of transforming it with only one click. On the arrow, at the right upper corner of your selected code section, you have the option to “View Compiled ...”. All you have to do is click on it and it’s done. Don’t be afraid to do it, you can change it back. When you download the code, you will also see a folder where it is compiled.
Why use CodePen to accelerate your front-end development
If you haven't used it before, CodePen is indeed a great platform as it allows you to learn and code effectively. If you're starting a new front-end development project, here are the main reasons why you should use CodePen.
What else do I need to say? You can do all that I've mentioned above without having to pay anything. If you want to, you can Go Pro and pay a monthly subscription to have access to additional features (like private pens, personalized screenshots, assets and more types of views). Personally, I have a free account and I didn't feel the need to have these extra features so far.
You don’t need an account
If you don’t want to create an account you don’t have to. You can still search and use the Code Editor. However, you won’t be able to save your pens to revisit them later. So, if you just want to test a couple of things, you can do that without an account.
Four screen sections with real time preview
Definitely one of the main advantages is to be able to see everything in a single screen. Not having to look for browser tabs or files tabs on an IDE makes my coding faster and easier. In addition, it gives a real time preview, which cuts the time of reloading pages every time we need to see if the code changes.
Preprocessors, libraries and frameworks were created to make our life easier. CodePen manages to deliver a Code Editor tool where we can use all of them. We can do that and set up a pen with whatever we want to use, in just a few clicks. How great is this?
Examples of everything
If you need to find examples of something previously done, you will probably find them here! Animations, elements, full pages, you name it, they have it!
As a software developer at Imaginary Cloud, I feel like this is one of those tools that can truly accelerate your development.
CodePen was a tremendous help for my dissertation project, where I had to create a whole new front-end for an existing project. I often use it every time I want to learn something new like React and Animations, or to test a library/framework/component on isolation. When using CodePen, I'm not worried about the existing code. It gives us the freedom to create UI components as we want, so we can apply them to the project we're building.