Grow your CSS skills. Land your dream job.

How To Create These Coding Platforms Like Codepen

  • # March 8, 2013 at 12:51 am

    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.

    # March 8, 2013 at 3:32 am

    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.

    # March 9, 2013 at 2:54 am

    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?

    # March 9, 2013 at 3:45 am

    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.

    # March 9, 2013 at 5:27 am

    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?

    # March 9, 2013 at 5:53 am

    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.

    # March 9, 2013 at 6:09 am

    Am scared already.

    # March 9, 2013 at 10:54 am

    There are a few copy and paste script ready made for this. You just have to google correctly. Apparently I did not bookmark them. They weren’t that hard to find tough. Have at it.

    # March 9, 2013 at 11:35 am

    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.

    # March 10, 2013 at 6:38 am

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

    if yes..then how???

    # March 11, 2013 at 3:12 am

    Ok

    # March 11, 2013 at 4:45 am

    > 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

    # April 17, 2013 at 11:17 am

    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

    :)

    # November 17, 2013 at 12:52 am

    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

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".