Forgot your password?
typodupeerror
Programming

Zen Coding 175

Posted by kdawson
from the change-your-life dept.
Download Squad has a quick review, with video, of Zen Coding (Google Code project page here), an extremely well-thought-out accelerator for anyone who codes HTML. Its syntax is CSS-like. Zen Coding has been around for a while — here's its author Sergey Chikuyonok's introduction in Smashing Magazine from last November — and it has now picked up support for more than a dozen editing environments, including Notepad++ and TextMate.
This discussion has been archived. No new comments can be posted.

Zen Coding

Comments Filter:
  • Vim? (Score:3, Informative)

    by 19061969 (939279) on Sunday May 02, 2010 @10:54PM (#32068752)
    There doesn't appear to be support for Vim but that already has another script called snipMate http://www.vim.org/scripts/script.php?script_id=2540 [vim.org]
  • Re:Vim? (Score:5, Informative)

    by vroom (43) * Works for Slashdot <vroom@blockstacker[ ]om ['s.c' in gap]> on Sunday May 02, 2010 @11:10PM (#32068842) Journal
    The official page doesn't mention vim support, but this script seems to match the functionality pretty closely http://mattn.github.com/zencoding-vim/ [github.com]

    Check the TUTORIAL file in the repo to either turn on by filetype or globally

  • Re:Vim? (Score:3, Informative)

    by ProdigyPuNk (614140) on Sunday May 02, 2010 @11:14PM (#32068868) Journal
    http://www.emacswiki.org/emacs/ZenCoding [emacswiki.org] ...and here it is for emacs. I've only seen this mentioned once or twice before, but it does make things quite a bit quicker. Work a lot better than my highlight/middle click copy/paste method ;p
  • Re:Vim? (Score:1, Informative)

    by Anonymous Coward on Sunday May 02, 2010 @11:32PM (#32068966)

    there's this one http://www.vim.org/scripts/script.php?script_id=2981 a clone

    It has some portability advantages as it doesn't need python support

  • by damianpeterson (1690134) on Monday May 03, 2010 @12:10AM (#32069110)
    When I first started watching the video demonstration linked to from the project page I though "nice" but after a while of watching obscure string after obscure string I realise that I'm probably better off just trying to memorise HTML instead of HTML *and* whatever the hell this is.
  • Zen Coding? (Score:2, Informative)

    by i_frame (665737) on Monday May 03, 2010 @12:13AM (#32069126)
    In my case, Bluefish or Quanta Plus are more than enough, don't need to learn another syntax.
  • by bcrowell (177657) on Monday May 03, 2010 @12:14AM (#32069130) Homepage

    ...crappiest article ever to get frontpaged on slashdot.

    It's a couple hundred words worth of "OMG!" with a code example.

  • by MoFoQ (584566) on Monday May 03, 2010 @12:19AM (#32069144)

    emEditor isn't open source let alone a $0 software

  • Re:Zen (Score:2, Informative)

    by tpstigers (1075021) on Monday May 03, 2010 @12:30AM (#32069202)
    The word zen means 'meditation'. Not real hard to grok. Nor is it difficult to understand why someone would consider coding to be a meditative process. Or were you actually referring to Zen?
  • by patro (104336) on Monday May 03, 2010 @12:32AM (#32069214) Journal

    Emacs users can find the relevant package here [emacswiki.org] with screenshots and demonstration Youtube video.

  • Re:Zen (Score:3, Informative)

    by Anonymous Coward on Monday May 03, 2010 @12:53AM (#32069328)
    Zen came to fruition the Tang Dynasty, at the height of development of Buddhism in China. It came as the highest practice, equivalent to Indian Prajnaparamita and Tibetan Dzogchen or Mahamudra traditions. The people who practiced it were those who already had great meditative ability and high capacity for understanding. Without a solid foundation, studying Zen (especially in the West) is simply nonsense. Without a background in the Buddhist sutras, you will likely just become confused or fool yourself into thinking it's just a mind game. From a real Zen master, Hsuan Hua:

    The stupid transmit to the stupid,
    One is teaching but neither has any idea.
    The teacher goes to hell.
    Where will the student end up?

  • by XaXXon (202882) <xaxxon@ g m ail.com> on Monday May 03, 2010 @01:08AM (#32069392) Homepage

    I recommend sass and haml for doing css and html respectively.

    http://haml-lang.com/ [haml-lang.com]

    http://sass-lang.com/ [sass-lang.com]

  • Re:Let's see... (Score:3, Informative)

    by hgavin (259102) on Monday May 03, 2010 @04:02AM (#32070072)

    how do you use them without inline JS?

    http://en.wikipedia.org/wiki/Unobtrusive_JavaScript [wikipedia.org]

  • Re:Let's see... (Score:1, Informative)

    by Anonymous Coward on Monday May 03, 2010 @04:04AM (#32070076)

    You're doing it wrong...
    JS should be included via a script tag with an src attribute; there should be NO inline code if you have built your pages cleanly. Your event hooks should be entirely in the scripting code, using your selector engine and event handling/delegation libraries of choice (or do it all with direct calls if you're a masochist that likes lots of capability and browser detection blocks).
    Your PHP code should have cleanly separated display files and business logic files; the former are templates, the latter are code.
    Your SQL should be kept in a separate resource file, not inlined with your code.
    If you're finding yourself making one-shot rule definitions in your CSS, then the site is not very well designed, and your headaches will multiply until it's fixed.
    These are ideals. Sometimes there will be a little fudging in the interest of expediency, of course, but if you are doing it all the time... just let us know what you're working on so we can all avoid it in the future.

  • Re:Let's see... (Score:3, Informative)

    by FredMenace (835698) on Monday May 03, 2010 @06:41AM (#32070536)

    It is trivial to have not a singe line of Javascript in your HTML, other than the link to the external Javascript file.

    See, for instance, http://api.jquery.com/category/events/ [jquery.com] for a set of jQuery methods for attaching events, using css-like selectors. (Most of these methods are special cases of "bind".)

    To avoid mixing HTML and PHP, you can use a templating engine like Smarty (http://www.smarty.net/crashcourse.php). (I prefer those that use a different syntax from regular PHP to help enforce the distinction.) I do understand that PHP was originally a templating language itself, at a time when most hard-core back-end logic might have been in C/C++ and the PHP was for gluing that to the markup. But now that PHP is used for that same back-end code, it makes sense to separate it out of the HTML, so front-end coders don't need to wade around in back-end logic, programmers don't need to worry about markup and presentation, and each file to edit is clear and understandable in itself, partly by consisting of a single language and sticking to a single task. (The template language is designed to be as simple as possible, and only has the limited capabilities necessary to include dynamic content - generated elsewhere - in HTML markup.)

    At the least, SQL should be in a separate data-abstraction layer. That layer may also be in PHP, but at least it's a special-case set of code just for accessing the data store (partly so that it can be replaced with a different data store if needed, without affecting any other code). Many frameworks use an object-relational mapping layer so you don't need to touch SQL at all.

    It's also pretty easy to keep CSS completely out of HTML, and if well-designed, the number of special cases to apply to single paragraphs can be very minimal.

    Yes, it can seem like all this is a lot of trouble when you're starting out or working on a very simple project, but as a project grows, it can very quickly become unmanageably complex otherwise. These are all tools for managing complexity and scale so that medium-sized projects are easily workable and large-sized projects are possible at all.

  • Re:Is there a point? (Score:3, Informative)

    by grumbel (592662) <grumbel@gmx.de> on Monday May 03, 2010 @08:29AM (#32071038) Homepage

    It's not a format, its just special syntax that you type into your editor that will get expanded to the full regular HTML. It's just there to save you typing, not replace .html files.

  • Re:Vim? (Score:3, Informative)

    by MagicM (85041) on Monday May 03, 2010 @11:59AM (#32073366)

    Actually, the official page [google.com] does mention it, under "Unofficial implementations":

    Vim (crossplatform) - Sparkup [github.com], Zen Coding for Vim [vim.org]

Do you suffer painful illumination? -- Isaac Newton, "Optics"

Working...