Welcome to the Zen garden at CodeMyConcept! Leave all your coding troubles behind and prepare yourself to find a new way to develop PSD to HTML. Take a big breath and let’s begin!

Balance is important in everything we do in our life. Developers have suffer years of basic hand coding from PSD to HTML converters that take at least 20 minutes to write down. When a client tells you to “code my design to CSS for tomorrow” it  becomes a total waste of time to write the basics of the PSD to CSS when you need more time to focus on the “div” contents.

That was until 2009 when Sergey Chikuyonok created Zen Coding an editor plugin for high-speed XSL, XML and HTML coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions into beautiful PSD to HTML code and it has not been the same since then.

This is not any other code-completion plugin. By writing down in one sentence it acts like a formula that magically creates the “div” you need. It searches from the cursors current position rather than scanning the document from the beginning. It consists of two core components: an abbreviation expander and context independent HTML pair tag matcher.

The tools have been incorporated into a number of high-profile text editors, some plug-ins developed by the Zen Coding team and others implemented independently. However, it is primarily independent from any text editor, as the engine works directly with text rather than with any particular software.

These plugins are developed by Zen Coding team:

1) Aptana/Eclipse- Build, edit, preview and debugging HTML, CSS and JavaScript websites with PHP and Ruby on Rails web development.

2) TextMate- Declarative customizations, tabs for open documents, recordable macros, folding sections and snippets, shell integration, and an extensible bundle system.

5) Komodo Edit/IDE- It is a commercial IDE with a wealth of features to make you more productive: debugging of PHP, Python, Perl, Ruby and Tcl; source code control integration with Subversion, Git, Mercurial, Perforce, CVS and Bazaar.

6) PSPad- The editor supports many file types and languages, with syntax highlighting.

7) editArea- The main goal is to allow text formatting, search and replace and real-time syntax highlight.

It has two major element types: snippets (arbitrary code fragments) and abbreviations (tag definitions). With snippets, you can write anything you want, and it will be outputted; but you have to manually format it. There are third-party supported editors, such as:

1) Sublime Text- A sophisticated text editor for code, html and prose.

2) UltraEdit- Versatile and easy to use, it is the ideal text, hex, XML, HTML, PHP, Java, Javascript, Perl, and programmer’s editor.

3) GEdit- Designed as a general purpose text editor, gedit emphasizes simplicity and ease of use. It includes tools for editing source code and structured text such as markup languages.

You are ready to give it a try now. Thanks for stopping by CodeMyConcept’s Zen garden, go ahead and apply all you have learned here today and come back to tell us how it went.  Remember that we encourage you to try and learn how to code and do implementations manually, since sometimes converters might create errors or not be as reliable as hand written coding.