Write a Beautiful Engaging Tech Article in 30m.

This month, I had a goal to write 30 tech articles in 30 days. I’m doing pretty well so far! But in order to stay on top of this, I need to get things done quickly — less than 30m per article.

Sweet! People are reading my stuff!

TL;DR; I find a niche topic that interests me and enrich with pictures and extra details. I have a mental blueprint for article creation, and use tons of screenshots (with annotations!) to supplement that information. I’m not afraid to add personality, or to admit things that I don’t know.

Find a niche topic, then go deeper

My niche topic is Google Chrome Devtools. For you, maybe it’s Generic Programming in C++ (eeeek!) or building Microservices with AWS Lambda. All of C++ or AWS would be a bad niche because it is too broad.

Whatever I pick, I find something neat that I can explain in 3–5m that other developers might not know.

For instance, I recently discovered that you can use Chrome DevTools to debug node.js code. There were other methods to do this in the past, but now it is built directly into the node.js. Bam. Topic found.

Almost any stack overflow Q&A could be converted into an article like this. Here’s that example about node.js:

Question
An answer that I thought was really cool!

Create a mental blueprint

My blueprint:

  • explain something interesting in 3–5m
  • have a quick TL;DR; (too long; didn’t read) section at the top that summarizes the articles, and might make people want to read more.
  • enrich any info that’s already out there by providing lots of screenshots to make the article pretty & interesting.

Screenshots

IMO, screenshots & images are critical to making an article engaging. I either take screenshots of the application that I’m trying to explain or get a generic image from google image search to insert.

Here’s my Google Images search for the blueprint button above. I also use “more tools” -> “labeled for reuse” so I have reasonable confidence that I can use the image without worrying about copyright infringement.

When using a screenshot, I like to annotate it with Skitch:

Inception: Annotating Skitch with Skitch!

I’ll have to write a followup article on the tools & keyboard shortcuts that I use to get these quickly pasted into medium. This article is getting too long!

Personality & Things You Don’t Know

Personally I don’t like when things are written by someone that sounds like a machine. I also don’t like it when the author sounds like a know-it-all. We all are constantly learning.

Here’s an example of something I couldn’t figure out about enabling a special Terminal feature in Chrome Devtools.

From https://hackernoon.com/hidden-experimental-features-in-chrome-devtools-2ae93b11b628

BTW

It took me an hour to write this article. I can’t even follow my own damn rules. Please follow and recommend if you enjoyed this — it’s a good ego boost for me and helps this kind of content get found :-).

Shameless plug: I’ve developed a video course on Google Chrome Developer Tools that I’m trying to promote with this writing. Check out some of the free sample vids and let me know what you think!