commit 314d4c2b3260582ebdac346a4a75355ec621ea59 parent 317b030b7077d9026429d90112d0876e668da890 Author: Martin Kloeckner <mjkloeckner@gmail.com> Date: Sat, 2 Nov 2024 20:46:35 -0300 add folder `blog` Diffstat:
33 files changed, 660 insertions(+), 0 deletions(-) diff --git a/blog/bought-a-thinkpad/bought-a-thinkpad.md b/blog/bought-a-thinkpad/bought-a-thinkpad.md @@ -0,0 +1,144 @@ +%% +title: "I bought a ThinkPad x200 for $27" +date: "26-Oct-2022" +%% + +# I bought a ThinkPad x200 for $27 + +A few weeks ago I was scrolling through Facebook marketplace when I saw what It +looked like a ThinkPad published for exactly ARS$ 8000 (around USD $27). When I +enter the publication it was effectively a ThinkPad, precisely an x200, but it +was very dirty, this was the picture attached to the publication: [](owner-pic.png "Thinkpad picture of +the publication") The owner stated that the machine was working but it had no +charger, that was a little bit suspicious ngl but, for the price, I couldn't be +picky, I was looking for a cheap old ThinkPad like this for a while and this was +the perfect opportunity. + +So I contacted the owner, and we agree to meet the next day so I could pick it +up. Fortunately the owner was about 30 minutes in public transport from my place +so this was also a plus point for the publication. + +When the owner give it to me obviously it was very dirty but also I felt like +something inside was a little bit loose; the transaction was very quick, in a +corner of a known intersection so, I didn't look at it very carefully. + +When I arrived home and I started to look at it with more caution, the first +thing that I noticed was that the loose part was the battery, so I didn't care +much, but, before opening the lid I noticed that the lenovo branding was missing +on the left bottom of the lid, at that moment I panicked a little because the +day before going to pick up the x200 I saw a +[post](https://www.reddit.com/r/thinkpad/comments/wmb4gl/wanna_know_something_cool_back_in_2008_a_chinese/) +which stated that cheap chinese clones of this machines where made, this cheap +clones cammed with an atom processor (trash compared to x200's processor) and +they where smaller in size, and since they were clones no lenovo brand were +present. + +This a picture of the cheap clone, it looks identical but without the lenovo +brand anywhere. + +[](x200_clone.png "x200 chinese clone") + +I started to look carefully at the machine again, and noticed that there was a +"Lenovo enhanced experience" sticker on the bottom, so it couldn't be a copy, +after searching for Intel Centrino on internet I found that it wasn't a +processor but a network card, which the genuine x200 came with, so it actually +was a *genuine ThinkPad*, in fact the cheap clones where more rare than the +x200 itself. + +Since I hadn't the charger, I couldn't test if it worked, so I started to deep +clean it, at least all the exterior dirt, and the keyboard, which was +disgusting. + +[](cleaning-kb.png +"Cleaning thinkpad dirty keyboard") + +A couple of days later I picked up a used charger from a T430 (90w), and the +TrackPoint cap which was also missing. When I connected the x200 to the grid the +outer lid leds lit up, meaning the ThinkPad was receiving power and the battery +was charging (or at least trying) so I tried to turn it on, and for my surprise +the computer booted to the BIOS *without a problem*. + +## Updating the BIOS +After I plugged the computer in and it booted into the bios, I checked for the +bios version and it was `3.11`. A quick check on lenovo's x200 webpage revealed +that there were BIOS updates up until version `3.16`. [](old-bios-version.png "Old bios version") I +searched on Google on how to update the bios but I couldn't find a way without +using Windows, there was [one way using +Linux](https://www.thinkwiki.org/wiki/BIOS_update_without_optical_disk) but +honestly in comparison with the Windows way was much more complicated. The most +simple way for me was installing Windows, since Lenovo provides a Windows only +BIOS updater tool. So I quickly installed Windows 7 on an 240GB Kingston SSD +which I had lying around and updated the BIOS, it was as simple as running the +BIOS updater tool, clicking update and done. + +## Installing an Operating System +After adding the SSD, installing Windows 7 and updating the BIOS, I was decided +to install Linux, I wanted to try Void or Artix (w/ Runit), I had a previous +machine with Artix ([yt video showing how fast it +booted](https://www.youtube.com/watch?v=dBdNQdocrVc)) for almost a year and it +worked pretty well, I even gamed CS GO on it. So I made a Void Linux bootable +drive following the [Void Linux +docs](https://docs.voidlinux.org/installation/live-images/prep.html), but, when +I tried to boot into it, nothing. The BIOS wouldn't recognized the USB drive, I +also tried making a bootable USB with +[balenaEtcher](https://www.balena.io/etcher/) but again, nothing. The weird +thing was that if I made an arch Linux bootable USB using the previous both +methods the BIOS would boot instantly. Because it was late, I ended up +installing arch Linux. During the installation I noticed that the BIOS was not +UEFI compatible, and that was the cause of all the trouble. After I finished the +installation and configuration of arch Linux, I searched for a tool that would +allow me to make legacy BIOS compatible boot mediums, I stumbled with +[WoeUSB](https://github.com/WoeUSB), I made a Void Linux bootable USB drive with +that tool and it booted instantly, so maybe in a future I will install Void +Linux like I intended in the first place. + +Anyway do you like my arch Linux rice? [](rice.png "x200 arch linux rice") I'm using Suckless's +[dwm](https://dwm.suckless.org/) and [st terminal](https://st.suckless.org/), +Firefox for the web browser and dolphin for the graphical file manager. You can +check out my [dotfiles](https://github.com/mjkloeckner/dotfiles) on GitHub, +although I didn't update them yet, but maybe at the time when you are reading +this I already did. + +## Using an x200 in 2022 +The computer works perfectly, the only thing missing is OpenGL version 3.X +support, because the integrated graphics card is old the last version supported +is 2.1, so I couldn't make kitty nor Alacritty terminals work. I ended up +installing Suckless's simple terminal (st), and it works like a charm, and it's +very lightweight too. + +The Core 2 Duo although it has almost 15 years, it is still very usable for +surfing the web and writing code, and general daily lightweight task. I'm +planning to take the x200 to the University to write notes and check PDFs in the +library, since the x200 only weight at around 1.6kg with the 90w charger, its +more lightweight than my 2.0kg dell, it is also very small in dimension, the +x200 is like a [netbook](https://en.wikipedia.org/wiki/Netbook) with steroids. +The most impressive thing is how usable it is with only 2GB of RAM, when I saw +in the BIOS that it only had 2GB I thought that it would be unusable to be +honest, but no, by using dwm the idle ram usage is 200MB approx. and with a +couple of tabs opened in Firefox and some terminals the RAM usage sits at around +1.3GB, of course I set up a swap partition during the installation and when I +open more tabs in Firefox Htop reports some swap usage, so the swap partition +helps. + +This is the x200 compiling [translate +shell](https://github.com/soimort/translate-shell) from source. [](compiling.png "Compiling translate shell") + +Another picture of the x200, recording +[MIDI](https://en.wikipedia.org/wiki/MIDI?wprov=sfla1) using +[qtractor](https://qtractor.org/). I've also used the x200 for live MIDI +processing, and it worked without a problem. [](recording-midi.png "Recording midi on the x200") + +## Things to do next +There is a ton of things that I want to try with this computer, like Libreboot, +swapping motherboards, running Void Linux, etc. But first I would like to +disassemble it entirely to remove all the dust from the motherboard and replace +the thermal paste. Also buy a 9-cell battery. The one that came with the +computer only lasted around 10 minutes the first charge, after calibration I +made it last an hour and a half. I saw a used 9-cell genuine lenovo near my +place on MercadoLibre for the same price that I bought the x200 lol (around USD +$27). So stay tuned to the blog post to read all the updates on the x200. diff --git a/blog/bought-a-thinkpad/cleaning-kb.jpeg b/blog/bought-a-thinkpad/cleaning-kb.jpeg Binary files differ. diff --git a/blog/bought-a-thinkpad/cleaning-kb.png b/blog/bought-a-thinkpad/cleaning-kb.png Binary files differ. diff --git a/blog/bought-a-thinkpad/compiling.jpeg b/blog/bought-a-thinkpad/compiling.jpeg Binary files differ. diff --git a/blog/bought-a-thinkpad/compiling.png b/blog/bought-a-thinkpad/compiling.png Binary files differ. diff --git a/blog/bought-a-thinkpad/old-bios-version.jpeg b/blog/bought-a-thinkpad/old-bios-version.jpeg Binary files differ. diff --git a/blog/bought-a-thinkpad/old-bios-version.png b/blog/bought-a-thinkpad/old-bios-version.png Binary files differ. diff --git a/blog/bought-a-thinkpad/owner-pic.jpeg b/blog/bought-a-thinkpad/owner-pic.jpeg Binary files differ. diff --git a/blog/bought-a-thinkpad/owner-pic.png b/blog/bought-a-thinkpad/owner-pic.png Binary files differ. diff --git a/blog/bought-a-thinkpad/recording-midi.jpeg b/blog/bought-a-thinkpad/recording-midi.jpeg Binary files differ. diff --git a/blog/bought-a-thinkpad/recording-midi.png b/blog/bought-a-thinkpad/recording-midi.png Binary files differ. diff --git a/blog/bought-a-thinkpad/rice.jpeg b/blog/bought-a-thinkpad/rice.jpeg Binary files differ. diff --git a/blog/bought-a-thinkpad/rice.png b/blog/bought-a-thinkpad/rice.png Binary files differ. diff --git a/blog/bought-a-thinkpad/x200_clone.jpeg b/blog/bought-a-thinkpad/x200_clone.jpeg Binary files differ. diff --git a/blog/bought-a-thinkpad/x200_clone.png b/blog/bought-a-thinkpad/x200_clone.png Binary files differ. diff --git a/blog/dwm-config/debugging.jpeg b/blog/dwm-config/debugging.jpeg Binary files differ. diff --git a/blog/dwm-config/debugging.png b/blog/dwm-config/debugging.png Binary files differ. diff --git a/blog/dwm-config/dwm-config.md b/blog/dwm-config/dwm-config.md @@ -0,0 +1,239 @@ +%% +title: "dwm: The dynamic window manager" +date: "23-Oct-2021" +%% + +# dwm: The dynamic window manager + +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 aren't the same since a desktop enviroment is +more like an ecosystem, they come with a more 'complete' set of tools, +like a basic web browser, a terminal emulator or a graphical 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). + +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 (I explain patching later). + +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 +[dmenu](https://tools.suckless.org/dmenu/) + +[](screenshot.png "Screenshot of my dwm build") + +## Installing dwm + +### Requisites + +- GNU/Linux or BSD based operating system +- A C library and a C compiler +- make utility installed +- X server installed +- dwm source code + +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 and I'm not +sure if there is an alternative. + +### Steps + +In order to install dwm download the source code from [suckless.org/dwm](https://dwm.suckless.org/), +you can clone the repo from [git.suckless.org/dwm](https://git.suckless.org/dwm) or +download it as a tar file. + +After you obtain the source code navigate to the root folder +of the source code and execute the following command + +```console +$ sudo make install +``` + +after that you can log out of you user account, if you use a display +manager, select dwm as window manager on it and log back in, if you +don't use a display manager, you need to edit your .xinitrc file located +at your home folder, so that when you start Xorg dwm gets launched, 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. + +```console +exec dwm +``` + +Then you can start the X server by executing `startx` on a tty and +dwm should start without any problems. + +This is what vanilla dwm looks like: + +[](vanilla.png "Vanilla dwm") + +## Customizing dwm + +### Setting a wallpaper + +Before getting into dwm configuration, let's add a wallpaper to make things look +a little bit nicer. You can set a wallpaper from different ways, the simpler for +me is installing feh and the executing the following command + +```console +$ feh --bg-fill <image> +``` + +you can also avoid setting --bg-fill and chossing other feh options to set the wallpaper +(read man feh). + +Then add `.fehbg &` to your .xinitrc so the wallpaper gets loaded when Xorg starts, it is important +that you add it before dwm gets executed, otherwise it will never be ran + +```console +$HOME/.fehbg & + +exec dwm +``` + +A graphical way of setting a wallpaper is with nitrogen, just install nitrogen open it +with dmenu (MOD+p by default), include the folder where you have your wallpaper, select the +image you want and the apply. To make changes persistent on every startup +add this to you .xinirc file + +```console +nitrogen --restore + +exec dwm +``` +### dwm configuration + +Basically you configure dwm by editing its source code, there is a C header file, named +[config.h](https://github.com/mjkoeckner/dotfiles/blob/master/.config/dwm/config.def.h) +in the root folder of dwm, if you open it with a text editor you can see a +lot of variables, for example the line `static const int topbar = 0` +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 bottom of the screen respectively. +You can also change the MOD key (by default its left alt), I like to remap +mine to left Super (windows key). + +After every change you make to the source code you need to *recompile dwm*. + + +#### Show information on the status bar + +dwm by default won't show any information on the status bar, this is +done by using the xsetroot utility, which sets the value of WM\_NAME enviroment +variable, the content of this variable is automatically displayed by dwm on the +right side of the statusbar. Lets assume you want to set the clock and date +on the status bar, well you could accomplish this by executing the following command + +```console +$ xsetroot -iname $(date) +``` + +and all the output of the command `date` would be stored on the WM\_NAME variable +causing dwm to print the date on the statusbar, this +makes dwm status bar highly scriptable, in fact there are a ton of status +bar implementations, the one that I use is called +[dwmblocks](https://github.com/torrinfail/dwmblocks) 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 them on the config.h of +dwmblocks. It is important that the scripts are on your user's PATH, otherwise +it won't work. + +#### Getting emoji support on dwm + +dwm by default doesn't come with emoji support, if you want to render +an emoji in the status bar, it's going to either show it as a box or in +the worst case crash. + +In order to get emoji support first make sure you have installed `libxft`, +then you need to get a font with emoji support, I'm using [JoyPixels® font](https://www.joypixels.com/) +you can also use [Google's noto font](https://fonts.google.com/noto), +or any other font that comes with emoji support, then open dwm `config.def.h` and +append to the fonts array the name of the font you want to use as fallback for the first font, +since the emojis are not being printed because the font used doesn't include emojis, my +config looks like this: + +```c +static const char *fonts[] = { "Source Code Pro:style=Regular:size=9", + "JoyPixels:style=Regular:size=8", + "DejaVu Sans" }; +``` + +I've also added `DejaVu Sans` to the fonts array because, sometimes, the emojis where being displayed +with a little box or square next to them, this was a quick solution. + +After you setup the font you need to remove or comment a chunk of code +from drw.c, between lines 136-150 there is a function named `iscol`, you +need to remove it or comment it, since this causes dwm to crash. + +```c +/* Do not allow using color fonts. This is a workaround for a BadLength + * error from Xft with color glyphs. Modelled on the Xterm workaround. See + * https://bugzilla.redhat.com/show_bug.cgi?id=1498269 + * https://lists.suckless.org/dev/1701/30932.html + * https://bugs.debian.org/cgi-bin/bugreport.cgi?bug=916349 + * and lots more all over the internet. + */ +FcBool iscol; +if(FcPatternGetBool(xfont->pattern, FC_COLOR, 0, &iscol) == FcResultMatch && iscol) { + XftFontClose(drw->dpy, xfont); + return NULL; +} +``` + +Finally you can recompile dwm and, if everything went fine, you will get emoji support. + +#### Patching dwm + +Since dwm is a simple program than doesn't include much features, if +you want to extend it, for example by adding a +[systray](https://dwm.suckless.org/patches/systray/) to the status bar, +you need to patch dwm. To do this first you need to download the patch +from [suckless.org/patches](https://dwm.suckless.org/patches/), then +make sure you got it 'patch' installed, although I think it comes with +most linux distributions by default nowdays. + +To apply a patch navigate to dwm's root folder and execute this command + +```console +$ patch -p1 < <file.diff> +``` + +being `file.diff` the patch file downloaded previoulsy of course. + +If you never patched dwm before then probably no errors would be +reported, but if you already have applied a ton of patches, (or sometimes just a couple) +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. + +## More screenshots + +#### Debugging [6502 emulator](https://github.com/mjkloeckner/6502) with dwm, vim and tmux + +[](debugging.png "Debugging 6502 emulator") + + + +#### Floating window manager? + +[](floating.png "Floating show while raining") + +## Useful links + +- [What is a window manager?](https://en.wikipedia.org/wiki/Window_manager) +- Make sure to check the [suckless webiste](https://suckless.org/) +- [suckless dwm website](https://dwm.suckless.org/) +- [X server man page](https://www.x.org/releases/X11R7.7/doc/man/man1/Xserver.1.xhtml) +- [patch man page](https://man7.org/linux/man-pages/man1/patch.1.html) diff --git a/blog/dwm-config/floating.jpeg b/blog/dwm-config/floating.jpeg Binary files differ. diff --git a/blog/dwm-config/floating.png b/blog/dwm-config/floating.png Binary files differ. 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/dwm-config/vanilla.jpeg b/blog/dwm-config/vanilla.jpeg Binary files differ. diff --git a/blog/dwm-config/vanilla.png b/blog/dwm-config/vanilla.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-2019.png b/blog/nerdearla-2022/nerdearla-2019.png Binary files differ. diff --git a/blog/nerdearla-2022/nerdearla-2022.md b/blog/nerdearla-2022/nerdearla-2022.md @@ -0,0 +1,26 @@ +%% +title: "I'm going to Nerdearla 2022" +date: "23-Sep-2022" +%% + +# I'm going to Nerdearla 2022 + +As the title says I'm going to be present at [Nerdearla](https://nerdear.la/). + +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 [John 'Maddog' +Hall](https://en.wikipedia.org/wiki/Jon_Hall_(programmer)) was making a +presentation called "50 years of UNIX and the landing on the Moon", and it was +very enjoyable, you can find a record of the presentation +[here](https://www.youtube.com/watch?v=9O_FnKZI6_M). + +[](nerdearla-2019.png "Nerdearla 2019") + +That time was my first talk ever, and I loved it, sadly, because of the +pandemic, the event could only be remote the past two years. + +This time the event is hibrid, meaning half remote half presential, as always +the entrance is free, you can get your free tickets at +[registro.nerdear.la](https://registro.nerdear.la/). The presential part takes +place at Centro cultural Konex at Once, Buenos Aires, on Oct 19 to Oct 22 of +2022. diff --git a/blog/sav/sav.gif b/blog/sav/sav.gif Binary files differ. diff --git a/blog/sav/sav.md b/blog/sav/sav.md @@ -0,0 +1,31 @@ +%% +title: "Sorting Algorithms Visualized" +date: "18-Sep-2022" +%% + +# Sorting Algorithms Visualized + +SAV, short for Sorting Algorithms Visualized, is a desktop app that shows how an +array is being sorted using different algorithms. + + + +I made it using pure C and SDL2 for graphics, you can take a look at it's source +code on [Github](https://github.com/mjkloeckner/sav). + +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 have never used +SDL2 graphics before. In the end it was a very enjoyable project since SDL2 per +se is a very simple and easy to use library. + +Currently the following sorting algorithms can be displayed: + +* bubble sort improved +* insertion sort +* merge sort wrapper +* quick sort wrapper +* shell sort +* selection sort +* heap sort + +but in a future I would like to add more algorithms, as well as sound. diff --git a/blog/spending-money-on-thinkpads/spending-money-on-thinkpads.md b/blog/spending-money-on-thinkpads/spending-money-on-thinkpads.md @@ -0,0 +1,47 @@ +%% +title: "Spending money on thinkpads" +date: "14-Oct-2023" +%% + +# Spending money on thinkpads + +This is both a happy and a sad post. + + + +For the last couple of years my country's currency has been facing a big +devaluation, in fact is one of the countries with the most inflation rate per +year in the world at the moment, I'm talking about Argentina. + +Also I bought my first thinkpad back in October 2022, a thinkpad x200 for $27 +which had no charger, and the seller didn't knew if it worked, I bought a +charger for it, then did a full cleanup, installed an SSD, and it has been +working perfectly since then. (I posted an +[article](https://kloeckner.com.ar/blog/bought-a-thinkpad/bought-a-thinkpad.html) +on my blog back then) + +As you can see in the picture the story doesn't ends there, in fact I bought +more thinkpad products after that, since I was impressed by the build quality of +the x200, and also because I noticed that there is an active market for them. + +A while ago I started to ask myself why do I spend money on thinkpads, the main +reason of course is that this computers are so nice to tinker with, as an +Electronics Engineer student I enjoy disassembling this machines to take a look +at the design, and also to restore them into functionality, another reason and +related to the country situation, is that I buy thinkpads because I don't want +the money I had in my pockets to lose value, and I think this is a good +justification, I love thinkpads but I also don't want my money to **devaluate**, +and this is one of the main things the current government want you to do, spend +money, this is what they achieve with printing money like crazy, they destroy +the people saving capabilities, forcing them to spend money in things to prevent +their money to devaluate. + +If we take for example the x200 that I bought first, I paid $8000 Argentine +Pesos for it, which was around US $27 back then, today the $8000 would be +equivalent to US $8, and it only passed a year. + +Of course this story has a happy side too, always has; during the last 12 months +that I been a thinkpad owner I met people that also where into thinkpads, also +people asking me or amazed by the modular design of the thinkpads, and people +who listened to me when I explained to them why thinkpads are better that other +computers haha. diff --git a/blog/spending-money-on-thinkpads/thinkpads.webp b/blog/spending-money-on-thinkpads/thinkpads.webp Binary files differ. diff --git a/blog/testing-syntax-highlight/testing-syntax-highlight.md b/blog/testing-syntax-highlight/testing-syntax-highlight.md @@ -0,0 +1,87 @@ +%% +title: "Testing code syntax highlight" +date: "21-Oct-2022" +%% + +# Testing code syntax highlight + +This is a testing page for a script that I'm using to highlight code blocks +within an html file. + +The script is a heavily modified version of +[markdown-code-highlight-go](https://github.com/zupzup/markdown-code-highlight-go) +that accepts an html file name as command line argument, and prints to stdout +the html content but with all text inside code tags surrounded by css selectors. + +For example, this is some C code: + +```c +#include <stdio.h> + +int main(void) { + char *hw = "Hello, world!\n"; + + printf("%s\n", hw); + return 0; +} +``` + +This is part of the shell script that I use to build the html blog pages +from markdown files + +```console +sed -e "s/\$article-title\\$/$title/" -e "s/\$article-date\\$/$date/" \ + -e "s/\$pagetitle\\$/$pagetitle/" -e '/\$body\$/r./body.html' \ + -e "s/\$lang\\$/$lang/" -e "s/\$generator\\$/$generator/" \ + -e '/\$body\$/d' $template > "$dest_dir"/"$filename".html +``` + +This is an old JavaScript script that I was using to add the last modified date +to a blog post: + +```js +// How do I format a date in javascript? +// stackoverflow.com/questions/3552461 +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 + ")"; +``` +I removed it from the webpage because it was not working properly, the +`document.lastModified` was always returning the current date. In stead, I +added a new part to the shell script that builds the pages, the new content +parses the output of `stat` command and appends it to the article date. + +This code is part of the script that I'm using for highlighting code blocks. +It's written in golang, a language that I didn't knew until I needed to modify +[markdown-code-highlight-go](https://github.com/zupzup/markdown-code-highlight-go) +to make it work on my use case. + +```go +rp := strings.NewReplacer("<code class=\"language-", "", + "\">", "", "</code>", "") + +style := styles.Get("monokai") +if style == nil { + style = styles.Fallback +} + +formatter := formatters.Get("html") +if formatter == nil { + formatter = formatters.Fallback +} +``` + +This part is using the [chroma](https://github.com/alecthomas/chroma) syntax +highlighter, at the moment I couldn't make it work, but I would like to, since +it's much richer in languages support and themes than the previous method. diff --git a/blog/vim-config/vim-config.md b/blog/vim-config/vim-config.md @@ -0,0 +1,86 @@ +%% +title: "vim: The keyboard driven text editor" +date: "04-Mar-2021" +%% + +{.article-icon} + +# The keyboard driven text editor + +If we think for a moment about software we are going to realize that the +core of every program is just plain text, literally, just words in a +file that someone wrote, this webpage is just text interpreted by +your web-browser, whose also just plain text. + +The way we tell computers what to do is with text, so in order to +write that text we need a set of basic tools, one of which is a text editor, +and this is were Vim is known for. + +Vim is just a console text editor, "console" because vim can only be executed +from the commandline (altough you can find distributions like gvim, which has +it's own window), a benefit of this is that, it's very lightweight in terms of +system resources. The term Vim stands for Vi IMproved, Vim is a rewrite and +improved version of Vi, a console text editor that dates from 1978, it's very +similar to vim but with less features. + +If you installed Vim and you don't know how to move around or insert text, I'm +only going to tell two things, first, how to exit, press esc a couple of times +and also Ctrl+C, just to make sure that you are on normal mode, then type +\`:wq!\` and press enter. I'm also going to tell you how to run vim tutor, just +execute \`vimtutor\` from the commandline. Vim tutor is a very good tutorial +included with vim, it teaches you how to use vim in an interactive way. + +## Vim configuration + +Vim is also highly configurable, you can do configure vim by editing the +*.vimrc* text file, which should be in you home directory in Linux or BSD based +OSs, if not, you can *create* a new blank one and start from zero. + +You can search for vim settings or copy from other's config files, you can also +check out my [vim config +file](https://github.com/mjkloeckner/dotfiles/blob/master/.vimrc) and take out +the parts that would fit your needs. The basic settings are almost present in +every config file like: + +```vim +set syntax=on +set encoding=utf-8 +set tabstop=4 +set shiftwidth=4 +set number +set mouse+=a +``` + +## Vim plugins + +By default Vim comes with a lot of features missing, for example, a key binding +to comment a line, or auto close brackets, parenthesis, etc, this features can +be enabled by installing *plugins*. + +Vim plugins are like pieces of other's config files that you can include in +yours. The simpler way of managing plugins is with a plugin manager, I use +[vim-plug](https://github.com/junegunn/vim-plug). + +### Installing a plugin + +First install vim-plug or any other vim plugin manager, for vim-plug enter the +link I left you above, and follow the instructions. For any other plugin manger +I think it would be pretty similar. After you got a plugin manager installed +simply call the plugins that you want from you .vimrc file, for example I'm +using vim-plug and the section where I call the plugins in my .vimrc file looks +like this: + +```vim +Plug 'christoomey/vim-tmux-navigator' +Plug 'justinmk/vim-syntax-extra' +Plug 'tpope/vim-commentary' +Plug 'tpope/vim-surround' +Plug 'jiangmiao/auto-pairs' +Plug 'preservim/nerdtree' +Plug 'morhetz/gruvbox' +Plug 'alvan/vim-closetag' +Plug 'hankchiutw/nerdtree-ranger.vim' +``` + +then, in the case of vim-plug, you need to run `:PlugInstall` to install all the +new plugins added.
