Show off webmaps and custom widgets with CodePen

When it comes to presenting quick code samples on the web, there are three competitors that come to my mind: JSFiddle, JSBin, and CodePen. All three sites allow you to add HTML, JSFiddle has been around a long time, and is great for testing out code snippets and parts. JSBin, which bills itself as “Collaborative JavaScript Debugging”, focuses heavily on JavaScript testing and finding faults in your code. But sometimes, when you get something right, you just want to show it off. That’s where CodePen comes in.

CodePenCodePen, in my opinion, is the place to show off what’s right with the web. It’s a polished looking site that lets you write HTML, CSS, and JavaScript to create working examples called “pens”. It also has a social network aspect, allowing comments, hearts, and recording number of visitors. You can share pens, blog posts, and even follow other popular developers and designers on the website.

I first noticed it while following Chris Coyer from CSS Tricks and David Walsh, currently at MDN. They would post these eye-popping examples of CSS and JavaScript doing really cool things. To this day, I’m blown away by the examples I find published there.

Now, enough of my blathering. Let’s go over how to share your webmaps, widgets, and examples through CodePen. You should go ahead and set up an account with CodePen, so you can save and share your work. Once you’ve got all that set up, We’ll start adding our content.

Creating a Pen in CodePen

CodePen Page

Once you’ve signed up with CodePen, it’s time to create a pen by clicking on the “New Pen” button at the top of the page. The pen editor page consists of HTML, CSS, and JavaScript entry blanks in separate areas. This promotes a separation of concerns, whereby your HTML doesn’t mix with your JavaScript, and vice versa. A display window takes up most of the screen, showing you what you’ve created. By clicking the icons in the lower right hand corner, you can move the code sections above, to the right, or to the left of the display window.

You can access your pen’s settings by clicking on the Settings button. This section lets you name your pen, give it a description, and some search tags to make it easier to find. Also, you can configure your page and preload stylesheets and JavaScript libraries. This takes focus of the pen away from the configuration, and focuses the attention on your code.

HTML setup

CodePen HTML Settings
CodePen HTML Settings

The HTML settings give you access to the head of your HTML page. You can implement HTML Preprocessors, if you want to write your HTML using HAML, Markdown, or any other preprocessor flavor that eventually writes to HTML. You can also assign classes to your HTML document, which can be used by some CSS framworks and JavaScript libraries.

Finally, you have a place to insert content for the head of your HTML document. The main HTML area on the page is supposed to represent the content of the body, so this gives you a place to put the meta tags, links, and scripts that you need in the head. When writing samples using the ArcGIS JavaScript API, this is the best place to add the meta tags required to make the map behave on mobile devices.

CSS Setup

CodePen CSS Settings
CodePen CSS Settings

The CSS tab lets you configure how the page shows CSS. The CSS preprocessor lets you use preprocessors such as SASS and LESS to write your CSS code instead of conventional CSS. The CSS Base lets you add either the normalize.css or reset.css that is supposed to make all HTML elements look and behave about the same in different browsers. Vendor prefixing will add vendor prefixes such as -moz and -webkit to newer CSS properties that aren’t fully supported across all browsers.

The portion we’re most interested in is the external CSS part. Here, we can add ESRI’s css file that is necessary to view maps without things breaking all over the place. We can also pull in dojo’s style sheets so that ESRI’s widgets and controls look normal.

JavaScript Setup

CodePen JavaScript Settings
CodePen JavaScript Settings

The JavaScript Settings tab lets you control how JavaScript is handled in the page. You can use preprocessors such as CoffeeScript or LiveScript instead of JavaScript on the page. Those who use it say those preprocessors make the code easier to understand. Detractors say that they don’t like having to perform the mental gymnastics to convert from CoffeeScript to vanilla JavaScript. The choice is up to you.

When creating maps with the ArcGIS API for JavaScript, the part we’re interested in is the Add External JavaScript section. Here, we can add the URL for the JavaScript API. One thing I like about CodePen over JSFiddle is the ability to add the API without having to add a file that ends in .JS. JSFiddle was horrible about not letting me add the JavaScript API as an external library. I often had to add a script reference in my HTML as a workaround. Another score for the CodePen Team.

Other Behaviors

CodePen Behaviors Settings
Configuring other behaviors in CodePen

The Behavior tab lets you set little things that can become big annoyances when coding. The Code Indentation section lets you decide whether you like to indent with tabs or spaces, and how many you need. Some people like using two spaces, while others like using tabs. Now you get to have your way.

The two other checkable features available here are the Autosave and the Auto Update Preview. Autosave, er, well, saves your work automatically. The only reason you might want to turn this off is if you’re making a change and you’re not sure you want to keep it. Auto Update Preview checks whether your HTML, CSS, or JavaScript content has changed, and tries to update the page to give you instant feedback. If you’re writing code from scratch, you may or may not find this feature helpful, especially if your application takes long to load.

Adding your code

Now you have the opportunity to add your own code. This is where you get to let your creative juices shine, and show everybody what you’ve got. Remember to keep these thoughts in mind while you’re writing your code.

  • The HTML section represents what’s inside the BODY tag of your web page. You don’t need to cut and paste the head content, add any BODY or HTML tags. They’re kinda assumed.
  • CSS section represents the unique CSS you’re adding to the page. You don’t need to copy any CSS over from prepackaged files, such as Bootstrap or Foundation.
  • The code in the JavaScript section will run after the HTML DOM has loaded. If you’re not sure about that, go ahead and wrap the code in a self executing function.
  • Lots of custom JavaScript widgets may be difficult to pull off in these pens. Remember, you’re not trying to flesh out an entire application in this page. These are simple examples and use cases.

So, add your maps and your widgets, and show off you’re work. I’d like to see what you pull off using this site. I plan on moving my simple examples here as well.

Leave a Reply

Your email address will not be published. Required fields are marked *