Christian Heilmann

Posts Tagged ‘blogging’

Write your blog posts like good rock songs

Saturday, November 17th, 2012

I am currently at MozCamp Asia in Singapore and just gave a quick presentation on blogging comparing a good technical blog post to rock songs. When you think about it, they have a lot in common:

write blogs like rock songs

  • No intro – just straight to the point
  • Memorable hooks and riffs
  • One message per post
  • Simple language
  • An easily repeatable main message (something to scream along to no matter how drunk)
  • A memorable solo to end with

Confused? I guess it will all get clearer when you see the slides and listen to the screencast.

How to write an article or tutorial the fast way

Saturday, January 2nd, 2010

As you know if you come here often, I am a very prolific writer and churn out blog posts and articles very quickly. Some people asked me how I do that – especially as they want to take part in Project 52.

Well, here is how I approach writing a new post/article:

Step 1: Find a problem to solve

Your article should solve an issue – either one you encountered yourself and always wanted to find a solution to on the web (this is how I started this blog) or something people ask on mailing lists, forums or Twitter.

Step 2: Research or code (or both)

The first step is the research of the topic you want to cover. When you write, you don’t want to get side-tracked by looking up web sites. Do your surfing, copy and paste the quotes and URLs, take the screenshots and all that jazz. Put them in a folder on your hard drive.

If your article is a code tutorial, code the whole thing and save it in different steps (plain_html.html, styled.html, script.html, final.html,final_with_docs.html). Do this step well – you will copy and paste part of the code into your article and when you find mistakes then you need to maintain it in two spots again. Make sure this code can be used by others and does not need anything only you can provide (for more tips check the write excellent code examples chapter of the developer evangelism handbook).

Step 3: Build the article outline

The next thing I do is write the outline of the article as weighted headlines (HTML, eh?). This has a few benefits.

  • You know what you will cover and it allows you to limit yourself to what is really needed.
  • You will know what follows what you are writing and already know what you don’t need to mention. I myself tend to get excited and want to say everything in the first few lines. This is bad as it doesn’t get the readers on a journey but overloads them instead.
  • You can estimate the size of the overall article
  • You can write the different parts independent of another. If you get stuck with one sub-topic, jump to one you know inside-out and get this out of the way.

It would look something like this:

Turning a nested list into a tree navigation

See the demo, download the code

Considering the audience

How do tree navigations work?

Allowing for styling

Accessibility concerns

Start with the minimal markup

Add styling

The dynamic CSS class switch

Add the script

Event delegation vs. Event handling

Adding a configuration file

Other options to consider

See it in action

Contact and comment options

Step 4: Fill in keywords for each section

For each of the sections just put in a list of keywords or topics you want to cover. This will help you to write the full text.

Turning a nested list into a tree navigation

See the demo, download the code

working demo, code on github

Considering the audience

who needs tree navigations? where are they used?

How do tree navigations work?

How does a tree navigation work? What features are common? How to allow expanding a sub-branch and keep a link to a landing page?

Allowing for styling

keep look and feel away from the script, write a clean css with background images.

Accessibility concerns

Consider keyboard access. cursor keys, tabbing not from link to link but section to section and enter to expand.

Start with the minimal markup

clean HTML, simple CSS handles, not a class per item

Add styling

show the style, explain how to alter it – show a few options

The dynamic CSS class switch

the trick to add a class to a parent element. allows for styles for the dynamic and non-dynamic version. Also prevents the need for looping

Add the script

Performance tricks, safe checking for elements, structure of the script

Event delegation vs. Event handling

One event is enough. Explain why – the menu will change as it will be maintained elsewhere.

Adding a configuration file

Take all the strings, colours and parameters and add it to a configuration file – stops people from messing with your code.

Other options to consider

Dynamic loading of child branches.

See it in action

Show again where it is and if it was used in live sites

Contact and comment options

Tell me where and how to fix things

Step 5: Write the full text for each section.

As said before you can do that in succession or part by part. I find myself filling in different sections at different times. Mostly I get out the laptop on the train and fill in a quick section I know very well on a short ride. That means it is out of my way.

Step 6: Add fillers from section to section

I then add a sentence after each section that sums up what we achieved and what we will do next. This is not really needed but great for reading flow.

Step 7: Read the lot and delete what can be deleted

The last step is to read the whole text (probably printed out as you find more mistakes that way) and see how it flows. Alter as needed and remove all the things that seemed a great idea at the first time of writing but seem superfluous now. People are busy.

Step 8: Put it live and wait for the chanting groupies

