This will be the very first paragraph of this site...written in Emmet ;)
But why Emmet ? Well, I tried just about anything else: I have been hand-coding html for years and it easily deserves the price for the most boring, endlessly repetitive brain activity on earth. Those tags with their opening and closing angle brackets started to drive me crazy. They take away your attention just when you need it most as a writer. And it is simply boring! Counting stars is easily more exciting. Then there was a period with CMS's. Some I liked initially, but I always ended the relation as soon as I saw those systems, however nicely designed, added a lot of bloat and thus weight and vulnerability. They also tended to think and act on my behalf. I cannot accept a system limiting my freedom and creativity. Then I got excited about Markdown. I think I tried almost all of them. There are some really lovely solutions to be found in Markdown land, but do not look for consistency. there are dozens of Markdown approaches, each with their own pros and cons. Believe me, I gave Markdown a serious try. I even wrote a short howto for StackEdit, one of the best markdown online/offline editors. For me the biggest stumbling blocks is that you have to find an easy workflow to get your markdown files parsed into html, before uploading them to a server, and having to keep duplicate sources, the markdown for editing and the newly derived html to push to the server. OR, find a server that can do the md-parsing "effortlessly" , without slowing the rendering down and thus eating Watts unnecessarily...In my opinion a static website can only be run from a totally static server and that humble server has no ability to "dynamically" do stuff like parsing. It just serves what it is fed, html, css and perhaps some javascript, without having to translate or otherwise process anything.( I do hope some guru is reading this and, if needed, is willing to correct my thinking!)
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