Stop hand coding, start Zen Coding | Hacker News Reader

Stop hand coding, start Zen Coding

whiletruecode.com

38 pointsjosh_earl42 comments

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/

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.

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.

I prefer accurate statements to catchy statements.

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.

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.

From the article:

> writing an XSLT stylesheet to transform an in-memory representation of a customer's bill into an HTML version for display on our site.

If you decide to counter-preach, it helps to read the article and understand it first.

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?

Looks like you missed most of the discussion: semantics, or machine-readable information, and accessibility matter enourmously on the web. At the end of that line of thought is just presenting a bitmap image, why bother with HTML at all? :)

First, semantics are not needed in many cases, like protected control panels. 2nd, semantics can be wrapping data within table cells.

The original problem with tables was using them together with spacers to create layout, not much other uses.

There's no inherent problem with tables, it is perfect for tabular layout. Data grids are tabular, most forms are tabular.

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

Maybe, we don't know what it looked like. These days you can do anything with CSS, even if by using display:table and family for emulating table behaviour while keeping nice markup.

Tables are ok; table-based layouts are not. Anyway, I was just getting back at the author for mocking the gist of my current profession - upon seeing the headline I thought he was promoting the use of WYSIWYG tools or something.

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.

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.

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.

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

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.

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.

eh, religion

Sure, except if you've worked with full web pages made of tables throughout, you know how they usually suck in terms of maintenance and how hard it is to make changes. It's also just a lot more boilerplate compared to doing it "the right way".

But if you know what you're doing, and you know why exactly you need a table here to do this particular thing (which should not be your entire web page due to maintenance issues), then go ahead and use a table. Like for emails it's pretty much a necessity (along with style attributes, sigh).

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.

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

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.

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.

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?

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.

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.

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

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>

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

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

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

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.

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

I just wasted my time...

This article pays time

Thought about using some preprocessor? Jade?

The end result is the same. Who are you to tell me how I should arrive there? I don't write vanilla HTML, but your tool of choice doesn't need to be mine. That's a choice for the individual to make and whatever they decide is fine. What's not okay is trying to make that decision for them or telling them that their choice is inferior.

It's not. Though your thought process might be.

Get some self esteem so you don't need to author posts insulting strangers.

Majoring in the minors?

Who actually spends the majority of their time editing html?

You'd be surprised.

Web design companies and others design everything in Photoshop/Fireworks. There are many people who's entire job it is to create 4-7 page websites from scratch, in a day or two. And that involves lots of HTML writing, and time pressure.

Sounds like a terrible way to live.

Tab completion included standard in many editors is just as efficient. Linkbait title but Zen is cool.

Reply on news.ycombinator.com