80 lines
7.8 KiB
Plaintext
80 lines
7.8 KiB
Plaintext
<h2 id="intro">Intro</h2>
|
|
|
|
<p>In 2020, I managed to squeeze out just one post. Well, 2021 ran out just as fast as 2020. So here we
|
|
are:</p>
|
|
|
|
<pre> <span class="diff-context"> 2020-12-31-happy-new-year.md</span>
|
|
<span class="diff-indicator-added">+</span><span class="diff-added">2021-12-31-happy-new-year.md
|
|
</span>
|
|
</pre>
|
|
|
|
<p>This year, I'll review a really cool package I've found. It's not new, I just didn't manage to
|
|
stumble upon it over the years. So it's new to me, and might be a useful pointer to others as well.</p>
|
|
|
|
<h2 id="emmet-mode">Emmet-mode</h2>
|
|
|
|
<p><a href="https://github.com/smihica/emmet-mode">Emmet-mode</a> is a wonderful Emacs package which greatly
|
|
improves HTML code generation. It's based on <a href="https://emmet.io/">Emmet</a>, so you can read up on the
|
|
syntax <a href="https://docs.emmet.io/abbreviations/syntax/">here</a>. I've discovered it quite recently after
|
|
reading Arjen Wiersma's
|
|
<a href="https://arjenwiersma.nl/writeups/emacs/22-years-of-emacs/">22-years-of-emacs</a>.</p>
|
|
|
|
<p>The gist is that <code>ul#nav>li.item$*4>a{Item $}</code> will expand to:</p>
|
|
<div class="highlight"><pre><code class="language-html"><span></span><span class="p"><</span><span class="nt">ul</span> <span class="na">id</span><span class="o">=</span><span class="s">"nav"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"item1"</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">""</span><span class="p">></span>Item 1<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"item2"</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">""</span><span class="p">></span>Item 2<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"item3"</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">""</span><span class="p">></span>Item 3<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">"item4"</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">""</span><span class="p">></span>Item 4<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
|
</code></pre></div>
|
|
<p>The above reminded me of <a href="https://oremacs.com/2014/12/26/the-little-package-that-could/">tiny.el</a>,
|
|
the concept of using <code>*4</code> to create four items, and <code>$</code> for automatic numbering is very similar.</p>
|
|
|
|
<p>Emmet goes above and beyond the 3 <a href="https://github.com/joaotavora/yasnippet">yasnippets</a> I had in my
|
|
config for inserting HTML tags. Note also the handy <code>html:5</code> snippet, which expands to:</p>
|
|
<div class="highlight"><pre><code class="language-html"><span></span><span class="cp"><!doctype html></span>
|
|
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"UTF-8"</span><span class="p">/></span>
|
|
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Document<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">body</span><span class="p">></</span><span class="nt">body</span><span class="p">></span>
|
|
<span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
|
</code></pre></div>
|
|
<p>And as a cherry on top, when used in <code>clojure-mode</code>, these snippets will produce <a href="https://github.com/weavejester/hiccup">hiccup</a>.</p>
|
|
|
|
<h2 id="getting-emmet-mode-for-free">Getting emmet-mode for free</h2>
|
|
|
|
<p>As I wrote <a href="https://oremacs.com/2015/05/17/avy-goto-line/">earlier</a> (feels like ages ago), I like to
|
|
get functionality for free, i.e. without having to sacrifice any old key bindings or learning new
|
|
key bindings. So I've integrated the code of <code>emmet-expand-line</code> with <kbd>C-o</kbd> (<code>ora-open-line</code>).
|
|
<br /><a href="https://github.com/abo-abo/oremacs/blob/614aaac1b49bb61fecfeae4671ec78b863ab054e/keys.el#L347">Here</a> is the relevant cond branch:</p>
|
|
<div class="highlight"><pre><code class="language-elisp"><span></span><span class="p">((</span><span class="k">and</span>
|
|
<span class="p">(</span><span class="nb">require</span> <span class="ss">'emmet-mode</span><span class="p">)</span>
|
|
<span class="p">(</span><span class="k">setq</span> <span class="nv">expr</span> <span class="p">(</span><span class="nv">emmet-expr-on-line</span><span class="p">))</span>
|
|
<span class="p">(</span><span class="k">setq</span> <span class="nv">markup</span> <span class="p">(</span><span class="nv">emmet-transform</span> <span class="p">(</span><span class="nv">first</span> <span class="nv">expr</span><span class="p">))))</span>
|
|
<span class="p">(</span><span class="nf">delete-region</span> <span class="p">(</span><span class="nv">second</span> <span class="nv">expr</span><span class="p">)</span> <span class="p">(</span><span class="nv">third</span> <span class="nv">expr</span><span class="p">))</span>
|
|
<span class="p">(</span><span class="nv">emmet-insert-and-flash</span> <span class="nv">markup</span><span class="p">)</span>
|
|
<span class="p">(</span><span class="nv">emmet-reposition-cursor</span> <span class="nv">expr</span><span class="p">))</span>
|
|
</code></pre></div>
|
|
<p>We check if <code>emmet-mode</code> has detected a valid snippet at point. In that case, expand it. This allows
|
|
us to chain multiple snippet engines (like <code>yasnippet</code>, <code>auto-yasnippet</code>, <code>tiny</code>, <code>emmet-mode</code>), and
|
|
even provide a <code>hydra</code> as a fallback for even more easy to reach commands on <kbd>C-o</kbd>!</p>
|
|
|
|
<h2 id="personal">Personal</h2>
|
|
|
|
<p>Our son, Lev, was born on May 7, 2021. He is our love, happiness, our shining light in 2021.
|
|
And also the reason why I didn't have too much free time to do Emacs stuff.
|
|
Big thanks to <a href="https://github.com/basil-conto">Basil L. Contovounesios</a> for helping me maintain Ivy!
|
|
I'm hoping to be much more active on Github in 2022.</p>
|
|
|
|
<p><img alt="Lev" src="http://oremacs.com/download/lev_1.jpg" /></p>
|
|
|
|
<p>In other personal news, I'm currently looking for a new job as a Software Engineer. If you'd like
|
|
me to work with you, please get in touch via <a href="https://www.linkedin.com/in/oleh-krehel/">LinkedIn</a> or
|
|
<a href="https://twitter.com/_abo_abo">Twitter</a>. Also, a big thanks to everyone
|
|
<a href="https://oremacs.com/donate/">donating</a> to support my open-source work. It means a lot.</p>
|
|
|
|
<h2 id="outro">Outro</h2>
|
|
|
|
<p>I wish everyone reading this good health in 2022! And happy hacking!</p> |