5 ms·
If you code HTML, Zen Coding will change your life
- teaspoon 16y agoZen 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.
- steveklabnik 16y agoAnd that upside would go away, because you could just configure your deployment tool to do the 'rendering' upon deployment, generating HTML that could be served by any framework.
- psadauskas 16y agoFor 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.
- zefhous 16y agoAlso, the point of HAML isn't just to make writing code faster, but to make it more maintainable as well. You lose that with Zen Coding.
- bradgessler 16y agoThe nested tag syntax would be a sweet addition to haml.
- swombat 16y agoThat's a seriously exaggerated title.
- stretchwithme 16y agosome lives are more easily changed than others :-)
- rokhayakebe 16y agoThat's a seriously understated comment.
- netghost 16y agoFor very small values of change
- keefe 16y agoplus I mean, is HTML syntax really the pain point here, vs you know figuring out a CSS layout?
- mpobrien 16y agoLooks 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-sparkup-vim-and-textmate/ http://jetpackweb.com/blog/2010/03/04/write-html-faster-with...
- jamesbritt 16y agohttp://news.ycombinator.com/item?id=1167716 http://news.ycombinator.com/item?id=1167716
- nostrademons 16y agoThe 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.
- harisenbon 16y agoI feel similarly about all these HTML improvements (although i would love some CSS variable action like in SASS). Almost any homepage I create that's not a one-shot throwaway for a client is going to running on top of some sort of framework. That means that for any table like this, I'm only going write a single row (at most), and then have my framework iterate over it and turn it into pretty code. I love any time-saving or code-saving functions and features in my code as much as the next guy, but this seems like an unnecessary complication to already rather streamlined coding. Also the fact that any IDE with decent auto-complete will be able to do the same thing with just three strokes instead of all that. (For example, in Eclipse if I type "<tab" then press enter, I get a fully formed pretty table in 5 key strokes.
- 16y ago
- jrockway 16y agoThere'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.
- ido 16y agoThe problem is that you still have to communicate with others, and others already know html/css/whatever rather than the new whiz-bang tech.
- jrockway 16y agoIf you want to optimize for other people's productivity, that's fine. But that's not what's best for you. Also, there is a simple solution to this problem -- a program that converts $foo into HTML and a program that converts HTML into $foo. pandoc is an example.
- ido 16y agoWhich me? Me the business owner that hires both web designers and programmers? Me the team leader that needs to manage a heterogeneous group of people, each with a different skill-set? Me the one-man-shop (and programmer) who outsources the design work? If I have both web designers and programmers on my team having them communicate can most certainly be my problem (or at the very least a problem I am gravely effected by).
- jrockway 16y agoIf only you had hired people that could learn new skills.
- adamc 16y agoEmacs minor mode: http://www.emacswiki.org/emacs/ZenCoding 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.
- anatta 16y agoThis 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.
- crazydiamond 16y agoWhen 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 16y ago>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 16y agoDoesn't look like it: http://www.infynity.spodzone.com/vim/HTML/HTML.txt http://www.infynity.spodzone.com/vim/HTML/HTML.txt
- netghost 16y agoI've seen it implemented as a binary, so VIM can call it (I think someone wrote a plugin already). There's a version for textmate that works quite well.
- philfreo 16y agohttp://code.google.com/p/zen-coding/ http://code.google.com/p/zen-coding/ Towards the bottom is a pretty long list of what it's available for. There are several OS X apps it supports, but Aptana is the only free one I believe. It's quite good if you can deal with how big of a program it is - you should check it out if you haven't already.
- smhinsey 16y agoI 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.
- brettnak 16y agoCan it do html back to zen and then can I use it with erb/any other templating language? That would be useful.
- camwest 16y agoIs 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 16y agoas a guy who gets paid to write this shit for 8 hours a day -- Yes, and yes.
- aaronbrethorst 16y agoYou spend 8 hours a day just writing HTML? That sounds horrible.
- jorsh 16y agoyes it is. now it is just a little bit less horrible thanks to this.
- ComputerGuru 16y agoSorry, but you don't "code" HTML, you just write it.
- RyanMcGreal 16y agoI 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).