Richard A. KraaijenhagenJekyll2021-04-06T15:10:16-04:00http://riichard.com/Richard A. Kraaijenhagenhttp://riichard.com/stdin@riichard.com
http://riichard.com/verify-website-authenticity-with-gnu-pgp
http://riichard.com/verify-website-authenticity-with-gnu-pgp2019-06-09T04:00:00-04:002019-06-09T04:00:00-04:00Richard A. Kraaijenhagenhttp://riichard.comstdin@riichard.com<h2 id="tls-would-only-secure-the-connection">TLS would only secure the connection</h2>
<p>TLS can be used to verify a website’s authenticity, it’s a guarantee
the content is untampered between the server and the browser. Yet we still have
to trust there’s no changes on the client, nothing that would sniff our
passwords, or steal our sessions, or alter the news article to different
meanings or truths. Either at the browser scope, or within the publishing
software.</p>
<p>This TLS protocol generates trust between the connection of the server and the
client. It doesn’t secure us beyond the author from other people. Such as
engineers on the server who have access to the same content. Or from javascript
code added to the website that could later alter and publish false information.</p>
<h2 id="using-pgp-for-verification-of-the-entire-website">Using PGP for verification of the entire website</h2>
<p>In this case PGP can be used to take the trust back to the original author. A
hash can so be made of the entire website, which would then be signed, and
can be verified using a trusted public key.</p>
<p>This using PGP can in exchange guarantee an end-to-end signature between the
writer and the reader. This extends beyond the serverside trust of the TLS and
is fully traceable back to the author.</p>
<h2 id="reducing-attack-vectors">Reducing attack vectors</h2>
<p>It limits the attack vectors from the server stack, it’s CDN, API keys, and
developers, and fully restores trust in the author’s management of their
private key. PGP can still be used to draw a complete trusted line from the
start to the end, rather than having to trust all the integration in between.</p>
<p>It allows matured security, from hardware wallets, to a well established
revokeability infrastructure.</p>
<p>PGP was built for guarantee of authenticity (and encryption), so there’s
nothing new about it. Except it’s rarely done on a full scale for the entire
website.</p>
<p>To verify the content, one must download the entire website, which we can
simplify using git. This would let pull in the latest incremental changes, and
verify the hash and content yourself.</p>
<h2 id="signing-the-commit-hashes">Signing the commit hashes</h2>
<p>Each publication of content gets wrapped in a git commit, which is a hash of
the previous commit, and the applied changes. Which since <code class="language-plaintext highlighter-rouge">git 2.19</code> uses
<code class="language-plaintext highlighter-rouge">SHA256</code> for it’s hashing (it used to be <code class="language-plaintext highlighter-rouge">SHA1</code>).
The SHA256 hash is signed, and attached to each git commit. And github
conveniently makes and publishes these signature verifications on their website
and their API.</p>
<h2 id="verification-snippet-embedded-in-the-website">Verification snippet embedded in the website</h2>
<p>One could then list all the commits for the website’s repo te verify the
signatures on github [such as here][commitlist]. And for convenience, you can
verify the content via a javascript snippet on the website. This checks for
each page visited the signature via the github API, and warns the user if the
signature verification fails.</p>
<p>This relies on the browser and github API. But as described before, it can
still be verified locally in it’s full content, and simply acts as a short
notice/sign of trust that the content can be trusted.</p>
<h2 id="how-is-this-different-from-tls">How is this different from TLS?</h2>
<p>This guarantees the content from the start at the author level, rather than the
server level. To full control of the verification at the <em>client level</em>,
rather than the browser level.</p>
<h2 id="why-not-sign-the-text-rather-than-the-entire-website">Why not sign the text, rather than the entire website?</h2>
<p>The content is rendered in the browser, rather it doesn’t verify the javascript
scope of the entire website (apart from any extensions).</p>
<h2 id="why-use-git">Why use git?</h2>
<p>It compresses the entire website to it’s boilerplate content, uses SHA256
hashes for it’s changes, has verifycations built in, and let’s you fetch
changes incrementally.</p>
<h2 id="didnt-git-use-sha1-for-its-hashing">Didn’t git use SHA1 for it’s hashing?</h2>
<p>It did, but not anymore since git 2.19</p>
<h2 id="what-is-actually-signed">What is actually signed?</h2>
<p>A hash of the changes, plus the hash of the previous commit. Any change would
require a new signature for all following commits.</p>
<h2 id="why-do-you-check-the-latest-commit-overall-rather-than-the-latest-commit-to-the-actual-page">Why do you check the latest commit overall, rather than the latest commit to the actual page?</h2>
<p>The scope of the entire website needs to be verified, rather than the current
page. It always remains as an artifact of</p>
<h2 id="why-do-you-embed-this-verification-state-on-the-website-that-means-you-can-still-change-it">Why do you embed this verification state on the website, that means you can still change it?</h2>
<p>Yes, embedding the verification button on the website makes it possible to
change verification button to make it always look green. So it’s best to have
it as a browser extension itself for a fully trusted verification.</p>
<p>This is a proof of concept, I hope I will build this out later into a fully
fledged browser extension.</p>
<p><a href="http://riichard.com/verify-website-authenticity-with-gnu-pgp">End-to-end verifiable web content using GnuPGP</a> was originally published by Richard A. Kraaijenhagen at <a href="http://riichard.com">Richard A. Kraaijenhagen</a> on June 09, 2019.</p>
http://riichard.com/git-slides
http://riichard.com/git-slides2015-12-07T03:00:00-05:002015-12-07T03:00:00-05:00Richard A. Kraaijenhagenhttp://riichard.comstdin@riichard.com<div class="col-xs-12 col-md-6 pull-right">
<div class="thumbnail">
<img src="../images/powerpoint.gif" />
<div class="caption">
<p>Creating goodlooking presentations, with no time is a pain.
There's not enough time to structure your story, and visual
WYSIWYG distract you from focussing on the content.</p>
</div>
</div>
</div>
<p>When it comes to creating presentations, the most popular tools have the most
burdensome UI.</p>
<p>This distracts the user from being able to focus on the story. Creating even a
simple slide can take several unnecessary interactions. Editing the styling for
the slide is cumbersome, as each slide must be edited manually.</p>
<p>Why do we need such complex tools to create quick and simple presentations?</p>
<h2 id="taking-away-the-ui">Taking away the UI</h2>
<p>Text-only solutions for creating presentation slide decks without a UI are not
new, but often require advanced code with HTML, or its design is stuck in the
nineties. For those of us with an eye for design, the solution is gitslides.</p>
<p>Now, the only thing you need to think about is the content itself.</p>
<p>GitSlides utilizes the popular markup language <code class="language-plaintext highlighter-rouge">markdown</code>. A syntax that was
specifically designed to take away markup-distractions from the content.
Markdown is currently supported by Github, StackOverflow, Tumblr and WikiPedia
and seems to be the trending default for formatting.</p>
<p>You won’t need to study any new knowledge if you’re already familiar with
Markdown. New slides are simply created by adding a new <code class="language-plaintext highlighter-rouge">#heading</code>, just as if
you were writing a normal markdown file.</p>
<h2 id="design">Design</h2>
<p>Having zero design/font/color specifications allows you to easily switch themes
or have a controllable cross company slide deck theme with a logo and company
colors.</p>
<p>Existing themes can be easily incorporated and edited using gitslides.</p>
<h2 id="staying-flex-with-html">Staying flex with HTML</h2>
<p>Built on top of the popular presentation framework [Reveal.js] and with
intelligent parsing within gitslides, you can <em>still</em> use HTML within your
markdown, separating it with a line-break. Almost as if it were the same
language.</p>
<h2 id="git">Git</h2>
<p>As the name suggests, this text-only system ensures seamless integration
with git to support fluent collaboration. Team-mates can make edits and
changes to the deck can easily be reviewed and optionally merged into a master
slide.</p>
<h2 id="shareable-internally-or-on-github-pages">Shareable: internally or on GitHub pages</h2>
<p>Each deck is hosted internally on a git-server or publicly on github-pages.
Simply fork this project on GitHub and create a file in your <code class="language-plaintext highlighter-rouge">./_slides/</code> or
<code class="language-plaintext highlighter-rouge">._posts</code> folder. You can already view your presentation on
<code class="language-plaintext highlighter-rouge">yourusername.github.io/slides/slides/name-of-your-file</code>.</p>
<h2 id="pdf-is-your-friend">PDF is your friend</h2>
<p>Need to upload your deck, put it on slideshare or share it by email? Export
your deck by clicking the print button and opt for save-as-pdf.</p>
<h1 id="how-to-get-started">How to get started</h1>
<h2 id="fork-this-project-to-create-your-own-slides-directory">Fork this project to create your own slides directory</h2>
<p>This project is
<a href="https://github.com/riichard/slides/">hosted on GitHub</a>. Start creating
markdown slides by forking this project and triggering a commit to your fork,
you can host your own gitslides directory. All your slides will be viewable on
<code class="language-plaintext highlighter-rouge">yourusername.github.io/slides/</code>. Add all your HTML/markdown slides to the
<code class="language-plaintext highlighter-rouge">slides</code> folder and they will automatically be listed on the front page.</p>
<iframe src="https://ghbtns.com/github-btn.html?user=riichard&repo=slides&type=fork&count=true&size=large" frameborder="0" scrolling="0" width="158px" height="30px"></iframe>
<p>To get started with your own slides repo!</p>
<p><a href="http://riichard.com/git-slides">Git Slides, a rapid presentation tool using Markdown and Github Pages</a> was originally published by Richard A. Kraaijenhagen at <a href="http://riichard.com">Richard A. Kraaijenhagen</a> on December 07, 2015.</p>
http://riichard.com/boolean-parser
http://riichard.com/boolean-parser2015-11-20T00:00:00-05:002015-11-20T00:00:00-05:00Richard A. Kraaijenhagenhttp://riichard.comstdin@riichard.com<p><a href="https://travis-ci.org/riichard/boolean-parser-js"><img src="https://travis-ci.org/riichard/boolean-parser-js.svg?branch=master" alt="Build Status" /></a></p>
<p>Matching a query string to a string to get a boolean answer whether it matches
or not is a pain. Take for instance the following query, roughly matching each
string related to an aviation disaster:</p>
<p><code class="language-plaintext highlighter-rouge">(plane OR helicopter OR boeing) AND (crash OR fire OR accident)</code>.</p>
<p>Parsing this sentence recursively, with each bracket and boolean <code class="language-plaintext highlighter-rouge">AND</code>/<code class="language-plaintext highlighter-rouge">OR</code>
logic becomes a bug prone process.</p>
<h1 id="introducing-boolean-parser">Introducing Boolean-parser</h1>
<p>This function converts a boolean query to a 2 dimensional array with all
possibilities. This allows you to quickly and easily see what scenarios will
equal true in a complex boolean conditional.</p>
<p>This tool is great when constructing complex search filters that need to be
matched with text. Creating search tools that need to show up more refined
results than that would be possible with a simple <code class="language-plaintext highlighter-rouge">AND</code> combination.</p>
<p><a href="https://github.com/riichard/boolean-parser-js" class="btn btn-default"><i class="icon-github"></i> View boolean-parser-js on GitHub</a></p>
<h4 id="examples">Examples:</h4>
<table>
<thead>
<tr>
<th>Input</th>
<th>Output</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="language-plaintext highlighter-rouge">a AND b</code></td>
<td><code class="language-plaintext highlighter-rouge">[[a, b]]</code></td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">a OR b</code></td>
<td><code class="language-plaintext highlighter-rouge">[[a], [b]]</code></td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">a AND b AND c</code></td>
<td><code class="language-plaintext highlighter-rouge">[[a, b, c]]</code></td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">a AND b OR c</code></td>
<td><code class="language-plaintext highlighter-rouge">[[a, b], [c]]</code></td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">a AND (b OR c)</code></td>
<td><code class="language-plaintext highlighter-rouge">[[a, b], [a, c]]</code></td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">a AND (b OR c) AND (d OR e)</code></td>
<td><code class="language-plaintext highlighter-rouge">[[a, b, d], [a, b, e], [a, c, d], [a, c, e]]</code></td>
</tr>
</tbody>
</table>
<p>Whereas <code class="language-plaintext highlighter-rouge">a</code>, <code class="language-plaintext highlighter-rouge">b</code> and <code class="language-plaintext highlighter-rouge">c</code> represent words, forming a complex query pattern.</p>
<p>This function works recursively trough all brackets and generates an array of
all possible combinations of a matching query.</p>
<h4 id="long-term-example">Long term example</h4>
<h6 id="input">Input:</h6>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>((a AND (b OR c)) AND (d AND e) AND (f OR g OR h)) OR i OR j
</code></pre></div></div>
<h6 id="output">Output:</h6>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[[a,b,d,e,f],
[a,c,d,e,f],
[a,b,d,e,g],
[a,c,d,e,g],
[a,b,d,e,h],
[a,c,d,e,h],
[i],
[j]]
</code></pre></div></div>
<h2 id="philosophy">Philosophy</h2>
<p>The output is meant to be easily parsed to check for matches. There are more
efficient ways to check matches to this query by only checking each term once,
though this method is one that is easier to maintain and limits risk of side
effects. Especially when considering recursively nested queries involving many
brackets and AND/OR combinations.</p>
<h2 id="installing">Installing</h2>
<p><code class="language-plaintext highlighter-rouge">npm install boolean-parser</code></p>
<h2 id="usage">Usage</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var booleanParser = require('boolean-parser');
var searchPhrase = '((a AND (b OR c)) AND (d AND e) AND (f OR g OR h)) OR i OR j';
var parsedQuery = booleanParser.parseBooleanQuery(searchPhrase);
// Returns:
// [['a','b','d','e','f'],
// ['a','b','d','e','g'],
// ['a','b','d','e','h'],
// ['a','c','d','e','f'],
// ['a','c','d','e','g'],
// ['a','c','d','e','h'],
// ['i'],['j']]
</code></pre></div></div>
<h2 id="how-does-this-library-work">How does this library work</h2>
<ol>
<li>Parse string to an Array of OR items (strings). Everything that’s in between
brackets will be treated as one word and will later be recursively parsed.</li>
<li>Go trough each string in that Array, and parse it to an array of AND items.</li>
<li>Recursively call the <code class="language-plaintext highlighter-rouge">parseBooleanQuery</code> function on whatever is in between
brackets. These recursive calls will return an array of all possible combinations
within those brackets. (An <code class="language-plaintext highlighter-rouge">OR</code> array of <code class="language-plaintext highlighter-rouge">AND</code> combinations)</li>
<li>Create an empty array called <code class="language-plaintext highlighter-rouge">nestedPaths</code>. And add all nested combinations that
are in between brackets to that array.
For instance, with the query:
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>((a AND (b OR c)) AND (d AND e) AND (f OR g OR h OR j)) AND x AND y AND z
</code></pre></div> </div>
<p>Path will look like the following.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// nestedPath =
[ [ [a,b], [a,c] ],
[ [d,e] ],
[ [f], [g], [h], [j] ] ]
</code></pre></div> </div>
</li>
<li>Then push the remaining non-bracket AND terms to this array.
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// nestedPath =
[ [ [a,b], [a,c] ],
[ [d,e] ],
[ [f], [g], [h], [j] ]
[ [x,y,z] ] ]
</code></pre></div> </div>
</li>
<li>Then using the <code class="language-plaintext highlighter-rouge">orsAndMerge</code>, all those AND paths in those OR paths will be combined with the
other OR combinations.
In:
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[
[ [ a ], [ b ] ],
[ [ c, d ], [ e ] ],
[ [ f ] ]
]
</code></pre></div> </div>
<p>Out:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[
[ a, c, d, f ],
[ b, c, d, f ],
[ a, e, f ],
[ b, e, f ]
]
</code></pre></div> </div>
</li>
<li>Then we concatenate all those <code class="language-plaintext highlighter-rouge">OR</code> paths that were in between those <code class="language-plaintext highlighter-rouge">OR</code> terms
to one Array using the <code class="language-plaintext highlighter-rouge">mergeOrs</code> function.
In:
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[
[ [ a, b ], [ c ] ],
[ [ d ] ],
[ [ e ], [ f, g ] ]
]
</code></pre></div> </div>
<p>Out:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[
[ a, b ], [ c ], [ d ], [ e ], [ f, g ]
]
</code></pre></div> </div>
</li>
</ol>
<p><a href="http://riichard.com/boolean-parser">Boolean-parser.js - A sanity check for boolean logic</a> was originally published by Richard A. Kraaijenhagen at <a href="http://riichard.com">Richard A. Kraaijenhagen</a> on November 20, 2015.</p>
http://riichard.com/mechanical-claw
http://riichard.com/mechanical-claw2015-10-30T04:00:00-04:002015-10-30T04:00:00-04:00Richard A. Kraaijenhagenhttp://riichard.comstdin@riichard.com<p>A while ago I had this hobby project where we ordered a mechanical claw from ebay and
connected it to an Arduino to control it via websockets.
This in the end would allow a webcam to be connected, and make the claw to be
remotely controlled, with multiple cameras in the front, top of the claw and
sideways for a unique perspective.</p>
<div class="row">
<video loop="" controls="" height="500" class="col-md-12">
<source src="/static/claw/arduino.mp4" type="video/mp4" />
</video>
</div>
<h3 id="the-hardware">The hardware</h3>
<p>The Arduino was connected to some relais, which were connected to the engines
in the mechanical claw. You can use the arrow keys to move the thing around.</p>
<p>On the claw were some switches activating an electric current. These could be
used to detect whether:</p>
<p>There is load on the claw (if you reach the bottom, the claw becomes
weightless).</p>
<ul>
<li>Whether you reached the top of the wire.</li>
<li>Reaching the end of the YZ axis.</li>
</ul>
<div class="row">
<video loop="" controls="" height="500" class="col-md-12">
<source src="/static/claw/hamster.mp4" type="video/mp4" />
</video>
</div>
<h3 id="source-code">Source code</h3>
<p>I’ve published the sourcecode for this project on Github. It’s written with
NodeJS using the <a href="https://github.com/rwaldron/johnny-five">johnny-five library</a> to run in a browser or to control the machine from a
different computer. And uses a websockets protocol in order to have direct response on the machine,
and binds the keyboard arrow keys keyup/keydown to toggle power activation.</p>
<p>Watch the source code here: https://github.com/riichard/claw</p>
<h3 id="final-results">Final results</h3>
<p>Due to too much lack of my expertise, I never got to the end goal of setting up the website with a webcam livestream and remote controlled keyboard.
It did work like a champ via a 3rd party streaming service such as Skype or
Google Hangouts and was fun to have friends play around with it like that..</p>
<p><a href="http://riichard.com/mechanical-claw">Remote controlled mechanical claw</a> was originally published by Richard A. Kraaijenhagen at <a href="http://riichard.com">Richard A. Kraaijenhagen</a> on October 30, 2015.</p>
http://riichard.com/wifi-popups
http://riichard.com/wifi-popups2015-08-12T00:00:00-04:002015-08-12T00:00:00-04:00Richard A. Kraaijenhagenhttp://riichard.comstdin@riichard.com<p>No Wifi Popup - Automatically connect to your hotel’s WiFi network. It sounds
like a dream. I’m highly frustrated with wifi popups in hotels and cafes.
Their problems are:</p>
<ul>
<li>Never open a pop-up to connect when you need them</li>
<li>Don’t remember the data you entered (even though you checked ‘remember me’)</li>
<li>You never know when you lost connection when using https, you just wait until
the connection times out.</li>
<li>They don’t work nicely when using an alternative DNS server.</li>
</ul>
<p>I quickly hacked a solution together as a proof of concept. They only tackle
the first two problems. You edit the network’s post-values and it’s URL, and
it will send a POST request to your router to authenticate.</p>
<h2 id="here-follows-a-detailed-description-on-how-to-set-it-up">Here follows a detailed description on how to set it up.</h2>
<h3 id="1-open-the-wifi-popup-like-you-always-would">1. Open the wifi-popup like you always would</h3>
<p><img src="/images/wifipopup/screenshots/login.png" alt="login" /></p>
<h3 id="2-login-and-see-the-sent-headers-in-the-browsers-network-console">2. Login and see the sent headers in the browser’s network console</h3>
<p><img src="/images/wifipopup/screenshots/headers.png" alt="headers" /></p>
<h3 id="3-edit-the-headers-in-indexhtml">3. Edit the headers in index.html</h3>
<p>Here is a sample of the code. Deep inside you’ll know what to do.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>...
<form action="http://172.16.0.1/portal/user-authen.php" method="post">
<input type="text" name="txtLogin" value="ResidenceHotSpot_01" />
<input type="text" name="txtPasswd" value="766768" />
</form>
...
</code></pre></div></div>
<h3 id="4-convert-your-indexhtml-with-your-settings-to-a-data-url-for-offline-available-access">4. Convert your index.html with your settings to a data-url for offline available access</h3>
<div class="col-xs-12 col-md-6 pull-right">
<div class="thumbnail">
<img src="/images/wifipopup/screenshots/dataurl.png" />
</div>
</div>
<p>Your phone can’t access the web-app without internet. Therefore we convert your<br />
HTML document (with your settings) to a data URL at
<a href="http://dataurl.net/">dataurl.net</a> so your phone can access it offline-available.</p>
<h3 id="5-email-the-data-url-to-yourself-on-your-phone-and-save-the-app-to-your-homescreen-for-easy-access">5. Email the data URL to yourself on your phone, and save the app to your homescreen for easy access</h3>
<div class="col-xs-12 col-md-6 pull-left">
<div class="thumbnail">
<img src="/images/wifipopup/screenshots/iphone.jpg" />
</div>
</div>
<p>Do it in airplane mode, the app will redirect you to the form. Simply go back
one page and add the webpage to your homescreen.</p>
<h3 id="6-it-works-win">6. It works, WIN!</h3>
<p>Now simply open the bookmark on your homescreen, and the app will authenticate
you to the network.</p>
<div class="col-xs-12 col-md-6 pull-right">
<div class="thumbnail">
<img src="/images/ellen.gif" />
</div>
</div>
<div class="clearfix"></div>
<center>
<a href="https://github.com/riichard/no-wifi-popup" class="btn btn-primary"><i class="icon-github"></i> View source on GitHub</a>
</center>
<p><a href="http://riichard.com/wifi-popups">How to get rid of wifi popups</a> was originally published by Richard A. Kraaijenhagen at <a href="http://riichard.com">Richard A. Kraaijenhagen</a> on August 12, 2015.</p>
http://riichard.com/vim-writing
http://riichard.com/vim-writing2015-07-26T04:00:00-04:002015-07-26T04:00:00-04:00Richard A. Kraaijenhagenhttp://riichard.comstdin@riichard.com<p>My old programming mentor Pieter Scherpenhuijsen used to joke with me ‘if it
was made after you were born, its probably not very good.” And that does
usually hold true with hardware products. However, it’s the timeless things
that have proven their quality against the test of time over and over again
that truly interest me. Take for example the plethora of books that are well
over a century old which still get referenced today. Sun Tzu’s The Art of War,
for example, was written in 513 BCE. Heck, even Andy Grove’s High Output
Management from the 80’s is still pretty relevant even in today’s modern era.</p>
<p>VIM is one of these ageless things. VIM is a famous tool for editing code, but
only a few know the power it holds for text editing. The greatest thing about
VIM is that you must control every move with your keyboard shortcuts (no
mouse!), which forces your brain to train your muscle memory to become a magic
wand over your text. You only have to think it, and your content has already
changed. VIM is coincidentally also one of the most hated programs of all time
due to its steep learning curve. But for those who love VIM, we love it
vehemently for the power and speed that it brings to our coding.</p>
<h3 id="haters">Haters</h3>
<blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">I've
been using Vim for about 2 years now, mostly because I can't figure out how
to exit it.</p>— I Am Devloper (@iamdevloper) <a href="https://twitter.com/iamdevloper/status/435555976687923200">February 17,
2014</a></blockquote>
<script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<h3 id="lovers-include-tim-oreilly-and-ycombinators-paul-graham">Lovers include Tim O’Reilly and YCombinator’s Paul Graham</h3>
<blockquote class="twitter-tweet" data-cards="hidden" lang="en"><p lang="en" dir="ltr">30 years on,
Vi/Vim is still one of my all-time favorite computer power tools <a href="http://t.co/Thz0ChX6eo">http://t.co/Thz0ChX6eo</a> Old dog, can still
learn new tricks</p>— Tim O'Reilly (@timoreilly) <a href="https://twitter.com/timoreilly/status/582914712699998210">March 31,
2015</a></blockquote>
<script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<p>Eventually VIM’s keyboard shortcuts will make the distance between your brain’s
thought and your screen frictionless so you will see how verbose your monkey-mind
becomes on paper.</p>
<p>To demonstrate what I mean, I created a few recordings of my favourite VIM
muscle memories.</p>
<h3 id="toggle-lists-to-sentences">Toggle lists to sentences</h3>
<p>Just by selecting the text and pressing <code class="language-plaintext highlighter-rouge">,l</code> I can convert a list of words in a
sentence to a bulleted list, and the other way around.
I’m doing this with the <em>TODO</em> plugin.</p>
<p><img src="/images/vim/togglelists.gif" alt="toggle lists" /></p>
<h3 id="jump-to-text-faster-than-your-mouse">Jump to text faster than your mouse.</h3>
<p>With one key all words become listed with a letter, then by pressing that
letter your cursor will jump to that word.
I’m demonstrating it slower than I actually use it. After a while this will be
way faster than leaving your keyboard to use your mouse..</p>
<p><img src="/images/vim/easymotion.gif" alt="easymotion plugin" /></p>
<h3 id="you-can-write-your-own-shortcuts-to-quickly-open-a-reference-file">You can write your own shortcuts to quickly open a reference file</h3>
<p>If the shortcuts ever get over your head, or you have other content which is
hard to memorize, you can open them by a keyboard shortcut. For my vim key
bindings reference I used <code class="language-plaintext highlighter-rouge">,er</code> (where the r stands for Readme).</p>
<p><img src="/images/vim/reference.gif" alt="quick reference" /></p>
<h3 id="structure-your-text-in-a-table-format-in-no-time">Structure your text in a table format in no-time</h3>
<p>This is especially useful with markdown tables (or with declaring hash tables
in your code). <a href="https://github.com/godlygeek/tabular">plugin: godlygeek/tabular</a></p>
<p><img src="/images/vim/tables.gif" alt="tabular" /></p>
<h3 id="highlight-the-word-under-the-cursor-everywhere">Highlight the word under the cursor everywhere</h3>
<p>With the <a href="https://github.com/vasconcelloslf/vim-interestingwords">interesting words plugin</a>, I can see all references to this word in
my text.</p>
<p><img src="/images/vim/highlight.gif" alt="highlight interesting words" /></p>
<h3 id="then-swap-a-word-with-a-shortcut">Then Swap a word with a shortcut</h3>
<p>When I’m on the word, I press <code class="language-plaintext highlighter-rouge">c</code> for change, type <code class="language-plaintext highlighter-rouge">cow</code>, jump to the next word
with <code class="language-plaintext highlighter-rouge">n</code>, and hit <code class="language-plaintext highlighter-rouge">.</code> to repeat my last change on this word.</p>
<p><img src="/images/vim/swapword.gif" alt="swapping words" /></p>
<h3 id="it-helps-uncover-usage-problems-in-your-writing">It helps Uncover usage problems in your writing</h3>
<p>Though it won’t help you to with grammar, it will highlight problamatic words.
<a href="https://github.com/reedes/vim-wordy">plugin: reedes/vim-wordy</a>.</p>
<p><img src="/images/vim/wordy.gif" alt="wordy" /></p>
<h3 id="distraction-free">Distraction free</h3>
<p>Because VIM doesn’t have the fancy features to tune the layout of your text,
you’re restricted to the purity of your content. No distractions to fiddling
around with the margins or typography.</p>
<h2 id="installation">Installation</h2>
<p>You don’t have to install anything, it already comes pre-installed on every
MacBook, Chromebook, BSD- and Linux install.</p>
<h2 id="whats-next">What’s next</h2>
<p>If you found this useful, you might also enjoy:</p>
<ul>
<li><a href="http://rayninfo.co.uk/vimtips.html">Overview of possible keystrokes</a></li>
<li><a href="http://www.moolenaar.net/habits.html">Seven habits of effective text editing</a></li>
<li><a href="https://github.com/riichard/dotfiles/blob/master/vim/vimrc">My vim configuration file</a></li>
</ul>
<p><a href="http://riichard.com/vim-writing">VIM, the magic wand for writing stories and text. Not just code</a> was originally published by Richard A. Kraaijenhagen at <a href="http://riichard.com">Richard A. Kraaijenhagen</a> on July 26, 2015.</p>
http://riichard.com/2.0
http://riichard.com/2.02014-12-16T03:00:00-05:002014-12-16T03:00:00-05:00Richard A. Kraaijenhagenhttp://riichard.comstdin@riichard.com<p>This year at Owlin we connected our big data analytics to some of the
biggest corporations in Europe including <a href="https://en.wikipedia.org/wiki/KPMG">KPMG</a>, <a href="https://en.wikipedia.org/wiki/Deloitte">Deloitte</a>, <a href="https://en.wikipedia.org/wiki/ING_Group">ING</a> and many
other high-profile equity trading firms. Our team’s hard work was then awarded
by the top awards in the business like the <a href="https://en.wikipedia.org/wiki/Accenture">Accenture</a> Innovation Awards and
the <a href="http://pioneers.io/festival2015">Pioneers</a> festival.</p>
<p>I’m incredibly proud to have not only programmed an excellent product that
works seamlessly, but also that Owlin has received so much public recognition,
and has reached the state of a profitable startup. I’m beyond confident in the
future success of Owlin, as I’m leaving the company in the incredibly competent
hands of my co-founders. <br />
After working on the core technology behind Owlin for more than 5 years, I have
seen Owlin grow from my own pet project as a mere teen, to a self-sustaining
company - serving the most in-depth, and fastest news analysis to the greatest
hedge funds, banks, and accountants in the world.<br />
When I was programming at the age of 14, I imagined a dream job that would
allow me the opportunity to build a profitable business for in-depth analysis
of big data. Now that I have reached my goal, I have decided to move on to
follow even greater dreams. I will now hone my skills in programming in other
industries to gain an even wider skill-set. Again, I’m only 22. Steve Jobs and
Larry Page weren’t even started at this age. I’ve got a lot more to learn, and
accomplish.</p>
<div class="col-md-6 pull-right"><img src="/images/owlin/newsroom.gif" /></div>
<p>At Owlin I headed the development of our product by spearheading Agile/Scrum
management for our team. I also set up real-time big data filtering pipelines
using a custom algorithm developed in-part by our Data Scientist and resident
Quantum physicist, Dr. Westra. I then visualized this data into a beautiful and
user-friendly interface using HTML5/CSS3 through websockets. I’m specifically
proud of Owlin’s database that is expanding at a monthly speed of 25Terabytes.</p>
<p>As you can see, I seek out challenges, and make it my mission to solve them. As
a full-stack developer with an intense passion for learning and growth, I’m
ready to move on to the next adventure and continue to increase my strengths.
I feel very privileged to have had the opportunity to sell most of my shares to
my co-founders. In the future, I will look into Angel Investing with my Future
Ventures foundation to help other startups to get started in the right
direction, and will stay involved with Owlin as a permanent advisor. It’s been
a wild ride from raising <a href="http://mashable.com/2012/12/12/owlin-real-time-news/">VC funding</a>, and getting covered by <a href="http://www.businessinsider.com/with-just-250000-in-the-bank-this-startup-says-it-can-deliver-news-15-minutes-faster-than-bloomberg-2012-12">major</a>
<a href="http://thenextweb.com/insider/2012/12/11/rockstart-backed-owlin-lands-250k-for-real-time-news-analysis-and-notifications/">websites</a>, to passionately working day-to-day on some of the world’s most
cutting-edge data analysis.</p>
<p>We live in an incredibly exciting time of exponential innovation; especially in
the world of communication. From the rise of mobile and touch-screen
technology, to communication-enhancing apps like Twitter, and Whatsapp, we’ve
come a long way in a very short timeframe. <br />
It’s my personal mission to extend humankind’s ability to communicate by
continually innovating upon the latest technologies. In my opinion, the ability
to communicate and share one’s knowledge is truly a multiplier of success
towards a future world of increasing progress.<br />
With Owlin, my goal was to top Bloomberg by getting a 360 degree news view to
our clients <a href="/fast-news">faster than any other service</a>. I’m still enraptured by the idea
of optimizing the transferral of knowledge, and communication’s ability to
transform society for the better. Let’s see how far this rabbit hole goes.</p>
<p><a href="http://riichard.com/2.0">Moving on from Owlin, to a new chapter</a> was originally published by Richard A. Kraaijenhagen at <a href="http://riichard.com">Richard A. Kraaijenhagen</a> on December 16, 2014.</p>
http://riichard.com/cclm
http://riichard.com/cclm2014-06-11T04:00:00-04:002014-06-11T04:00:00-04:00Richard A. Kraaijenhagenhttp://riichard.comstdin@riichard.com<p>Did you ever wonder how Owlin is able to gather articles from a number of
languages and sort them by subject? This is made possible in part by a
<a href="https://en.wikipedia.org/wiki/Language_model">statistical language model</a>
developed by Owlin in cooperation with scientists from Stanford University and
Edinburgh University. The 5.6 terabyte model, which brings natural language
processing to a new level, is now the subject of a <a href="http://statmt.org/ngrams/pages/poster.html">scientific
article</a> written by Owlin’s Bas van
Ooyen with co-developers Christian Buck of the University of Edinburgh and
Kenneth Heafield of Stanford University and presented last week at the
<a href="http://lrec2014.lrec-conf.org/en/">Language Resources and Evaluation Conference</a> in Reykjavik Iceland.</p>
<p><a href="http://riichard.com/cclm">Owlin publishes language model with scientists from Stanford and Edinburgh's University</a> was originally published by Richard A. Kraaijenhagen at <a href="http://riichard.com">Richard A. Kraaijenhagen</a> on June 11, 2014.</p>
http://riichard.com/fast-news
http://riichard.com/fast-news2014-06-09T04:00:00-04:002014-06-09T04:00:00-04:00Richard A. Kraaijenhagenhttp://riichard.comstdin@riichard.com<p><img src="/images/asmlcase.png" alt="asmlcase" /></p>
<p>Within a span of four days in July, Owlin again proved its value at
reporting time-sensitive financial information ahead of competitors.</p>
<ul>
<li><strong>July 29</strong>: The Owlin newsroom catches the ASML stock as it rises <strong>1h26m ahead of
other Dutch news services</strong>.</li>
<li><strong>July 30</strong>: The Owlin newsroom highlights an article explaining the trading
suspension of Corio seven hours before market opening.</li>
<li><strong>July 31</strong>: Owlin subscribers received a profit warning from Adidas a full hour
before market opening. Other major wire services reported the news just minutes
before the market opened, or even later.</li>
</ul>
<p><a href="http://riichard.com/fast-news">How Owlin caught sensitive news before it hit the market.</a> was originally published by Richard A. Kraaijenhagen at <a href="http://riichard.com">Richard A. Kraaijenhagen</a> on June 09, 2014.</p>
http://riichard.com/hashtagivist
http://riichard.com/hashtagivist2014-04-26T20:00:00-04:002014-04-26T20:00:00-04:00Richard A. Kraaijenhagenhttp://riichard.comstdin@riichard.com<p>AMSTERDAM - This year at The Next Web’s annual hackathon, my partner and I
created a hack called Hashtagivist. Promoting hashtags for social justice on
Twitter.</p>
<div class="embed-responsive embed-responsive-4by3">
<iframe src="https://vine.co/v/MnpHew2gPYV/embed/postcard" frameborder="0"></iframe>
</div>
<h1 id="hashtagivist">Hashtagivist</h1>
<p>Hashtagivist stands for “Hashtag Activist” was inspired by the amazing work of
Suey Park, Mikki Kendall, and other proponents for social change and equality
on Twitter.</p>
<p>There are so many of us that believe in equality, and want to lobby for social
change, but either aren’t that well-versed with Twitter, or have trouble
finding hashtag campaigns. For me, I’d always catch campaigns after-the-fact
via a blog post, and think to myself, “Gee, I wish I had seen that on Twitter
when it was happening. I would have definitely retweeted, or taken action in
some way.”</p>
<p>With Hashtagivist, campaign leaders can submit their hashtags to the site
before they launch their campaign via Twitter. Then, they can track their
hashtag stats on Hashtagivist, and gain wider exposure for their campaign.</p>
<p>Users can search the site by topic (more topics to come!), and receive email
alerts as soon as a new hashtag campaign goes live in their areas of interest.</p>
<h2 id="design">Design</h2>
<p>The technological nor visual aspect of the hack wasn’t too interesting. But the
vision behind it, to have a simple platform where you would just find hashtags
to show what you stand for, brings out what the power of Twitter stands for:
Power to the people.
When enough people on twitter share their voices and start tweeting, we can
raise awareness to topics that usually don’t get covered.</p>
<p>Hashtagivist concept was awarded by Twitter and got <a href="http://thenextweb.com/dd/2014/04/25/14-amazing-hacks-tnw-conference-kings-code-hack-battle/">covered by The Next Web</a>.</p>
<p><img src="images/hashtagivist.gif" alt="Hashtagivist on stage with Twitter" /></p>
<p><a href="http://riichard.com/hashtagivist">Hashtagivist, a tool for finding hashtags for social justice</a> was originally published by Richard A. Kraaijenhagen at <a href="http://riichard.com">Richard A. Kraaijenhagen</a> on April 26, 2014.</p>