Find a place to put the article, convert it to the right format, check all the links and images and you are ready to go.

More, please, more!

More tips on the style of the article itself are also listed in the Write great posts and articles chapter of the developer evangelism handbook.

Writing for Smashingmagazine – what do you think I should cover?

Monday, December 28th, 2009

I guess it is a nice case of the squeaky wheel getting the oil… After complaining on twitter about smashing magazine overdoing the “list posts” – you know “543 jQuery plugins you really need” and “3214 ways to create drop-shadows” I was now asked to become one of the writers for the magazine.

I’ve always had a soft spot for Smashingmagazine as it rose quite quickly in an already full market and showed that dedication works out in the end. I’ve learnt a lot of my trade from online magazines, and later from blogs. Things like A List Apart,, Digital Web and Sitepoint taught me CSS tricks, basics of SEO and other tricks. When Digital Web shut down, A List Apart changed direction and other, interesting new magazines like Particletree just didn’t quite get off the ground I thought it was over and to a degree it is. Personal blogs, Twitter and Facebook groups change the idea where we go for information and the old-school editorial approach appears stilted and seems to hold us back.

I disagree though. A good editorial process means we deliver better content. Books are great not because of the author being a genius but because of technical editors challenging the author to explain better, copy editors fixing spelling and grammar mistakes and the same subject being prodded over and over again until it is the bare mimimun and easy to understand.

Where it goes pear-shaped is when your editorial work is not appreciated and the reader numbers (and ad-views) do not add up to the cost you have for paying writers and editors. Back when the first mags came out this was not an issue – people were happy to do this for free. Nowadays, however it is much more business and a lot of online writers ask for cash for articles. Seeing the amount of work that goes into a good article this is totally fine, but what if you cannot find good articles every day?

This is when mags turn to list posts. These are quick to do and mean a new release for the mag – the RSS feed gets a new entry, people can tweet it and so on and so forth.

List posts are a real problem. They are immensely successful, as they are easy to digest, but they are also killing the overall quality of a magazine. As Scrivs on Drawar put in in not very minced words:

It used to be so much better than this. Every article that you came across wasn’t a tutorial or list. Hell, the majority of them weren’t tutorials or lists. There were articles that actually talked about design. There were articles that made you think how you could become a better designer and encouraged intellectual discussion on design. Those articles still exist here and there, but they are drowned out by the copycats.
The web design community is split into two sides: 1. loves to view every single list article there is 2. hates that list articles were ever invented. I fall into both camps because to me some list articles do serve a purpose, but when we start to see Design Trends of Spa Websites I think we might be going a bit too far.

I was very happy therefore when Smashingmagazine approached me (on Facebook of all things) to write for them as they want to change and release more meaty, in-depth articles that cause a discussion rather than a flurry of comments all saying “awesome” or similar YouTube-isms.

So my first two articles I’ve written stuck on airports on the way to my parents’ for christmas will be released in January and cover the following topics:

  • Basic performance testing using YSlow, PageSpeed and AOL Web Page Speed test
  • A seven step test to find the right JavaScript widget

What other things would you like to see on Smashingmag and reach the massive amount of readers it has?

TTMMHTM: Thankful Koala, vouchers, font reporting, CSS3 and HTML5 support and blog monetization

Thursday, February 12th, 2009

Things that made me happy this morning:

Koala drinking from water bottle of firefighter

My roadblock of one – now also blogging for Ajaxian and Yahoo Developer Network

Friday, January 25th, 2008

Today was a great day: I finally got my Macbook Pro to work with, got myself one of those fancy new slick keyboards and went for it answering a lot of emails. It is amazing how many more emails you can answer when you don’t have to wait for virus scans in the background and Outlook to get a move on.

Not only did I get some good leeway on what I am going to do this year (amongst other things a trip to Beijing to talk to developers about best practices and going back to Germany to talk to Flash developers), I also finally got some other answers I have been waiting for.

To cut it short, I am now not only sneakily blogging for the Yahoo Developer Network blog but was asked to contribute more often. What is even more surprising (considering my history of snide comments there) is that I am now also blogging on Ajaxian.

So if you have some good JavaScript/Ajax or general web development stuff that needs coverage, please drop me a line. I am available here (either via comment or email), on twitter or pownce.

I love the idea of being able to reach a lot of readers and developers through very successful and large channels and it shows me once again how powerful the web is as a media. When I worked as a radio journalist, this wouldn’t have been possible as everything I did had to be connected to my employer exclusively :)