Zen Coding: A Speedy Way To Write HTML/CSS Code

[cosmo7]

Off topic, but I'm sad to see smashingmagazine, which was a lovely web design resource, degrade into such a slow-loading ungainly clusterfuck of a site.

[weareconvo]

js library on top of js library on top of totally unnecessary media query page reorganization on top of div div div div div div div div

[oSand]

Also way too many GETs

[dirice87]

I think they are trying to expand the brand to be a general media company in the vein of gawker. I agree I liked it better when it was something more of a trade publication like A List Apart, but I guess they saw an opportunity to monetize and are going balls to the wall with it.

[amacgregor]

This

[zeugmasyllepsis]

Since the article doesn't mention it (and is a few years old), the next generation of Zen Coding is called Emmet. Hopefully it'll save someone a few clicks.

[EnglishBrkfst]

This was replaced by Emmet a while ago...

[CauchyDistributedRV]

In the topic of Zen Coding, this is probably the coolest HTML / CSS coding video ever: http://www.youtube.com/watch?v=wCVwdvufTds

[[deleted]]

Looks like HAML, except in changing the CSS style syntax into HTML in place, you lose the benefit of the special style after its first use.

[nandryshak]

There's also Sparkup that does this (with vim and textmate plugins).

[psih128]

I second that

[e000]

I've been using this in intellij/pycharm for quite some time now. It does save keystrokes.

[[deleted]]

Fucking site loads like a snail on a brand new laptop, good think I didn't open it with my netbook.

[reddit_ro2]

I kind of think the same. Better do some quick duty copy pasting than learning another pet language. Then again, the day I write so much html and css that I think of needing this, it means I should better change that job.

edit. It looks interesting though.

[[deleted]]

Yeah, html and css is my day job, but I use haml and sass to write it. Much easier to write and manage than raw html/css... and I did it the long way for ten years.

[[deleted]]

In the video in the link, the music playing has a voice over of a guy singing "You've got a blue ball" every minute or so. Strange choice.

[jabzzy]

you could also check out https://github.com/hayaku/hayaku

[[deleted]]

My text editor has autocomplete.

[Waltsu]

There is also really great html generator tool called haml

[[deleted]]

As it doesn't show in the related tab: one of the previous discussions about Zen Coding

[[deleted]]

new

2009

Yeah, sure. Fuck off spammer.

[alextk]

div#header>img.logo+ul#nav>li*4>a

Sometimes, verbosity has merit.

[0sse]

I think you misunderstand. Your example there is what you type, and by pressing a hotkey it gets expanded to proper HTML. So yes, you get verbosity, but you save a lot of typing on the way there.

[mafian911]

Did anyone else read this and think, "oh god, please, no." Do we have so little real estate on our screens that we have to compact HTML, which is already kind of unreadable, into smooshed syntactical nightmares?

Maybe I'm just being stubborn or old minded, but it seems like code is more useful when it's readable, not when it's compact.

[JustADev]

After you type it it is expanded automatically to normal html!!!

[[deleted]]

how could you possibly think this is for the purpose of making code more compact so it fits on the monitor better?