DEV Content Creator's Toolkit 🧰
Tags: tooling
Published: 2021-05-21 11:53:00

Photo by <a href="https://unsplash.com/@clemhlrdt?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Clément Hélardot</a> on <a href="https://unsplash.com/s/photos/website-code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

----------

Hello! 👋🏼 I've recently been more active on DEV so I thought I'd share a list of the content-creation tools I use for creating my own DEV content. Feel free to use the skip-links below or comment in the discussion ☺️

### Table of Contents:
- [Introduction](#introduction)
- [My toolkit](#my-toolkit)
- [Holes in my toolkit](#holes-in-my-toolkit)

----------

## Introduction

Today, I will be going over my new-and-improved, developer content-creation toolkit! Many other content creators on DEV or other platforms may use various forms of other tooling that work for them. This is not meant to take the place of their opinions / toolkits, but rather help those new to content creation on DEV to be able to find **accessible resources** that are **cost-effective** for **quality service**.

*Disclaimer: I use a MacOS. You may have to find another Keynote alternative if you use another OS. Keynote creates GIFs automatically and I couldn’t do the same with Microsoft PowerPoint or Google Slides.* 😟

## My toolkit

- Notes / any note-taking app - for getting down half-formed ideas or topics
- [VSCode](https://code.visualstudio.com) - code
- [Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode) (VSCode extension) - creating beautiful code photos that make everyone wonder how you did it ✨
- [Adobe Xd](https://www.adobe.com/ca/products/xd/pricing/individual.html) Starter plan - creating graphics
- [Keynote](https://www.apple.com/ca/keynote/) - animating graphics (GIFs)
- Image & Assets - get from websites, i.e. [Undraw](https://undraw.co/illustrations), [BlackIllustrations](https://www.blackillustrations.com), or [Unsplash](https://unsplash.com)

> NOTE: For Polacode to work, you cannot simply highlight code from bottom up as in the demo. You must **copy-paste it into the Polacode panel**! (An FYI since I thought I would never be able to use it until I used my eyes to read 😄)

## Holes in my toolkit

Currently, I don't have an easy way to manage three applications open at once when making animation graphics. I'll have Keynote open, VSCode open, and Adobe Xd open all to coordinate changing code, photos, or graphics. 🥲 (I'll be re-writing a draft post for my first Vue series because of that) If you know or use any tool that could help streamline the process, do comment below!

Also, for non-Mac users, I want to know what you use instead of Keynote for creating animation graphics! Comment below if you use / have seen a tool that works 👇🏼


---------

📌 *NOTE*: I've recently decided on my blogging journey that I will **not** create lengthy articles on intricacies of the tech I use, but rather short and sweet tutorials that explain the daily hassles I solved, or buggy issues I come across. This way, it is a **personal commitment to myself to not stress over constant content creation**. It makes my blogging more **fun**, **simple**, and provides **helpful tips for other devs** to find.