Saturday, February 9, 2013

HTML productivity booster: zen-coding

Over the last week I've written an API for my business and needed to created some documentation for it. Using Twitter bootrap, some of it looks like this:

Which looks like this in HTML:
subscription_startdate
Startdate of the subscription
subscription_enddate
Enddate of the subscription ( nullable )
subscription_typeid
Type ID of the subscription
subscription_type
Subscription type. Typically 'Business' or 'Compleet'
profile_id
The Business Compleet User ID
profile_initials
Profile initials
...
Which is formatted by Twitter Bootstrap. What I did was copy-paste a bunch of
and filled those out. What I should have done was get a zen-coding plugin for my environment ( NetBeans at the time, but it's also available for Visual Studio and Sublime text ) and use that. Zen-coding allows you to quickly generate HTML in your favorite IDE. With the plugin installed in Sublime, I type:
dl.dl-horizontal>(dt+dd)*5
Hit TAB and it results in:
BOOM! Done.

So you start out by defining you element type ('dl' in my case). The '.horizonal' sets the class very intuitively ( for id - use '#' ... obviously ). The '>' denotes the child elements. The I want a 'dt' with a 'dd' sibling - hence the '+', and that 5 times.


1 comment:

  1. This comment has been removed by a blog administrator.

    ReplyDelete