GEOG 863
GIS Mashups for Geospatial Professionals

3.3 Separate Your HTML, CSS and JS Source Code Using CodePen

PrintPrint

The samples in the SDK are written with the CSS and JavaScript code embedded within the HTML code. This is fine for simple apps, but for more complex apps it is recommended that you write the CSS and JavaScript in separate files. Among the benefits to this approach are:

  • improved organization, making it easier to find your CSS or JS code rather than having to hunt in your HTML code for it;
  • the ability to reuse code that is applicable across projects;
  • shorter page load time through caching of the external files;
  • the ability to “minify” the code, making it a smaller download for client devices.

Some sites offer sandboxes in which each of the three-page components is in its own box (e.g., jsFiddle, CodePen). In order to encourage you to follow this code separation approach, let’s have a look at one of these sites.

  1. Go to the CodePen homepage.
  2. If you don’t yet have a CodePen account, click the Sign Up button and supply the info needed to establish a free account.

    After signing up, your browser window should open up to a new Pen (environment for authoring a new web page).
  3. Click the Change View button in the upper right and select your preferred Editor Layout option.
  4. Click the Save button. This will give your pen a randomly generated name (in the upper left).
  5. Click on the icon to the right of the pen name and assign it a new name of hello_map.
  6. Go back to the Get Started with MapView sample sandbox. Copy and Paste the three components of the sample into their respective boxes in CodePen. Note the following:
    - You should omit the DOCTYPE declaration from the HTML piece.
    - Do not include the style and script tags surrounding the CSS and JS code, respectively.
    - You may find it most convenient to copy the complete sample (CSS and JS included) to the HTML box, then cut and paste the CSS and JS pieces to their respective boxes. (You can remove the empty style and script elements from your HTML when done.)
    - The code boxes are resizable; if you’ve set the Editor Layout such that the code boxes are arranged vertically to the side of the output box, note that you can double-click on any of the box headings to maximize that box.
    - The output box will update itself immediately after you make a change by default. You can override this behavior by going to Settings > Behavior and unchecking the ENABLED checkbox under the Auto-Updating Preview heading. This will add a Run button to your interface.