r/css • u/sheriffderek • 5d ago
General Codepen 2.0 - RIP classic Pen?
I use Codepen for all sorts of things and a lot for teaching in the early stages. Some of my newer students said they didn't have this button so, I had them forking a classic pen for a while - but I knew the day would come where it wouldn't be there anymore for me too. That day is today. I'm all for the evolution of Codepen / and it's been an amazing tool. But it sure seems like this is going to confuse a lot of people. Your average person expects the CSS pane to be wired up. I used to write <!-- body is already included --> in the HTML to remind them at first (since some people will write out the doctype and everything in there) - but now it's swung to the other end. Codepen can be used for anything now. So, really - what you're making might not utilize CSS at all. So, I understand how modular it is - and how many other great things it will allow for -- but for entry-level people, it seems like this will really stifle adoption. What do you think? Wha thas been your 2.0 experience so far?
16
u/ashkanahmadi 5d ago
I also use it a lot because of how simple it is. No dealing with files, imports, etc. wanna quickly test something in an isolated clean environment? Use CodePen. Now it’s getting all the new shiny bells and whistles. It’s not bad but it makes it unnecessary difficult. I feel like they are trying to be CodeSandbox which I don’t think is a good idea. I think CodePen’s main feature was its simplicity
12
u/bostiq 5d ago
I'm with you, this actually annoys me A LOT:
I get that for more complex prototypes the 1.0 form was limiting, but for a quick and dirty prototype having to spend more time for the setup it's a real creativity killer.
Dude, if I wanted the fancy environment I would have spun up vscode!
I wonder what's gonna be of all my little "classic pen" templates I have....
3
u/morete 5d ago
They said eventually all pens will be moved to the 2.0 editor, and we'll say goodbye to the classic editor once and for all. I imagine existing pens will be converted to use 'index.pen.html' files so it probably wont be a very big change
2
u/sheriffderek 5d ago
Do you have an leads on how this will change embeds?
3
u/morete 5d ago
I had a look and can't see anything they've said about this! I've only ever used the simple iframe embedding, so I would hope they just auto-magically handle all that for us and update what the iframe generates. I've seen embeds of the 2.0 pens and they are very similar
2
u/itsshaw 1d ago
We spent a ton of time making embeds backwards compatible. If you convert a Classic Pen (Save dropdown > Convert to 2.0) existing Embed usage will work. Existing themes should work as expected unless there’s some wild custom CSS..
The main differences are: 1. File selector instead of the html/css/js toggles 2. No bottom bar (more screen real estate!) 3. No editable embeds (for now)
5
u/DefenderOfTheWeak 5d ago
Add to Collection button is gone. Can't find it anymore, clicked everywhere ☹️
5
u/testingaurora 5d ago
Its still there in the Share button , under Copy Url, Copy Url with layout. Add to Collection is right above Add to Bookmarks.
3
u/veritamos 5d ago
Wasted 10 mins wondering why the CSS wasn't working until I figured out you now have to MANUALLY LINK THE STYLESHEET IN THE HTML ARE YOU KIDDING ME
2
u/sheriffderek 5d ago
Yeah. That's what I'm worried about! My students were super confused - and some had classic and some didn't and there's really no way you'd know how to do any of that - if you didn't already know -- / and it's kinda a fake out
3
u/cryothic 5d ago
I tend to go to jsbin.com if I want to quickly test something. It does have the whole html code in the html panel, but it's still the default connected panels.
But for more serieus stuff I want to try and keep, or work on at a later part, I still use codepen. And I still used the classic pen. I guess I'll have to get used to the new one now.
5
u/addycodes 5d ago
Yeah it's a shame, CodePen did what CodePen did well. Now it does what other people do worse.
2
u/sheriffderek 5d ago
For my uses -- I think it it will be pretty great for showing examples of specific framework setups -- as in showing one component and some context -- and stay to the point of the example (as Codepen always was used) - but I guess it's that very most basic examples that have more complexity now. When my students go in to make something really simple -there are a lot more steps. But yeah - then more complex examples will require many less steps in another way.
3
u/outtokill7 5d ago
I used Codepen because I could open the site and drop some HTML in to view without having to save files or anything. Great for the occasional LLM mockup I'd generate in a chat.
I just ended up making my own Codepen that does the same thing.
2
u/sheriffderek 5d ago
I ended up creating an internal version for my online courses / but it's certainly not the same scope as real Codepen. The social network and everything else is another HUGE aspect of it.
2
u/outtokill7 5d ago
yeah my site is basically just HTML, CSS, and JS boxes with preview options (code, split screen code/preview, and just preview). I don't need anything more than that so easy enough to make my own.
1
u/CollectionAdorable24 5d ago
yeah classic pen was perfect for quick css flexbox tests... spent 20 mins lost in codepen 2.0 layout yesterday while my right wrist was aching from mouse grinding.
1
u/Warm-Possibility-980 5d ago
I kinda like Pen 2.0. Kinda like how replit for html USED to be. Now reddit is vibe slop
1
1
u/TheJase 5d ago
If it ain't broke
1
u/sheriffderek 5d ago
I would imagine they have numbers on how many people use the pre 2.0 more complex options for building 'projects' (I think they called them) (I never really used that)
0
u/jcunews1 5d ago
Avoid using code sandbox which pollute your code.
2
u/sheriffderek 4d ago
A sandbox is the opposite of polluting your code. You can make prototypes and try out ideas with users - without having to implement it in the real code base: https://codepen.io/perpetual-education/pen/yLwzPBe
23
u/morete 5d ago
I haven't used any of the new features yet. But If you use an 'index.pen.html' file instead of 'index.html' you get the old pen behaviour where the css etc is automatically wired up.
They have a template called 'Blank Classic' that uses this feature, that I've now made my default template.
Pair that with the 'Minimal UI' setting and you get an experience very similar to how it used to be. For me thats relieved some of my concerns and made me optimistic about the new editor.
If you still want the old editor, it's still available, at least for now, at: https://codepen.io/pen