Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.
A couple of notes:
- We will likely need to re-think how this works on CodePen, and your comments would be lovely.
Link up Anything
There are some problems with the "dropdown of library choices" approach that aren't getting any better:
- The dropdown can make it feel like that list is all CodePen offers. We've seen this as a common point of comparison.
- Libraries aren't as either/or as they used to be. You easily might want to use Backbone AND jQuery. Or Angular and D3. Or Ember and Chart.js and FitVids and Fabric.js! In some cases, you still have a "primary" architectural library choice, but does that need to be treated entirely differently?
- The dropdown choices are "latest version of", and we upgrade the versions in use. So if a library introduces a breaking change, a Pen that counted on that older version might break.
- The typeahead feature, while useful, isn't particularly findable.
Those seem like compelling enough reasons to change up the UI a bit to make it better. It's not so big of a problem we need to do it overnight though, so we'd love your feedback as we think about it more.
So far, I'm thinking options could be...
- Keep the dropdown, but when you choose an option, insert a URL to that library as an External Resource URL. Then add another (empty) URL input to emphasize you can have as many as you want. Then move the dropdown back to "Choose..."
- Remove the dropdown and replace it with a different type of UI, like perhaps a grid of checkboxes representing libraries. (Although that makes it a bit weird to adjust loading order.)
- Remove the dropdown and emphasize / make more clear the typeahead feature, as well as flesh out the experience of using it.
No matter what we do, of course we'll make all existing Pens work exactly as they do now (link up the same resources), even if the UI does change.