Change element indent to 2 spaces + update links on index page
parent
0439879dd1
commit
c9d9d0f3cd
@ -1,26 +1,30 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Hugot</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
<head>
|
||||
<title>Hugot</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="blog.html">Blog</a>
|
||||
<h1>Hugo's homepage</h1>
|
||||
<p>
|
||||
Hello and welcome to my personal homepage! I'll add some info about myself to
|
||||
this page soon. In the mean time, maybe take a look at my <a href="blog.html">blog</a>
|
||||
</p>
|
||||
<body>
|
||||
<a href="blog.html">Blog</a>
|
||||
<h1>Hugo's homepage</h1>
|
||||
<p>
|
||||
Hello and welcome to my personal homepage! I'll add some info about myself to
|
||||
this page soon. In the mean time, maybe take a look at my <a href="blog.html">blog</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Other places you can find me at on the web:
|
||||
<ul>
|
||||
<li><a rel="me" href="https://amsterdon.nl/@hugot">Fediverse</a></li>
|
||||
<li><a href="https://github.com/hugot/">GitHub</a></li>
|
||||
<li><a href="https://snorba.art/hugo/">ᕦ⊙෴⊙ᕤ baart</a></li>
|
||||
</ul>
|
||||
</p>
|
||||
</body>
|
||||
<p>
|
||||
Other places you can find me at on the web:
|
||||
<ul>
|
||||
<li><a href="https://mstdn.social/@hugot">Fediverse</a></li>
|
||||
<li><a href="https://github.com/hugot/">GitHub</a></li>
|
||||
<li><a href="https://git.snorba.art/hugo/">ᕦ⊙෴⊙ᕤ baart</a></li>
|
||||
</ul>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<!-- Local Variables: -->
|
||||
<!-- sgml-basic-offset: 1 -->
|
||||
<!-- End: -->
|
||||
|
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Closures and Currying in BASH?</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../style.css">
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="../../blog.html">Home</a>
|
||||
<article>
|
||||
<h1>Closures and Function Currying... in BASH?</h1>
|
||||
<p>
|
||||
I don't think anyone will disagree with me when I say that GNU BASH is not
|
||||
a functional programming language. Some people would probably even argue
|
||||
that bash is not a programming language at all. Whatever opinion you may
|
||||
have, there is no denying that bash is a damn handy too to have in your
|
||||
belt. Today I figured I'd share some functional concepts that have been
|
||||
helpful to me when writing scripts in BASH, which is my favorite scripting
|
||||
language for workflow automation.
|
||||
</p>
|
||||
|
||||
<h2>Using functions for clarity</h2>
|
||||
<p>
|
||||
[[ LINK TO YOUTUBE VIDEO FUNCTIONAL TAO OF BASH ]]
|
||||
</p>
|
||||
|
||||
<h2>Using pipes as map/reduce</h2>
|
||||
<p>
|
||||
</p>
|
||||
|
||||
<h2>Using recursion to grow state</h2>
|
||||
<p>
|
||||
</p>
|
||||
|
||||
<h2>Bonus: A demonstration of a madman, closures and currying in bash</h2>
|
||||
<p>
|
||||
</p>
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<!-- Local Variables: -->
|
||||
<!-- sgml-basic-offset: 1 -->
|
||||
<!-- End: -->
|
@ -1,39 +1,43 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Introduction</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../style.css">
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
<head>
|
||||
<title>Introduction</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../style.css">
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="../../blog.html">Home</a>
|
||||
<article>
|
||||
<h1>Introduction</h1>
|
||||
<body>
|
||||
<a href="../../blog.html">Home</a>
|
||||
<article>
|
||||
<h1>Introduction</h1>
|
||||
|
||||
<p>
|
||||
Hello, welcome to my blog! My name is Hugo. I am a 22 year old Software Engineering
|
||||
student from the Netherlands. Software development is a huge part of my life, I write a
|
||||
lot of (weird) programs to scratch my own itch and most software I create
|
||||
is <a href="https://github.com/hugot">open source</a> by default. I also run a one-man
|
||||
company that provides some IT services on the side.
|
||||
</p>
|
||||
<p>
|
||||
Hello, welcome to my blog! My name is Hugo. I am a 22 year old Software Engineering
|
||||
student from the Netherlands. Software development is a huge part of my life, I write a
|
||||
lot of (weird) programs to scratch my own itch and most software I create
|
||||
is <a href="https://github.com/hugot">open source</a> by default. I also run a one-man
|
||||
company that provides some IT services on the side.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Between working on projects and studying I like to watch movies & series, listen to music
|
||||
& podcasts, ride my road bike and take hikes.
|
||||
</p>
|
||||
<p>
|
||||
Between working on projects and studying I like to watch movies & series, listen to music
|
||||
& podcasts, ride my road bike and take hikes.
|
||||
</p>
|
||||
|
||||
<h2>What kind of blog is this?</h2>
|
||||
<p>
|
||||
Because I'm quite new to this and I want to keep myself interested, I won't be
|
||||
limiting myself to a single topic. You can expect me to post about a variety of topics
|
||||
that may interest/annoy/excite me at any given moment.
|
||||
</p>
|
||||
<h2>What kind of blog is this?</h2>
|
||||
<p>
|
||||
Because I'm quite new to this and I want to keep myself interested, I won't be
|
||||
limiting myself to a single topic. You can expect me to post about a variety of topics
|
||||
that may interest/annoy/excite me at any given moment.
|
||||
</p>
|
||||
|
||||
<p>May my posts be interesting and my posting schedule be consistent 🤓🖖</p>
|
||||
<p>May my posts be interesting and my posting schedule be consistent 🤓🖖</p>
|
||||
|
||||
<p>I hope to see you around! - Hugo</p>
|
||||
</article>
|
||||
</body>
|
||||
<p>I hope to see you around! - Hugo</p>
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<!-- Local Variables: -->
|
||||
<!-- sgml-basic-offset: 1 -->
|
||||
<!-- End: -->
|
||||
|
@ -1,180 +1,184 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Creating a Simple Static Blog</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../style.css">
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="../../blog.html">Home</a>
|
||||
<h1>Creating a Simple Static Blog</h1>
|
||||
|
||||
<p>
|
||||
I love personal websites. It's amazing that people can share content with the
|
||||
entire world just by writing some text and throwing it behind a web server. I
|
||||
wanted to know what that is like, so I set out to create a personal website of
|
||||
my own. As you can see I succeeded in doing so, but getting here wasn't as
|
||||
straight forward as I initially thought it would be. I thought that, being a
|
||||
programmer and knowing a thing or two about web servers, setting up my own
|
||||
website was going to be easy: How complicated can it be to throw some text
|
||||
behind a web server, right?! I was wrong. Throwing text behind a web server
|
||||
can be very complicated (and wasteful). But it doesn't have to be!
|
||||
</p>
|
||||
|
||||
<h2>The search for a CMS</h2>
|
||||
<p>
|
||||
The first thought that popped into my head when I got started was: <em>I need to
|
||||
find myself a CMS</em>. I had a few requirements: my site should be
|
||||
self-hosted, be lightweight, have no JavaScript in it and it should look
|
||||
pretty. I also wanted to be able to write blog posts in markdown using my
|
||||
trusty text editor. The first CMSes that came to mind were WordPress, Ghost,
|
||||
Jekyll and Hugo. I don't want to get into too much detail, so I'll summarize
|
||||
my judgments here without any nuance: Wordpress is the devil, Ghost is great
|
||||
but too bulky and both Jekyll and Hugo required me to learn about theming and
|
||||
project structure which I deemed too much effort. I just wanted to write some
|
||||
text and throw it behind a web server, but all solutions I saw were sophisticated
|
||||
programs that were designed to "scale", support "modern
|
||||
workflows" or be "easy to use with integrated WYSIWYG
|
||||
editors". I didn't feel like exploring the idea further and gave up on
|
||||
having a website for a while.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Then, a few months back, I learned about writefreely. Writefreely is an open
|
||||
source web application from write.as that lets users create blogs that
|
||||
federate through the fediverse. I had just started to become acquainted with
|
||||
the fediverse and it seemed like a cool idea to me at the time, so me and a
|
||||
friend decided to set up our own instance. It wasn't too hard to set up and
|
||||
once it was running I only needed a couple of hours to add some custom
|
||||
style sheets. I finally had a fully functioning blog that satisfied all of my
|
||||
needs!
|
||||
</p>
|
||||
|
||||
<p>
|
||||
After that the holiday season came along and I turned my back on blogging for
|
||||
a while. When I checked on our instance three or four weeks later I was
|
||||
displeased to discover that spammers had created accounts on the instance and
|
||||
were posting spammy garbage. Sure, we could just close registrations. But this
|
||||
event reminded me that hosting any dynamic web application on the public
|
||||
internet is a big responsibility that involves keeping software up to date,
|
||||
monitoring and doing other configuration/maintenance work. Not to mention
|
||||
having to do regular database backups. I didn't feel like having to do any of
|
||||
that, I already have by hands full with self-hosting a bunch of other
|
||||
services. Once again I had found a complicated solution for a simple problem:
|
||||
I just wanted to throw some text behind a web server, remember? Why did I need to use a CMS
|
||||
again?
|
||||
</p>
|
||||
|
||||
<p>
|
||||
CMSes seem to offer solutions to a problem that I don't have: I don't mind
|
||||
writing plain html and I most certainly don't need a WISYWIG editor. I also
|
||||
don't need plugins, dynamic code for analytics, pretty yaml or toml
|
||||
configuration files, templates, extensive theming, admin panels, markdown,
|
||||
mailing lists, comment threads or any other common CMS features. I just want
|
||||
to throw some text behind a web server, so why not just write some HTML and do
|
||||
exactly that?
|
||||
</p>
|
||||
|
||||
<h2>A CMS in ~200 lines</h2>
|
||||
<p>
|
||||
It was decided: I was going to blog in plain HTML. Having figured out what I
|
||||
actually wanted, I went to work. The first order of business was creating a
|
||||
style sheet to make things look good. I made it my goal to use as little CSS
|
||||
as possible and I managed to limit myself to just these 23 lines:
|
||||
</p>
|
||||
|
||||
<style type="text/css">
|
||||
.code {
|
||||
color: #f6f3e8;
|
||||
background-color: #242424;
|
||||
}
|
||||
.builtin {
|
||||
color: #e5786d;
|
||||
}
|
||||
.css-property {
|
||||
color: #8ac6f2;
|
||||
font-weight: bold;
|
||||
}
|
||||
.css-selector {
|
||||
color: #cae682;
|
||||
}
|
||||
.custom {
|
||||
color: #000000;
|
||||
background-color: #f4ecd8;
|
||||
}
|
||||
.custom-1 {
|
||||
color: #ffffff;
|
||||
background-color: #5b4636;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="code">
|
||||
<pre>
|
||||
<span class="css-selector">html </span>{
|
||||
<head>
|
||||
<title>Creating a Simple Static Blog</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../style.css">
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="../../blog.html">Home</a>
|
||||
<h1>Creating a Simple Static Blog</h1>
|
||||
|
||||
<p>
|
||||
I love personal websites. It's amazing that people can share content with the
|
||||
entire world just by writing some text and throwing it behind a web server. I
|
||||
wanted to know what that is like, so I set out to create a personal website of
|
||||
my own. As you can see I succeeded in doing so, but getting here wasn't as
|
||||
straight forward as I initially thought it would be. I thought that, being a
|
||||
programmer and knowing a thing or two about web servers, setting up my own
|
||||
website was going to be easy: How complicated can it be to throw some text
|
||||
behind a web server, right?! I was wrong. Throwing text behind a web server
|
||||
can be very complicated (and wasteful). But it doesn't have to be!
|
||||
</p>
|
||||
|
||||
<h2>The search for a CMS</h2>
|
||||
<p>
|
||||
The first thought that popped into my head when I got started was: <em>I need to
|
||||
find myself a CMS</em>. I had a few requirements: my site should be
|
||||
self-hosted, be lightweight, have no JavaScript in it and it should look
|
||||
pretty. I also wanted to be able to write blog posts in markdown using my
|
||||
trusty text editor. The first CMSes that came to mind were WordPress, Ghost,
|
||||
Jekyll and Hugo. I don't want to get into too much detail, so I'll summarize
|
||||
my judgments here without any nuance: Wordpress is the devil, Ghost is great
|
||||
but too bulky and both Jekyll and Hugo required me to learn about theming and
|
||||
project structure which I deemed too much effort. I just wanted to write some
|
||||
text and throw it behind a web server, but all solutions I saw were sophisticated
|
||||
programs that were designed to "scale", support "modern
|
||||
workflows" or be "easy to use with integrated WYSIWYG
|
||||
editors". I didn't feel like exploring the idea further and gave up on
|
||||
having a website for a while.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Then, a few months back, I learned about writefreely. Writefreely is an open
|
||||
source web application from write.as that lets users create blogs that
|
||||
federate through the fediverse. I had just started to become acquainted with
|
||||
the fediverse and it seemed like a cool idea to me at the time, so me and a
|
||||
friend decided to set up our own instance. It wasn't too hard to set up and
|
||||
once it was running I only needed a couple of hours to add some custom
|
||||
style sheets. I finally had a fully functioning blog that satisfied all of my
|
||||
needs!
|
||||
</p>
|
||||
|
||||
<p>
|
||||
After that the holiday season came along and I turned my back on blogging for
|
||||
a while. When I checked on our instance three or four weeks later I was
|
||||
displeased to discover that spammers had created accounts on the instance and
|
||||
were posting spammy garbage. Sure, we could just close registrations. But this
|
||||
event reminded me that hosting any dynamic web application on the public
|
||||
internet is a big responsibility that involves keeping software up to date,
|
||||
monitoring and doing other configuration/maintenance work. Not to mention
|
||||
having to do regular database backups. I didn't feel like having to do any of
|
||||
that, I already have by hands full with self-hosting a bunch of other
|
||||
services. Once again I had found a complicated solution for a simple problem:
|
||||
I just wanted to throw some text behind a web server, remember? Why did I need to use a CMS
|
||||
again?
|
||||
</p>
|
||||
|
||||
<p>
|
||||
CMSes seem to offer solutions to a problem that I don't have: I don't mind
|
||||
writing plain html and I most certainly don't need a WISYWIG editor. I also
|
||||
don't need plugins, dynamic code for analytics, pretty yaml or toml
|
||||
configuration files, templates, extensive theming, admin panels, markdown,
|
||||
mailing lists, comment threads or any other common CMS features. I just want
|
||||
to throw some text behind a web server, so why not just write some HTML and do
|
||||
exactly that?
|
||||
</p>
|
||||
|
||||
<h2>A CMS in ~200 lines</h2>
|
||||
<p>
|
||||
It was decided: I was going to blog in plain HTML. Having figured out what I
|
||||
actually wanted, I went to work. The first order of business was creating a
|
||||
style sheet to make things look good. I made it my goal to use as little CSS
|
||||
as possible and I managed to limit myself to just these 23 lines:
|
||||
</p>
|
||||
|
||||
<style type="text/css">
|
||||
.code {
|
||||
color: #f6f3e8;
|
||||
background-color: #242424;
|
||||
}
|
||||
.builtin {
|
||||
color: #e5786d;
|
||||
}
|
||||
.css-property {
|
||||
color: #8ac6f2;
|
||||
font-weight: bold;
|
||||
}
|
||||
.css-selector {
|
||||
color: #cae682;
|
||||
}
|
||||
.custom {
|
||||
color: #000000;
|
||||
background-color: #f4ecd8;
|
||||
}
|
||||
.custom-1 {
|
||||
color: #ffffff;
|
||||
background-color: #5b4636;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="code">
|
||||
<pre>
|
||||
<span class="css-selector">html </span>{
|
||||
<span class="css-property">font-family</span>: Helvetica, Arial, sans-serif;
|
||||
<span class="css-property">color</span>: <span class="custom-1">#5b4636</span>;
|
||||
<span class="css-property">background-color</span>: <span class="custom">#f4ecd8</span>;
|
||||
}
|
||||
|
||||
<span class="css-selector">body </span>{
|
||||
}
|
||||
|
||||
<span class="css-selector">body </span>{
|
||||
<span class="css-property">padding</span>: 1em;
|
||||
<span class="css-property">margin</span>: auto;
|
||||
}
|
||||
|
||||
<span class="builtin">@media</span> only all and (pointer: coarse), (pointer: none) {
|
||||
}
|
||||
|
||||
<span class="builtin">@media</span> only all and (pointer: coarse), (pointer: none) {
|
||||
<span class="css-selector">body </span>{
|
||||
<span class="css-property">font-size</span>: 5.5vmin;
|
||||
<span class="css-property">font-size</span>: 5.5vmin;
|
||||
}
|
||||
}
|
||||
|
||||
<span class="builtin">@media</span> only all and (pointer: fine) {
|
||||
}
|
||||
|
||||
<span class="builtin">@media</span> only all and (pointer: fine) {
|
||||
<span class="css-selector">body </span>{
|
||||
<span class="css-property">font-size</span>: calc(16px + 0.6vmin);
|
||||
<span class="css-property">min-width</span>: 500px;
|
||||
<span class="css-property">max-width</span>: 50em;
|
||||
<span class="css-property">font-size</span>: calc(16px + 0.6vmin);
|
||||
<span class="css-property">min-width</span>: 500px;
|
||||
<span class="css-property">max-width</span>: 50em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
This is all the CSS I need to have a responsive website that looks pretty (I
|
||||
stole the colors from firefox's reader mode btw). It's such a small amount
|
||||
that I don't mind copy-pasting it at the top of all new HTML pages that I add
|
||||
to my website. This might make it harder to change the styling later, but it
|
||||
has the added benefit that each page is a standalone document. So for
|
||||
example <code>wget PAGE_URL</code> will download a HTML page that looks
|
||||
exactly the same locally as it does on the web without having to download any
|
||||
extra assets.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The next challenge was creating and maintaining the article listing page and
|
||||
the RSS feed for the blog. I don't mind typing HTML pages, but typing out a
|
||||
page and an RSS feed containing excerpts/titles from other files gets old soon
|
||||
and I'd be bound to forget updating its content every once in a while. This
|
||||
seemed like a perfect occasion to write a little bash script, so I did. You
|
||||
can find the script <a href="../../generate-blog.bash">here (raw)</a> and
|
||||
<a href="../../generate-blog.bash.html">here (pretty)</a>. What it basically
|
||||
does is read in a file called posts.txt that has html filenames in it,
|
||||
separated by newlines. Using those filenames and the contents of the files it
|
||||
then generates a HTML page (called <a href="../../blog.html">blog.html</a>)
|
||||
and an RSS feed (called <a href="../../feed.xml">feed.xml</a>).
|
||||
</p>
|
||||
|
||||
<p>
|
||||
I keep all of this neatly stored under version control
|
||||
<a href="https://snorba.art/hugo/website">here</a>, so deploying a new version
|
||||
is as easy as running <code>git pull</code> on my web server. I can honestly say that
|
||||
this is the simplest, most user-friendly CMS that I have ever used, and it
|
||||
only took me several months to figure out that this is exactly what I needed 🤓.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
So, to conclude this story: websites are just HTML. You don't need fancy
|
||||
programs or WYSIWYG editors to create a website. Just a text editor, a web
|
||||
server and some spare time.
|
||||
</p>
|
||||
</body>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
This is all the CSS I need to have a responsive website that looks pretty (I
|
||||
stole the colors from firefox's reader mode btw). It's such a small amount
|
||||
that I don't mind copy-pasting it at the top of all new HTML pages that I add
|
||||
to my website. This might make it harder to change the styling later, but it
|
||||
has the added benefit that each page is a standalone document. So for
|
||||
example <code>wget PAGE_URL</code> will download a HTML page that looks
|
||||
exactly the same locally as it does on the web without having to download any
|
||||
extra assets.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The next challenge was creating and maintaining the article listing page and
|
||||
the RSS feed for the blog. I don't mind typing HTML pages, but typing out a
|
||||
page and an RSS feed containing excerpts/titles from other files gets old soon
|
||||
and I'd be bound to forget updating its content every once in a while. This
|
||||
seemed like a perfect occasion to write a little bash script, so I did. You
|
||||
can find the script <a href="../../generate-blog.bash">here (raw)</a> and
|
||||
<a href="../../generate-blog.bash.html">here (pretty)</a>. What it basically
|
||||
does is read in a file called posts.txt that has html filenames in it,
|
||||
separated by newlines. Using those filenames and the contents of the files it
|
||||
then generates a HTML page (called <a href="../../blog.html">blog.html</a>)
|
||||
and an RSS feed (called <a href="../../feed.xml">feed.xml</a>).
|
||||
</p>
|
||||
|
||||
<p>
|
||||
I keep all of this neatly stored under version control
|
||||
<a href="https://snorba.art/hugo/website">here</a>, so deploying a new version
|
||||
is as easy as running <code>git pull</code> on my web server. I can honestly say that
|
||||
this is the simplest, most user-friendly CMS that I have ever used, and it
|
||||
only took me several months to figure out that this is exactly what I needed 🤓.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
So, to conclude this story: websites are just HTML. You don't need fancy
|
||||
programs or WYSIWYG editors to create a website. Just a text editor, a web
|
||||
server and some spare time.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<!-- Local Variables: -->
|
||||
<!-- sgml-basic-offset: 1 -->
|
||||
<!-- End: -->
|
||||
|
@ -1,95 +1,99 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Use Your Email Client For Physical Mail</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../style.css">
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
<head>
|
||||
<title>Use Your Email Client For Physical Mail</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../style.css">
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="../../blog.html">Home</a>
|
||||
<article>
|
||||
<h1>How To Use Your Email Client For Physical Mail</h1>
|
||||
<p>
|
||||
Whether it's to re-read a conversation, find a plane ticket I ordered or
|
||||
check when a meeting was planned, I often find myself looking up old
|
||||
emails. It's usually easy to do so because email clients are designed for
|
||||
the task: Many of them support full-text search and some even complement
|
||||
that with neat tagging and categorization systems. To be honest I have
|
||||
become completely dependent on those features for my day to day
|
||||
life. Having full-text search and some sort of categorization for email
|
||||
can be a huge time saver. When it comes to physical mail however, I still
|
||||
have to browse through stacks of paper to (hopefully) find what I'm
|
||||
looking for. I figured that it'd be nice to use my fancy email client to
|
||||
deal with physical mail as well, so I found a way to do just that. Turns
|
||||
out it's pretty simple!
|
||||
</p>
|
||||
<body>
|
||||
<a href="../../blog.html">Home</a>
|
||||
<article>
|
||||
<h1>How To Use Your Email Client For Physical Mail</h1>
|
||||
<p>
|
||||
Whether it's to re-read a conversation, find a plane ticket I ordered or
|
||||
check when a meeting was planned, I often find myself looking up old
|
||||
emails. It's usually easy to do so because email clients are designed for
|
||||
the task: Many of them support full-text search and some even complement
|
||||
that with neat tagging and categorization systems. To be honest I have
|
||||
become completely dependent on those features for my day to day
|
||||
life. Having full-text search and some sort of categorization for email
|
||||
can be a huge time saver. When it comes to physical mail however, I still
|
||||
have to browse through stacks of paper to (hopefully) find what I'm
|
||||
looking for. I figured that it'd be nice to use my fancy email client to
|
||||
deal with physical mail as well, so I found a way to do just that. Turns
|
||||
out it's pretty simple!
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The main objective here is to transform our physical mail into an email
|
||||
that can be received, indexed and read by our email client of choice. Now,
|
||||
one way to do that would be to type the contents of our mail into an email
|
||||
by hand, but <i>ain't nobody got time for that!</i>. The (more appealing)
|
||||
alternative is to use a document scanner. I have a single purpose scanner
|
||||
unit from Canon that I hook up to my laptop for just this purpose.
|
||||
</p>
|
||||
<p>
|
||||
The main objective here is to transform our physical mail into an email
|
||||
that can be received, indexed and read by our email client of choice. Now,
|
||||
one way to do that would be to type the contents of our mail into an email
|
||||
by hand, but <i>ain't nobody got time for that!</i>. The (more appealing)
|
||||
alternative is to use a document scanner. I have a single purpose scanner
|
||||
unit from Canon that I hook up to my laptop for just this purpose.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
It isn't as simple as just emailing a scanned document to ourselves
|
||||
though: email clients are smart, but they can't understand a word of text
|
||||
in our PDF or JPEG of a physical document. They need content to be in
|
||||
plain text form in order to provide us with some of their best features
|
||||
like full-text search. We'll have to somehow transform our scanned
|
||||
documents into plain text that we can include in our email. To do this, we
|
||||
can use tesseract. Tesseract is an optical character recognition (OCR)
|
||||
engine, meaning that it can recognize text in images and extract it for
|
||||
us. Installing it should be easy on Debian derivative distros like
|
||||
Ubuntu. My laptop is running Debian unstable so I just ran <code>apt
|
||||
install tesseract</code> and started using it. Using it is as easy as
|
||||
upening up a terminal and typing <code>tesseract FILE.jpg
|
||||
OUTPUT</code>. That command will save all the text that tesseract is able
|
||||
to recognize in the image FILE.jpg to a file called OUTPUT.txt.
|
||||
</p>
|
||||
<p>
|
||||
It isn't as simple as just emailing a scanned document to ourselves
|
||||
though: email clients are smart, but they can't understand a word of text
|
||||
in our PDF or JPEG of a physical document. They need content to be in
|
||||
plain text form in order to provide us with some of their best features
|
||||
like full-text search. We'll have to somehow transform our scanned
|
||||
documents into plain text that we can include in our email. To do this, we
|
||||
can use tesseract. Tesseract is an optical character recognition (OCR)
|
||||
engine, meaning that it can recognize text in images and extract it for
|
||||
us. Installing it should be easy on Debian derivative distros like
|
||||
Ubuntu. My laptop is running Debian unstable so I just ran <code>apt
|
||||
install tesseract</code> and started using it. Using it is as easy as
|
||||
upening up a terminal and typing <code>tesseract FILE.jpg
|
||||
OUTPUT</code>. That command will save all the text that tesseract is able
|
||||
to recognize in the image FILE.jpg to a file called OUTPUT.txt.
|
||||
</p>
|
||||
|
||||
<aside>
|
||||
<i>
|
||||
Side note: I am Dutch, so most of my physical mail is in Dutch. To
|
||||
make tesseract better understand my mail I installed the
|
||||
tesseract-ocr-nld package using <code>apt install
|
||||
tesseract-ocr-nld</code>. You can check what other language packs are
|
||||
available by using <code>apt search tesseract-ocr</code>.
|
||||
</i>
|
||||
</aside>
|
||||
<aside>
|
||||
<i>
|
||||
Side note: I am Dutch, so most of my physical mail is in Dutch. To
|
||||
make tesseract better understand my mail I installed the
|
||||
tesseract-ocr-nld package using <code>apt install
|
||||
tesseract-ocr-nld</code>. You can check what other language packs are
|
||||
available by using <code>apt search tesseract-ocr</code>.
|
||||
</i>
|
||||
</aside>
|
||||
|
||||
<p>
|
||||
All we have to do from there is copy-paste the contents of that file into
|
||||
an email and send it to ourselves! Depending on the formatting of the
|
||||
input document, the output may not always be pleasant to read. We can
|
||||
account for this by including the original document as an attachment to
|
||||
the email. That way we get the best of both worlds: we can use the search
|
||||
functionality of our email client to find the document, and then read it
|
||||
in its original form by opening the attachment.
|
||||
</p>
|
||||
<p>
|
||||
All we have to do from there is copy-paste the contents of that file into
|
||||
an email and send it to ourselves! Depending on the formatting of the
|
||||
input document, the output may not always be pleasant to read. We can
|
||||
account for this by including the original document as an attachment to
|
||||
the email. That way we get the best of both worlds: we can use the search
|
||||
functionality of our email client to find the document, and then read it
|
||||
in its original form by opening the attachment.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
This is all easy enough, but I'm lazy. I didn't feel like opening up my
|
||||
email client and doing manual copy-pasting, so I decided to automate the
|
||||
process a little further. I have postfix setup on my system to relay to my
|
||||
mail server, so I can simply use the <code>mail</code> command to send
|
||||
emails without a GUI mail client. I combined that with tesseract in a
|
||||
little bash script. The script iterates through all of its arguments and
|
||||
interprets them as filenames of scanned documents. It calls tesseract to
|
||||
extract text from them, concatenates the results, attaches the files to an
|
||||
email and sends it to my personal email address. Now all I have to do is
|
||||
run the script with filenames of some documents and my job is done. If
|
||||
anyone is interested in an actual program that does the same thing and
|
||||
doesn't require you to setup postfix, let me know! I might consider
|
||||
authoring one if it's useful to more people than just myself. The script
|
||||
I'm currently using can be found <a href="scan-to-mailpile.bash.html">here
|
||||
(pretty)</a> and <a href="scan-to-mailpile.bash">here (raw)</a>, but I
|
||||
don't recommend using it if you don't fully understand its contents, it's
|
||||
not a polished user experience 🤓.
|
||||
</p>
|
||||
</article>
|
||||
</body>
|
||||
<p>
|
||||
This is all easy enough, but I'm lazy. I didn't feel like opening up my
|
||||
email client and doing manual copy-pasting, so I decided to automate the
|
||||
process a little further. I have postfix setup on my system to relay to my
|
||||
mail server, so I can simply use the <code>mail</code> command to send
|
||||
emails without a GUI mail client. I combined that with tesseract in a
|
||||
little bash script. The script iterates through all of its arguments and
|
||||
interprets them as filenames of scanned documents. It calls tesseract to
|
||||
extract text from them, concatenates the results, attaches the files to an
|
||||
email and sends it to my personal email address. Now all I have to do is
|
||||
run the script with filenames of some documents and my job is done. If
|
||||
anyone is interested in an actual program that does the same thing and
|
||||
doesn't require you to setup postfix, let me know! I might consider
|
||||
authoring one if it's useful to more people than just myself. The script
|
||||
I'm currently using can be found <a href="scan-to-mailpile.bash.html">here
|
||||
(pretty)</a> and <a href="scan-to-mailpile.bash">here (raw)</a>, but I
|
||||
don't recommend using it if you don't fully understand its contents, it's
|
||||
not a polished user experience 🤓.
|
||||
</p>
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<!-- Local Variables: -->
|
||||
<!-- sgml-basic-offset: 1 -->
|
||||
<!-- End: -->
|
||||
|
Loading…
Reference in New Issue