Stop hand coding, start Zen Coding

[kjhughes]

No. We're not doing it wrong.

I am hand coding HTML in nXML mode in emacs. I'm also hand coding various templating languages/libraries which generate HTML. Nothing's wrong.

What the OP is doing wrong is writing bad titles for posts about an otherwise decent tool, Zen Coding. Better to skip the post and just read about Zen Coding directly: http://code.google.com/p/zen-coding/

[jmduke]

Zen Coding is great.

Idiotic headlines are not.

There are hundreds of reasons to hand-code HTML, and this article addresses why one of them is inefficient.

[kevinconroy]

Fair enough, but headlines like this will probably stick in people's minds so that they next time they go to hand-code a repetitive block they'll remember to try Zen Coding it.

[ricardobeat]

If you are doing "table-based layouts", you're doing it wrong.

I'm a great fan of zen, specially for CSS, but every editor has had autocomplete/expansion for years, and it ends up being nearly the same speed (t+tab, tr+tab, td+tab, cmd+alt+d x5) once you internalize it. I even ended up removing it from ST2 since it conflicts with default shortcuts. CSS is a whole different story, I haven't seen any editor with expansions as complete as Zen.

[eps]

If you decide to preach, it helps to know the subject.

Table-based layouts is the only practical option for HTML emails, which is exactly what these guys were doing.

[bmj]

So HN is all wrong, eh?

It has been argued here before that HTML is nothing more than "assembly" for the browser, and if it renders properly, why does it matter if the layout is done via nested tables or CSS?

[underwater]

He said he was creating an invoice template, in which case a table makes sense.

[crazygringo]

Honestly? I don't get why this is quicker. Doing front-end development, writing actual HTML tags surely account for less than 1% of my time. And most of that time is just modifying existing structures, not creating new ones.

I'd rather type a few closing tags myself, and use copy-paste to duplicate a bunch of lines. I really don't see how that is going to take longer in the end.

[dillon]

Lets say only the second 'li' in:

div>ul>li*5

Needs the class "active"? While this may seem simple, I feel a tool like this should be able to handle something extremely simple. What it looks like is I have to write an entire conditional.

There is something to handwritten code that (to me) will always seem more beautiful than machine generated code.

[3pt14159]

If you spend time worrying about how to reduce how much time you are wasting on HTML you're doing it wrong.

Over the past year I've spent about 4 weeks just thinking about how to construct the data structure I need to solve one hairy problem or another. I've spend maybe a day writing html over the entire fucking year.

Don't optimize the easy parts.

[kevinconroy]

Here's the list of official plugins from the Zen Coding team for all supported editors: http://code.google.com/p/zen-coding/

[DigitalSea]

The misleading title of the article is equivelent to making statements like: "If you're driving manual transmission cars instead of auto, you're doing it wrong" or "If you're eating food that needs to be prepared before eaten, you're doing it wrong"

I don't see any problem hand-writing HTML at all, in-fact you get to a point in your development career when you can type sufficiently fast enough to beat out even some of the best auto completion functionality an IDE or third-party library/plugin can offer. Zen Coding definitely has its uses, but I don't really remember the last time I had to hand-write much HTML at all anyway. I use the HTML5 boilerplate as a basis for my projects, if using Wordpress I use a barebones Wordpress theme or if I am developing a HTML newsletter I'll use the HTML email boilerplate.

[parkr]

I definitely disagree, especially given that their example for its efficiency is "table-based layouts". That's a huge no-no. Tables are for tabular data only.

[kevinconroy]

Email clients are stuck in late 90s-era formatting, and alas, tables are very very necessary to create cross platform emails that render identically (or at least similarly). Yes it's the "wrong way" but it also works well for older clients and odd situations where full CSS support is lacking.

[nhebb]

Have you viewed the HTML source of HN? There are lots of reasons to dislike nested tables, but they do have their uses.

[aaronblohowiak]

eh, religion

[mehulkar]

Since I started using HAML, I can't stand writing HTML. If I ever need to write HTML again, I'll be sure to remember Zen Coding.

[dmsinger]

I like Zen Coding a lot, specifically for CSS. HTML, it's ok, but not always faster IMO. The list example is a good one because I think it's an easy 'this is better' use-case, but for most things that don't require multiple instances of something it's not adding much (and that's ok, there's only so much you can do there).

For this nested table example, it's great. Another multiple instance example. There's probably no easier way to pump out that code so fast, but if it were a standard table, anything will do, even the hated (by most on here) WYSIWYGs, that could drop a customized table in a few clicks.

[recursive]

I use block folding and a clipboard to achieve a similar effect. Is there really anyone, who, when faced with this task, would manually type 500 lines of repetitive html by hand?

[tangue]

HTML is not the problem when you're designing. For an experienced front-end developer the gains are minimal.

A more significant part of the time spent creating a webpage is wasted on CSS (or in javascript but I don't put it in the same boat). So if you have to optimise your process it's more efficient to learn something that will improve your css workflow (Sass, Compass, Less) than to add a layer above your html code.

[Killswitch]

No thanks, more trouble learning the basics of Zen Coding than it would take for me to just hand write that HTML.

If it works, don't fix it.

[michael_fine]

This is a really misleading title, I thought they were implying that you should use a WYSIWYG editor.

[jcampbelly]

I love Zen-Coding for stuff like this:

    html:5>(div.header>ul.nav>li>a[href="javascript:"]#menu$*6)

It's a complete HTML template in a one-liner...

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
      <meta charset="UTF-8">
      <title></title>
    </head>
    <body>
      <div class="header">
        <ul class="nav">
          <li>
            <a href="javascript:" id="menu1"></a>
            <a href="javascript:" id="menu2"></a>
            <a href="javascript:" id="menu3"></a>
            <a href="javascript:" id="menu4"></a>
            <a href="javascript:" id="menu5"></a>
            <a href="javascript:" id="menu6"></a>
          </li>
        </ul>
      </div>
    </body>
    </html>

[prezjordan]

Took a couple minutes to whip up a command-line utility [1] in Python. Doesn't have much use - just looking for something to do!

[1] https://gist.github.com/2841106

[lrenn]

If you're using XSLT, you're doing it wrong.

(I'm only kidding around...sorta.)

[wxl]

I don't edit HTML very much, but when I do, Zen coding helps so much. Especially since all you really need to know is CSS selector formatting.

[ericmuyser]

I dont hand code HTML. I write a small bash script to hand code it for me.