This will be the very first paragraph of this site...written in Emmet ;)
For years I had been hand coding html in Geany and Bluefish, both fast and friendly open source editors, before I decided to check out what that "Zen Coding" menu item in Bluefish was all about. Did some quick research and learned "Emmet" is the new name for "Zen Coding". I started experimenting with some easy Zen Coding abbreviations in Bluefish... and I was hooked! Even though at the time of my Zen Coding testing, Bluefish was not always reliable or stable as far as Zen Coding goes. Despite the occasional frustrations, I could feel the immense joy, power and liberation Emmet (then Zen Coding) promised.
To get up to speed with Emmet, its creators made a cheat sheet. Before you think "how nice of them", this cheat sheet is no less than 24 pages long! Who is cheating who here ;) But please don't panic like I did originally, when trying to visualize learning 24 pages of code by heart...There is absolutely no need to do so, as Coder Coder elegantly shows in the youtube on top of this page.
Atom, Bluefish, Brackets, Eclipse, Emacs, Geany, Notepad++, Sublime Text, Vim, Visual Studio Code, Visual Studio Codium, Webstorm... Your choice! (and there are probably more editors than I am aware of, working with Emmet or having an Emmet plugin available.)I tried the following:
It looks like this:
And the right side pane with the live preview:
If your screen is small (most laptops) and does not really allow 2 panes, just drag the preview tab to the left -editor- side. The preview pane will close , so you'll have the full screen available, both for the editor and for the preview -after clicking its tab )
What You See Is What You Get editors used to produce horrible html code. And mainly superfluous code, adding unneeded complexity and fragility. Most of them still do. I must confess, I used to keep an eye on them and regularly tried a new one or a new version. For a long time I thought "Wouldn't it be nice to just be able to write "normally" and it gets displayed on the internet just like you wrote it?" Like many I believed that the future is wysiwyg and that people still wrestling with html would sadly not survive evolution...
What all wysiwyg editors have in common is that they pile a lot of stuff on top of your pristine website: links,libraries, scripts, etc. In order for them to work, basically they have to take over the website and dictate their way. In my experience, the penalty for all this luxurious (?) wysiwyg is just too high.
Imagine writing perfect html, but without having to write it. Imagine writing a site or a blog can be done without all the add-on complexities promoted as "user-friendly" solutions. Imagine mastering your own writing and saying goodbye to all middlemen! Just try Emmet for one lazy afternoon!
in this sheet, just replace the '3' in the Unordered and the Ordered list by the amount of list-items you want. Or simply add list-items while composing. Likewise for Lorem: just replace the '20' by the amount of words you want.Back to Top