<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
     xmlns:content="http://purl.org/rss/1.0/modules/content/"
     xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
     xmlns:atom="http://www.w3.org/2005/Atom"
     xmlns:dc="http://purl.org/dc/elements/1.1/"
     xmlns:wfw="http://wellformedweb.org/CommentAPI/"
     >
  <channel>
    <title>SirVer's Blog</title>
    <link>http://www.sirver.net/blog</link>
    <description>My thoughts about technology, science, programming and occasionally the world.</description>
    <pubDate>Sat, 25 May 2019 20:35:25 GMT</pubDate>
    <generator>Blogofile</generator>
    <sy:updatePeriod>hourly</sy:updatePeriod>
    <sy:updateFrequency>1</sy:updateFrequency>
    <item>
      <title>Design for the ideal text editor.</title>
      <link>http://www.sirver.net/blog/2015/08/21/design-for-the-ideal-text-editor.</link>
      <pubDate>Fri, 21 Aug 2015 18:37:44 CEST</pubDate>
      <category><![CDATA[Uncategorized]]></category>
      <guid isPermaLink="true">http://www.sirver.net/blog/2015/08/21/design-for-the-ideal-text-editor.</guid>
      <description>Design for the ideal text editor.</description>
      <content:encoded><![CDATA[

<h1>Design for the ideal text editor</h1>
<p>Update: There is now a <a class="reference external" href="https://github.com/swiboe/swiboe/pull/30">RFC for Swiboe</a> defining this design in more detail.
Comments welcome.</p>
<p><a class="reference external" href="/blog/2015/08/04/the-ideal-text-editor/">Last time</a> I discussed my thoughts on the ideal text editor. I also
mentioned that nothing quite fits the bill for me right now. Today, I want to
discuss a possible design for an editor that I think allows for all the things
that I look for and that is future proof.</p>
<p>I put a lot of thought into this lately - my frustration with Vim's
shortcoming's in daily life and my experiences in writing <a class="reference external" href="http://github.com/SirVer/UltiSnips">one of the more
successfull</a> Vim plugins out there have given me some insights which I tried
to distill in this design. I am currently exploring these ideas in code in
<a class="reference external" href="http://github.com/swiboe/swiboe">Swiboe</a> - my attempt at implementing the editor of by dreams. Contributions
are welcome.</p>

<h2>The best editor is no editor at all</h2>
<p>A simple idea got me started: everything is a plugin and a plugin has infinite
power. In Swiboe, these are all plugins: the buffer management (editing,
creating, loading), the fuzzy searcher, the git integration, the GUI program,
the cursor handling in the gui, the plugin loading - every functionality.
Swiboe is really just an operator on a switchboard:</p>
<a href="/media/img/034/switchboard_operator.jpg"><img alt="Switchboard operator. Image curtsey of Wikipedia." class="align-center" src="/media/img/034/switchboard_operator.jpg" style="width: 500px;" /></a><p>That is where its name is coming from: <strong>Swi</strong>tch <strong>Bo</strong>ard <strong>E</strong>ditor.</p>
<p>But how does that work? Let's design two basic plugins that know how to open
compressed files into buffers, one that can read Gzip, one that can read Bzip.</p>
<p>Swiboe listens on a socket and waits for plugins to connect. Once a plugin
connects, it registers remote procedure calls (RPCs) which have a name and a
priority.</p>
<div class="box"><div class="icon icon-none left"><div class="codeblock"><div class="highlight"><pre><span></span><span class="c1"># In gzip.py</span>
<span class="n">plugin</span> <span class="o">=</span> <span class="n">connect_to_swiboe</span><span class="p">(</span><span class="s2">&quot;/var/run/swiboe.socket&quot;</span><span class="p">)</span>
<span class="n">plugin</span><span class="o">.</span><span class="n">register_rpc</span><span class="p">(</span><span class="s2">&quot;buffer.open:gzip&quot;</span><span class="p">,</span> <span class="n">priority</span> <span class="o">=</span> <span class="mi">800</span><span class="p">,</span> <span class="n">buffer_open_gzip</span><span class="p">)</span>

<span class="c1"># In bzip.py</span>
<span class="n">plugin</span> <span class="o">=</span> <span class="n">connect_to_swiboe</span><span class="p">(</span><span class="s2">&quot;/var/run/swiboe.socket&quot;</span><span class="p">)</span>
<span class="n">plugin</span><span class="o">.</span><span class="n">register_rpc</span><span class="p">(</span><span class="s2">&quot;buffer.open:bzip&quot;</span><span class="p">,</span> <span class="n">priority</span> <span class="o">=</span> <span class="mi">799</span><span class="p">,</span> <span class="n">buffer_open_bzip</span><span class="p">)</span>
</pre></div>
</div></div></div><p>We'll define the <cite>buffer_open_gzip</cite> function later - <cite>buffer_open_bzip</cite>
follows by analogy.</p>
<p>Some other client (for example the GUI) now wants to open a file:</p>
<div class="box"><div class="icon icon-none left"><div class="codeblock"><div class="highlight"><pre><span></span><span class="n">gui</span> <span class="o">=</span> <span class="n">connect_to_swiboe</span><span class="p">(</span><span class="s2">&quot;/var/run/swiboe.socket&quot;</span><span class="p">)</span>
<span class="n">gui</span><span class="o">.</span><span class="n">call_rpc</span><span class="p">(</span><span class="s2">&quot;buffer.open&quot;</span><span class="p">,</span> <span class="n">args</span> <span class="o">=</span> <span class="p">{</span>
   <span class="s2">&quot;uri&quot;</span><span class="p">:</span> <span class="s2">&quot;file:///tmp/somefile.txt.gz&quot;</span>
<span class="p">})</span>
</pre></div>
</div></div></div><p>The <cite>args</cite> will be converted to JSON and handed to the called function.</p>
<p>The name of the called RPC defines <cite>what</cite> will get called: Swiboe will find
all registered RPCs that have the same prefix, so in our case both
<cite>buffer.open:gzip</cite> and <cite>buffer_open:bzip</cite> match. The name of the RPCs are
really just a convention:
<cite>dot.separated.namespaces:name_of_implementing_plugin</cite>. This allows callers to
call to a very specific function:</p>
<div class="box"><div class="icon icon-none left"><div class="codeblock"><div class="highlight"><pre><span></span><span class="c1"># I know that somefile.txt.bz is really a gzip file, so call the gzip</span>
<span class="c1"># handler directly. Signal it through &#39;i_know_what_i_am_doing&#39; that we are</span>
<span class="c1"># aware that the extension does not match.</span>
<span class="n">gui</span><span class="o">.</span><span class="n">call_rpc</span><span class="p">(</span><span class="s2">&quot;buffer.open:gzip&quot;</span><span class="p">,</span> <span class="n">args</span> <span class="o">=</span> <span class="p">{</span>
   <span class="s2">&quot;uri&quot;</span><span class="p">:</span> <span class="s2">&quot;file:///tmp/somefile.txt.bz&quot;</span><span class="p">,</span>
   <span class="s2">&quot;i_know_what_i_am_doing&quot;</span><span class="p">:</span> <span class="bp">True</span><span class="p">,</span>
<span class="p">})</span>
</pre></div>
</div></div></div><p>It also allows to call a very broad range of functions:</p>
<div class="box"><div class="icon icon-none left"><div class="codeblock"><div class="highlight"><pre><span></span><span class="c1"># Call all buffer functions that start with o - that is not very useful</span>
<span class="c1"># probably.</span>
<span class="n">gui</span><span class="o">.</span><span class="n">call_rpc</span><span class="p">(</span><span class="s2">&quot;buffer.o&quot;</span><span class="p">,</span> <span class="n">args</span> <span class="o">=</span> <span class="p">{</span>
   <span class="s2">&quot;uri&quot;</span><span class="p">:</span> <span class="s2">&quot;file:///tmp/somefile.txt.bz&quot;</span><span class="p">,</span>
<span class="p">})</span>
</pre></div>
</div></div></div><p>After the functions are determined, Swiboe sorts them by priority and tries them
one after the other. The functions work like event handlers in JavaScript or
GUIs - they can choose to handle the call and return a value, or they can
let the call through to the next. For example, the gzip handler could look
like this:</p>
<div class="box"><div class="icon icon-none left"><div class="codeblock"><div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">gzip</span>

<span class="k">def</span> <span class="nf">buffer_open_gzip</span><span class="p">(</span><span class="n">rpc_context</span><span class="p">,</span> <span class="n">uri</span><span class="p">,</span> <span class="n">i_know_what_i_am_doing</span> <span class="o">=</span> <span class="bp">False</span><span class="p">):</span>
   <span class="k">if</span> <span class="ow">not</span> <span class="n">uri</span><span class="o">.</span><span class="n">endswith</span><span class="p">(</span><span class="s2">&quot;.gz&quot;</span><span class="p">)</span> <span class="ow">and</span> <span class="ow">not</span> <span class="n">i_know_what_i_am_doing</span><span class="p">:</span>
      <span class="c1"># Let&#39;s inform Swiboe that we do not know what to do with this</span>
      <span class="c1"># request.</span>
      <span class="k">return</span> <span class="n">rpc_context</span><span class="o">.</span><span class="n">finish</span><span class="p">(</span><span class="n">NOT_HANDLED</span><span class="p">)</span>
   <span class="n">file_path</span> <span class="o">=</span> <span class="n">uri</span><span class="p">[</span><span class="mi">7</span><span class="p">:]</span>  <span class="c1"># Removes file://</span>
   <span class="n">content</span> <span class="o">=</span> <span class="n">gzip</span><span class="o">.</span><span class="n">open</span><span class="p">(</span><span class="n">file_path</span><span class="p">)</span><span class="o">.</span><span class="n">read</span><span class="p">()</span>

   <span class="c1"># Call an RPC to create a new buffer.</span>
   <span class="n">buffer_create_rpc</span> <span class="o">=</span> <span class="n">rpc_context</span><span class="o">.</span><span class="n">call_rpc</span><span class="p">(</span><span class="s2">&quot;buffer.create&quot;</span><span class="p">,</span> <span class="p">{</span>
      <span class="s2">&quot;content&quot;</span><span class="p">:</span> <span class="n">content</span><span class="p">,</span>
      <span class="s2">&quot;uri&quot;</span><span class="p">:</span> <span class="n">uri</span><span class="p">,</span>
   <span class="p">})</span>

   <span class="c1"># Wait for it to succeed or fail and return this value to our caller.</span>
   <span class="k">return</span> <span class="n">rpc_context</span><span class="o">.</span><span class="n">finish</span><span class="p">(</span><span class="n">buffer_create_rpc</span><span class="o">.</span><span class="n">wait</span><span class="p">())</span>
</pre></div>
</div></div></div>
<h3>Pro: Events are nothing special</h3>
<p>This design can also express something like Vim's autocommands - which are
just callbacks, really.</p>
<p>A callback is just an ordinary RPC. For example, when the buffer plugin
creates a new buffer, it calls <cite>on.buffer.created</cite>, but does not wait for this
call to finish. Everybody interested in buffer creation can just register a
matching RPC - with a I_DO_NOT_CARE priority. This signals Swiboe that all
these functions can be called in parallel.</p>
<p>If that is not desired, a priority can be specified to decide when to run - if
two plugins conflict they can fix their priority values to make things work.</p>


<h3>Pro: Extensibility</h3>
<p>A plugin is all-mighty in this design. Want to add functionality to
<cite>buffer.new:core</cite>? Just override it with something that has a higher priority
and do something else in it. Want to filter out your <cite>.gitignore</cite> files from
fuzzy find? Just write a <cite>fuzzy_find.files:git</cite> that is called before
<cite>fuzzy_find:core</cite>, calls it directly and filters its results before passing
them on. Want to use tab key for every kind of smart content expansion? No
problem, just define the order of functions to call and Swiboe will handle it
for you.</p>
<p>Everything is a plugin and therefore everything can be changed by other
plugins.</p>


<h3>Pro: Simplicity</h3>
<p>There is only one concept to understand in Swiboe: this layered RPC system.
Everything else is expressed through it.</p>
<p>There is a little more to the story - for example RPCs can also stream
results. For example the fuzzy files finder uses this to get partial results to the
GUI as fast as possible. But the core philosophy is just this one concept.</p>



<h2>The big concern: Performance</h2>
<p>Swiboe is an RPC system using Unix domain sockets right now. A RPC is more
overhead than a simple function call. My <a class="reference external" href="https://github.com/swiboe/swiboe/blob/master/benches/benches.rs#L20">benchmark</a> is creating a buffer and
immediately deleting it - these are 4 round trips:</p>
<div class="box"><div class="icon icon-none left"><div class="codeblock"><div class="highlight"><pre><span></span>client (create request) -&gt; Swiboe
Swiboe (create request) -&gt; buffer plugin
buffer plugin (create response) -&gt; Swiboe
Swiboe (create response) -&gt; client

client (delete request) -&gt; Swiboe
Swiboe (delete request) -&gt; buffer plugin
buffer plugin (delete response) -&gt; Swiboe
Swiboe (delete response) -&gt; client
</pre></div>
</div></div></div><p>Quick tangent. This displays well why I choose Swiboe as name. It connects
plugins until they found the right partner to talk to, enabling communication
with discretion and speed.</p>
<p>This flow takes ~290μs on my system - roughly 500 times slower as doing the
same with python function calls. However, I did not try to speed it up in any
way yet - both the protocol and the encoding are naive right now.</p>
<p>Also, I believe the RPCs are mainly gluing functionality together. Most
computation will be run in the plugins, in separate processes, in parallel. I
believe that sufficient performance for a fluent and responsive experience can
be reached.</p>
<p>And of course, performance is temporary, design is permanent. So let's start
with getting this right first.</p>


<h2>Disclaimer</h2>
<p>There is a lot of dreaming in this post. There is no python client yet for
Swiboe. (<strong>Update:</strong> <a class="reference external" href="https://github.com/swiboe/swiboe/tree/d87d0cf65d7e515c4da0827b468b87ff25ff174e/c_client">no longer true</a>). This design is still subject to change and not completely implemented
in Swiboe. There is no gzip or bzip plugin.</p>
<p>Also, the exact design and protocol of the layered RPC system is not written
down anywhere yet. (<strong>Update:</strong> <a class="reference external" href="https://github.com/swiboe/swiboe/pull/30">no longer true</a>)</p>
<p>Swiboe is open for contributions! If you want to design a cool text editor
with me, feel free to reach out.</p>



]]></content:encoded>
    </item>
    <item>
      <title>The ideal text editor</title>
      <link>http://www.sirver.net/blog/2015/08/04/the-ideal-text-editor</link>
      <pubDate>Tue, 04 Aug 2015 08:16:54 CEST</pubDate>
      <category><![CDATA[Uncategorized]]></category>
      <guid isPermaLink="true">http://www.sirver.net/blog/2015/08/04/the-ideal-text-editor</guid>
      <description>The ideal text editor</description>
      <content:encoded><![CDATA[

<h1>The Ideal Text Editor</h1>
<p>I am a <a class="reference external" href="https://www.vim.org">Vim</a> user and have been for more than 15 years now - with short stints
to other editors from time to time. I also wrote a <a class="reference external" href="https://github.com/SirVer/ultisnips">popular plugin</a> for Vim -
so I understand it's internals better than most. Still, I feel that Vim is
showing it's age - and it is hardly the ideal editor.</p>
<p>I also used <a class="reference external" href="https://macromates.com/">TextMate</a> for a while. I tried <a class="reference external" href="http://www.sublimetext.com/">Sublime</a> for a week or so and am
trying <a class="reference external" href="https://atom.io/">Atom</a> right now - I am writing this post in it. There is also a new kid
on the block (sorta) with <a class="reference external" href="http://brackets.io">Brackets</a> which seems to be very focused on web
design. All of them are impressive editors, but all fall short in some ways for
me. Here are my musings about the ideal text editor.</p>
<p>Here are the most important properties of an ideal text editor for me, in sorted order.</p>

<h2>Free</h2>
<p>This includes free as in free-beer and free as in free-speech. I used TextMate
for about a year and got plenty annoyed that I was unable to fix bugs since it
was closed sourced. The developer loosing interest in the project and basically
walking away also kinda sealed it's death. Imagine spending time learning a
powertool, just  to see it abandoned and left to bit rotting - and there is
nothing you can do. TextMate seems to be back after some years now - but I would
never set on a closed source editor again.</p>
<p>Being monetary free is important to get people involved. An editor that is just 100% free is
less risk to try out than one that you might need to shell out $$$ to use.</p>


<h2>Responsive</h2>
<p>A text editor must react as fast as I can think. It is not acceptable to wait for simple
tasks like switching a tab or running a command. I must never be interrupted while the
editor needs to finish some computation - like auto completion results or a <cite>make</cite> command.</p>


<h2>Modal</h2>
<p>Vim's best feature is its UI. Modal editing opens up so much more abilities to
control functionality. There are alternatives that are really good too - for
example a fuzzy selector over all available commands. But even when this feature
is available: with normal mode you have the full keyboard available for
shortcuts.</p>
<p>It also clearly defines cutting points for what undo/redo/repeat does. And Vim's
editing language (e.g. daw - delete a word) is intuitive, precise and quick.</p>
<p>I will never ever consider an editor that does not have strong modal support
build in. It is fine if it can be turned off of course - as long as it is not
implemented as an afterthought.</p>


<h2>Easy to extend</h2>
<p>This is a biggy. It should not matter what my main language is - as long as it
is turing complete I should be able to add new features to my editor. These
features should be arbitrarily powerful and seemlessly integrated, i.e. they
should be indistinguishible from build in commands. <a class="reference external" href="https://atom.io/">Atom</a> and <a class="reference external" href="http://www.sublimetext.com/">Sublime</a> are
good examples of editors that get this second part pretty right.</p>
<p>What they both get wrong is the choice of language: Atom is JavaScript and
Sublime is Python. If  you do not speak the language of your editor out, you are
demoted to <cite>User</cite> status.</p>
<p>Vim does a little better: It has support for Python, Ruby, Lua, Lisp ... you
name it. Unfortunately all of these integration are second class: You cannot
write a full plugin in either of these languages - you need a fair amount of
VimScript to glue it together. And after 7 years of UltiSnips I can confirm that
VimScript is no fun to write.</p>
<p>So a good editor should support as many languages as possible and all of them
should be first class citizens.</p>


<h2>Cross platform</h2>
<p>I never work on Windows, but I work on Mac OS and on Linux a ton. I need an
editor that runs on both. I think cross platform is also really important to
atract people - so Windows support is important too.</p>


<h2>Console/Remote editing</h2>
<p>I do not enjoy working in console Vim. I like my Editor to support me with a rich GUI
and I enjoy that my editor saves whenever I switch to the shell.</p>
<p>Howevr, occasionally I need to remote edit files on a server - I use console Vim
there. That is a really important feature for me. But even better would be if I
could remote edit the files: having the nice gui on my laptop talk (securely) to
the editor core running on the server would be great.</p>
<p>A console GUI is still important, since many people still like to work in the
console using tmux to never switch the program they are using. That is cool, and
I think an editor should support it.</p>


<h2>Beautiful</h2>
<p>There, I said it. I stare at my text editor 8 hours per day - it should better look nice.</p>


<h2>Collaborative</h2>
<p>I love working on documents with others in <a class="reference external" href="https://docs.google.com">Google Docs</a>. Every collaborater can edit the document
live and sees the cursor and the edit actions of others at the same time. Imagine how cool <a class="reference external" href="https://en.wikipedia.org/wiki/Pair_programming">pairing</a>
would be in an editor that supports that nicely and natively.</p>
<p>I know that there are plugins/hacks for existing editors - but it needs to be
there out of the box and easy to setup for people to actually pick it up.</p>


<h2>Conclusion</h2>
<p>These are the things I ask from an editor. I might have forgotten some stuff,
but these are the important things. I will continue this series of blog posts
with looks at  the editors that are currently out and how they fare. Also I want
to present a design that I think works to implement an editor close to my heart.</p>



]]></content:encoded>
    </item>
    <item>
      <title>Technology revamp on the blog</title>
      <link>http://www.sirver.net/blog/2015/03/15/technology-revamp-on-the-blog</link>
      <pubDate>Sun, 15 Mar 2015 14:07:11 CET</pubDate>
      <category><![CDATA[Uncategorized]]></category>
      <guid isPermaLink="true">http://www.sirver.net/blog/2015/03/15/technology-revamp-on-the-blog</guid>
      <description>Technology revamp on the blog</description>
      <content:encoded><![CDATA[

<h1>Technology revamp</h1>
<p>The technology on the blog <a class="reference external" href="http://en.wikipedia.org/wiki/Bit_rot">bit rotted</a> quite a bit lately. And of course it
has not seen any update or new content in years, but that is an entirely
different story.</p>
<p>To make sure the content still looks good in modern browsers, I revamped some
of the tech behind the site a bit now. For starters, I removed <a class="reference external" href="https://github.com/sorccu/cufon/">Cufon</a> - a
library to render fancy texts client side. I did not use it a lot and it made
some text on the page look blurred on my phone.</p>
<p>I also switched from pre-rendered images for math display to using <a class="reference external" href="https://www.mathjax.org/">MathJax</a>.
MathJax is not fully convincing - pretty heavyweight in terms of size, tons of
features I do not need and rather slow rendering. But it works well on my
phone and desktop and the math looks better than the images did, so I'll stick
with it for now.</p>
<p>The alternative I looked at was <a class="reference external" href="https://github.com/Khan/KaTeX">KaTeX</a>. It is way faster than MathJax, but
unfortunately <a class="reference external" href="https://github.com/Khan/KaTeX/issues/61">does not support the TeX align environment</a>, which is a show
stopper for me.</p>


]]></content:encoded>
    </item>
    <item>
      <title>Text Layouting Status Report</title>
      <link>http://www.sirver.net/blog/2012/06/19/text-layouting-status-report</link>
      <pubDate>Tue, 19 Jun 2012 20:26:16 CEST</pubDate>
      <category><![CDATA[Uncategorized]]></category>
      <guid isPermaLink="true">http://www.sirver.net/blog/2012/06/19/text-layouting-status-report</guid>
      <description>Text Layouting Status Report</description>
      <content:encoded><![CDATA[

<h1>Text Layouting Status Report</h1>
<p>So, it took me two weeks to finally get around to a status report, and Peter
even had to request it forcefully. But I have not been idle in this time.
Let's see.</p>

<h2>Pango? Harfbuzz? SDL_TTF!</h2>
<p>I spent quite some time investigating Pango and Harfbuzz, I blogged about it
in my previous post. I knew back then already that Pango was not ideal and
that even Wesnoth was not using Pango for their fancy help rendering (they use
if for some other types of text though). I then investigated Harfbuzz further
and though it seems like it will one day become what we need, it is not there.
In fact, it does not even have a stable version currently released. It can handle
international text pretty well, but it does not help in the left-to-right,
top-to-bottom rendering of text, nor with the breaking of text into
paragraphs.</p>
<p>So we are back to square one: The old-and-trusted SDL_TTF. I designed my code
around SDL as graphics engine, the text rendering is kinda plugged in and uses
SDL_TTF, but it should be easy to replace this with any other text engine when
one establishes itself as the one - be it Pango or Harfbuzz or anything else
in the future.</p>


<h2>What works?</h2>
<p>I just finished my initial implementation of the engine - It has all the
feature that Venatrix and myself have marked as <em>desirable</em>. Some of the
feature (like tables) are rather rudimentary, but I think it should be enough
for us. The whole engine is currently a stand alone library - in the next
step, I will plug it into the Widelands code.</p>
<p>But let's move on to pretty pictures. Here are some examples.</p>
<div class="box"><div class="icon icon-none left"><div class="codeblock"><div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">rt</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">sub</span> <span class="na">padding</span><span class="o">=</span><span class="s">5</span> <span class="na">background</span><span class="o">=</span><span class="s">000000</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">sub</span> <span class="na">width</span><span class="o">=</span><span class="s">350</span> <span class="na">background</span><span class="o">=</span><span class="s">win_bg.png</span> <span class="na">padding</span><span class="o">=</span><span class="s">2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span> <span class="na">align</span><span class="o">=</span><span class="s">center</span><span class="p">&gt;</span>
   <span class="p">&lt;</span><span class="nt">font</span> <span class="na">size</span><span class="o">=</span><span class="s">30</span> <span class="na">color</span><span class="o">=</span><span class="s">F2DF91</span> <span class="na">underline</span><span class="o">=</span><span class="s">true</span><span class="p">&gt;</span>This is a heading<span class="p">&lt;/</span><span class="nt">font</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">vspace</span> <span class="na">gap</span><span class="o">=</span><span class="s">2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">sub</span> <span class="na">margin</span><span class="o">=</span><span class="s">5</span> <span class="na">padding</span><span class="o">=</span><span class="s">5</span> <span class="na">background</span><span class="o">=</span><span class="s">&quot;ffffff&quot;</span> <span class="na">float</span><span class="o">=</span><span class="s">left</span><span class="p">&gt;</span>
   <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;wl-ico-128.png&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
   <span class="p">&lt;</span><span class="nt">p</span> <span class="na">align</span><span class="o">=</span><span class="s">center</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">font</span> <span class="na">size</span><span class="o">=</span><span class="s">10</span><span class="p">&gt;</span>This is the subtext for the image. Kinda like a
      caption.<span class="p">&lt;/</span><span class="nt">font</span><span class="p">&gt;</span>
   <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">sub</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span> <span class="na">indent</span><span class="o">=</span><span class="s">5</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">font</span> <span class="na">color</span><span class="o">=</span><span class="s">FEFE00</span> <span class="na">size</span><span class="o">=</span><span class="s">14</span><span class="p">&gt;</span>
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <span class="p">&lt;</span><span class="nt">font</span>
   <span class="na">italic</span><span class="o">=</span><span class="s">true</span> <span class="na">ref</span><span class="o">=</span><span class="s">&quot;hyperlink&quot;</span><span class="p">&gt;</span>sed diam nonumy<span class="p">&lt;/</span><span class="nt">font</span><span class="p">&gt;</span> eirmod tempor <span class="p">&lt;</span><span class="nt">font</span>
   <span class="na">underline</span><span class="o">=</span><span class="s">1</span> <span class="na">ref</span><span class="o">=</span><span class="s">&quot;somereference&quot;</span><span class="p">&gt;</span>invidunt ut labore et<span class="p">&lt;/</span><span class="nt">font</span><span class="p">&gt;</span> dolore
   magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
   <span class="p">&lt;</span><span class="nt">font</span> <span class="na">bold</span><span class="o">=</span><span class="s">true</span><span class="p">&gt;</span>duo dolores et ea rebum<span class="p">&lt;/</span><span class="nt">font</span><span class="p">&gt;</span>. Stet clita kasd
   gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<span class="p">&lt;/</span><span class="nt">font</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">sub</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">sub</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">rt</span><span class="p">&gt;</span>
</pre></div>
</div></div></div><p>This code renders to the following picture:</p>
<a href="/media/img/031/sample.png"><img alt="Sample image" class="align-center" src="/media/img/031/sample.png" /></a><p>This already shows off some of the features: changing fonts inside a
paragraph, sub layouts that can <em>float</em> inside the text. Margins and paddings
for some elements (though this is not as fully featured as in HTML) and of
course images. It also contains a <cite>ref</cite> attribute for a font tag which makes
this part of the text clickable. This will make hyperlinks in the help
possible.</p>
<p>Tables are kinda possible as well:</p>
<div class="box"><div class="icon icon-none left"><div class="codeblock"><div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">rt</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">sub</span> <span class="na">width</span><span class="o">=</span><span class="s">10</span><span class="p">&gt;&lt;/</span><span class="nt">sub</span><span class="p">&gt;&lt;</span><span class="nt">sub</span> <span class="na">width</span><span class="o">=</span><span class="s">240</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">sub</span> <span class="na">width</span><span class="o">=</span><span class="s">80</span> <span class="na">background</span><span class="o">=</span><span class="s">638c57</span><span class="p">&gt;&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Hello<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;&lt;/</span><span class="nt">sub</span><span class="p">&gt;&lt;</span><span class="nt">space</span><span class="p">&gt;&lt;</span><span class="nt">sub</span>
<span class="na">width</span><span class="o">=</span><span class="s">80</span> <span class="na">background</span><span class="o">=</span><span class="s">42deb7</span><span class="p">&gt;&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Nice<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;&lt;/</span><span class="nt">sub</span><span class="p">&gt;&lt;</span><span class="nt">space</span><span class="p">&gt;&lt;</span><span class="nt">sub</span>
<span class="na">width</span><span class="o">=</span><span class="s">80</span> <span class="na">background</span><span class="o">=</span><span class="s">43f447</span><span class="p">&gt;&lt;</span><span class="nt">p</span><span class="p">&gt;</span>World<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;&lt;/</span><span class="nt">sub</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>

<span class="p">&lt;</span><span class="nt">sub</span> <span class="na">width</span><span class="o">=</span><span class="s">80</span> <span class="na">background</span><span class="o">=</span><span class="s">404542</span> <span class="na">valign</span><span class="o">=</span><span class="s">center</span><span class="p">&gt;&lt;</span><span class="nt">p</span>
   <span class="na">align</span><span class="o">=</span><span class="s">center</span><span class="p">&gt;</span>Upsy<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;&lt;/</span><span class="nt">sub</span><span class="p">&gt;&lt;</span><span class="nt">space</span><span class="p">&gt;&lt;</span><span class="nt">sub</span>
<span class="na">width</span><span class="o">=</span><span class="s">80</span> <span class="na">background</span><span class="o">=</span><span class="s">e21038</span><span class="p">&gt;&lt;</span><span class="nt">p</span><span class="p">&gt;</span>And more<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;&lt;/</span><span class="nt">sub</span><span class="p">&gt;&lt;</span><span class="nt">space</span><span class="p">&gt;&lt;</span><span class="nt">sub</span>
<span class="na">width</span><span class="o">=</span><span class="s">80</span> <span class="na">background</span><span class="o">=</span><span class="s">0c7e8f</span> <span class="na">valign</span><span class="o">=</span><span class="s">center</span><span class="p">&gt;&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Thats all<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;&lt;/</span><span class="nt">sub</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">br</span><span class="p">&gt;</span>

<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">sub</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">rt</span><span class="p">&gt;</span>
</pre></div>
</div></div></div><p>Each row is a set of three fixed width cells separated by a <cite>&lt;space&gt;</cite> tag which
expands as needed (in this case not at all). The lines are separated by a
linebreak tag <cite>&lt;br&gt;</cite>. This kinda results in a table with fixed column count
and width. Good enough for Widelands I hope:</p>
<a href="/media/img/031/table.png"><img alt="Something like a table" class="align-center" src="/media/img/031/table.png" /></a><p>Bullet point lists are possible as well:</p>
<div class="box"><div class="icon icon-none left"><div class="codeblock"><div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">rt</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">font</span> <span class="na">size</span><span class="o">=</span><span class="s">20</span> <span class="na">underline</span><span class="o">=</span><span class="s">1</span><span class="p">&gt;</span>A bullet list<span class="p">&lt;/</span><span class="nt">font</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">sub</span> <span class="na">padding</span><span class="o">=</span><span class="s">10</span> <span class="na">width</span><span class="o">=</span><span class="s">490</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">sub</span> <span class="na">valign</span><span class="o">=</span><span class="s">top</span><span class="p">&gt;&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">space</span> <span class="na">fill</span><span class="o">=</span><span class="s">&quot; &quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span>
   <span class="na">src</span><span class="o">=</span><span class="s">bullet.png</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;&lt;/</span><span class="nt">sub</span><span class="p">&gt;&lt;</span><span class="nt">sub</span> <span class="na">width</span><span class="o">=</span><span class="s">450</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor.
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">sub</span><span class="p">&gt;</span>

<span class="p">&lt;</span><span class="nt">sub</span> <span class="na">valign</span><span class="o">=</span><span class="s">top</span><span class="p">&gt;&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">space</span> <span class="na">fill</span><span class="o">=</span><span class="s">&quot; &quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span>
   <span class="na">src</span><span class="o">=</span><span class="s">bullet.png</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;&lt;/</span><span class="nt">sub</span><span class="p">&gt;&lt;</span><span class="nt">sub</span> <span class="na">width</span><span class="o">=</span><span class="s">450</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet.
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">sub</span><span class="p">&gt;</span>

<span class="p">&lt;</span><span class="nt">sub</span> <span class="na">valign</span><span class="o">=</span><span class="s">top</span><span class="p">&gt;&lt;</span><span class="nt">p</span><span class="p">&gt;&lt;</span><span class="nt">space</span> <span class="na">fill</span><span class="o">=</span><span class="s">&quot; &quot;</span><span class="p">&gt;&lt;</span><span class="nt">img</span>
   <span class="na">src</span><span class="o">=</span><span class="s">bullet.png</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;&lt;/</span><span class="nt">sub</span><span class="p">&gt;&lt;</span><span class="nt">sub</span> <span class="na">width</span><span class="o">=</span><span class="s">450</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor.
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">sub</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>

<span class="p">&lt;/</span><span class="nt">sub</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">rt</span><span class="p">&gt;</span>
</pre></div>
</div></div></div><p>This uses a lot of sub layouts to achieve the desired result. It does not read
very nice, but which markup does? I plan to hide this all in some Lua
functions, just as we are already doing for scenarios to make it all nice to use as
well. This wall of text renders as</p>
<a href="/media/img/031/bullet_point.png"><img alt="Bullet point list" class="align-center" src="/media/img/031/bullet_point.png" /></a>

<h2>What's next?</h2>
<p>The next step is to integrate this layout engine into Widelands. Caching will
be really important here, because rendering with SDL_TTF is very slow. I feel
that the technical challenges of getting this engine on board will be
surmountable, the one thing I am really not looking forward to is changing all
rich texts that we already have to work with the new engine. Especially
the hard coded texts inside the source, the files in <cite>txts/</cite> and the early
campaigns (barbarians and empire) will be a lot of tedious work. I hope some
people hop on board to help me out with that.</p>
<p>Soo, expect a branch with this engine soonish on launchpad.</p>



]]></content:encoded>
    </item>
    <item>
      <title>Widelands Marathon Begins</title>
      <link>http://www.sirver.net/blog/2012/06/04/widelands-marathon-begins</link>
      <pubDate>Mon, 04 Jun 2012 10:57:34 CEST</pubDate>
      <category><![CDATA[Uncategorized]]></category>
      <guid isPermaLink="true">http://www.sirver.net/blog/2012/06/04/widelands-marathon-begins</guid>
      <description>Widelands Marathon Begins</description>
      <content:encoded><![CDATA[

<h1>My personal Widelands Marathon</h1>
<p>So, I finally handed in my PhD thesis. That does not mean that everything is said
and done, there is still an oral examination, a 30 minutes talk and some
demonstration stuff to be done. But it means that I am now officially out of
my previous job.</p>
<p>That means, before I will start at Google in September, I have around three
months to use for whatever I see fit (okay, okay, I also need to find a flat,
move, prepare for the oral examination, prepare the demo, and organize a huge
celebration. And I have some other obligations remaining). I want to use a lot
of time for Widelands in these three months. To keep me on track and
motivated, I decided to keep a development diary on this blog.</p>

<h2>First Project: Make the Widelands Help awesome</h2>
<p>Venatrix, Astuur and others have begun the immense project to write a help
for Widelands. I have provided a minimal framework to give buildings a help
window via a Lua script in the building's directory. This is already immensely
useful and significantly better than no help at all, but it feels rather
limited: Widelands text handling and layouting capabilities are rather limited
and there is currently no way to document other stuff than buildings. My first
project for now is to improve this situation.</p>


<h2>Text layouting</h2>
<p>Text layouting is a difficult problem, especially when we also consider
internationalization (just think chinese for example). I started out by
learning the various libraries that are around for this problem. There are two
contenders, the fist is <a class="reference external" href="http://pango.org">Pango</a>, the second <a class="reference external" href="http://harfbuzz.org">harfbuzz</a>.</p>

<h3>Pango</h3>
<p>Pango is the text layouting engine from the Gnome desktop environment. And it
is well suited for this task. Using <a class="reference external" href="http://cairographics.org">Cairo</a> for rendering and its own (limited)
markup language it is next to trivial to render a UTF-8 string with various
languages to a rectangular grid. This is not enough for what I want though:
Just think about an image inside a paragraph. Text should flow around it,
therefore it needs to be broken into a non rectangular shape. This is not easy with Pango:
It does provide a low level API to reflow text independently, but it is
awkward and one looses at lot of what Pango is good at (like transparent handling
of right-to-left text blocks).</p>
<p>Also, Pango does not allow to choose the TTF
font file to use for rendering directly, instead relying on fontconfig to find
a suitable system font. In Widelands, we would prefer to feed in our font
files ourselves - so we can be sure that it looks the same, no matter what
OS is used.</p>
<p>Pango is stable and used in a lot of products like Gnome. It is also what Wesnoth uses for most of
its rendering needs. But for the (cool) Wesnoth help, it is in fact not used,
likely because of the reflow problem I mentioned earlier.</p>
<p>Documentation for Pango is available in the form of a Doxygen output. This is
a nice reference, but hardly more useful than the source code itself. There is
also no easy tutorial that goes beyond the PangoLayout example that can only
render in rectangles. Especially, there is no example how to add custom markup
tags or how to do low(er) level layouting. The best I found is an <a class="reference external" href="https://web.archive.org/web/20120911184452/http://old.nabble.com:80/pango-layout-in-irregular-(non-rectangular)-bounding-shape-td22234986.html">old mailing
list post</a> that explains the steps needed to layout text oneself. I was
able to stitch those hints together to a binary that does just that. But it is
really awkward and it does not offer a lot of the functionality that the
PangoLayout wrapper offers. I kinda feel this is a dead-end for now.</p>


<h3>Harfbuzz</h3>
<p>Harfbuzz is a slightly lower level API that is in fact used by Pango. It
allows to load TTF directly and offers more control over layouting. For
rendering it also uses Cairo. Problem here is that there is no stable version
- according to the homepage, the API might change till 1.0, the current
version is 0.6. And there is no docu. Nada!</p>
<p>Luckily, there is a github user that provided an <a class="reference external" href="https://github.com/anoek/ex-sdl-cairo-freetype-harfbuzz/blob/master/ex-sdl-cairo-freetype-harfbuzz.c">example that is very close
to what I want to achieve and that shows off a lot of the features of
harfbuzz</a>. The API changes were already felt in this one year old example:
some of the functions take other arguments now than they did back then, but it was really
easy to figure out with the harfbuzz source code nearby. When run, the program shows the following window:</p>
<a href="/media/img/030/hf_screen.png"><img alt="text" class="align-center" src="/media/img/030/hf_screen.png" style="width: 500px;" /></a><p>I am yet unaware if harfbuzz is also able to break text according to grammatic
rules, but this looks promising.</p>
<p>Alright, so far for my two hours of Widelands for today.</p>




]]></content:encoded>
    </item>
    <item>
      <title>Fourth episode of UltiSnips Screencast</title>
      <link>http://www.sirver.net/blog/2012/03/31/fourth-episode-of-ultisnips-screencast</link>
      <pubDate>Sat, 31 Mar 2012 16:25:22 CEST</pubDate>
      <category><![CDATA[Uncategorized]]></category>
      <guid isPermaLink="true">http://www.sirver.net/blog/2012/03/31/fourth-episode-of-ultisnips-screencast</guid>
      <description>Fourth episode of UltiSnips Screencast</description>
      <content:encoded><![CDATA[

<h1>UltiSnips Screencast Episode 4</h1>
<p>I got around doing the final episode of my little screencast series on
<a class="reference external" href="https://www.vim.org/scripts/script.php?script_id=2715">UltiSnips</a>. This time I talk about Python interpolation and give an example
of a snippet that really makes my life easier.</p>
<center>
<iframe width="420" height="315" src="https://www.youtube.com/embed/JJQYwt6Diro" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</center><p>I always wanted to have a few screencasts showing off the main features of
UltiSnips but nobody was willing to take the time and effort to produce them. Now
that I've done it myself I can understand why: It takes a lot of time. From
start to finish - planing, recording, cutting, uploading and promoting one
screencast of roughly ten minutes takes approximately six to eight hours. It
was a lot of fun doing the casts though and I learned a lot. I am also
reasonably pleased with the final results.</p>
<p>If someone suggest a really good topic for a fifth screencast, I will consider
making one. But I feel that UltiSnips' main features are well covered now.
Thanks for sticking with me throughout the series!</p>
<blockquote>
<ul class="simple">
<li><a class="reference external" href="https://www.vim.org/scripts/script.php?script_id=2715">Vim Script Site</a></li>
<li><a class="reference external" href="https://launchpad.net/ultisnips">Launchpad Project</a></li>
<li><a class="reference external" href="https://github.com/sirver/UltiSnips">Github Project</a></li>
</ul>
</blockquote>


]]></content:encoded>
    </item>
    <item>
      <title>Third episode of UltiSnips Screencast</title>
      <link>http://www.sirver.net/blog/2012/02/05/third-episode-of-ultisnips-screencast</link>
      <pubDate>Sun, 05 Feb 2012 13:31:33 CET</pubDate>
      <category><![CDATA[Uncategorized]]></category>
      <guid isPermaLink="true">http://www.sirver.net/blog/2012/02/05/third-episode-of-ultisnips-screencast</guid>
      <description>Third episode of UltiSnips Screencast</description>
      <content:encoded><![CDATA[

<h1>UltiSnips 2.0 and Screencast Episode 3</h1>
<p>I just release UltiSnips 2.0 together with a short screencast to run you
through the new features.</p>
<center>
<iframe width="420" height="315" src="https://www.youtube.com/embed/hKrrOevbrxY" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</center><p>2.0 is a killer-feature release for me: Having normal mode editing and $VISUAL
support adds a lot of value to UltiSnips for me.</p>
<p>UltiSnips now has all the features I initially expected from a snippet plugin
when I started out writing it. It was not an easy road getting here but I am
proud what we have achieved. I consider it now mostly feature complete - I
will not object to good ideas for new features that enhance the user experience
but we will try as best as we can to avoid feature creep. UltiSnips
wants to be only one thing - the ultimate solution for snippets in Vim.</p>
<blockquote>
<ul class="simple">
<li><a class="reference external" href="https://www.vim.org/scripts/script.php?script_id=2715">Vim Script Site</a></li>
<li><a class="reference external" href="https://launchpad.net/ultisnips">Launchpad Project</a></li>
<li><a class="reference external" href="https://github.com/sirver/UltiSnips">Github Project</a></li>
</ul>
</blockquote>


]]></content:encoded>
    </item>
    <item>
      <title>The Statistical View on Least Squares</title>
      <link>http://www.sirver.net/blog/2012/02/03/the-statistical-view-on-least-squares</link>
      <pubDate>Fri, 03 Feb 2012 17:21:01 CET</pubDate>
      <category><![CDATA[Uncategorized]]></category>
      <guid isPermaLink="true">http://www.sirver.net/blog/2012/02/03/the-statistical-view-on-least-squares</guid>
      <description>The Statistical View on Least Squares</description>
      <content:encoded><![CDATA[

<h1>Least Squares and Statistics</h1>
<p><a class="reference external" href="/blog/2011/11/09/the-linear-algebra-view-on-least-squares/">Last time</a> I talked about the beautiful linear Algebra interpretation of
Least Squares which adds a wonderful geometric interpretation to the
analytical footwork we had to do <a class="reference external" href="/blog/2011/10/23/a-direct-look-on-least-squares">before</a>. This time I will borrow from a
video I saw on <a class="reference external" href="http://www.khanacademy.org/">Khan Academy</a> a long time ago. I connects some of the
elemental principles of statistics with regression.</p>
<p>The basic idea is similar to the analytical approach. But this time, we will
only try to fit a line to $$M$$ $$x$$/$$y$$ pairs. So, we
have a model of the form</p>
<block class="math">\begin{equation*}y(x) = m x + c.\end{equation*}</block><p>The squared errors between model and data is then</p>
<block class="math">\begin{align*}S := \sum_i \epsilon_i^2 &amp;= \sum_i (m x_i + c - y_i)^2 \\
   &amp;= \sum_i m^2 x_i^2 + 2 c m x_i + c^2 - 2 m x_i y_i - 2 c y_i + y_i^2\end{align*}</block><p>Of course, we search for the global minima of this solution with respect to
the parameters $$m$$ and $$c$$. So let's find the derivations:</p>
<block class="math">\begin{align*}0 \stackrel{!}{=} \frac{\partial S}{\partial m} &amp;= \sum_i 2 m x_i^2 + 2 c x_i - 2 x_i y_i \\
0 \stackrel{!}{=} \frac{\partial S}{\partial c} &amp;= \sum_i 2 m x_i + 2 c - 2 y_i\end{align*}</block><p>We can conveniently drop the 2 that appears in front of all terms.
We will now rewrite these equations by using the definition of the sample mean:</p>
<block class="math">\begin{equation*}\overline{x} = \frac{\sum_i x_i}{M}\end{equation*}</block><p>This gives:</p>
<block class="math">\begin{align*}0 \stackrel{!}{=} m M \overline{x^2} + M c \overline{x} - M \overline{x y} \\
0 \stackrel{!}{=} m M \overline{x} + M c - M \overline{y}\end{align*}</block><p>Let's loose the $$M$$ s and solve for $$m$$ and $$c$$.</p>
<block class="math">\begin{align*}m &amp;= \frac{\overline{x}\,\overline{y}- \overline{x y}}{\overline{x}^2 - \overline{x^2}} \\
c &amp;= \overline{y} - m \overline{x}\end{align*}</block><p>If you look closely at the term for the slope $$m$$ you see that this is
actually just the covariance of $$x$$ and $$y$$ divided by the variance of $$x$$.
I find this very intriguing.</p>


]]></content:encoded>
    </item>
    <item>
      <title>Second episode of UltiSnips Screencast</title>
      <link>http://www.sirver.net/blog/2012/01/08/second-episode-of-ultisnips-screencast</link>
      <pubDate>Sun, 08 Jan 2012 19:51:30 CET</pubDate>
      <category><![CDATA[Uncategorized]]></category>
      <guid isPermaLink="true">http://www.sirver.net/blog/2012/01/08/second-episode-of-ultisnips-screencast</guid>
      <description>Second episode of UltiSnips Screencast</description>
      <content:encoded><![CDATA[

<h1>UltiSnips Screencast Episode 2</h1>
<p>Second screencast is done and ready! If you have not yet seen the first,
<a class="reference external" href="http://www.sirver.net/blog/2011/12/30/first-episode-of-ultisnips-screencast/">look over here</a>. This was done under the maxim Done is
better than perfect. I had more advanced explanations planed, but the
screencast turned out to be longer than expected. I therefore opted for a
complete overview over the most common features of UltiSnips and will explain
some cooler stuff in this blog post.</p>
<p>So here is the video. You can find some snippets with their explanation below.</p>
<center>
<iframe width="420" height="315" src="https://www.youtube.com/embed/f_WQxYgK0Pk" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</center>
<h2>Elements inside of default text</h2>
<p>Placeholders can contain other UltiSnips elements. This is totally cool and
very useful. For example, the following snippet is defined for the html file
type and ships with UltiSnips:</p>
<div class="box"><div class="icon icon-none left"><div class="codeblock"><div class="highlight"><pre><span></span>snippet a
&lt;a <span class="nv">href</span><span class="o">=</span><span class="s2">&quot;</span><span class="nv">$1</span><span class="s2">&quot;</span><span class="si">${</span><span class="nv">2</span><span class="p">: class=</span><span class="s2">&quot;</span><span class="si">${</span><span class="nv">3</span><span class="p">:</span><span class="nv">link</span><span class="si">}</span><span class="s2">&quot;</span><span class="si">}</span>&gt;
    <span class="nv">$0</span>
&lt;/a&gt;
endsnippet
</pre></div>
</div></div></div><p>It allows to either delete the complete tabstop 2 with one keystroke. Or you
can jump to tabstop 3 and replace the CSS class name.</p>
<p>Another example:</p>
<div class="box"><div class="icon icon-none left"><div class="codeblock"><div class="highlight"><pre><span></span>snippet date
<span class="si">${</span><span class="nv">2</span><span class="p">:</span><span class="si">${</span><span class="nv">1</span><span class="p">:</span><span class="sb">`</span>date +%d<span class="sb">`</span><span class="si">}</span><span class="p">.</span><span class="sb">`</span>date +%m<span class="sb">`</span><span class="si">}</span>.<span class="sb">`</span>date +%Y<span class="sb">`</span>
endsnippet
</pre></div>
</div></div></div><p>This snippet will enter the current date in the format that is used in
Germany: dd.mm.yyyy. Jumping forward will allow you to either overwrite the
day or the day and the month. I use this in my todo files to enter due
dates.</p>


<h2>Complete Scripts in Shell Interpolation</h2>
<p>Shell interpolation is as powerful as the shell itself. Here is a silly
example that is basically a complete Perl script:</p>
<div class="box"><div class="icon icon-none left"><div class="codeblock"><div class="highlight"><pre><span></span><span class="n">snippet</span> <span class="n">random</span>
<span class="sb">`#!/usr/bin/perl</span>
<span class="sb">use LWP::Simple qw(get);</span>
<span class="sb">my $page = get &quot;http://www.random.org/integers/?num=1&amp;min=1&amp;max=100&amp;col=1&amp;base=10&amp;format=plain&amp;rnd=new&quot;;</span>
<span class="sb">print $page`</span>
<span class="n">endsnippet</span>
</pre></div>
</div></div></div><p>This snippet will insert a truly random number between 1 and 100 fetched from
<a class="reference external" href="http://random.org">random.org</a>. Useful? Maybe not, but a good example.</p>


<h2>Transformations are more powerful than you might think</h2>
<p>This transformation shows the transformation option <cite>g</cite> which means
global replace. It will uppercase every word in the first tabstop while
mirroring its content.</p>
<div class="box"><div class="icon icon-none left"><div class="codeblock"><div class="highlight"><pre><span></span>snippet title <span class="s2">&quot;Titelize in the Transformation&quot;</span>
<span class="si">${</span><span class="nv">1</span><span class="p">:</span><span class="nv">a</span><span class="p"> text</span><span class="si">}</span>
<span class="si">${</span><span class="nv">1</span><span class="p">/</span><span class="se">\w</span><span class="p">+</span><span class="se">\s</span><span class="p">*/</span><span class="se">\u</span><span class="nv">$0</span><span class="p">/g</span><span class="si">}</span>
endsnippet
</pre></div>
</div></div></div><p>In the replacement part of this transformation, the <cite>u</cite> means &quot;uppercase the
next character&quot; and the <cite>$0</cite> matches everything found. The complete
transformation basically says: find a word <cite>\w+</cite> and any number of whitespace
<cite>\s*</cite> and replace them through what you found, but uppercase one char. The <cite>g</cite>
at the end makes sure that not only the first but all words are uppercased.</p>

<h3>Conditional replacements</h3>
<p>One feature that I didn't mention in the screencast are conditional
replacements. When you capture a group in the search part of a replacement,
you can check if it was matched in the replacement like so: <cite>(?&lt;number&gt;:yes text:no text)</cite>.
<cite>yes text</cite> will be inserted if the group was matched, otherwise <cite>no text</cite> will
be inserted. A quick example:</p>
<div class="box"><div class="icon icon-none left"><div class="codeblock"><div class="highlight"><pre><span></span>snippet cond
<span class="si">${</span><span class="nv">1</span><span class="p">:</span><span class="nv">some_text</span><span class="si">}${</span><span class="nv">1</span><span class="p">/(o)|(t)|..*/(?1:</span><span class="nv">ne</span><span class="p">)(?2:</span><span class="nv">wo</span><span class="p">)/</span><span class="si">}</span>
endsnippet
</pre></div>
</div></div></div><p>The transformation will match a <cite>o</cite> at the beginning into group 1 or a <cite>t</cite> at
the beginning in group 2. The rest of the search string just matches
everything of the first tabstop. The replacement will either be <cite>ne</cite> when a
<cite>o</cite> was matched, <cite>wo</cite> when a <cite>t</cite> was matched or an empty string. That means
that you can just type a <cite>t</cite> to quickly get <cite>two</cite> as the complete content of
the snippet or a <cite>o</cite> to get <cite>one</cite>. If you type anything else, you only get the
content of the place holder, i.e. the verbatim of what you typed.</p>



<h2>Inword triggers</h2>
<p>The snippet option 'i' stands for <cite>inword trigger</cite>. Let's
say for some coding project, I often want to get variables that end on <cite>izer</cite>:
<cite>maperizer</cite>, <cite>vectorizer</cite>... I want to define a snippet with <cite>ri</cite> which should
expand to <cite>izer</cite>. Triggers are always matched to full words though - except
for when you use the <cite>i</cite> option for your snippet:</p>
<div class="box"><div class="icon icon-none left"><div class="codeblock"><div class="highlight"><pre><span></span>snippet ri <span class="s2">&quot;rizer&quot;</span> i
rizer
endsnippet
</pre></div>
</div></div></div><p>This does what I want: <cite>maperi&lt;tab&gt;</cite> -&gt; <cite>maperizer</cite>.</p>


<h2>Regular Expression triggers</h2>
<p>Regular expression triggers can be used with the <cite>r</cite> option to a snippet. Note
that you have to add delimiters around your trigger when using regular
expression triggers. I use the following snippet because I can never remember
on which exact trigger I set my $$\textrm{\LaTeX{}}$$ chapter snippet:</p>
<div class="box"><div class="icon icon-none left"><div class="codeblock"><div class="highlight"><pre><span></span>snippet <span class="s2">&quot;chap?t?e?r?&quot;</span> <span class="s2">&quot;Latex chapter&quot;</span> rb
<span class="se">\s</span>ection<span class="o">{</span>chapter<span class="o">}</span>
   <span class="nv">$0</span>
<span class="se">\e</span>nd<span class="o">{</span>chapter<span class="o">}</span>
endsnippet
</pre></div>
</div></div></div><p>This will expand on either <cite>cha</cite>, <cite>chap</cite>, <cite>chapt</cite>, <cite>chapte</cite> or <cite>chapter</cite>.
Regular Expression triggers are even more powerful because you can get access
the to <a class="reference external" href="http://docs.python.org/library/re.html#regular-expression-objects">match object</a> inside your python interpolation blocks. More on that
in the next episode.</p>
<p>Regular expression triggers also allow to define triggers with special
characters, whitespace or multi word triggers.</p>
<div class="box"><div class="icon icon-none left"><div class="codeblock"><div class="highlight"><pre><span></span>snippet <span class="s2">&quot; this is a trigger&quot;</span> <span class="s2">&quot;Multiword &amp; Whitespace&quot;</span> r
Hello World
endsnippet
</pre></div>
</div></div></div>


<h1>Conclusion</h1>
<p>The features we discussed so far are enough to make crazy snippets and will
suffice for most uses. If you ever feel lost or forget how to use one of the
features, take a look into UltiSnips help document, either via</p>
<div class="box"><div class="icon icon-none left"><div class="codeblock"><div class="highlight"><pre><span></span><span class="p">:</span>help UltiSnips
</pre></div>
</div></div></div><p>or <a class="reference external" href="http://bazaar.launchpad.net/~sirver/ultisnips/trunk/view/head:/doc/UltiSnips.txt">here online</a>.</p>
<p>Next time we will discuss python interpolation which brings even more power to
snippets. With it, some of the features we discussed so far will become easier
to read with and others will only then become possible. With python
interpolation there is basically nothing that a snippet can't do.</p>
<p>As always, leave comments and let me know what you think about the screencast
and the tips. Also let me know what you are interested in and what you would
like to see in future screencasts. I have no more topics for a fourth
screencast, so if you want one, let me know what you want to see in it.</p>


]]></content:encoded>
    </item>
    <item>
      <title>Move window done right</title>
      <link>http://www.sirver.net/blog/2012/01/04/move-window-done-right</link>
      <pubDate>Wed, 04 Jan 2012 11:41:29 CET</pubDate>
      <category><![CDATA[Uncategorized]]></category>
      <guid isPermaLink="true">http://www.sirver.net/blog/2012/01/04/move-window-done-right</guid>
      <description>Move window done right</description>
      <content:encoded><![CDATA[

<h1>Move window to the rescue</h1>
<p>Overlapping windows are a bad invention. Frankly, the one UI that works are
virtual desktops with non overlapping windows (e.g. window managers).
Given, the world becomes sane slowly with iOS leading the way: every
application is full screen there.</p>
<p>On Mac OS X, the situation is dire: windows just open wherever they want to. I
wrote a python script a while ago that can be called quickly from <a class="reference external" href="http://qsapp.com/">Quicksilver</a>
or <a class="reference external" href="http://www.obdev.at/products/launchbar/index-de.html">LaunchBar</a> which took a simple syntax to describe where you want your
window and moved it there. Problem: it was rather slow. It needed to run and
parse a command line tool to get number of screens and resolutions and it had
to ask for the frontmost application via AppleScript.</p>
<p>I got fed up with that yesterday and made it fast. Getting the frontmost
application and the number of screens and their resolution is now done via the
Carbon Framework in a C Extension. You can find the source code on GitHub,
download from there and use pip to install:</p>
<blockquote>
<a class="reference external" href="https://github.com/SirVer/move_window">https://github.com/SirVer/move_window</a></blockquote>

<h2>Usage</h2>
<p>You want to call this from LaunchBar or Quicksilver, so install/make a proper
AppleScript (I ship one in <cite>contrib</cite>). The tool takes the following syntax:</p>
<div class="box"><div class="icon icon-none left"><div class="codeblock"><div class="highlight"><pre><span></span>move_window &lt;screen_id&gt;&lt;nr of x parts&gt;&lt;x span&gt;&lt;nr of y parts&gt;&lt;y span&gt;
</pre></div>
</div></div></div><p>Some examples</p>
<div class="box"><div class="icon icon-none left"><div class="codeblock"><div class="highlight"><pre><span></span>move_window <span class="m">0</span>     <span class="c1"># Disp 0, full Screen</span>
move_window <span class="m">02</span>    <span class="c1"># Disp 0, left half of screen</span>
move_window <span class="m">030</span>   <span class="c1"># Disp 0, left third of screen</span>
move_window <span class="m">031</span>-2 <span class="c1"># Disp 0, rightmost two thirds of screen</span>
move_window <span class="m">12121</span> <span class="c1"># Disp 1, bottom right quarter of screen</span>
</pre></div>
</div></div></div><p>Feedback and pull request are very welcome!</p>



]]></content:encoded>
    </item>
  </channel>
</rss>
