Codepen productivity hack - Templates

There’s is always some boilerplate that you need to add at the start of every project. Since most of us are using Codepen for some of these challenges, I thought I’d share one of mine.

I like to set up “template bookmarklets”. These allow me to open a new tab, hit the bookmarklet, and go direct to a fresh pen with my desired boilerplate and settings. From there, I can add a name and save it… or test some code and close it without saving (I’ve done that while debugging personal projects and help topics here on fCC).

The steps:

  1. Start a new pen.
  2. Add your boilerplate.
  3. Change your settings.
  4. Give it a name, toggle the “template” switch and save.
  5. Close that tab.
  6. Create a new pen from template.
  7. Bookmark that before saving.

Here’s an image “walk-through”.

I have a few general purpose ones. The ConsolePen opens Codepen to just display the scripts and console windows; very helpful for quick debugging.

Do you have any productivity hacks like this? I’d love to learn them.

1 Like