commit 9eb6acea8f1bcfe18e25994eae4f1afbb747af59
parent ea57f32fad44b9abfbe1df876263d08f10e4a9b6
Author: mjkloeckner <martin.cachari@gmail.com>
Date: Sat, 24 Sep 2022 15:17:02 -0300
Update 24-09-2022: General clean & added generating scripts
Old files that are no longer in use are now removed.
Two scripts are now available to generate webpage content.
sort_blog_index.py which is a python script that generates a list of
paths to blog files in order depending on the metadata cointained in
them refered as "article-date", this script in a future may be modified
to sort the blog files depending on the other metadata values like "article-name",
as well as sort the paths names in reverse order, etc. The other script
added sync.sh is more general, and makes use of the script names before "sort_blog_index.py"
to generate the "blog_index.shtml" file, as well as an rss feed file
(rss.xml).
Diffstat:
33 files changed, 715 insertions(+), 392 deletions(-)
diff --git a/about.html b/about.html
@@ -2,7 +2,7 @@
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
- <title>About - Martin Klöckner's webpage</title>
+ <title>About | Martin Klöckner's Webpage</title>
<link rel='stylesheet' type='text/css' href="/css/style.css">
<link rel='stylesheet' type='text/css' href="/css/about_style.css">
<link rel="icon" href="/favicon.ico">
@@ -13,48 +13,23 @@
<!--#include virtual="/common/header.shtml" -->
<article>
- <!-- <h2>What about me?</h2> -->
- <h1 id="index-title">About me</h1>
-
<div class="presentation">
- <img class=profile_img src="/common/face.jpeg" title="Profile picture" alt="Profile picture">
- <p>Electronics engineering student at Univerity of Buenos Aires, Argentina</p>
- <br>
- <h3 id="skills_heading"><u>Principal skills</u></h3>
- <div class="skills_logos">
- <img class="skills_logo" src="/common/logos/c.png" title="C logo" alt="C logo">
- <img class="skills_logo" src="/common/logos/c++2.png" title="C++ logo" alt="C++ logo">
- <img class="skills_logo" src="/common/logos/python.png" title="Python logo" alt="Python logo">
- <!-- <img max-width: 10em class="linux_logo" src="logos/linux2.png" title="Profile picture" alt="Profile picture"> -->
- </div>
+ <img class=profile_img src="/common/profile.jpeg" title="Profile picture" alt="Profile picture">
</div>
- <h4><u>Who am I?</u></h4>
-
- <p>I am a student, curious and self thought, looking forward to join a team and make new friends. Always trying to improve my skills and learn from other people.</p>
-
- <br>
-
- <!-- <p>My name is Martin, I'm from Argentina, currenly I'm staying at my parents house in a little town located at the center of Buenos Aires province. Because of the pandemic I've spend this last two years mostly seated in front of a computer, I've learned a lot about linux, embedeed systems, and also about web development, although I'm not even close of working as such, but I would like, some day.</p> -->
+ <p>I'm an Electronics Engineer student at University of Buenos Aires, Argentina.</p>
+ <p>I like to tinker around with linux and computers in general in my free time.</p>
+ <p>I made this webpage because I wanted to write down and share stuff that I've stumbled across.</p>
+ <p>Keep in mind that English is not my native tonge so if you encounter any orthographic mistakes (spoiler: you will) please have patience, also if you want you can send an email to me, I will respond kindly!</p>
- <h4><u>Programming</u></h4>
- <p>Since I'm studying Electronics Engineering I took a couse in Algorithms & Programing, in which they teach me basic programming in C, we did a simple program that parses csv files, we implemented linked lists, and more of that stuff, also the concepts of Abstract Data Types (TDA), kinda like Object Oriented Programming but in C, by the end of the course they did explained a little bit of Object Oriented Programming but that is a subject of Algorithms and Programming II, and III, which I can't take beacouse I have to pass Calculus and Physics first, so they did more like an introduccion.</p>
- <br>
-
- <h4><u>Tech that I use</u></h4>
- <p>In terms of hardware I got a couple of computers, I got an old generic tower pc, with an intel i3 2100 and 8gb of ram which is from 2012, and a more newer 14" dell laptop, has and i3 5005u and 8gb of ram too. I've also got two old computers that I use as 'servers', I installed debian on them and controll'em via SSH (I'm hosting this website on one of those)</p>
- <p>In terms of software I use linux in all of them lol, I've got debian in boths 'servers', artix on the tower pc, with runit as init, I did a <a href="https://www.youtube.com/watch?v=dBdNQdocrVc" target="_blank">video</a> of it's boot time, and arch (btw) intalled on the laptop.</p>
- <br>
-
- <h4><u>Whats the purpose of this website?</u></h4>
- <p>Well after watching a lot of youtube videos I've decided that it could be a good idea to make a website, to practice all this stuff that I've learned, so I made this simple webpage.</p>
- <br>
-
- <h4 style="color: tomato;"><u>Contact info</u></h4>
+ <h4 style="color: tomato;"><u>Contact me!</u></h4>
<ul>
- <li>mail: <a href="mailto:martin.cachari@gmail.com">martin.cachari@gmail.com</a> </li>
+ <li>mail: <a href="mailto:mjkloeckner@gmail.com">mjkloeckner@gmail.com</a> </li>
<li>github: <a href="https://github.com/mjkloeckner">github.com/mjkloeckner</a></li>
+ <li>linkedin: <a href="https://www.linkedin.com/in/mjkloeckner/">linkedin.com/in/mjkloeckner</a> </li>
</ul>
+
+ <!--#include virtual="/common/end_of_article.shtml" -->
</article>
<!--#include virtual="/common/footer.shtml" -->
</body>
diff --git a/blog.html b/blog.html
@@ -2,7 +2,7 @@
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
- <title>Blog - Martin Klöckner's webpage</title>
+ <title>Blog | Martin Klöckner's Webpage</title>
<link rel='stylesheet' type='text/css' href="/css/style.css">
<link rel="icon" href="/favicon.ico">
<meta charset="utf-8"/>
@@ -12,22 +12,14 @@
<!--#include virtual="/common/header.shtml" -->
<article>
+ <link rel='stylesheet' type='text/css' href="/css/article_style.css">
<h1 id="index-title">Blog</h1>
- <ul id=recent_articles>
- <!-- <li>01 Sep 2021 -- <a href="/articles/01/vim_config.html">What is LaTeX?</a></li> -->
- <!-- <li>31 Oct 2021 -- <a href="/articles/01/vim_config.html">About Object-Oriented Programming</a></li> -->
- <!-- <li>30 Oct 2021 -- <a href="/articles/01/vim_config.html">How to install GCam on an android phone</a></li> -->
- <!-- <li>29 Oct 2021 -- <a href="/articles/01/vim_config.html">What is linux?</a></li> -->
- <!-- <li>28 Oct 2021 -- <a href="/articles/01/vim_config.html">Astrophotography with a phone</a></li> -->
- <!-- <li>27 Oct 2021 -- <a href="/articles/01/vim_config.html">Making linux boot faster</a></li> -->
- <!-- <li>26 Oct 2021 -- <a href="/articles/01/vim_config.html">What is initramfs?</a></li> -->
- <!-- <li>25 Oct 2021 -- <a href="/articles/01/vim_config.html">How does Linux boot?</a></li> -->
- <!-- <li>24 Oct 2021 -- <a href="/articles/01/vim_config.html">How I configured Vim/Nvim editor</a></li> -->
- <li>18 Sep 2022 -- <a href="/blog/sav/sav.html">SAV - Sorting Algorithms Visualized</a></li>
- <li>04 Mar 2022 -- <a href="/blog/01/vim_config.html">Vim introduction and basic configuration</a></li>
- <li>23 Oct 2021 -- <a href="/blog/00/dwm_config.html">DWM - A window manager configuration</a></li>
- </ul>
+ <ul id=blog_entries>
+ <!--#include virtual="/blog_index.shtml" -->
+ </ul>
+
+ <!--#include virtual="/common/end_of_article.shtml" -->
</article>
<!--#include virtual="/common/footer.shtml" -->
diff --git a/blog/dwm-config/dwm-config.html b/blog/dwm-config/dwm-config.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <head id=top>
+ <meta name="article-date" content="23-Oct-2021">
+ <meta name="article-title" content="dwm - A tiling window manager configuration">
+
+ <title>dwm - A tiling window manager configuration | Martin Klöckner's Webpage</title>
+ <link rel='stylesheet' type='text/css' href="/css/style.css">
+ <link rel="icon" href="/favicon.ico">
+ <meta charset="utf-8"/>
+ </head>
+
+ <body>
+ <!--#include virtual="/common/header.shtml" -->
+
+ <article>
+ <link rel='stylesheet' type='text/css' href="/css/article_style.css">
+
+ <h1 id="article-title">dwm - A tiling window manager configuration</h1>
+
+ <p class="article-date">23-Oct-2021</p>
+ <script type="text/javascript" src="/js/article-date.js"></script>
+
+ <p>A window manager is a software that can manage the layout and appearance of every window spawned in your desktop, most people confuse them with desktop enviroments, which isn't the same since a desktop enviroment is more of an ecosystem, they come with a more 'complete' set of tools, like a basic web browser, a terminal emulator or calculator, an example of desktop enviroment would be gnome, xfce or kde plasma; instead a window manager is only the program that manages the windows spawned, although there are window managers that come with a little more, like docks or taskbars (openbox for example).</p>
+
+ <p> In my case I use dwm, which is a window manager written in C developed by suckless software. The most relevant thing of this window manager is that out of the box it comes with the most basic functionallity, and if you want to extend it you need to patch it.</p>
+
+ <p>By default dwm comes with 9 workspaces, in which you can open as many windows as you please; to spawn a new window for example a web browser you need to assign it a keybinding or use an application launcher like <a href="https://tools.suckless.org/dmenu/">dmenu</a></p>
+
+ <!-- <p>but you can add as much as you want, for example I added a 10th workspace and mapped to the '0' key, which by default turn on a mode that shows all the opened windows in the current workspace, a feature that I never used.</p> -->
+
+ <div id="article-screenshot">
+ <a href="/blog/dwm-config/screenshot.png"><img style="padding: 0em; width: 100%;" class="screenshot" max-width="40em" src="screenshot.jpeg" title="Screenshot of my dwm build" alt="Screenshot"></a>
+ <!-- <img style="padding: 0em; width: 100%;" class="screenshot" max-width=40em src="scrot.png" title="Screenshot of my dwm build" alt="Screenshot"> -->
+ </div>
+
+ <h2>Installing dwm</h2>
+
+ <h3>Requisites</h3>
+ <ul>
+ <li>GNU/Linux or BSD based operating system</li>
+ <li>A C library and a C compiler</li>
+ <li>make utility installed</li>
+ <li>X server installed</li>
+ <li>dwm source code, you can clone the repository or download as a tar file at the web</li>
+ </ul>
+
+ <p>As you can see above you can only install dwm on GNU/Linux or BSD based distros, unfortunally dwm is not available for Windows users but I'm sure there is an alternative.</p>
+
+ <h3>Installation</h3>
+ <p>In order to install dwm you can visit the web of the creators at <a href="https://dwm.suckless.org/">suckless.org/dwm</a>, where you can download the source code as a tar file, or clone the repository.</p>
+ <p>After you obtain the source code you need to navigate to the root folder of the source code and execute the following command</p>
+
+ <pre><code>$ <em id=command><u>sudo</u> make</em> install</code></pre>
+
+ <p>after that you can log out of you user account, if you use a display manager you can select dwm as window manager and log back in, if you dont use a display manager you need to edit your .xinitrc file located at you home folder so that when you start X dwm gets launched too, you do this by adding `exec dwm` to <u>the end</u> of the .xinitrc file, its important that you add it to the end of the file.</p>
+
+ <pre><code>$ <em id=command>cat</em> $HOME/.xinitrc
+...
+exec dwm </code></pre>
+
+ <p>Then you can start the X server by executing `startx` on a tty and it should open dwm without any problems.</p>
+
+ <h2>How do you configure dwm?</h2>
+
+ <p>Basically you configure it by editing its source code, inside the root folder of the project there is a C header file named <a href="https://github.com/klewer-martin/dotfiles/blob/master/.config/dwm/config.def.h">config.def.h</a> which if you open with a text editor you can see that there is some C code that you can edit, for example the line "static const int topbar" defines a variable named topbar which you can set to 1 or 0, to select if the status bar should spawn in the top or the bottom of the screen. After every change you make to the source code you need to copy config.def.h to config.h and then <u>recompile dwm</u></p>
+
+ <h3>Show information on the status bar</h3>
+
+ <p>dwm by default won't show any information on the status bar, this is done by using the xsetroot utility, which sets the WM_NAME enviroment variable that dwm uses, lets assume you want to set the clock and date on the status bar, well you could execute the following command</p>
+
+ <pre><code>$ <em id=command>xsetroot</em> -iname <em id=command_sym>$(</em><em id=command>date</em><em id=command_sym>)</em></code></pre>
+
+ <p>and all the output of 'date' would be printed on the status bar, this makes dwm status bar highly scriptable, in fact the are a ton of status bar implementation, the one that I use is called <a href="https://github.com/torrinfail/dwmblocks">dwmblocks</a> and its also written in C and the configuration its pretty much the same as dwm, in order to get information you need to have scripts that prints the desired data to stdout, then you can include it on the config.h of dwmblocks by having them on a folder which is included in the $PATH variable of your user.</p>
+
+ <h3>Getting emoji support on dwm</h3>
+
+ <p>dwm by default doesn't come with emoji support, if you want to render an emoji in the status bar its going to either show it as a box or in the worst case crash, so in order to get emoji support first you need to get a font with <u>emojis</u>, I'm using <a href="https://www.joypixels.com/"JoyPixel>JoyPixels® font</a> you can also use <a href="https://fonts.google.com/noto">Google's noto font</a>, or any other font that comes with emoji support. Then open dwm configuration file and append to the <u>fonts</u> array the name of the font you want, in my case it's JoyPixels®.</p>
+
+ <pre><code>$ <em id=command>cat</em> config.def.h
+...
+static const char *fonts[] = { "Source Code Pro:style=Regular:size=9", "JoyPixels:style=Regular:size=8:antialias=true:autohint=true", "DejaVu Sans" };
+...</code></pre>
+
+ <p>After you setup the font you need to remove or comment a chunk of code from drw.c, a file located in the root of the folder where dwm source code resides, between lines 136-150 there is a function named IsCol, you need to remove it or comment it.</p>
+
+
+ <p>Finally you can recompile dwm and you will get emoji support. Sometimes even though you made all this procedure you still get boxes insted of the proper emoji, I solved this by adding another font name in the <u>fonts</u> array, like a fallback font.</p>
+ <h3><u>Patches in dwm</u></h3>
+
+ <p>Since dwm is a simple program than doesn't include much features, if you want to extend it, for example by adding a <a href="https://dwm.suckless.org/patches/systray/">systray</a> to the status bar, you need to patch dwm. To do this first you need to download the patch from <a href="https://dwm.suckless.org/patches/">suckless.org/patches</a>, then make sure you got it 'patch' installed, although I think it comes with most linux distributions by default nowdays.</p>
+
+ <pre><code>$ <em id=command>patch</em> -p1 <em id=command_red><</em> <u><name of the file></u></code></pre>
+
+ <p>If you never patched dwm before then probably no errors would be reportjd, but if you already have applied a ton of patches then probably you would get a HUNK ## FAILED, in this case you need to get your hands dirty, and manually patch all the files that failed, you do this by opening the files with .rej extension (short for rejected), and the corresponding file to be patched, for example dwm.c and dwm.c.rej, and then you add all the chunks of code from the rejected file into the corresponding place in the non rejected file, you know where you should put the chunks of code because in the rej file you can see at the start of every chunk there is a '@@' followed by a number of line; also lines starting with plus means add, and minus means delete, if i'm not clear you should google how to use diff and patch to modify a file.</p>
+
+ <h2>Useful links</h2>
+ <ul>
+ <li><a href="https://en.wikipedia.org/wiki/Window_manager">What is a window manager?</a></li>
+ <li>Make sure to check the <a href="https://suckless.org/">suckless webiste</a></li>
+ <li><a target="_blank" href="https://dwm.suckless.org/">suckless dwm website</a></li>
+ <li><a target="_blank" href="https://www.x.org/releases/X11R7.7/doc/man/man1/Xserver.1.xhtml">X server man page</a></li>
+ <li><a target="_blank" href="https://man7.org/linux/man-pages/man1/patch.1.html">patch man page</a></li>
+ </ul>
+
+ <!--#include virtual="/common/end_of_article.shtml" -->
+ </article>
+ <!--#include virtual="/common/footer.shtml" -->
+ </body>
+</html>
diff --git a/blog/dwm-config/screenshot.jpeg b/blog/dwm-config/screenshot.jpeg
Binary files differ.
diff --git a/blog/dwm-config/screenshot.png b/blog/dwm-config/screenshot.png
Binary files differ.
diff --git a/blog/nerdearla-2022/nerdearla-2019.jpeg b/blog/nerdearla-2022/nerdearla-2019.jpeg
Binary files differ.
diff --git a/blog/nerdearla-2022/nerdearla-2022.html b/blog/nerdearla-2022/nerdearla-2022.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en" >
+ <head id=top>
+ <meta charset="utf-8">
+ <meta name="generator" content="pandoc">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <meta name="article-date" content="23-Sep-2022">
+ <meta name="article-title" content="I'm going to Nerdearla 2022">
+
+ <title>I'm going to Nerdearla 2022 | Martin's Webpage</title>
+ <link rel='stylesheet' type='text/css' href="/css/style.css">
+ <link rel="icon" href="/favicon.ico">
+ <style type="text/css">code{white-space: pre;}</style>
+ </head>
+
+ <body id=top>
+ <!--#include virtual="/common/header.shtml" -->
+
+ <article>
+ <link rel='stylesheet' type='text/css' href="/css/article_style.css">
+
+ <h1 id=article-title>I’m going to Nerdearla 2022</h1><p class="article-date">23-Sep-2022</p>
+<p>As the title says I’m going to be present at <a
+href="https://nerdear.la/">Nerdearla</a>.</p>
+<p>This will be my second time that I attend to this event since I’ve
+been there for the first time in 2019. I remember that <a
+href="https://en.wikipedia.org/wiki/Jon_Hall_(programmer)">John ‘Maddog’
+Hall</a> was making a presentation called “50 years of UNIX and the
+landing on the Moon”, you can find a record of the presentation <a
+href="https://www.youtube.com/watch?v=9O_FnKZI6_M">here</a>, It was my
+first talk ever and I loved it.</p>
+<p><img src="nerdearla-2019.jpeg" title="Nerdearla 2020" /></p>
+
+ <script type="text/javascript" src="/js/article-date.js"></script>
+ <!--#include virtual="/common/end_of_article.shtml" -->
+ </article>
+
+ <!--#include virtual="/common/footer.shtml" -->
+ </body>
+</html>
diff --git a/blog/sav/sav.gif b/blog/sav/sav.gif
Binary files differ.
diff --git a/blog/sav/sav.html b/blog/sav/sav.html
@@ -1,23 +1,22 @@
<!DOCTYPE html>
<html lang="en" >
-
<meta charset="utf-8">
<meta name="generator" content="pandoc">
+ <meta name="author" content="Martin J. Kloeckner">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<!-- pagetitle = "Martin's webpage" -->
<head id=top>
- <title>SAV - Sorting Algorithms Visualized {#article-title}</title>
+ <meta name="article-date" content="18-Sep-2022">
+ <meta name="article-title" content="SAV - Sorting Algorithms Visualized">
+
+ <title>SAV - Sorting Algorithms Visualized | Martin Klöckner's Webpage</title>
<link rel='stylesheet' type='text/css' href="/css/style.css">
<link rel="icon" href="/favicon.ico">
<style type="text/css">code{white-space: pre;}</style>
-
-<!-- -->
-
</head>
<body id=top>
@@ -26,41 +25,52 @@
<article>
<link rel='stylesheet' type='text/css' href="/css/article_style.css">
- <script>
- var dt = document.lastModified;
- dt = dt.replaceAll("/", "-");
- // document.write(dt.substring(0, 11));
- document.querySelector('.article-date').innerHTML += dt.substring(0, 10) + ")";
- </script>
-
<h1 id="article-title">SAV - Sorting Algorithms Visualized</h1>
-<p>18-09-22 {#article-date}</p>
-<p>This is a desktop app that shows how an array is being sorted using
-different algorithms.</p>
-<p><img src="sav.gif" title="Gif showing SAV working" />
-{#article-screenshot}</p>
-<p>I made it using pure C and SDL2 for graphics, you can take a look at
-it’s source code on <a
-href="https://github.com/mjkloeckner/sav">Github</a>.</p>
-<p>The main purpose of this app was to put in practice the knowledge I
-gained in C as well with algorithms, and it was like a challenge since
-I’d never used SDL2 graphics before. In the end was a very enjoyable
-project since SDL2 per se is a very simple and easy to use library.</p>
-<p>Currently it supports the following algorithms:</p>
-<ul>
-<li>bubble sort improved</li>
-<li>insertion sort</li>
-<li>merge sort wrapper</li>
-<li>quick sort wrapper</li>
-<li>shell sort</li>
-<li>selection sort</li>
-<li>heap sort</li>
-</ul>
+
+ <p class="article-date">18-Sep-2022</p>
+
+ <script type="text/javascript" src="/js/article-date.js"></script>
+
+ <p>This is a desktop app that shows how an array is being sorted using different sorting algorithms.</p>
+ <div id="article-screenshot">
+ <a href="sav.gif"><img src="sav.gif" title="Gif showing SAV working"/></a>
+ </div>
+
+ <p>I made it using pure C and SDL2 for graphics, you can take a look at it’s source code on <a href="https://github.com/mjkloeckner/sav">Github</a>.</p>
+
+ <p>The main purpose of this app was to put in practice the knowledge I gained in C as well with algorithms, and it was like a challenge since I’d never used SDL2 graphics before. In the end was a very enjoyable project since SDL2 per se is a very simple and easy to use library.</p>
+
+ <p>Currently it supports the following algorithms:</p>
+ <ul>
+ <li>bubble sort improved</li>
+ <li>insertion sort</li>
+ <li>merge sort wrapper</li>
+ <li>quick sort wrapper</li>
+ <li>shell sort</li>
+ <li>selection sort</li>
+ <li>heap sort</li>
+ </ul>
<!--#include virtual="/common/end_of_article.shtml" -->
</article>
<!--#include virtual="/common/footer.shtml" -->
+
+ <!-- -->
+ <!-- <header> -->
+ <!-- -->
+ <!-- <h3 class="date">18/09/22</h3> -->
+ <!-- -->
+
+ <!-- <h1 class="title">SAV - Sorting Algorithms Visualized</h1> -->
+
+ <!-- -->
+ <!-- <h2 class="author"></h2> -->
+ <!-- <p class="affilation"><em></em></p> -->
+ <!-- -->
+
+ <!-- </header> -->
+ <!-- -->
</body>
</html>
diff --git a/blog/vim-config/vim-config.html b/blog/vim-config/vim-config.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <head>
+ <meta charset="utf-8"/>
+ <meta name="article-date" content="04-Mar-2021">
+ <meta name="article-title" content="vim - The keyboard driven text editor">
+
+ <title>The keyboard driven text editor | Martin Klöckner's Webpage</title>
+ <link rel='stylesheet' type='text/css' href="/css/style.css">
+ <link rel="icon" href="/favicon.ico">
+ </head>
+
+ <body>
+ <!--#include virtual="/common/header.shtml" -->
+
+ <article>
+ <link rel='stylesheet' type='text/css' href="/css/article_style.css">
+
+ <div id="article-title-with-icon">
+ <div id="article-icon">
+ <img src="/blog/vim-config/vim_logo.png" title="Vim logo" alt="Vim logo">
+ </div>
+ <h1 id="article-title">The keyboard driven text editor</h1>
+ </div>
+
+ <p class="article-date">04-Mar-2021</p>
+ <script type="text/javascript" src="/js/article-date.js"></script>
+
+ <p>If we think for a moment about software we are going to realize that the core of every program it's just plain text, literally just words in a file that someone wrote, this webpage it's just text interpreted by your web-browser, whose also just plain text implemented by another program, some software has more complexity than others, for example the linux kernel it's estimated that has around 27.8 million lines of code, which is also just plain text</p>
+
+ <p>The way we tell computers what to do it's with text, so in order to write that text we just need a text editor and this is were Vim it's known for. Vim it's just a text editor. The term Vim stands for Vi IMproved, Vim it's a rewrite and improved version of Vi, a text editor that dates from 1978.</p>
+
+ <p>In this article I want to show how this text editor became my best frient (?), I learned to love about Vim keybindings and now I even have and extension on my browser to use vim like keybindings.</p>
+
+ <p>Vim is a console text editor (altough you can find distributions like gvim, which comes with a gui), a benefit of this its that It's very lightweign in terms of system resources. Vim it's also highly configurable, you can do this by editing the <u>.vimrc</u> text file, which should be in you home directory in Linux or BSD bases OSs, if not you can <u>create</u> a new blank one and start from zero</p>
+
+ <p>If you installed Vim and you don't know how to move around or insert text, first you need to understand the basics, Vim has 3 main "modes" </p>
+
+ <p>By default Vim comes with a lot of features disabled, for example a key binding to comment a line or auto close brackets, parenthesis, etc, this features you can enable them by installing <u>plugins</u> which I will cover leter.</p>
+
+ <br>
+ <!--#include virtual="/common/end_of_article.shtml" -->
+
+ </article>
+
+ <!--#include virtual="/common/footer.shtml" -->
+ </body>
+</html>
diff --git a/media/vim_logo.png b/blog/vim-config/vim_logo.png
Binary files differ.
diff --git a/blog_index.shtml b/blog_index.shtml
@@ -0,0 +1,4 @@
+<li><time>23-Sep-2022</time> <a href="/blog/nerdearla-2022/nerdearla-2022.html">I'm going to Nerdearla 2022</a></li>
+<li><time>18-Sep-2022</time> <a href="/blog/sav/sav.html">SAV - Sorting Algorithms Visualized</a></li>
+<li><time>23-Oct-2021</time> <a href="/blog/dwm-config/dwm-config.html">dwm - A tiling window manager configuration</a></li>
+<li><time>04-Mar-2021</time> <a href="/blog/vim-config/vim-config.html">vim - The keyboard driven text editor</a></li>
diff --git a/books.txt b/books.txt
@@ -1,99 +0,0 @@
-
-Biographies
-<li>Abraham Pais - The science and the life of Albert Einstein</li>
-<li>Linus Torvalds, David Diamond - Just for Fun, The Story of an Accidental Revolutionary</li>
-
-Economics
-<li>Mark Douglas - Trading in the Zone (2000)</li>
-<li>Roger Wattenhofer - The science of the blockchain (2016)</li>
-<li>Thomas N. Bulkowski - Encyclopedia of Chart Patterns (2005)</li>
-<li>Van Tharp - Trade Your Way to Financial Freedom (2006)</li>
-
-Human vocabulary
-<li>Anthony Bulger, Jose Garcia Vazquez - El Nuevo Ingles Sin Esfuerzo (1999)</li>
-<li>Collins Dictionaries - Vocabulario de inglés (2012)</li>
-<li>Ed Swick - German Grammar Drills (2007)</li>
-<li>Ed Swick - German Vocabulary Book (2007)</li>
-<li>Irene Klein - Taller del escritor universitario</li>
-<li>Mark Lester - English Grammar Drills (2009)</li>
-<li>Michael McCarthy, Felicity O'Dell - English vocabulary in use (upper-intermediate and advanced) (1994)</li>
-<li>Rawdon Wyatt - Check your vocabulary for english for IELTS examination (2002)</li>
-<li>Stuart Redman - English Vocabulary in Use - (Pre-intermediate and Intermediate) (1997)</li>
-<li>Susan Cameron - Perfecting Your English Pronunciation (2018)</li>
-
-Leisure
-<li>George Orwell - 1984</li>
-<li>Randall Munroe - What If? Serious Scientific Answers to Absurd Hypothetical Questions</li>
-
-Self Improvement
-<li>Dale Carnegie - How to Win Friends & Influence People</li>
-<li>Cal Newport - Digital Minimalism (2019)</li>
-
-Math & Physics
-<li>Fisica Universitaria vol. I - Sears - Zemansky</li>
-<li>Fisica Universitaria vol. II - Sears - Zemansky</li>
-<li>Kenneth Kuttler - Multivariable Calculus, Applications and Theory</li>
-<li>Marsden, Tromba - Calculo Vectorial</li>
-<li>Tom Apostol - Calculus Vol.1</li>
-<li>Tom Apostol - Calculus Vol.2</li>
-
-
-Programming
-<li>Ing. Pablo A. Sznajdleder - Algoritmos a fondo con implementacion en C y Java</li>
-<li>Allen B. Downey - Think Complexity, Complexity Science and Computational Modeling (2011)</li>
-<li>Allen B. Downey - Think Python, How to Think Like a Computer Scientist (2015)</li>
-<li>Andrew Huang - Hacking the Xbox An Introduction to Reverse Engineering-No Starch Press (2013)</li>
-<li>Andrew S. Tanenbaum, Albert S. Woodhull - Operating systems, design and implementation (1997)</li>
-<li>Andrew S. Tanenbaum - Computer networks-Prentice Hall (2002)</li>
-<li>Andrew S. Tanenbaum - Modern Operating Systems (2008)</li>
-<li>Bjarne Stroustrup - The C++ Programming Language, 4th Edition (2013)</li>
-<li>Brian W. Kernighan, Dennis M. Ritchie - The C programming language-Prentice Hall (1988)</li>
-<li>Bruce Dang, Alexandre Gazet, Elias Bachaalany - Practical Reverse Engineering x86, x64, ARM, Windows Kernel, Reversing Tools, and Obfuscation (2014)</li>
-<li>Bruce Eckel - Thinking in C++. Volume 1-Prentice Hall (2000)</li>
-<li>Bruce Schneier - Applied Cryptography - Protocols, Algorithms, and Source Code in C (1995)</li>
-<li>Cal Newport - Deep Work,Rules for focused success in a distracted world (2016)</li>
-<li>Carlo Ghezzi, Mehdi Jazayeri, Dino Mandrioli - Fundamentals of Software Engineering (2002)</li>
-<li>Chromatic - Extreme Programming Pocket Guide_ Team-Based Software Development-Oreilly</li>
-<li>Dale Dougherty, Arnold Robbins - Sed & Awk-O’Reilly Media (1997)</li>
-<li>Daniel Kahneman - Thinking, Fast and Slow (2013)</li>
-<li>Daniel P. Bovet, Marco Cesati - Understanding the Linux Kernel, Third Edition-O'Reilly Media (2005)</li>
-<li>David Watson, Helen Williams - Cambridge IGCSE® Computer Science Revision Guide (2015)</li>
-<li>Elliotte Rusty Harold - XML 1.1 Bible (2004)</li>
-<li>Erik T. Ray - Learning XML (2001)</li>
-<li>Evi Nemeth et al. - UNIX and Linux System Administration Handbook (2017) </li>
-<li>Evi Nemeth, Garth Snyder, Trent R. Hein - UNIX and Linux System Administration Handbook, 4th Edition (2010)</li>
-<li>Fabio Arjona Arciniegas - C++ XML-Sams (2001)</li>
-<li>Fontela - Programacion Orientada a Objetos (2018)</li>
-<li>Forrest M. Mims III - Getting started in electronics (2003)</li>
-<li>Gamma, Helm, Johnson, Vlissides, John - Design patterns elements of reusable object-oriented software (2016)</li>
-<li>Himanshu Kumar - Advanced Industrial Automation - PLC programming in simplest way with 110 solved examples (2020)</li>
-<li>Jack D. Schwager - Getting Started in Technical Analysis (2008)</li>
-
-<li>Jonathan Corbet, Alessandro Rubini, Greg Kroah-Hartman - Linux Device Drivers</li>
-<li>Jonathan Corbet - Linux Device Drivers (3rd edition)</li>
-
-<li>Kruse - Data Structures and Program Design in C (1991)</li>
-<li>Linux From Scratch</li>
-<li>Machtelt Garrels - Bash Guide for Begginers</li>
-
-<li>Michael Fitzgerald - Introducing Regular Expressions (2012)</li>
-<li>Niels Ferguson, Bruce Schneier, Tadayoshi Kohno - Cryptography Engineering_ Design Principles and Practical Applications-Wiley (2010)</li>
-<li>Paul Deitel, Harvey Deitel - C How to Program (2012)</li>
-<li>Paul Deitel, Harvey Deitel, Nieto T.R. - XML How to program (2000)</li>
-<li>Paul Scherz - Practical Electronics for Inventors (2000)</li>
-<li>Pratt, William K. - PLC Programming Methods and Applications (2001)</li>
-<li>Richard Blum_Christine Bresnahan - Linux Command Line and Shell Scripting Bible (2015, Wiley) - </li>
-<li>Robert C. Seacord - Secure coding in C & C++ (2013)</li>
-<li>Robin Nixon - Learning PHP, MySQL, JavaScript, CSS & HTML5 - A Step-by-Step Guide to Creating Dynamic Websites (3rd ed.) (2014)</li>
-<li>Rubini A., Corbet J. - LINUX Device Drivers</li>
-<li>Sarah Lawrey, Donald Scott - Cambridge IGCSE® Computer Science Coursebook (2015)</li>
-<li>Schousek, Theresa - The Art of Assembly Language Programming Using PIC® Technology (2019)</li>
-<li>Smith, Stephen - Raspberry PI Assembly Language Programming - arm Processor coding</li>
-<li>STEVEN HOLZNER - Inside XML-TECHMEDIA (2000)</li>
-<li>Tanenbaum Andrew S. - Computer Networks (2003)</li>
-<li>Tanenbaum A.S. - Modern Operating Systems_ International Version-Pearson (2008)</li>
-<li>Tony Gaddis, Kip Irvine - Starting Out With Visual Basic (2017)</li>
-<li>Yannis Haralambous, P Scott Horne - Fonts & Encodings (2007)</li>
-<li>Ying Bai - SQL Server Database Programming With Visual Basic.NET - Concepts, Designs and Implementations (2020)</li>
-<li>Yurichev D. - Reverse engineering for beginners</li>
-<li>Zhirkov, Igor - Low-level programming C, Assembly, and program execution on Intel 64 architecture (2017)</li>
diff --git a/common/downloads.html b/common/downloads.html
@@ -2,7 +2,7 @@
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
- <title>Downloads - Martin Klöckner's webpage</title>
+ <title>Downloads | Martin Klöckner's Webpage</title>
<link rel='stylesheet' type='text/css' href="/css/style.css">
<link rel="icon" href="/favicon.ico">
<meta charset="utf-8"/>
diff --git a/common/end_of_article.shtml b/common/end_of_article.shtml
@@ -4,3 +4,6 @@
<div style="margin-top: 1em; text-align: center; text-decoration: none;">
<a href="#top" id="go_top">Back to top</a>
</div>
+<div style="margin-top: 1em; text-align: center; text-decoration: none;">
+ <a href="/rss.xml" id="rss"><img style="width: 1.5em; padding: 0;" src="/common/logos/rss_logo.png" alt="rss logo"></a>
+</div>
diff --git a/common/header.shtml b/common/header.shtml
@@ -2,13 +2,13 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="header_flex_div">
<h1 id="header_title">
- <a href="/index.html" id="header_link">Martin Klöckner</a>
+ <a href="/" id="header_link">Martin Klöckner</a>
</h1>
<ul style="list-style-type: none;" class="header_buttons">
- <li class="header_button" style="padding-right: 10px"><a href="/blog.html" style="text-decoration: none; mergin-left: 1em;">blog</a></li>
- <li class="header_button" style="padding-right: 10px"><a href="/about.html" style="text-decoration: none;">about</a></li>
- <li class="header_button"><a href="/downloads/resume.pdf" style="text-decoration: none;" target="_blank">cv<i style="font-size: 14px; color: gray; margin-left: 2px;" class="fa fa-download"></i></a></li>
- </ul>
+ <li class="header_button" style="padding-right: 10px"><a href="/blog" style="text-decoration: none; mergin-left: 1em;">blog</a></li>
+ <li class="header_button" style="padding-right: 10px"><a href="/about" style="text-decoration: none;">about</a></li>
+ <li class="header_button"><a href="/resume.pdf" style="text-decoration: none;" target="_blank">cv<i style="font-size: 14px; color: gray; margin-left: 2px;" class="fa fa-download"></i></a></li>
+ </ul>
<!-- <a href="/index.html" style="text-decoration: none;">home</a> -->
<!-- <a href="/common/library.html" style="text-decoration: none;">library</a> -->
diff --git a/common/library.html b/common/library.html
@@ -2,7 +2,7 @@
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head id=top>
- <title>Books that I recommend - Martin Klöckner's webpage</title>
+ <title>Books that I recommend | Martin Klöckner's webpage</title>
<link rel='stylesheet' type='text/css' href="/css/style.css">
<link rel="icon" href="/favicon.ico">
<meta charset="utf-8"/>
diff --git a/css/about_style.css b/css/about_style.css
@@ -65,9 +65,9 @@ ul {
border-style: dashed;
border-color: peru;
/* border-width: 1.75px; */
- /* border-radius: .75em; */
+ border-radius: 0em;
- box-shadow: 3px 3px 3px black;
+ box-shadow: 1px 1px 5px black;
}
.skills_logos {
diff --git a/css/article_style.css b/css/article_style.css
@@ -1,14 +1,22 @@
#article-title {
- font-size: 16px;
+ font-size: 1.5em;
text-decoration: underline;
+ text-align: left;
padding-top: 1em;
padding-bottom: 1em;
}
-img {
- padding: 1em;
- width: 85%;
+.article-date {
+ font-size: .9em;
+ padding-bottom: 2.5em;
+ /* color: #588B8B; */
+ color: #9D96B8;
+ font-style: italic;
+}
+img {
+ padding-top: .75em;
+ padding-bottom: .75em;
}
#article-screenshot {
@@ -20,8 +28,8 @@ img {
/* float: center; */
/* max-width: 5em; */
/* flex-basis: 40% */
- width: 10%;
- padding-right: 1em;
+ width: 3em;
+ padding-right: .5em;
}
#article-title-with-icon {
@@ -30,7 +38,7 @@ img {
}
p {
- padding-bottom: .5em;
+ padding-bottom: 1em;
}
ul {
@@ -60,14 +68,6 @@ ul {
border-top: 1px dashed peru;
}
-.article-date {
- font-size: 14px;
- padding-top: 1em;
- color: #588B8B;
- font-style: italic;
-}
-
-
@media (max-width: 800px) {
.article_bottom_bar{
width: 45%;
diff --git a/css/style.css b/css/style.css
@@ -1,6 +1,6 @@
/* src: url('webfont.eot?#iefix') format('embedded-opentype'), /1* IE6-IE8 *1/ */
@font-face {
- font-family: 'Futura';
+ font-family: 'Futura Medium';
src: url('/fonts/futura_medium/futura_medium.ttf'); /* IE9 Compat Modes */
src: url('/fonts/futura_medium/FuturaBT-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/futura_medium/FuturaBT-Medium.woff') format('woff'), /* Modern Browsers */
@@ -9,12 +9,12 @@
}
@font-face {
- font-family: 'Neuzeit';
- src: url('/fonts/neuzeit-black/NeuzeitGroteskCondW01-Black.ttf'); /* IE9 Compat Modes */
- src: url('/fonts/neuzeit-black/NeuzeitGroteskCondW01-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('/fonts/neuzeit-black/NeuzeitGroteskCondW01-Black.woff') format('woff'), /* Modern Browsers */
- url('/fonts/neuzeit-black/NeuzeitGroteskCondW01-Black.ttf') format('truetype'), /* Safari, Android, iOS */
- url('/fonts/neuzeit-black/NeuzeitGroteskCondW01-Black.svg#svgFutura') format('svg'); /* Legacy iOS */
+ font-family: 'Ubuntu Mono';
+ src: url('/fonts/UbuntuMono-regular/UbuntuMono-Regular.ttf'); /* IE9 Compat Modes */
+ src: url('/fonts/UbuntuMono-regular/UbuntuMono-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('/fonts/UbuntuMono-regular/UbuntuMono-Regular.woff') format('woff'), /* Modern Browsers */
+ url('/fonts/UbuntuMono-regular/UbuntuMono-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
+ url('/fonts/UbuntuMono-regular/UbuntuMono-Regular.svg#svgUbuntuMono') format('svg'); /* Legacy iOS */
}
* {
@@ -41,8 +41,8 @@ body {
margin-left: .5em;
margin-right: .5em;
- font-size: 14px;
- font-family: "DejaVu Sans", sans, sans-serif;
+ font-size: 16px;
+ font-family: "DejaVu Sans", sans;
/* scroll-behavior: smooth; */
}
@@ -50,7 +50,7 @@ header {
color: crimson;
/* background: #191919; */
- max-width: 46em;
+ max-width: 40em;
margin-left: auto;
margin-right: auto;
@@ -60,16 +60,10 @@ header {
text-align: center;
text-shadow: 5px 5px 5px black;
- padding-left: 1.25em;
- padding-right: 1.25em;
padding-top: 1em;
padding-bottom: .25em;
- /* border-radius: 1em; */
border-top: 1em;
- /* border-bottom: dashed peru 1px; */
-
- /* box-shadow: 5px 5px 7px black; */
}
.header_button {
@@ -78,7 +72,7 @@ header {
.header_buttons {
margin: 0;
- margin-top: .6em;
+ margin-top: .75em;
font-size: 1.5em;
display: inline;
align-self: center;
@@ -91,10 +85,6 @@ header {
flex-wrap: wrap;
}
-/* .header_bottom_bar { */
-/* style: dashed; */
-/* } */
-
.header_bottom_bar {
border: 0;
clear:both;
@@ -112,37 +102,15 @@ header {
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
- /*! border-bottom: dashed; */
border-top: 1px dashed peru;
}
-@media (max-width: 800px) {
- .header_flex_div{
- flex-direction: column;
- justify-content: center;
- }
- .header_buttons{
- margin-top: 0;
- font-size: 1.5em;
- align-self: center;
- padding-top: 0em;
- }
- .header_bottom_bar{
- width: 55%;
- }
-}
-
#header_link {
text-decoration: none;
color: inherit;
- /* transition-timing-function: linear; */
- /* transition-duration: 0.5s; */
- /* transition: 1s; */
transition: .75;
- /* letter-spacing fix */
- /* padding-left: 0.5em; */
- font-family: futura;
+ font-family: "Futura Medium";
}
#header_link:hover {
@@ -151,10 +119,7 @@ header {
#header_title {
margin-bottom: 0em;
- /* padding-bottom: 0.25em; */
font-size: 2.75em;
- /* letter-spacing: 2px; */
- /* line-height: 1; */
display: inline-block;
}
@@ -162,23 +127,47 @@ article {
color: antiquewhite;
/* background: #191919; */
- max-width: 55em;
+ max-width: 40em;
margin-left: auto;
margin-right: auto;
margin-bottom: .9em;
- text-align: justify;
+ text-align: left;
- /* padding-left: 1.25em; */
- /* padding-right: 1.25em; */
padding-left: 0.5em;
padding-right: 0.5em;
padding-top: 1em;
padding-bottom: 1em;
border-radius: 1em;
- /* box-shadow: 5px 5px 7px black; */
+}
+
+@media (max-width: 800px) {
+ body {
+ font-size: 16px;
+ margin-left: 0em;
+ margin-right: 0em;
+ }
+ header {
+ padding-top: .25em;
+ }
+ .header_flex_div{
+ flex-direction: column;
+ justify-content: center;
+ }
+ .header_buttons{
+ margin-top: 0;
+ font-size: 1.75em;
+ align-self: center;
+ padding-top: 0em;
+ }
+ .header_bottom_bar{
+ width: 55%;
+ }
+ #header_title {
+ font-size: 3em;
+ }
}
img {
@@ -202,10 +191,12 @@ a:visited {
a:link {
color: #81A2BE;
color: peru;
+ text-decoration: none;
}
a:hover {
color: crimson;
+ text-decoration: underline;
}
ol {
@@ -215,6 +206,7 @@ ol {
ul {
list-style-type: disc; /* Remove bullets */
padding: 0;
+ padding-bottom: .5em;
margin: 0; /* Remove margins */
}
@@ -236,8 +228,21 @@ footer {
padding-bottom: .5em;
}
+h1 {
+ font-size: 1.5em;
+}
+
+h2 {
+ font-size: 1.25em;
+
+ padding-top: 1em;
+ padding-bottom: .5em;
+}
+
h3 {
- text-align: center;
+ font-size: 1em;
+ text-align: left;
+
padding-top: .5em;
padding-bottom: .5em;
}
@@ -253,15 +258,10 @@ h5 {
font-size: 1em;
}
-#recent_articles {
- text-align: left;
- list-style-type: disc;
- padding-left: 1em;
+p {
+ padding-bottom: 1em;
}
-/* .section::-webkit-scrollbar-track { */
-/* background-color: white; */
-/* } */
code {
text-align: left;
@@ -286,21 +286,25 @@ code {
margin-top: .75em;
margin-bottom: .75em;
- max-width: 23em;
+ /* max-width: 23em; */
border-width: thin;
border-color: antiquewhite;
border-style: dashed;
box-shadow: 5px 5px 7px black;
+
+ overflow: auto;
+
+ font-size: .9em;
}
#command {
- /* color: green; */
- color: #33ff11;
+ /* color: green; */
+ color: #33ff11;
}
#command_sym {
- color: #ff1694;
+ color: #ff1694;
}
#command_red {
@@ -341,26 +345,15 @@ hr {
color: crimson;
}
-#recent_articles_items {
-
+#blog_entries {
+ list-style-type: disc; /* Remove bullets */
+ padding: 0;
+ padding-bottom: .5em;
+ margin-left: 1em; /* Remove margins */
+ text-align: left;
}
-/* #recent_articles { */
-/* border-collapse: collapse; */
- /* width: 75%; */
- /* border-radius: 100px; */
- /* margin-left: auto; */
- /* margin-right: auto; */
-/* } */
-
-/* #recent_articles tr { */
-/* border: 1px dotted antiquewhite; */
-/* width: 100%; */
-/* border-radius: 100px; */
-/* } */
-
-/* #recent_articles td { */
-/* padding: .25em; */
-/* padding-right: -10em; */
-/* border: 1px dotted antiquewhite; */
-/* } */
+time {
+ font-family: "Ubuntu Mono";
+ /* font-family: "IBMPlexMono"; */
+}
diff --git a/downloads/vim.tar.gz b/downloads/vim.tar.gz
Binary files differ.
diff --git a/downloads/zsh.tar.gz b/downloads/zsh.tar.gz
Binary files differ.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
- <title>Martin Klöckner's webpage</title>
+ <title>Martin Klöckner's Webpage</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet' type='text/css' href="css/style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
@@ -12,52 +12,26 @@
<body id=top>
<!--#include virtual="/common/header.shtml" -->
- <script src="js/hello.js"></script>
-
<article>
- <h1 id="index-title">Welcome, to Martin's webpage!</h1>
-
- <p>Hello world! this is my website, which I did to experiment with Web Development and such. Feel free to surf the couple of pages that I made for you, you can navigate them by the menu on top, below the title, you can also choose an article in the <a href="#recent_articles">recent articles</a> section.
- </p><br>
- <p>If you want to contact me to make business or just to talk you can head to <a href="/common/about.html">about</a> section where you can read a little bit of my history and get my contact info.</p>
+ <h1 id="index-title">Welcome, to Martin's Webpage!</h1>
- <h3 style="text-align: left;"><u>Latest uploads</u></h3>
+ <p>Hello world! this is my website, which I did to experiment with Web Development and such. Feel free to surf the couple of pages that I made for you, you can navigate them by the menu on top, below the title, you can also choose an article in the <a href="#recent_articles">latest uploads</a> section.
+ </p>
- <!-- <table id="recent_articles"> -->
- <!-- <tbody> -->
- <!-- <tr> -->
- <!-- <th>Date</th> -->
- <!-- <th>Title</th> -->
- <!-- </tr> -->
- <!-- <tr> -->
- <!-- <td>04 Mar 2022</td> -->
- <!-- <td><a href="articles/01/vim_config.html">Vim introduction and basic configuration</a></td> -->
- <!-- </tr> -->
- <!-- <tr> -->
- <!-- <td>23 Oct 2021</td> -->
- <!-- <td><a href="articles/00/dwm_config.html">DWM - A window manager configuration</a></td> -->
- <!-- </tr> -->
- <!-- </tbody> -->
- <!-- </table> -->
+ <p>If you want to contact me to make business or just to talk you can head to <a href="/common/about.html">about</a> section where you can read a little bit of my history and get my contact info.</p>
- <ul id=recent_articles>
- <div id="recent_articls_items">
- <!-- <li>01 Sep 2021 -- <a href="articles/01/vim_config.html">What is LaTeX?</a></li> -->
- <!-- <li>31 Oct 2021 -- <a href="articles/01/vim_config.html">About Object-Oriented Programming</a></li> -->
- <!-- <li>30 Oct 2021 -- <a href="articles/01/vim_config.html">How to install GCam on an android phone</a></li> -->
- <!-- <li>29 Oct 2021 -- <a href="articles/01/vim_config.html">What is linux?</a></li> -->
- <!-- <li>28 Oct 2021 -- <a href="articles/01/vim_config.html">Astrophotography with a phone</a></li> -->
- <!-- <li>27 Oct 2021 -- <a href="articles/01/vim_config.html">Making linux boot faster</a></li> -->
- <!-- <li>26 Oct 2021 -- <a href="articles/01/vim_config.html">What is initramfs?</a></li> -->
- <!-- <li>25 Oct 2021 -- <a href="articles/01/vim_config.html">How does Linux boot?</a></li> -->
- <!-- <li>24 Oct 2021 -- <a href="articles/01/vim_config.html">How I configured Vim/Nvim editor</a></li> -->
- <li>18 Sep 2022 -- <a href="/blog/sav/sav.html">SAV - Sorting Algorithms Visualized</a></li>
- <li>04 Mar 2022 -- <a href="/blog/01/vim_config.html">Vim introduction and basic configuration</a></li>
- <!-- <li>02 Dec 2021 -- <a href="articles/02/templeos.html">Minimal TempleOS configuration</a></li> -->
- <li>23 Oct 2021 -- <a href="/blog/00/dwm_config.html">DWM - A window manager configuration</a></li>
+ <div style="display: flex; align-items: center;">
+ <h3 style="text-align: left; font-size: 1.25em;"><u>Latest uploads</u></h3>
+ <div style="margin-top: 5px; margin-left: .5em">
+ <a href="/rss.xml" id="rss"><img style="width: 1.5em;" src="/common/logos/rss_logo.png" alt="rss logo"></a>
</div>
+ </div>
+
+ <ul id=blog_entries>
+ <!--#include virtual="/latest_uploads.shtml" -->
</ul>
+ <p>See more <a href="/blog">blog entries</a></p>
</article>
<!--#include virtual="/common/footer.shtml" -->
diff --git a/index_old.html b/index_old.html
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <head>
- <title>KLÖCKNER</title>
- <link rel='stylesheet' type='text/css' href="css/style.css">
- <!-- <link rel="icon" type="image/x-icon" href="favicon.ico"> -->
- <meta charset="utf-8"/>
- </head>
-
- <body id=top>
- <header>
- <h1 id="header_text">
- <a href="/index.html" id="header_link">Martin's webpage</a>
- </h1>
- <div class="header_buttons">
- <a href="/index.html" style="text-decoration: none;">home</a>
- <a href="/common/articles.html" style="text-decoration: none;">articles</a>
- <a href="/common/library.html" style="text-decoration: none;">library</a>
- <a href="/common/downloads.html" style="text-decoration: none;">downloads</a>
- <a href="/common/about.html" style="text-decoration: none;">about</a>
- </div>
- </header>
-
- <article>
- <h2 style="color:#DAA520; text-shadow: 5px 5px 5px black;">Welcome, to martin's site!</h2>
-
- <p>If you want to contact me to make business or just to talk you can head to <a href="/common/about.html">about</a> section where you can read a little bit of my history and get my contact info.</p>
-
- <h3 style="text-align: left;"><u>Recent articles</u></h3>
-
- </article>
-
- <footer>
- <b>This webpage has been written by Martin J. Klöckner following YouTube tutorials.</b>
- </footer>
- </body>
-</html>
diff --git a/js/article-date.js b/js/article-date.js
@@ -0,0 +1,15 @@
+// https://stackoverflow.com/questions/3552461/how-do-i-format-a-date-in-javascript
+function join(t, a, s) {
+ function format(m) {
+ let f = new Intl.DateTimeFormat('en', m);
+ return f.format(t);
+ }
+ return a.map(format).join(s);
+}
+
+var dt = new Date(document.lastModified);
+
+let format = [{day: 'numeric'}, {month: 'short'}, {year: 'numeric'}];
+let dts = join(dt, format, '-');
+
+document.querySelector('.article-date').innerHTML += " (last updated " + dts + ")";
diff --git a/latest_uploads.shtml b/latest_uploads.shtml
@@ -0,0 +1,4 @@
+<li><time>23-Sep-2022</time> <a href="/blog/nerdearla-2022/nerdearla-2022.html">I'm going to Nerdearla 2022</a></li>
+<li><time>18-Sep-2022</time> <a href="/blog/sav/sav.html">SAV - Sorting Algorithms Visualized</a></li>
+<li><time>23-Oct-2021</time> <a href="/blog/dwm-config/dwm-config.html">dwm - A tiling window manager configuration</a></li>
+<li><time>04-Mar-2021</time> <a href="/blog/vim-config/vim-config.html">vim - The keyboard driven text editor</a></li>
diff --git a/media/pepe.ico b/media/pepe.ico
Binary files differ.
diff --git a/media/pepe.png b/media/pepe.png
Binary files differ.
diff --git a/resources/snippet.html b/resources/snippet.html
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <head>
- <title>Martin's webpage</title>
- <link rel='stylesheet' type='text/css' href="css/style.css">
- <link rel="icon" href="/favicon.ico">
- <meta charset="utf-8"/>
- </head>
-
- <body>
- <!--#include virtual="common/header.shtml" -->
-
- <article>
-
- </article>
-
- <!--#include virtual="common/footer.shtml" -->
- </body>
-</html>
diff --git a/downloads/resume.pdf b/resume.pdf
Binary files differ.
diff --git a/rss.xml b/rss.xml
@@ -0,0 +1,260 @@
+<rss version="2.0">
+ <channel>
+ <title>Martin Klöckner's webpage</title>
+ <link>https://kloeckner.com.ar</link>
+ <description>Latest uploads on Martin Klöckner's Webpage</description>
+ <generator>Shell script</generator>
+ <language>en-us</language>
+<lastBuildDate>Fri Sep 23 11:33:00 PM -03 2022</lastBuildDate>
+<item>
+<title>I'm going to Nerdearla 2022</title>
+<link>https://kloeckner.com.ar/blog/nerdearla-2022/nerdearla-2022.html</link>
+<description>
+ <htmlData>
+ <![CDATA[<html><h1>I'm going to Nerdearla 2022 </h1>
+<p>23-Sep-2022</p>
+<p>As the title says I'm going to be present at
+<a href="https://nerdear.la/">Nerdearla</a>.</p>
+<p>This will be my second time that I attend to this event since I've been
+there for the first time in 2019. I remember that <a href="https://en.wikipedia.org/wiki/Jon_Hall_(programmer)">John 'Maddog'
+Hall</a> was making a
+presentation called "50 years of UNIX and the landing on the Moon", you
+can find a record of the presentation
+<a href="https://www.youtube.com/watch?v=9O_FnKZI6_M">here</a>, It was my first
+talk ever and I loved it.</p>
+<p><img src="nerdearla-2019.jpeg" alt="" title="Nerdearla 2020"></p></html>]]>
+ </htmlData>
+ </description>
+<pubDate>23-Sep-2022</pubDate>
+</item>
+
+<item>
+<title>SAV - Sorting Algorithms Visualized</title>
+<link>https://kloeckner.com.ar/blog/sav/sav.html</link>
+<description>
+ <htmlData>
+ <![CDATA[<html><h1>SAV - Sorting Algorithms Visualized </h1>
+<p>18-Sep-2022</p>
+<p>This is a desktop app that shows how an array is being sorted using
+different sorting algorithms.</p>
+<p>:::
+<a href="sav.gif"><img src="sav.gif" alt="" title="Gif showing SAV working"></a>
+:::</p>
+<p>I made it using pure C and SDL2 for graphics, you can take a look at
+it's source code on <a href="https://github.com/mjkloeckner/sav">Github</a>.</p>
+<p>The main purpose of this app was to put in practice the knowledge I
+gained in C as well with algorithms, and it was like a challenge since
+I'd never used SDL2 graphics before. In the end was a very enjoyable
+project since SDL2 per se is a very simple and easy to use library.</p>
+<p>Currently it supports the following algorithms:</p>
+<ul>
+<li>bubble sort improved</li>
+<li>insertion sort</li>
+<li>merge sort wrapper</li>
+<li>quick sort wrapper</li>
+<li>shell sort</li>
+<li>selection sort</li>
+<li>heap sort</li>
+</ul></html>]]>
+ </htmlData>
+ </description>
+<pubDate>18-Sep-2022</pubDate>
+</item>
+
+<item>
+<title>dwm - A tiling window manager configuration</title>
+<link>https://kloeckner.com.ar/blog/dwm-config/dwm-config.html</link>
+<description>
+ <htmlData>
+ <![CDATA[<html><h1>dwm - A tiling window manager configuration </h1>
+<p>23-Oct-2021</p>
+<p>A window manager is a software that can manage the layout and appearance
+of every window spawned in your desktop, most people confuse them with
+desktop enviroments, which isn't the same since a desktop enviroment is
+more of an ecosystem, they come with a more 'complete' set of tools,
+like a basic web browser, a terminal emulator or calculator, an example
+of desktop enviroment would be gnome, xfce or kde plasma; instead a
+window manager is only the program that manages the windows spawned,
+although there are window managers that come with a little more, like
+docks or taskbars (openbox for example).</p>
+<p>In my case I use dwm, which is a window manager written in C developed
+by suckless software. The most relevant thing of this window manager is
+that out of the box it comes with the most basic functionallity, and if
+you want to extend it you need to patch it.</p>
+<p>By default dwm comes with 9 workspaces, in which you can open as many
+windows as you please; to spawn a new window for example a web browser
+you need to assign it a keybinding or use an application launcher like
+<a href="https://tools.suckless.org/dmenu/">dmenu</a></p>
+<p>:::
+<a href="/blog/dwm-config/screenshot.png"><img src="screenshot.jpeg" alt="Screenshot" title="Screenshot of my dwm build">{.screenshot
+style="padding: 0em; width: 100%;"
+max-width="40em"}</a>
+:::</p>
+<h2>Installing dwm</h2>
+<h3>Requisites</h3>
+<ul>
+<li>GNU/Linux or BSD based operating system</li>
+<li>A C library and a C compiler</li>
+<li>make utility installed</li>
+<li>X server installed</li>
+<li>dwm source code, you can clone the repository or download as a tar
+file at the web</li>
+</ul>
+<p>As you can see above you can only install dwm on GNU/Linux or BSD based
+distros, unfortunally dwm is not available for Windows users but I'm
+sure there is an alternative.</p>
+<h3>Installation</h3>
+<p>In order to install dwm you can visit the web of the creators at
+<a href="https://dwm.suckless.org/">suckless.org/dwm</a>, where you can download
+the source code as a tar file, or clone the repository.</p>
+<p>After you obtain the source code you need to navigate to the root folder
+of the source code and execute the following command</p>
+<pre>$ sudo make install
+</pre>
+<p>after that you can log out of you user account, if you use a display
+manager you can select dwm as window manager and log back in, if you
+dont use a display manager you need to edit your .xinitrc file located
+at you home folder so that when you start X dwm gets launched too, you
+do this by adding `exec dwm` to [the end] of the .xinitrc
+file, its important that you add it to the end of the file.</p>
+<pre>$ cat $HOME/.xinitrc
+...
+exec dwm
+</pre>
+<p>Then you can start the X server by executing `startx` on a tty and it
+should open dwm without any problems.</p>
+<h2>How do you configure dwm?</h2>
+<p>Basically you configure it by editing its source code, inside the root
+folder of the project there is a C header file named
+<a href="https://github.com/klewer-martin/dotfiles/blob/master/.config/dwm/config.def.h">config.def.h</a>
+which if you open with a text editor you can see that there is some C
+code that you can edit, for example the line "static const int topbar"
+defines a variable named topbar which you can set to 1 or 0, to select
+if the status bar should spawn in the top or the bottom of the screen.
+After every change you make to the source code you need to copy
+config.def.h to config.h and then [recompile dwm]</p>
+<h3>Show information on the status bar</h3>
+<p>dwm by default won't show any information on the status bar, this is
+done by using the xsetroot utility, which sets the WM_NAME enviroment
+variable that dwm uses, lets assume you want to set the clock and date
+on the status bar, well you could execute the following command</p>
+<pre>$ xsetroot -iname $(date)
+</pre>
+<p>and all the output of 'date' would be printed on the status bar, this
+makes dwm status bar highly scriptable, in fact the are a ton of status
+bar implementation, the one that I use is called
+<a href="https://github.com/torrinfail/dwmblocks">dwmblocks</a> and its also
+written in C and the configuration its pretty much the same as dwm, in
+order to get information you need to have scripts that prints the
+desired data to stdout, then you can include it on the config.h of
+dwmblocks by having them on a folder which is included in the $PATH
+variable of your user.</p>
+<h3>Getting emoji support on dwm</h3>
+<p>dwm by default doesn't come with emoji support, if you want to render
+an emoji in the status bar its going to either show it as a box or in
+the worst case crash, so in order to get emoji support first you need to
+get a font with [emojis], I'm using <a href="https://www.joypixels.com/">JoyPixels®
+font</a> you can also use
+<a href="https://fonts.google.com/noto">Google's noto font</a>, or any other font
+that comes with emoji support. Then open dwm configuration file and
+append to the [fonts] array the name of the font you want,
+in my case it's JoyPixels®.</p>
+<pre>$ cat config.def.h
+...
+static const char *fonts[] = ;
+...
+</pre>
+<p>After you setup the font you need to remove or comment a chunk of code
+from drw.c, a file located in the root of the folder where dwm source
+code resides, between lines 136-150 there is a function named IsCol, you
+need to remove it or comment it.</p>
+<p>Finally you can recompile dwm and you will get emoji support. Sometimes
+even though you made all this procedure you still get boxes insted of
+the proper emoji, I solved this by adding another font name in the
+[fonts] array, like a fallback font.</p>
+<h3>[Patches in dwm]</h3>
+<p>Since dwm is a simple program than doesn't include much features, if
+you want to extend it, for example by adding a
+<a href="https://dwm.suckless.org/patches/systray/">systray</a> to the status bar,
+you need to patch dwm. To do this first you need to download the patch
+from <a href="https://dwm.suckless.org/patches/">suckless.org/patches</a>, then
+make sure you got it 'patch' installed, although I think it comes with
+most linux distributions by default nowdays.</p>
+<pre>$ patch -p1 < <name of the file>
+</pre>
+<p>If you never patched dwm before then probably no errors would be
+reportjd, but if you already have applied a ton of patches then probably
+you would get a HUNK ## FAILED, in this case you need to get your hands
+dirty, and manually patch all the files that failed, you do this by
+opening the files with .rej extension (short for rejected), and the
+corresponding file to be patched, for example dwm.c and dwm.c.rej, and
+then you add all the chunks of code from the rejected file into the
+corresponding place in the non rejected file, you know where you should
+put the chunks of code because in the rej file you can see at the start
+of every chunk there is a '@@' followed by a number of line; also
+lines starting with plus means add, and minus means delete, if i'm not
+clear you should google how to use diff and patch to modify a file.</p>
+<h2>Useful links</h2>
+<ul>
+<li><a href="https://en.wikipedia.org/wiki/Window_manager">What is a window
+manager?</a></li>
+<li>Make sure to check the <a href="https://suckless.org/">suckless webiste</a></li>
+<li><a href="https://dwm.suckless.org/">suckless dwm website</a></li>
+<li><a href="https://www.x.org/releases/X11R7.7/doc/man/man1/Xserver.1.xhtml">X server man
+page</a></li>
+<li><a href="https://man7.org/linux/man-pages/man1/patch.1.html">patch man
+page</a></li>
+</ul></html>]]>
+ </htmlData>
+ </description>
+<pubDate>23-Oct-2021</pubDate>
+</item>
+
+<item>
+<title>vim - The keyboard driven text editor</title>
+<link>https://kloeckner.com.ar/blog/vim-config/vim-config.html</link>
+<description>
+ <htmlData>
+ <![CDATA[<html><p>:::
+:::
+<img src="/blog/vim-config/vim_logo.png" alt="Vim logo" title="Vim logo">
+:::</p>
+<h1>The keyboard driven text editor </h1>
+<p>:::</p>
+<p>04-Mar-2021</p>
+<p>If we think for a moment about software we are going to realize that the
+core of every program it's just plain text, literally just words in a
+file that someone wrote, this webpage it's just text interpreted by
+your web-browser, whose also just plain text implemented by another
+program, some software has more complexity than others, for example the
+linux kernel it's estimated that has around 27.8 million lines of code,
+which is also just plain text</p>
+<p>The way we tell computers what to do it's with text, so in order to
+write that text we just need a text editor and this is were Vim it's
+known for. Vim it's just a text editor. The term Vim stands for Vi
+IMproved, Vim it's a rewrite and improved version of Vi, a text editor
+that dates from 1978.</p>
+<p>In this article I want to show how this text editor became my best
+frient (?), I learned to love about Vim keybindings and now I even have
+and extension on my browser to use vim like keybindings.</p>
+<p>Vim is a console text editor (altough you can find distributions like
+gvim, which comes with a gui), a benefit of this its that It's very
+lightweign in terms of system resources. Vim it's also highly
+configurable, you can do this by editing the [.vimrc] text
+file, which should be in you home directory in Linux or BSD bases OSs,
+if not you can [create] a new blank one and start from zero</p>
+<p>If you installed Vim and you don't know how to move around or insert
+text, first you need to understand the basics, Vim has 3 main "modes"</p>
+<p>By default Vim comes with a lot of features disabled, for example a key
+binding to comment a line or auto close brackets, parenthesis, etc, this
+features you can enable them by installing [plugins] which I
+will cover leter.</p>
+<p>\</p></html>]]>
+ </htmlData>
+ </description>
+<pubDate>04-Mar-2021</pubDate>
+</item>
+
+
+</channel>
+</rss>
diff --git a/rss_feed_top.xml b/rss_feed_top.xml
@@ -0,0 +1,7 @@
+<rss version="2.0">
+ <channel>
+ <title>Martin Klöckner's webpage</title>
+ <link>https://kloeckner.com.ar</link>
+ <description>Latest uploads on Martin Klöckner's Webpage</description>
+ <generator>Shell script</generator>
+ <language>en-us</language>
diff --git a/sort_blog_index.py b/sort_blog_index.py
@@ -0,0 +1,42 @@
+#!/usr/bin/env python3
+
+# usage:
+# ./sort_blog_index.py <root_folder>
+
+import os
+import re
+import time
+import datetime
+import sys
+
+if len(sys.argv) == 1:
+ print("No PATH provided, assuming current folder")
+ root_folder = os.path.abspath(os.getcwd())
+ print(root_folder)
+else:
+ root_folder = sys.argv[1]
+
+# root_folder = "/home/mk/soydev/webp/tmp/html/blog/"
+date_delimiter = "-"
+regex = re.compile('(?<=<meta name="article-date" content=")(.*?)(?=")')
+
+# <meta name="article-date" content="23-Oct-2021">
+def get_content(file_name):
+ with open(file_name) as f:
+ for line in f:
+ result = regex.search(line)
+ if result is not None:
+ return time.mktime(datetime.datetime.strptime(result.group(0), "%d-%b-%Y").timetuple())
+
+# list file and directories
+folders = os.listdir(root_folder)
+suffix = '.html'
+
+paths = []
+for folder in folders:
+ paths.append(os.path.join(root_folder, folder + "/" + folder + suffix))
+
+paths = sorted(paths, key=get_content, reverse=True)
+
+for path in paths:
+ print(path)
