I've been a CodePen user since the very early days. Have always loved the platform. I hate to be negative, but I'm honestly not a fan of the 2.0 release. What I loved about CodePen was just being able to try out something really quick and simple. But the new interface makes me feel more like I'm building a website inside of a website.
This is why I switched to jsgist[0] years ago and haven't looked back since. It's very sparse, but it has also avoided feature creep as a result, and since the output is stored as a gist on my GH account I don't have to worry about losing it if the site ever goes down either.
(also, the sister site jsbenchit[1] has been one of the more reliable microbenchmarking tools among the various sites I've tried - most end up triggering deopts or introducing "noise" in a way that makes the output less reliable)
Codepen imo ruined their product the moment they forced sign-up to view and explore, it also doesn't protect anything anyway seeing that they are all available as bulk archives on some forums.
It will be interesting seeing how this evolves. Any free hosting solution tends to spiral towards abuse at some point. Still trying to solve it for my own stuff.
That said, I do wonder how valuable something like codepen is in the current meta. I really no longer look at code. I'm not referencing examples, I'm just prompting for what I want / inputting images as context.
As I said in the other comment: jsgist, precisely because it's so bare-bones. The data is stored either in a shareable URL parameter, or in a gist if you give it access to you GH account. Everything else is a minimal PWA in a static html file that makes hosting of it super-cheap, so I don't have to worry about greggman pulling it down.
Anyway, the main uses case I see for these playground sites are:
1) small hand-crafted replications of suspected browser CSS bugs or the like, and testing possible workarounds. That often involves sending them to other members in the team (because I use Linux and Android, two colleagues in the team use Windows, and two using Apple products)
2) trying out some idea for how to make a particular component. Which is effectively almost the same as above, since that needs to be tested across browsers.
So I don't need bells and whistles beyond a simple text editor with code folding. That might not apply to everyone else.
Also, the exact same line of thought applies to js benchmarking sites, which is why I use jsbenchit (which is jsgist but for benchmarks). It also seems to be one of the few benchmarking sites without spurious de-opts of JS code, or noise from GCs triggered by the website itself in the middle of a benchmarking run.
Always felt like the worst aspect of code pen was the exploratory side. Looking up codepens is extremely poor, you often only look up one "tag" and after the first page quality gets worse.
Wish it had an advanced search that I can filter codepens for something useful like this: animejs, svg, forms; with the result being codepens that use anime.js around a form.
I'd probably use codepen as the defacto web ui reference if it had better search capabilities. Right now it's mostly github + blogs, but only because it's so hard to find anything worthwhile on codepen. Gold is there but it's deep under the strata with no willing to actually get it.
A CodePen api/protocol that supports a local ide opening a CodePen, making changes in the user's developer tooling and pushing back to the pen would be a game changer.
VCS extensions for jetbrains and vscode could hook into an api and smoothly pull and push pens. This feature was always my hangup for using CodePen as a UI playground.
This is awesome. Been a CodePen user/fan since it launched (and a fan of Chris/CSS-Tricks for even longer). Really nice to see CodePen evolving.
I don't use it as much as I used to but every so often I hack something up in it for a quick PoC. I'll say the new ability to deploy got my attention. Really handy to be able to deploy a prototype or demo of something and toss it over the fence.
I've been wondering how CodePen is surviving the AI onslaught - the core thing CodePen has always represented to me is to showcase the amazing hand craftsmanship of CSS HTML JS developers. Obviously that has changed, so I wonder what it means for CodePen - presumably they need to change their business model in some way.
Congratulations, Chris! I’ve always been competing with you, and many users came to Playcode from Codepen. In fact, I even offered to buy playcode.io about 9-10 years ago, but you didn’t respond and 1-2 months later you released a copy product named Codepen Projects.
I'm curious what LLM options I can use in Codepen. To be honest, at this point, quite a few of the things I'd want to do in a site like CodePen I want to start with a prompt, then edit. I'm not expecting CodePen to supply an LLM, maybe just WebMCP? Maybe all the browsers will just have options to do the thing?
But, lately. I often go to Gemini Canvas and just ask for some simple thing I want like "make a browser theme generator that lets me pick a base color and then the site picks graphic design principled colors for the rest of the theme's colors and lets me download a theme extension ready to use. Have a browser preview of how the theme will look in the page". < 5 minutes later I have such a thing. Sometimes I want to prompt for changes, other times I just want to tweak a few things by hand, hence, wanting it in codepen.
23 comments
[ 0.25 ms ] story [ 24.9 ms ] thread(also, the sister site jsbenchit[1] has been one of the more reliable microbenchmarking tools among the various sites I've tried - most end up triggering deopts or introducing "noise" in a way that makes the output less reliable)
[0] https://jsgist.org/
[1] https://jsbenchit.org/
It will be interesting seeing how this evolves. Any free hosting solution tends to spiral towards abuse at some point. Still trying to solve it for my own stuff.
That said, I do wonder how valuable something like codepen is in the current meta. I really no longer look at code. I'm not referencing examples, I'm just prompting for what I want / inputting images as context.
[1] https://publicsuffix.org/
Which other alternatives do people use now days?
Anyway, the main uses case I see for these playground sites are:
1) small hand-crafted replications of suspected browser CSS bugs or the like, and testing possible workarounds. That often involves sending them to other members in the team (because I use Linux and Android, two colleagues in the team use Windows, and two using Apple products)
2) trying out some idea for how to make a particular component. Which is effectively almost the same as above, since that needs to be tested across browsers.
So I don't need bells and whistles beyond a simple text editor with code folding. That might not apply to everyone else.
Also, the exact same line of thought applies to js benchmarking sites, which is why I use jsbenchit (which is jsgist but for benchmarks). It also seems to be one of the few benchmarking sites without spurious de-opts of JS code, or noise from GCs triggered by the website itself in the middle of a benchmarking run.
[0] https://jsgist.org/, https://github.com/greggman/jsgist/
[1] https://jsbenchit.org/, https://github.com/greggman/jsbenchit/
Wish it had an advanced search that I can filter codepens for something useful like this: animejs, svg, forms; with the result being codepens that use anime.js around a form.
I'd probably use codepen as the defacto web ui reference if it had better search capabilities. Right now it's mostly github + blogs, but only because it's so hard to find anything worthwhile on codepen. Gold is there but it's deep under the strata with no willing to actually get it.
VCS extensions for jetbrains and vscode could hook into an api and smoothly pull and push pens. This feature was always my hangup for using CodePen as a UI playground.
I don't use it as much as I used to but every so often I hack something up in it for a quick PoC. I'll say the new ability to deploy got my attention. Really handy to be able to deploy a prototype or demo of something and toss it over the fence.
(meaning I found it hard to read and focus)
But, lately. I often go to Gemini Canvas and just ask for some simple thing I want like "make a browser theme generator that lets me pick a base color and then the site picks graphic design principled colors for the rest of the theme's colors and lets me download a theme extension ready to use. Have a browser preview of how the theme will look in the page". < 5 minutes later I have such a thing. Sometimes I want to prompt for changes, other times I just want to tweak a few things by hand, hence, wanting it in codepen.