{"id":13414,"date":"2011-07-28T19:06:23","date_gmt":"2011-07-29T02:06:23","guid":{"rendered":"http:\/\/css-tricks.com\/?p=13414"},"modified":"2017-01-07T17:23:40","modified_gmt":"2017-01-08T00:23:40","slug":"seriously-just-make-a-pen","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/seriously-just-make-a-pen\/","title":{"rendered":"Seriously, Just Make a Pen"},"content":{"rendered":"

The original title of this post was “Seriously, Just Make a JSFiddle”. It was written before I beame the co-founder of CodePen. It’s no secret or surprise that CodePen was inspired by apps like JSFiddle and JSBin. It’s my job to point you to CodePen and my opinion that it’s a good choice for you.<\/em><\/p>\n

Has anyone ever asked you for help troubleshooting some combination of HTML, CSS, and JavaScript, and they copy and paste the entirety of all the files into an email or forum post? It’s super common, and so consider this an intervention. When you are having trouble figuring something out:<\/p>\n

<\/p>\n

    \n
  1. Go to CodePen’s editor<\/a>.<\/li>\n
  2. Put the HTML in the HTML area, the CSS in the CSS area, and the JavaScript in the JavaScript area<\/li>\n
  3. See if the result is demonstrating the problem, adjust as needed to make the problem very clear.<\/li>\n
  4. Press Save to get a public URL.<\/li>\n
  5. Share that URL where you are trying to get the troubleshooting help.<\/li>\n<\/ol>\n

    Also, if you can whittle it down to the bare minimum still showing the problem, that’s ideal. <\/p>\n

    The key is being able to see the result<\/strong>. It’s 100 times easier for your potential troubleshooter to play with that than trying to guess what is happening by looking at your code alone. <\/p>\n

    A lot of times, during the process of creating this Pen (let’s call it what it is: a reduced test case<\/a>) you’ll solve the problem yourself. And if not, the chances of you getting help from someone else goes way up.<\/p>\n

    Doing this will make you a better coder and better in bed. I promise.<\/p>\n

    XOXOXO,
    \n-Chris<\/p>\n","protected":false},"excerpt":{"rendered":"

    The original title of this post was “Seriously, Just Make a JSFiddle”. It was written before I beame the co-founder of CodePen. It’s no secret or surprise that CodePen was inspired by apps like JSFiddle and JSBin. It’s my job to point you to CodePen and my opinion that it’s a good choice for you. […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[605,1029],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":300964,"url":"https:\/\/css-tricks.com\/css-only-carousel\/","url_meta":{"origin":13414,"position":0},"title":"CSS-Only Carousel","date":"January 10, 2020","format":false,"excerpt":"It's kind of amazing how far HTML and CSS will take you when building a carousel\/slideshow. Setting some boxes in a horizontal row with CSS Flexbox is easy.Showing only one box at a time with overflow and making it swipable with overscroll-behavior\u00a0is easy.You can make the \"slides\" line up nicely\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/carousel-slides.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":342198,"url":"https:\/\/css-tricks.com\/detect-unused-classes-in-html\/","url_meta":{"origin":13414,"position":1},"title":"Detect Unused Classes in… HTML","date":"June 15, 2021","format":false,"excerpt":"Usually, when \"unused\" comes up in conversation regarding CSS, it's about removing chunks of CSS that are not used in your site or, at least, the styles not currently in use on a specific page. The minimal amount of CSS is best! I've written about how this is a hard\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/unused-css.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":316987,"url":"https:\/\/css-tricks.com\/lazy-loaded-prefill-embeds\/","url_meta":{"origin":13414,"position":2},"title":"Lazy Loaded Prefill Embeds","date":"July 13, 2020","format":false,"excerpt":"Lemme sum this up: CodePen has Embedded Pens. Build a Pen on CodePen, embed it on any other site.We also offer Prefill Embeds, which remove that first step. With Prefill Embeds, the Pen doesn't need to exist on CodePen at all. You pass in the code and settings you want\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":352754,"url":"https:\/\/css-tricks.com\/scroll-shadows-with-javascript\/","url_meta":{"origin":13414,"position":3},"title":"Scroll Shadows With JavaScript","date":"October 5, 2021","format":false,"excerpt":"Scroll shadows are when you can see a little inset shadow on elements if (and only if) you can scroll in that direction. It's just good UX. You can actually pull it off in CSS, which I think is amazing and one of the great CSS tricks. Except... it just\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/Screen_Shot_2021-09-05_at_9.52.01_AM.webp?fit=1200%2C920&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":356142,"url":"https:\/\/css-tricks.com\/detecting-specific-text-input-with-html-and-css\/","url_meta":{"origin":13414,"position":4},"title":"Detecting Specific Text Input with HTML and CSS","date":"November 9, 2021","format":false,"excerpt":"Louis Lazaris breaks down some bonafide CSS trickery from Jane. The Pen shows off interactivity where: You have to press a special combination of keys on a keyboard.Then type a secret password. From there, a special message pops up on the screen. Easily JavaScript territory, but no, this is done\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/keyboard-photo.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":301269,"url":"https:\/\/css-tricks.com\/a-web-component-with-different-html-for-desktop-and-mobile\/","url_meta":{"origin":13414,"position":5},"title":"A Web Component with Different HTML for Desktop and Mobile","date":"January 15, 2020","format":false,"excerpt":"Christian Schaefer has a great big write-up about dealing with web advertisements. The whole thing is interesting, first documenting all the challenges that ads present, and then presenting modern solutions to each of them. One code snippet that caught my eye was a simple way to design a component that\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/browser-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/13414"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=13414"}],"version-history":[{"count":12,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/13414\/revisions"}],"predecessor-version":[{"id":249839,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/13414\/revisions\/249839"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=13414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=13414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=13414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}