

If you code HTML, Zen Coding will change your life - michaelfairley
http://www.downloadsquad.com/2010/04/30/if-you-code-html-zen-coding-will-change-your-life/

======
jrockway
There's a reason why C compilers aren't implemented as editor macros that
convert what you type into assembly, as you type it. It's because a high-level
programmer never wants to work at that low level; he should never see the
lower level. Ideally, he shouldn't even know that the lower level exists.
(When was the last time you debugged your CPU microcode?)

If something is so cumbersome that it needs to be abstracted away, do it
right. It's really fun to press a few keys and watch a bunch of code show up,
but it's even more fun to not watch it show up. Because then you have
something that's not a write-once operation.

~~~
veeti
I'm not sure I understand your point: Zen Coding just makes it easier to
_write HTML_ (like autocompletion in an IDE) instead of translating it into
some other language (like your Assembly example).

~~~
vcrash
The point is that, while Zen Coding is easy to manipulate (C), it's being
converted to something hard to manipulate (Assembly) as you go, making it
challenging to go back and rearrange things.

------
teaspoon
Zen Coding seems like the Haml philosophy implemented as code completion
rather than as a run time compiler. The upside is that the markup you generate
is plain old HTML that any web framework can serve. The downside is that it
has the readability of plain old HTML.

~~~
psadauskas
For me, its never been the initial coding of HTML that was the problem;
there's always been plenty of text-editor solutions like auto-close and find-
matching tags. Instead, the PITA of HTML is refactoring it and moving bits
around, which is what Haml alleviates, but this does not.

------
nostrademons
The thing I don't like about all these ways to "improve" HTML/CSS is that they
all seem to assume the rest of the webapp ecosystem doesn't exist.

Take SASS's variables and arithmetic, for instance. I agree that CSS
desperately needs some way to abstract out common values. But any decent
webapp will _already_ be using some sort of template system, and the template
system will have some sort of variable. Why not use it and be consistent with
the rest of your UI? If you introduce SASS into the mix, you just have to do
things one way in your CSS and another way in your markup.

Same thing with Zen Coding. Instead of using an editor plugin that expands
abbreviations (which then have to be maintained), why not use your template
system and avoid writing all that code in the first place? If I were writing
the example listed here, it'd look something like this:

    
    
      <div id=menu>
        <table>
          <tr>
            {{#CELL}}<td><a href="" class=nav></a>{{/CELL}}
        </table>
      </div>
    

(That's using google-ctemplates because it's what I work with daily, but
substitute in Django, Cheetah, Mako, or erb as necessary.)

Yes, there's still room for improvement, and yes, I wish my editor were more
aware of available template variables. But I also don't have to maintain the 5
separate <td> tags once I've typed them out, I can change one and have its
updates be reflected across all the generated code. I can avoid those pesky
closing tags by simply not typing them; the HTML spec doesn't require them,
all browsers handle it fine, and it saves end-user latency as well. And I
don't need to learn a new tool, I just have to use my existing tools better.

~~~
gamache
You could do CSS in a templating system, sure. First off, you'd want to cache
it, but that's a solved problem. And you'd be well served to cook up some
subtemplates/helpers/whatever that automated away some of the drudgery. Pretty
soon you'd have more ideas on how to keep your CSS more maintainable, your
subtemplates would become more general, etc.

At this point you have implemented most of Sass/Less/etc but you have a bunch
of templating gunk, less documentation, and hundreds fewer eyeballs looking at
the code. Or, you have not implemented most of Sass/Less/etc and you are still
writing CSS like a chump.

~~~
nostrademons
But it would be the _same_ templating gunk that is used by the rest of your
webapp, which most likely has _more_ documentation and thousands _more_
eyeballs looking at the code than Sass. Most people don't roll their own
templating systems. They use an established library that's been battle-tested
on websites before. These libraries have been around a lot longer than
Sass/Haml has.

------
swombat
That's a seriously exaggerated title.

~~~
stretchwithme
some lives are more easily changed than others :-)

------
smhinsey
I find this odd. It's been awhile since I have done dedicated front-end work,
maybe 5 years or so, but it was never writing this kind of code that was the
real time suck, it was always making sure it worked in every browser that was
the real problem.

------
mpobrien
Looks almost exactly like the Sparkup plugin for vim + TextMate, which also
ended up on HN not too long ago: [http://jetpackweb.com/blog/2010/03/04/write-
html-faster-with...](http://jetpackweb.com/blog/2010/03/04/write-html-faster-
with-sparkup-vim-and-textmate/)

~~~
jamesbritt
<http://news.ycombinator.com/item?id=1167716>

------
adamc
Emacs minor mode: <http://www.emacswiki.org/emacs/ZenCoding>

Doesn't seem all that life-changing to me, but I guess it could speed you up
if you churn out a lot of html every day.

------
RyanMcGreal
I prefer something like Markdown, which is:

a) Dead-easy to write;

b) Dead-easy to read; and

c) Dead-easy to 'compile' into HTML whenever you're ready (e.g. at runtime).

------
camwest
Is writing TONS of HTML really a problem that needs solving? Are people
writing Bible-Tome sized pieces of markup? This feels like a solution in need
of a problem.

~~~
jorsh
as a guy who gets paid to write this shit for 8 hours a day -- Yes, and yes.

~~~
aaronbrethorst
You spend 8 hours a day just writing HTML? That sounds horrible.

~~~
jorsh
yes it is. now it is just a little bit less horrible thanks to this.

------
crazydiamond
When i want to code HTML i use HTML.vim (for vim of course). Of course, you
have to memorize some keystrokes such as ";bo" for bold. or ;fo for font or
";fc" for font color etc, but these are really easy.

I'd be interested in knowing if this is available for some OS X editor (pref a
free one) and whether they have vim support. (Cant recall if TextWrangler is
free)

~~~
pbhjpbhj
>Of course, you have to memorize some keystrokes such as ";bo" for bold. or
;fo for font or ";fc" for font color etc, but these are really easy.

I hope those shortcuts are writing CSS?!

~~~
studer
Doesn't look like it:

<http://www.infynity.spodzone.com/vim/HTML/HTML.txt>

------
brettnak
Can it do html back to zen and then can I use it with erb/any other templating
language? That would be useful.

------
anatta
This plugin really shines in conjunction with your editor's power features. I
use Zen Coding with the SublimeText editor's multiple and reflective
selections.

Writing lengthy boilerplate code becomes trivially fast.

------
bradgessler
The nested tag syntax would be a sweet addition to haml.

------
ComputerGuru
Sorry, but you don't "code" HTML, you just write it.

