Published: 10 May 2013
Last year sometime I came across Zen Coding, a set of plugins for high-speed HTML and CSS coding. I may have heard of it earlier than that, but it was sometime last year that I realized there was a Dreamweaver extension available on the Google Code repository for Zen Coding.
At work, we use Dreamweaver as our editor for static website pages. I’m not sure when that originated, but I’m not really writing this post to debate which code editor is the best one. I personally use Sublime Text at home, other people use other editors, large organizations buy in to software from well estblished providers. So since we use Dreamweaver at work, I try to go the “Question Behind the Question” route and get as efficient as possible with the tools I have instead of complaining and making excuses about why I can’t code.
Back to Zen Coding. I loved it and started to implement it in my workflow when I would markup HTML and CSS prototypes for back end developers to use. Where it was especially useful for me was when I needed to simulate bunches of data in, say, repeating table rows or multiple search results. One line of Zen Coding turned into a whole table of 50 rows with the press of a keyboard shortcut.
Fast forward a few months to early 2013. I was working on a content update request where content was being copied from Word documents and pasted into HTML files via the WYSIWYG pane of Dreamweaver. Lots of symbols needed to be replaced with their HTML entities. I found myself doing many find/replaces and then using very simple regular expressions to find similar symbols and replace them with them with each entity. First I saved these searches, but then I needed to open each search and run them individually. I knew others on the team ran into this on a more page-by-page level, so I thought wouldn’t it be cool if there was a Dreamweaver extension that ran all the searches at once on an individual page?
Then I remembered, there was that Zen Coding Dreamweaver extension, and the code was all available in the Google Code repository. Did a little googling to find a couple simple guides on how to put together an extension and also the Adobe guide for packaging it up. That along with the Zen Coding files was enough for me to roll my own! I took out the bits that were specific to my work, and pushed it out to Github, too!
Going even further now to just a few weeks ago. Sergey Chikuyonok, the creator of Zen Coding, released Emmet.io not too long ago. Basically Emmet is Zen Coding upgraded and facelifted. I looked immediately to see if there was an extension for Dreamweaver… there wasn’t. Checked out the Github repos and found a few people had already submitted an issue that basically asked for Dreamweaver support. I got in on the discussion, and got brave enough to ask some questions about what it would take. In the end, I don’t think I had a whole lot to do with the extension getting built, but it just feels so good to be a part of something like that! Especially when it’s related to something I just learned about! A week or so later, Sergey replied in the issue that the Dreamweaver extension was ready to test. I tested, gave my feedback, he patched it up, and now there’s a working extension, soon to find it’s way to Adobe Exchange. So cool!
comments powered by Disqus