Stop hand coding, start Zen Coding

http://whiletruecode.com/post/stop-hand-coding-start-zen-coding

by josh_earl • 14 years ago

38 42 14 years ago

wxl• 14 years ago

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.

heretohelp2• 14 years ago

Majoring in the minors?

Who actually spends the majority of their time editing html?

kevinconroy4• 14 years ago

You'd be surprised.

jmitcheson• 14 years ago

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.

heretohelp2• 14 years ago

Sounds like a terrible way to live.

kevinconroy4• 14 years ago

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

jmduke• 14 years ago

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.

kevinconroy4• 14 years ago

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.

shpoonj2• 14 years ago

I prefer accurate statements to catchy statements.

michael_fine• 14 years ago

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

parkr• 14 years ago

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.

aaronblohowiak• 14 years ago

eh, religion

ehsanu1• 14 years ago

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).

kevinconroy4• 14 years ago

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• 14 years ago

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

ericmuyser• 14 years ago

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

mehulkar• 14 years ago

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.

ricardobeat3• 14 years ago

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• 14 years ago

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.

anthonyb• 14 years ago

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.

bmj• 14 years ago

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?

ricardobeat3• 14 years ago

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? :)

underwater• 14 years ago

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

ricardobeat3• 14 years ago

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.

crazygringo• 14 years ago

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.

kjhughes• 14 years ago

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/

rizky05• 14 years ago

I just wasted my time...

lopatin• 14 years ago

This article pays time

robwgibbons• 14 years ago

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

jcampbelly• 14 years ago

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>

recursive• 14 years ago

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?

tferris• 14 years ago

Thought about using some preprocessor? Jade?

shpoonj2• 14 years ago

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.

tangue• 14 years ago

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.

3pt14159• 14 years ago

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.

lrenn• 14 years ago

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

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

dillon• 14 years ago

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.

DigitalSea• 14 years ago

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.

prezjordan• 14 years ago

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

Killswitch• 14 years ago

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.

dmsinger• 14 years ago

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.

Stop hand coding, start Zen Coding

Related Stories