Writing a technical article on medium

There are just a few things to know about writing a technical article on medium.

First and foremost, have good content. No one wants to read garbage.

But that isn’t what this is about. Really it is just a resource to how to do a few things that makes your code better.

First, Medium uses Embedly, which is cool because it makes it really easy to embed stuff, like a codepen or a gist.

So here is a cool codepen, just paste the url and hit enter:

An example codepen embed.

Sometimes you just want to have code, and don’t want to have a full on codepen. For that case a gist is perfect.

I did a quick video to show how simple it is. It is the codepen example above, but is the same process for, really, anything you want to embed, like a youtube video.

Video on how to put a codepen into your medium article.

If you want to see if what you are trying to paste in is supported just go to Embedly providers page see if it has what you want, currently they have over 400 providers supported, so chances are, they have what you need.

A good way to present the material is to have a set of sequential Gists, then a codepen for the final example. For example, if I wanted to take a moment and write about CSS Variables I would do it like this.

CSS Variables

CSS variables are way awesome. I am really excited about the prospect of what they can accomplish beyond what is possible today using pre-processors.

First, let’s create a simple file:

That will generate some awesome output of blue text. That is something that Sass, less, and more have been able to do for a while now, but what if…

Here, on hover, the color turns purple. I don’t have to change the color property because that is already looking for --color. That means all we need to do is change the variable in scope. That is awesome!! (Granted the example is extremely contrived)

If your browser supports CSS Variables, then you should see the hovered purple text in all it’s glory right here!!

Finito

Just a final conclusion, A couple of gotchas.

• there is no inline code. Which stinks.
• The block code in medium doesn’t syntax highlight and creating one in a gist and moving it in takes a lot of time.
• There also isn’t a good way, that I am aware of, to reference images already on the web.

But all in all it is a good platform to write an article for technical stuff.