My love letter to CodePen

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Search for a command to run...

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Totally agree! CodePen is awesome! I love this CodePen you made 😁 https://codepen.io/rebelchris/pen/jOMGweo
Thanks very happy with that pen indeed! Need to do more of that stuff actually ❤️
Most of you know me for my consistency, a golden arrow in my blog series. I've written 1000 articles in 1008 days! Almost an article a day, and my honeymoon was the only holiday I ever took. I'm super proud of this achievement; it has been a fantasti...

It's not the first time I'll be talking about community. I think it's an essential aspect of any successful tool. This shows in my previous explorations of Astro, Medusa, and now Vendure as well. All these products thrive in a super open, welcoming, ...

The cool part about Vendure is how easy it is to set up and how abstract each layer is. Basically, we get the following elements: External database Server Worker Admin UI Frontend While this is amazing, it also brings a bit of complexity when it co...

The previous article looked at customizing Vendure on a data and process level. In this article, we'll look at customizing emails, as they are often a big part of a webshop system. We'll be looking at two different layers of customization for customi...

Even though Vendure is a pretty significant project out of the box, in some cases, we might want to go in and modify some elements to work to our specific use case. In this article, I'll take a high-level look at some elements we can customize within...

When I think about tools that I use on an almost daily base, CodePen sparks my mind.
Not only do I use it so often, but then it hit me. They don't even ever ask for anything in return.
Could it be? The perfect tool DOES exist?

And because of that, I just had to write this love letter to CodePen. The tool that brings so much and never asks for anything in return ❤️.
CodePen is a browser-based development environment. It allows you to create real-time code examples to test something out or demo something to other people quickly.
You might have seen the phrase: Could you create a CodePen demonstrating this issue?
And that's exactly what it is! It doesn't take favorites, as it comes with so many tools, libraries and languages supported.
Not only is it just that, but there is a whole community around CodePen, which is a super cool developer space.
When we think about developer portfolios, especially front-end devs, we often neglect that CodePen plays an immersive role in this.
We might have made some CSS art or just a very cool JavaScript project that we want to share with the world.
And yes, CodePen might be just as important as your GitHub profile.
I often find myself browsing CodePen for inspiration. The team picks top projects to showcase for the rest of the world to explore.
Heck, I even got features with a couple of items.
See the Pen CSS Frosted glass creditcard by Chris Bongers (@rebelchris) on CodePen.
And that is the power of CodePen. It not only allows us to try out code right in the browser, it even makes this visible to the rest of the world.
Crazy right? They do offer a CodePen pro which is even better, but in essence, you can use it for free.
You might think, what's the catch, and to be honest, I don't know what the catch is, or If they're even is one?
The cool part is that we don't have to go through manual installations to try something out.
I often help out interns or juniors by providing them with a sample CodePen of something they want to try out but might struggle with.
This way, I don't have to go through all kinds of installation steps just to run a simple project with Tailwind.
Chris Coyier, thanks for bringing us CodePen. It's one of my most valued developer tools and so underrated by me at times.
Even looking at this blog, about half my articles are powered by some CodePen demo.
You make my life complete. Without you, I wouldn't be able to demo out all these little examples so people can understand and try out code in their browsers.
To get the point.
I think I love you...
❤️ Chris
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter