Code-it Notes: Create Your Own! 📝

A few weeks ago, I prototyped an idea to help me better understand the JavaScript methods I always seemed to forget.

The idea was simple. Create Post-it note like summaries that could be refered to whenever I needed them. An explaination on one side and an example on the other. I love MDN and W3Schools, but putting something into your own words always seems better when trying to decipher how a piece of code works.

Feedback from the original dev.to post was reassuringly positive, but as I'd created the notes in Google Slides, designing new topics soon became time consuming. Post-it notes are meant to be quick, and this certainly wasn't.

Benjamin Faught • Mar 23 '19

Simple, concise, and effective. Put these on the web please.🙏 They deserve their own site. 💯

Following a few encouraging comments, it felt worthwhile to spend some time thinking about how to recreate the notes in a more flexible format. Releasing the Google Slides deck would be the easiest way, but the same problems would still exist. I'd also experimented with Instagram (see below), but images containing text have poor accessibility and don't allow for further editing (although swiping between each side worked really well). Back to the drawing board.

The solution came thanks to the dev.to markdown editor's use of Liquid tags. By building a template in CodePen and embedding it here on dev.to, anybody would be able to fork the pen, remix and share their creation back to the community (or anywhere else for that matter). What's more, the #explainlikeimfive hashtag seemed a perfect fit for what I was trying to achieve. Take a coding concept, boil it down to its simplest form and give an example. That's it! 👌

An added bonus is that you get to tinker with a bit of code whilst making a Code-it. There's CSS Grid, clip paths, variables, media queries, transitions, basic JavaScript and more. Don't like it? Rip it up and edit it until you do.

So, if you're interested in creating your own Code-it note, here are the instructions:

How to Create Your Own Code-it Note

1. Fork the pen.
2. Decide on a topic for your Code-it. Remember, the smaller the better (e.g. a single JavaScript method, CSS property etc).
3. Research the topic and edit your pen.
4. Once you've finished, write a new dev.to post, tag it with #explainlikeimfive and embed your new pen.
5. Take pride in improving your own knowledge whilst also creating a community resource for other people to benefit from!

The pen includes a link to the FontAwesome CDN, so feel free to use their library of free icons to illustrate your creations.

If you have any feedback, or would like to offer suggestions about how the template code could be improved, I'd love to hear it.