How To Create These Coding Platforms Like Codepen

[CodeGraphics]

Hello friends,

I want to develop a coding platform like these ones:
dabblet.com, jsfiddle.net and codepen.io.

Which language was used to build them?
If I know php, can I develop something like that?

Thanks.

[Kitty Giraudel]

The problem isn’t to develop something that works like CodePen; it’s actually quite easy to inject some styles in iframes and such. The problem is to develop an efficient one:
– saving all the gists
– keeping high performances even when using multiple iframes
– prevent injection and malicious hacks
– make real live preview with acceptable performance
– handle a lot of options (libraries, preprocessors, social, etc.)

CodePen is built on Ruby on Rails if no mistake, with a fairly huge amount of Ajax. You’ll be able to do so with PHP but it will probably be far less robust. Plus, you’d like to do it with OOPHP, not procedural.

Now let me ask you this: why do you want to do so?
If it’s for the challenge, then go ahead but don’t expect to have an amazing coding platform in the end.
If it’s because you want to embed something like that in an app or something, you might want to embed an existing one. Like CodePen.

[CodeGraphics]

It’s not basically for the challenge. I intend to start a web development school in my country and I want my students to be doing practice there. And when they have a problem, they can easily give any of the tutors the link (like codepen link) to view the codes and point out the errors. I dont want to use codepen, dabblet or any other. I want the school to have a customized one and also a forum where the students can interact and brainstorm.

So u mean for mean to build a robust one like codepen, I will need to master php and ruby?

[CrocoDillon]

I can understand why you wouldn’t want to use codepen and the like (although their professor view seems perfect for you, students work should be visible to teachers but not to other students), but you should understand it’s a lot of work. From the about page I can see 3 people worked on codepen, one dedicated front-end developer, one dedicated back-end developer and one jack of all trades. That’s probably aiming too high for a one-man project.

That said something far less complex would be enough to fit your needs and I wish you good luck. You don’t need PHP and Ruby, it’s one or the other. I would however look into a framework like Zend Framework 2 (there are tons of others, probably more lightweight. ZF2 needs more work to make it fast. I don’t know anything about Ruby but I think Ruby on Rails is a framework…? )

You should know what you’re getting yourself into, it’s a lot work and time that you could have better spend elsewhere. I’d reconsider using some existing code paste bin.

[CodeGraphics]

More on this pls. But i hope it’s possible to build by one man. So if I dedicate 6 months to it, i can build it?

[Kitty Giraudel]

If you know what you’re doing, I think it’s possible yes.

You should probably start by listing all the features your end product has to handle, and think of the way you are going to store the data (language, table architecture, etc).

Let me just say it one more time, then I let it go: I **really** think you should use an existing one, even if I totally understand why you don’t want to. Don’t reinvent the wheel, and all this stuff.

[CodeGraphics]

Am scared already.

[Alen]

In my opinion, there is no need to reinvent the wheel. Just use one of the available solutions. Dedicate your 6 months to building something else, that would be as beneficial to your students.

[pranavpatil19]

can i embedded codepan in my website..just like we embedded you tube video on website

if yes..then how???

[CodeGraphics]

Ok

[Kitty Giraudel]

> can i embedded codepan in my website..just like we embedded you tube video on website

On a pen:

1. Click on “share”
2. Copy the code
3. Paste it in your website

[CrocoDillon]

If you still want to make you own code editor:

https://github.com/remy/jsbin/wiki/Best-practises-for-building-your-own-live-paste-bin

:)

[Chris Lowles]

I’ve been developing a local-code site called Conjurr and im developing a jQuery-based api, so i guess you could use the conjurr api in about two and a half weeks

[Author]

Posts