I thought I would write a quick guide on using CodePen. There's be a lot of threads recently where a lot of code is included in the post, or a link is made directly to the website in question, which makes it more difficult to offer support.
Using CodePen to show us the problem is best all around because it means we can directly see and help edit the code. We can "fork" (I.E copy) what you've done and make our own working version to show you and then you can see directly the code we've made or used.
You can see a selection of awesome creations, but you're interested in clicking "New Pen"
It will then load up a newly created empty Pen for you to complete with your code. You can copy and paste over the HTML/CSS/Javascript you're using. You can copy all of it, or even better, create a stripped down version. For example, copying over just the navigation elements and relevant code to the problem you're querying.
Make sure to make any links to assets, like images, absolute - that is linking directly to your site as relative links will not work
You can select custom options for each box, clicking on the Gear icon to access the options available to you.
You can do the same for the CSS section, so if you're using Sass/Compass for example you can select it here so you don't have to edit your code from its natural state.
You can also do the same for JavaScript, specifying custom options, such as linking to an external JS file.
When it comes to JavaScript it's likely you're using a library, such as jQuery, you can also select this type of option via the settings for JavaScript too.
When your CodePen is ready for sharing, hit "Save" along the top bar to save it and make it ready.
Next click "Share" and you'll get a similar set of options to these. If you have a PRO account you get extra options, but the one you'll have available as an anonymous user is "Full Page" - while this is helpful to show off a Pen, it may also be wise instead to copy the Address Bar link instead as this gives direct access to the code itself.
Please do create Pen's for us. We can help you solve your problems quicker and easier by doing so. Help us help you!
Awesome little guide. I noticed a lot of people posting here without references to their actual problem, which does prove to be difficult to resolve if it contains a fair bit of code. I'm still using JS Fiddle, although I would happily convert over to CodePen as it has an auto-refresh function upon editing and has a neater layout in which the results frame is nice and large making everything easier to see.
Plus it's the sneaky tricks, like using Zen/Emmet when typing out any HTML that does it for me in the trouser department.
This. It makes the site a coding tool for almost everything. It's like the revolution on interactive online editing (even though that has been around for a while now), but never as awesome as doing it in your browser.
The only thing that I wish you could on CodePen is to select from your own CodePen's which ones you want to show on your profile or not more simply.
While you can do private vs public, most of my pens are for support purposes on here, so never anything impressive to anyone checking out my profile, but I can't go back now and make them private cause old links in the forum and elsewhere will break.
So it would be ace to highlight particular ones you want to show off in your profile, or perhaps re-order/categorise them.
@andy_unleash@chriscoyier It would be cool if it was handled like jsFiddle does: any unnamed pen is still linkable, but doesn't show up on your profile.
This is excellent, thanks for doing this Andy! Rather than make it sticky, I'm going to noodle it for a day or two and figure out the best plan. I might make a new little module thing by the New Discussion button in the sidebar that links to important stuff like this AND put it where it's needed most: on the actual page where you write up a new thread.
@Paulie_D - Maybe a sort of - "show us what you have already tried" recommendation or something. Quite a few posts are "I want to do X, tell me how/give me the code" - which is pretty difficult to support.
Hey ya'll - I added a new thing to the Start a New Discussion screen where it links to this guide and encourages people to use CodePen. We can let this thread fall down the stack now. We'll keep this post up to date over time.
And just to note: profiles are going to get better very soon =)
Awesome guide Andy. Nice of you to take the time to whip it out.
On a side note — and please don't take me the wrong way — I mean this with all respect to those involved with Codepen, but I sincerely think the site design would benefit from major refinements — it feels bloated and chincy. Codepen could be an absolute winner, but I feel the design is holding it back.
Otherwise, keep up the great work everyone. Should be interesting to see the progression of this project.
A few things that could use some fine tuning include:
Search results page Perhaps the results can display the pen previews as seen in the picks, etc.
Toggle Code View Provided an option for window arrangement in code view. https://tinker.io has a nice example
Refine aesthetics Typography, Gradients, Color Scheme, Unnecessary decoration…the site splash and login pages especially come to mind, but other small details could use some love too. Have a look at http://cssdeck.com
I am still trying to figure out how I can use codepen.io and this is a stepping stone of knowledge for me. I think it is really good, but I don't know yet ... :)
codepen (awesome) will be my first stop in the morning to learn (and hopefully share) cool tricks. btw, is there anyway to just clone a codepen so I can muck on it locally?
You could still upload them to http://imgur.com/. However I'd rather use http://lorempixel.com/ for image placeholders. You can specify dimensions and even a theme.
So if you want a 250*380 image, you just have to do:
The maximum non-animated file size you can upload is 10MB. If the image is over 1MB, however, it will be automatically compressed to 1MB for better viewing on the web. The maximum animated file size (GIF and PNG) is 2MB.
awesome tutorial! I am trying to just copy and paste some of the pens in my text editor and the animations are not working. Is this because of the csspreprocessors?
Howdy,
I thought I would write a quick guide on using CodePen. There's be a lot of threads recently where a lot of code is included in the post, or a link is made directly to the website in question, which makes it more difficult to offer support.
Using CodePen to show us the problem is best all around because it means we can directly see and help edit the code. We can "fork" (I.E copy) what you've done and make our own working version to show you and then you can see directly the code we've made or used.
Getting Started
Head on over to Codepen.io.
You can see a selection of awesome creations, but you're interested in clicking "New Pen"
It will then load up a newly created empty Pen for you to complete with your code. You can copy and paste over the HTML/CSS/Javascript you're using. You can copy all of it, or even better, create a stripped down version. For example, copying over just the navigation elements and relevant code to the problem you're querying.
Make sure to make any links to assets, like images, absolute - that is linking directly to your site as relative links will not work
You can select custom options for each box, clicking on the Gear icon to access the options available to you.
You can do the same for the CSS section, so if you're using Sass/Compass for example you can select it here so you don't have to edit your code from its natural state.
You can also do the same for JavaScript, specifying custom options, such as linking to an external JS file.
When it comes to JavaScript it's likely you're using a library, such as jQuery, you can also select this type of option via the settings for JavaScript too.
When your CodePen is ready for sharing, hit "Save" along the top bar to save it and make it ready.
Next click "Share" and you'll get a similar set of options to these. If you have a PRO account you get extra options, but the one you'll have available as an anonymous user is "Full Page" - while this is helpful to show off a Pen, it may also be wise instead to copy the Address Bar link instead as this gives direct access to the code itself.
Please do create Pen's for us. We can help you solve your problems quicker and easier by doing so. Help us help you!
Awesome little guide. I noticed a lot of people posting here without references to their actual problem, which does prove to be difficult to resolve if it contains a fair bit of code. I'm still using JS Fiddle, although I would happily convert over to CodePen as it has an auto-refresh function upon editing and has a neater layout in which the results frame is nice and large making everything easier to see.
Thumbs up!
I used to use JSFiddle for everything but CodePen is definitely above and beyond in terms of functionality.
Plus it's the sneaky tricks, like using Zen/Emmet when typing out any HTML that does it for me in the trouser department.
Make this sticky!
I can't see a way of doing that.
Mr Coyier, Sir?
You might not have rights to do so.
This. It makes the site a coding tool for almost everything. It's like the revolution on interactive online editing (even though that has been around for a while now), but never as awesome as doing it in your browser.
Possibilities are endless.
The only thing that I wish you could on CodePen is to select from your own CodePen's which ones you want to show on your profile or not more simply.
While you can do private vs public, most of my pens are for support purposes on here, so never anything impressive to anyone checking out my profile, but I can't go back now and make them private cause old links in the forum and elsewhere will break.
So it would be ace to highlight particular ones you want to show off in your profile, or perhaps re-order/categorise them.
Sticky please! Chris, any way you could do this? It would be awesome. :)
@andy_unleash @chriscoyier It would be cool if it was handled like jsFiddle does: any unnamed pen is still linkable, but doesn't show up on your profile.
Nice write up by the way!
This is excellent, thanks for doing this Andy! Rather than make it sticky, I'm going to noodle it for a day or two and figure out the best plan. I might make a new little module thing by the New Discussion button in the sidebar that links to important stuff like this AND put it where it's needed most: on the actual page where you write up a new thread.
Perhaps combine it with an updated version of 'How To Get Help From The Forums' with bullet points on, for instance,
Being precise about the issue
Providing a Link
How To Use Codepen (when you can't provide a link')
How to show code in the forums
What code WON'T show properly in the forums
Any others?
@chriscoyier - No worries.
@Paulie_D - Maybe a sort of - "show us what you have already tried" recommendation or something. Quite a few posts are "I want to do X, tell me how/give me the code" - which is pretty difficult to support.
@chriscoyier What about adding a box over on the right above (or below) the bookmarked discussion box. Maybe name it something like "How To...".
Hey ya'll - I added a new thing to the Start a New Discussion screen where it links to this guide and encourages people to use CodePen. We can let this thread fall down the stack now. We'll keep this post up to date over time.
And just to note: profiles are going to get better very soon =)
Super exciting!
@chriscoyier great stuff. Looking forward to hearing more about the profile changes.
Awesome guide Andy. Nice of you to take the time to whip it out.
On a side note — and please don't take me the wrong way — I mean this with all respect to those involved with Codepen, but I sincerely think the site design would benefit from major refinements — it feels bloated and chincy. Codepen could be an absolute winner, but I feel the design is holding it back.
Otherwise, keep up the great work everyone. Should be interesting to see the progression of this project.
Can you be more specific regarding bloat/design issues? I personally think it's super straight forward to use.
If you can express exactly which parts you find hard to use they may be able to address them as @chriscoyier is involved with the project.
Good suggestion @andy_unleash
A few things that could use some fine tuning include:
Search results page Perhaps the results can display the pen previews as seen in the picks, etc.
Toggle Code View Provided an option for window arrangement in code view. https://tinker.io has a nice example
Refine aesthetics Typography, Gradients, Color Scheme, Unnecessary decoration…the site splash and login pages especially come to mind, but other small details could use some love too. Have a look at http://cssdeck.com
More to come…feel free to join in
Great ideas! Of course things will evolve over time. 2013 is wide open in front of us =)
I am still trying to figure out how I can use codepen.io and this is a stepping stone of knowledge for me. I think it is really good, but I don't know yet ... :)
codepen (awesome) will be my first stop in the morning to learn (and hopefully share) cool tricks. btw, is there anyway to just clone a codepen so I can muck on it locally?
Yep. Hit the Fork button and it's yours... Not locally but on Codepen.
Is there any way to use local imags? maybe uploading them or something?
You could still upload them to http://imgur.com/. However I'd rather use http://lorempixel.com/ for image placeholders. You can specify dimensions and even a theme.
So if you want a 250*380 image, you just have to do:
Thanx for the advise!!
HugoGiraudel, I could'nt manage to find it there. On imgur.com, do You happen to know how much space do I have to upload images?
@eran1 Well, I got this from their website's help page (http://imgur.com/help/uploading):
awesome tutorial! I am trying to just copy and paste some of the pens in my text editor and the animations are not working. Is this because of the csspreprocessors?
Without seeing the code we can't tell....but it's a strong possibility.