Posts - David Charte

Finding a convenient mobile workflow for writing posts on a static blog

2024-05-05T00:00:00+00:00
I wanted to have a more convenient way of adding posts to the blog that didn't involve so much editing, dealing with git, jekyll and everything. Something so that I could just jot down some notes on my phone whenever and have them up in no time. This is what I've found at the moment, I may extend this in the future and feel free to send suggestions my way (talk to me at dci@c.im</a> on the fediverse).
JekyllEx
isomorphic-git
`StackEdit`</a> </h2> After seeing that the git part of the problem could be solved, I looked into Markdown editors, and I came across StackEdit</a> which I had already used ages ago. ...and it turns out StackEdit has full support for GitHub/Gitlab repos! I'm just writing this post on it right now and I can push it to the repo so that GitHub takes care of compiling and adding it to the blog. StackEdit also offers PWA capabilities so you can pin it as an icon on your homescreen. So this is looking great for writing quick and short stories more frequently :)



Machine Learning: ¿Qué es y para qué sirve el análisis exploratorio? (con un ejemplo para que lo veas claro)
2022-05-24T00:00:00+00:00



Reconocimiento y clasificación de imágenes con Deep Learning
2022-04-06T00:00:00+00:00



Aplicaciones de Inteligencia Artificial y Machine Learning en pequeños negocios
2021-02-08T00:00:00+00:00



5 aplicaciones prácticas inesperadas de la Inteligencia Artificial
2020-11-03T00:00:00+00:00



Deploying HomelabOS on a Raspberry Pi 4
2020-03-31T00:00:00+00:00
HomelabOS is a tool for deploying self-hosted services on a server. For this installation, you will need:</p>

Raspberry Imager</li>
Latest ubuntu-preinstalled-server-arm64</code> from here: https://github.com/TheRemote/Ubuntu-Server-raspi4-unofficial/releases</li>
Docker on your PC (your user should be in the docker</code> group, sudo usermod -a -G docker username</code>)</li>
Latest HomelabOS zip from here: https://gitlab.com/NickBusey/HomelabOS/-/tags</li>
</ul>
Installing Ubuntu</a>
</h2>
We will need Ubuntu 18.04 on the Raspberry. Here's how to install it.</p>
Fixing firmware</a>
</h3>
First, open up Raspberry Imager and flash Raspbian to your SD card. Boot up your RPi 4 and run these commands:</p>
sudo</span></span> apt-get update</span> &&</span> sudo</span></span> apt-get dist-upgrade -</span>y</span></span>
</span>sudo</span></span> rpi-update</span>
</span>sudo</span></span> rpi-eeprom-update -</span>a</span></span>
</span></code></pre>
Actually installing Ubuntu</a>
</h3>
Now, use Raspbian Imager to flash the IMG file for Ubuntu Server 18.04 to your SD card. Boot up your Raspberry and check for working SSH (default user and password are ubuntu</code>, ubuntu</code>). You will need to configure an SSH key if you don't have one, so ssh-keygen</code> and ssh-copy-id</code> are your friends. A static IP would also be convenient, you can use netplan to configure it</a>, it's easy!</p>
Installing HomelabOS</a>
</h2>
Extract files from the downloaded ZIP on your PC</strong>. Now cd</code> to the HomelabOS directory and run the following:</p>
make</span></span> logo</span>
</span>make</span></span> config #</span></span> answer some questions</span>
</span></span></span>make</span></span> set enable_miniflux true #</span></span> miniflux is a feed reader</span>
</span></span></span>make</span></span>
</span></code></pre>
This should accomplish the following steps:</p>

Build Docker images for HomelabOS</li>
Set some configuration variables and create settings/config.yml</code></li>
Enable a service, it doesn't have to be miniflux, I chose that for testing</li>
Deploy the configured services to your Raspberry</li>
</ol>
For more info and troubleshooting, see the original posts.</p>
Sources</a>
</h1>

Ubuntu 18.04.4 unofficial image: https://jamesachambers.com/raspberry-pi-4-ubuntu-server-desktop-18-04-3-image-unofficial/</li>
HomelabOS installation: https://nickbusey.gitlab.io/HomelabOS/setup/installation/</li>
</ul>
I'll be updating this post with more info and tips as I continue optimizing my configuration.</p>


Versatile workflow for autoencoders in Keras
2020-02-11T00:00:00+00:00
Architecture definition</a>
</h2>
This code defines the simplest architecture: [input, encoding (2), output]</p>
enc_dim</span></span> =</span> "</span></span></span>2"</span></span></span>
</span>
</span>encoder</span></span> =</span> "</span></span></span>tf.keras.Sequential(["</span></span></span>
</span>    tf</span>.</span>keras</span>.</span>layers</span></span>.</span></span>Dense</span></span></span></span>(</span>enc_dim</span></span>,</span> activation</span>=</span>"</span></span></span>relu"</span></span></span>,</span> input_shape</span>=</span>(</span>data</span>.</span>shape</span></span></span>[</span></span>1</span></span>]</span></span>,</span> )</span></span>)</span></span>
</span>]</span>)</span>
</span>decoder</span></span> =</span> "</span></span></span>tf.keras.Sequential(["</span></span></span>
</span>    tf</span>.</span>keras</span>.</span>layers</span></span>.</span></span>Dense</span></span></span></span>(</span>data</span>.</span>shape</span></span></span>[</span></span>1</span></span>]</span></span>,</span> activation</span>=</span>"</span></span></span>sigmoid"</span></span></span>,</span> input_shape</span>=</span>(</span>enc_dim</span></span>,</span>)</span></span>)</span></span>
</span>]</span>)</span>
</span></code></pre>
Definition of a loss function</a>
</h2>
Defining the loss as a function allows us much more flexibility to compute penalties from the encodings, or even other inputs (supervised autoencoders).</p>
def</span></span> autoencoder_loss</span></span></span>(</span></span>layers</span>)</span></span>:</span></span>
</span>    inp</span></span>, enc</span></span>, out</span></span> =</span> "</span></span></span>layers"</span></span></span>
</span>    rec_loss</span></span> =</span> "</span></span></span>K.binary_crossentropy(inp, out)"</span></span></span>
</span>    #</span> compute other penalties
</span></span>    loss</span></span> =</span> "</span></span></span>rec_loss # + other penalties"</span></span></span>
</span>    return</span> loss</span></span>
</span></code></pre>
Definition of the loss layer and the model</a>
</h2>
The loss function is wrapped as the last layer of the autoencoder model and connected to the necessary inputs/outputs.</p>
loss_l</span></span> =</span> tf</span>.</span>keras</span>.</span>layers</span></span>.</span></span>Lambda</span></span></span></span>(</span>autoencoder_loss</span></span>,</span> output_shape</span>=</span>(</span>1</span>,</span>)</span></span>,</span> name</span>=</span>"</span></span></span>loss"</span></span></span>)</span></span>(</span>[</span>
</span></span></span>    encoder</span>.</span>input</span></span>,</span> encoder</span>.</span>output</span></span>,</span> decoder</span></span></span></span>(</span>encoder</span></span></span></span>(</span>encoder</span>.</span>input</span></span>)</span></span>)</span></span>
</span></span></span>]</span></span>)</span></span>
</span>
</span>autoencoder</span></span> =</span> "</span></span></span>tf.keras.Model([encoder.input, target_input], loss_l)"</span></span></span>
</span></code></pre>
Compilation of model with custom loss</a>
</h2>
Since the last layer (y_pred</code>) is actually the loss, our custom loss only needs to return that value.</p>
autoencoder</span></span>.</span></span>compile</span></span></span></span>(</span>loss</span>=</span>{</span></span>'</span></span></span>loss'</span></span></span></span>:</span></span> </span>lambda</span></span></span> y_true</span>,</span> y_pred</span>:</span></span></span> y_pred</span></span>}</span></span></span>,</span> </span>optimizer</span></span>="</span></span></span>adam"</span></span></span>)</span>
</span></span></span></code></pre>
Fit model with dummy target</a>
</h2>
Keras will complain if no target is passed, so we just create some dummy targets which will not be used at all.</p>
hist</span></span> =</span> "</span></span></span>autoencoder.fit(data, np.zeros(data.shape[0]), batch_size=8, epochs = 100)"</span></span></span>
</span></code></pre>


Crea tu propia página o blog gratis con Jekyll y Github: Parte 5 - Vídeo práctico
2019-02-26T00:00:00+00:00



Crea tu propia página o blog gratis con Jekyll y Github: Parte 4 - Compilación en la nube y gestión de plugins
2019-02-18T00:00:00+00:00



Crea tu propia página o blog gratis con Jekyll y Github: Parte 3 - Personalizando el sitio
2019-02-11T00:00:00+00:00



Crea tu propia página o blog gratis con Jekyll y Github: Parte 2 - Publicando posts
2019-02-04T00:00:00+00:00



Crea tu propia página o blog gratis con Jekyll y Github: Parte 1 - Primeros pasos
2019-01-28T00:00:00+00:00



TRUCO: Cómo resaltar la inicial de un texto con CSS
2018-11-06T00:00:00+00:00



Guía básica para la personalización de la shell de Linux y Mac
2018-09-25T00:00:00+00:00



3 formas de inicializar colecciones Java a la hora de declararlas
2018-08-20T00:00:00+00:00



3 trucos para automatizar tus tareas de desarrollo con git hooks
2018-08-01T00:00:00+00:00



Cómo maquetar HTML con el sistema grid de CSS
2018-07-11T00:00:00+00:00



Conceptos esenciales sobre compilación e interpretación
2018-06-26T00:00:00+00:00



Mezclando colores y creando efectos fotográficos en CSS mediante el uso de blend modes
2018-06-12T00:00:00+00:00



Programación funcional: Funciones de primera clase y de orden superior
2018-05-30T00:00:00+00:00



Programación funcional: Inmutabilidad y funciones puras
2018-05-24T00:00:00+00:00



Cómo centrar y distribuir elementos HTML con el módulo flexbox de CSS
2018-05-09T00:00:00+00:00



A guide to Ruby in ten lines of code
2018-03-17T00:00:00+00:00
This is a slightly unorthodox introduction guide to the Ruby language. Through this guide we will examine just ten one-line snippets of code, and discover a lot of features from each of them.</p>
This is the post version of a talk I gave for LibreIM</a>.</p>
Syntax</a>
</h2>
puts</span> "</span>Hello </span>#{</span></span>gets</span>.</span>strip</span>}</span></span>!"</span></span></span>
</span></code></pre>
This snippet accepts a string from standard input, then cleans the leading and trailing spacing characters and embeds it in a greeting which is shown on standard output. Notice that:</p>

puts</code> and gets</code> are the standard functions for displaying messages and reading input, respectively.</li>
You can omit parenthesis around parameters for better readability.</li>
#{...}</code> in strings interprets small pieces of code and transforms the output into a string.</li>
</ul>
puts</span> "</span>boooored"</span></span></span>.</span>upcase unless</span> Time</span>.</span>now.</span>saturday?
</span></code></pre>
This example is so readable you probably don't need a description. Notice that:</p>

Literals are Ruby objects and can receive methods.</li>
if</code>, unless</code>, while</code> and until</code> can be used as one-line structures.</li>
There is a convention to end methods which return booleans with ?</code> and methods which have non-explicit side effects with !</code>.</li>
</ul>
real,</span> imag =</span> "</span>(1 + 3i).rectangular"</span></span></span>
</span></code></pre>
This snippet assigns the real part of 1 + 3i to real</code> and the imaginary part to imag</code>. Notice that:</p>

Ruby has built-in support for complex numbers, big numbers (as in symbolic, bigger than long long</code> numbers) and symbolic rationals.</li>
Assignment allows splatting arrays. The splat operator *</code> allows for related operations. For example,</code></pre>
</li>
</ul>
x, *xs = "[1, 2, 3, 4]"
```
performs some Haskell-ish pattern matching: x</code> receives the first element and xs</code> holds the rest of the array. There is also a similar double-splat **</code> for hashes.</p>
Object oriented programming</a>
</h2>
class</span></span> </span>DeadPlayerError</span></span> <</span></span> </span>StandardError</span></span>;</span> end</span>
</span></code></pre>
Defines a class useful to return errors (exceptions). Notice that:</p>

Classes are defined with class</code> (which is syntax sugar for Class.new { ... }</code>).</li>
There is simple inheritance with <</code>.</li>
You can throw an error with raise DeadPlayerError</code>. Ruby distinguishes errors, from which a program can recover, and other kinds of exceptions, which leave the program in an invalid state and therefore it must stop.</li>
</ul>
Point = "Struct.new :x, :y, :z"
</span></code></pre>
Creates a class with getters and setters for the given attributes. Notice that:</p>

Member attributes of a class are always</strong> private (or protected, as they are inherited). Thus, the dot</em> only sends methods and doesn't directly access attributes.</li>
Methods can be defined in a do ... end</code> block. You should consider defining a class if you want to add them.</li>
New objects are created with Point.new</code>.</li>
</ul>
Iteration and data structures</a>
</h2>
puts</span> %w[</span>such elegant wow]</span></span></span>.</span>each_with_index.</span>map {</span> |</span></span>w</span>,</span>i</span>|</span></span></span> "</span></span>#{</span></span>i</span>}</span></span>. </span>#{</span></span>w</span>}</span></span>"</span></span></span> }</span>
</span></code></pre>
Walks through the array, obtains an array of strings index. element</em> and prints it on stdout. Notice that:</p>

%w[]</code> splits a list of words by spaces and returns an array.</li>
each_with_index</code> iterates giving each element and its index in the collection.</li>
map</code> applies a function on each element of a collection and returns the result.</li>
{...}</code> o do ... end</code> denote blocks</em>, structures of code which are passed to methods in order to be ran from them. Blocks can receive parameters between bars |a, b|</code>.</li>
</ul>
dot =</span> "</span>->(v1, v2) { v1.zip(v2).reduce(0) { |p, (n, m)| p + n * m } }"</span></span></span>
</span></code></pre>
Computes the dot product. Example usage: dot.([1, 2, 3], [-1, 0, 2])</code>. Notice that:</p>

Lambda functions are defined with -></code>. As opposed to usual functions or methods, Lambdas are objects.</li>
zip</code> pairs the elements of two or more arrays.</li>
reduce</code> accumulates results of a binary function.</li>
</ul>
fib =</span> "</span>Hash.new { |h, i| h[i] = h[i - 2] + h[i - 1] }.update(0 => 0, 1 => 1)"</span></span></span>
</span></code></pre>
Creates a Hash which contains, for each index, the corresponding term of the Fibonacci sequence. Notice that:</p>

Hash</code> may receive a default</em> initialization (usually nil</code>). This initialization takes place whenever the user attempts to access a value which has not been assigned previously.</li>
Hash#update</code> assigns several values at a time.</li>
This would be equivalent to a memoized recursive version.</li>
</ul>
solution.</span>neighborhood.</span>detect {</span> |</span></span>attempt</span>,</span> fitness</span>|</span></span></span> fitness ></span> @</span>current_fitness</span> }</span>
</span></code></pre>
Assuming the .neighborhood</code> returns a collection of possible solutions and their performance (fitness), this finds the first one which improves the current solution. Actual use: https://git.io/vPxQ6</a>. Notice that:</p>

detect</code> receives a predicate and returns the first ellement of the collection which verifies it.</li>
If you want to get the best solution in the neighborhood instead, you can use max_by</code>.</li>
There is a huge list of iteration methods available in any Ruby collection class:
Enumerable</code></a></li>
</ul>
I/O</a>
</h2>
open</span>(</span>DATA</span>.</span>read,</span> "</span>w"</span></span></span>)</span>.</span>write IO</span>.</span>read(</span>$</span>0</span>)</span>.</span>gsub</span>(</span>/</span>^#' /</span></span></span>,</span> "</span>"</span></span></span>)</span>
</span></code></pre>
This snippet reads itself (as in, the own program running), uncomments lines marked with #'</code> and passes the result as input to the program started by Kernel#open</code>. Notice that:</p>

$0</code> is the name of the current program/script.</li>
gsub</code> performs global sustitution</li>
Kernel#open</code> opens read/write pipes with other processes when the "filename" looks like "|program_name"</code>.</li>
</ul>
The catch</em>  The program is hidden in the data section of the original script</a>:</p>
__END__</span></span>
</span></span>|</span>pandoc</span></span> -</span>t</span> beamer -</span>o</span> slides.pdf --</span>pdf-engine</span>=</span>xelatex</span>
</span></code></pre>


Deploying Mastodon on a single DigitalOcean droplet
2018-03-10T00:00:00+00:00
What happened</a>
</h2>
I bought a super cheap domain with a cool name</a>. I had to put something there, so why not Mastodon? I had a 10$ coupon from DigitalOcean so I could try it for free for a month or two.</p>
Prerequisites</a>
</h2>
You'll need a domain name for this. There are free domains available in certain TLDs, and also very cheap ones out there (quotient.space was just 0.55€ for the first year).</p>
How to do the thing</a>
</h2>
Most of this process is just following Mastodon's own Docker guide</a>. I used version 2.3.0 for this, so the process may be different for other versions.</p>
Disclaimer</strong>:  This is my first time deploying Mastodon so trust your own common sense over these steps.</p>


Set up a single 5$ droplet in your DO account (if you are not yet an user you can use this link to get 10$ credit: https://m.do.co/c/ca70d8a84d85</a>). Throw your public SSH key in there and use its IP address to login: ssh root@[ip-address]</code>. You can also set up your domain so that it points to DO's nameservers and redirects to your droplet.</p>
</li>

apt install docker.io nginx letsencrypt</code></p>
</li>

You'll need a new version of docker-compose so run this (source</a>):</p>
COMPOSE_VERSION</span>=</span></span>`</span>git</span></span> ls-remote https://github.com/docker/compose</span> |</span> grep</span></span> refs/tags</span> |</span> grep</span></span> -</span>oP</span> "</span>[0-9]+\.[0-9][0-9]+\.[0-9]+$"</span></span></span> |</span> tail</span></span> -</span>n</span> 1</span>`</span></span></span>
</span>sudo</span></span> sh -</span>c</span> "</span>curl -L https://github.com/docker/compose/releases/download/$</span>{</span></span>COMPOSE_VERSION</span></span>}</span></span>/docker-compose-`</span>uname</span></span> -</span>s</span></span>`</span></span>-`</span>uname</span></span> -</span>m</span></span>`</span></span> > /usr/local/bin/docker-compose"</span></span></span>
</span>sudo</span></span> chmod +x /usr/local/bin/docker-compose</span>
</span>sudo</span></span> sh -</span>c</span> "</span>curl -L https://raw.githubusercontent.com/docker/compose/$</span>{</span></span>COMPOSE_VERSION</span></span>}</span></span>/contrib/completion/bash/docker-compose > /etc/bash_completion.d/docker-compose"</span></span></span>
</span></code></pre>
</li>

Also, create a swapfile:</p>
fallocate</span></span> -</span>l</span> 1G /swapfile</span>
</span>chmod</span></span> 600 /swapfile</span>
</span>mkswap</span></span> /swapfile</span>
</span>swapon</span></span> /swapfile</span>
</span></code></pre>
</li>

Follow the guide for Docker in Mastodon documentation to clone the repository. Now, touch .env.production</code> since docker-compose will not work without it. Follow the guide to get the images.</p>
</li>

Check that file permissions are correct. I came across a couple of Permission denied</code> errors since some directories in the Docker container were owned by root</code> instead of mastodon</code>. To check this, login into the web container as root:</p>
docker-compose</span></span> run --</span>rm</span> -</span>u</span> 0 web bash</span>
</span>#</span></span> in the container:</span>
</span></span>chmod</span></span> -</span>R</span> mastodon:mastodon /mastodon/public/</span>
</span></code></pre>

Is this terrible? Shouldn't I have changed it? Tell me</p>
</blockquote>
</li>

Follow the guide to setup your instance. You don't need a MailGun account if it's a single-user instance, but put some fake user and password just in case. The compilation of assets may take several minutes, for convenience make sure you aren't kicked out of the ssh session. Set up an admin account for yourself.</p>
</li>

docker-compose up -d</code></p>
</li>

Follow the nginx and Let's Encrypt sections of the production guide</a>.</p>
</li>

If all went well you should be able to see your new Mastodon instance when you visit your domain.</p>
</li>
</ol>
Useful stuff</a>
</h2>
If assets compilation didn't work, you can try again with</p>
docker-compose</span></span> run --</span>rm</span> web rake assets:precompile</span>
</span></code></pre>
If creating the user didn't work, try adding a new user, locating the password reset token in the logs (then navigating to example.com/auth/password/edit?reset_password_token=[your-token]</code> to create a password) and lastly confirming the email address:</p>
docker-compose</span></span> run --</span>rm</span> web rake mastodon:add_user</span>
</span>docker</span></span> logs mastodon_web_1</span>
</span>docker-compose</span></span> run --</span>rm</span> web rake mastodon:confirm_email USER_EMAIL=[</span>your-</span>email]</span></span>
</span></code></pre>


Time tracking in Emacs with org-clock
2017-11-30T00:00:00+00:00
This is yet another short post about a little feature in Emacs that turned out to be pretty useful. If you ever feel that you'd like to know how much time you are spending working on different projects (and are an Emacs user), this is the post for you.</p>
org-clock</a>
</h2>
After searching for a simple app to track my time for an hour or so, I ended up looking for that functionality in Emacs and, unsurprisingly enough</a>, it exists. It's integrated inside org-mode</em> so it works very well with any task list you may already have, or you could create a completely separate file exclusive for time tracking.</p>
The following is the skeleton for my time log:</p>
#+title: Time log
</span>
</span>=CHEATSHEET=
</span>- S-c         open this window (i3)
</span>- C-c C-x C-i org-clock-in
</span>- C-c C-x C-o org-clock-out
</span>- C-c C-x C-j org-clock-goto
</span>- C-c C-x C-d org-clock-display
</span>- C-c C-x C-r org-clock-report
</span>
</span>* Work
</span>* M.Sc.
</span>* Projects / Fun
</span></code></pre>
Easy enough, the only actual content of the file is that last stack of headers (it could be a list with -</code> instead of *</code> as well). Now onto the good part: place the cursor over one of the tasks and type Ctrl + c</kbd>,Ctrl + x</kbd>,Ctrl + i</kbd>. This will set a clock under that task with the starting time of the task. Let some time pass, and use Ctrl + c</kbd>,Ctrl + x</kbd>,Ctrl + o</kbd> to stop the clock. Emacs will also remember when you have a clock running, and will warn you if you try to close the buffer or stop the clock if you start another one.</p>
When you have tracked several time periods for the same task, you can compute the total time with Ctrl + c</kbd>,Ctrl + x</kbd>,Ctrl + d</kbd>. org-clock</em> also understands nested tasks (second-level headers, nested lists, etc.) and will sum the time of all the tasks inside a higher-level task to compute the overall spent time. You can generate a daily report with Ctrl + c</kbd>,Ctrl + x</kbd>,Ctrl + r</kbd> and setting the :block today</code> parameter. The following screenshot shows all these features at work:</p>
</p>
Convenient stuff</a>
</h2>
As a user of i3, it's easy to set keybindings that will let me access my time log instantly:</p>
#</span></span> .config/i3/config</span>
</span></span>bindsym</span></span> $</span>mod</span></span>+c exec "</span>xdotool search --name 'timelog.org' windowactivate && i3-msg kill || emacsclient -c /media/datos/Documents/timelog.org"</span></span></span>
</span>for_window</span></span> [</span>class="</span>Emacs"</span></span> title="</span>timelog.org"</span></span>]</span> floating enable</span>
</span>for_window</span></span> [</span>class="</span>Emacs"</span></span> title="</span>timelog.org"</span></span>]</span> resize set 1920 1280</span>
</span>for_window</span></span> [</span>class="</span>Emacs"</span></span> title="</span>timelog.org"</span></span>]</span> move position center</span>
</span></code></pre>
This enables a Super + c</kbd> binding that will toggle an Emacs window with the time log file.</p>
In order to save some keystrokes and prevent forgetting to save the time log, I have also added these hooks into my Emacs config:</p>
(</span>add-</span>hook 'org-</span>clock-</span>in-</span>hook 'save-</span>buffer)</span></span>
</span>(</span>add-</span>hook 'org-</span>clock-</span>out-</span>hook 'save-</span>buffer)</span></span>
</span></code></pre>
Finally, I let Emacs open the file in background at startup with the following line in the configuration, so the buffer isn't actually closed when I close the window:</p>
(</span>find</span>-</span>file-</span>noselect "</span>~/Documentos/timelog.org"</span></span>)</span></span>
</span></code></pre>
And that's all there is to simple time tracking in Emacs. I hope you learned something useful and I didn't waste your time.</p>


Emacs for lazy people
2017-05-05T00:00:00+00:00
Emacs is one of the most powerful, extensible editors out there.
However, learning to use it is not an easy task, and I'm just really
lazy. The following are some packages that I hope will make your life
way easier. And if you already use Emacs, I encourage you to try them
and see if they help you get a more comfortable development environment.</p>
To add any of these packages to your Emacs configuration, find your
initialization file (usually ~/.emacs</code> or ~/.emacs.d/init.el</code>) and
add the snippets there. You will also need to install and enable use-package</code>
beforehand (why?</a>).</p>
Smex</a>
</h2>
In Emacs we use M-x
(Alt</kbd>+X</kbd>) to enter any
command without the need for a dedicated keyboard shortcut or menu
entry. By default Emacs doesn't help much while writing a command, and
it can be challenging to remember many of them, as well as tedious
writing the long ones (package-list-packages</code> anyone?).
Smex</a> is a M-x enhancement for
Emacs, built on top of Ido, which means it will try to predict and
autocomplete commands as you write them.</p>
In order to install and enable Smex, add the following code to your
initialization file:</p>
(use-package smex
</span>:config (smex-initialize))
</span></code></pre>
Ergoemacs</a>
</h2>
If you're just starting to use emacs, you may find it difficult to learn
all the new keybindings. If you're a long-time user, you may have
experienced repetitive strain injury (RSI), also known as Emacs
pinky</a>. Don't worry,
I've got just the solution for you:
ergoemacs-mode</a> is a minor-mode
that sets ergonomic and well-known keybindings for common editing
functions, with the aim of reducing RSI as well as adding some
familiarity to the use of emacs.</p>
Just as before, add the following code to your initialization file and
restart Emacs to use it:</p>
(use-package ergoemacs-mode
</span>:init
</span>  (setq ergoemacs-theme nil)
</span>  (setq ergoemacs-keyboard-layout "es")
</span>:config
</span>  (ergoemacs-mode 1)
</span>)
</span></code></pre>
You can check your new keybinding
layout</a>. Remember that,
after enabling Ergoemacs, the keyboard shortcut that allows you to enter
a custom command becomes
Alt</kbd>+A</kbd>.</p>
Which-key</a>
</h2>
</p>
Which-key</a> displays the key
bindings following your currently entered incomplete command. That way,
when you can't remember which key to press, you'll have a cheat sheet in
a couple of seconds.</p>
(use-package which-key
</span>:config (which-key-mode))
</span></code></pre>
Auto-reload stuff</a>
</h2>
When using version control, files generally change while having them
open in the editor. If this happens, I expect my editor to refresh the
files so that I don't write on an old version. Emacs doesn't enable this
behavior by default, rather letting the user decide if they want to
reload files. Instead, we can set it to automatically reload files from
disk when changed via these configuration lines (source: Pragmatic
Emacs</a>):</p>
(global-auto-revert-mode 1)
</span>(add-hook 'dired-mode-hook 'auto-revert-mode)
</span></code></pre>
{:.note}
The magit</a> plugin for version control with git does
refresh the files without the need for this configuration (thanks Nacho</a>
for the remark!).</p>
Still want more?</a>
</h2>
These are the main tools that have eased my way into Emacs. You can check out the rest of my configuration in my dotfiles repository</a>.</p>


Sincronizando notas entre PC y móvil mediante Orgzly y Syncthing
2017-03-05T00:00:00+00:00
Uno de los sistemas más versátiles que existen para organización personal y gestión de tareas es org-mode</em> de Emacs, un modo de este editor que proporciona comodidades útiles tanto para tomar notas rápidas como incluso escribir unos apuntes con fórmulas matemáticas</a>. Esencialmente, aunque cuesta trabajo empezar a usarlo, tiene más utilidades y plugins que la mayoría de navajas suizas</a>, por lo que no es muy difícil encontrar una forma cómoda de aprovechar unas cuantas para organizarse.</p>
Para llevar un sistema basado en org</em> en el móvil existe Orgzly</a>, una aplicación de Android que da una interfaz intuitiva mediante botones y gestos, pero que internamente utiliza el formato de org</em>.</p>
{:.fig.medium}

Orgzly en funcionamiento</p>
La pregunta que nos vendría a la mente a todos sería si podemos tener el mismo archivo de org</em> sincronizado entre nuestros dispositivos con Emacs y Orgzly. El problema al que llegamos es que el único sistema de sincronización que ofrece Orgzly es a través de Dropbox y, aparte de las preocupaciones por seguridad y privacidad que nos podrían surgir, en realidad es totalmente innecesario tener nuestro archivo almacenado en la nube.</p>
La solución que he encontrado es usar Syncthing, un sistema de sincronización P2P de código libre</a>. Para ello simplemente tendremos que instalar la app de Syncthing en los dispositivos Android y la versión del programa correspondiente a nuestro sistema operativo para el PC.</p>
{:.note}
En Arch Linux basta ejecutar pacman -S syncthing</code>. Además, conviene añadirlo al arranque del sistema con systemctl --user enable syncthing</code>.</p>
En la versión de PC, Syncthing generalmente inicializará una carpeta por defecto. Podemos mover ahí nuestro archivo org</em>. Para hacer que se comuniquen los dispositivos entre sí, desde la interfaz web disponible en localhost:8384</code> mostramos el ID desde Options</em> → Show ID</em> y escaneamos el código QR desde el móvil en la pantalla de Nuevo dispositivo</em>.</p>
{:.fig.medium}
</p>
Una vez hecho esto, la app avisará de que el PC quiere comenzar a sincronizar la carpeta por defecto. Aceptamos la solicitud y asignamos una ruta dentro de los archivos del teléfono, para almacenar esa carpeta. Syncthing descargará en esa ubicación los archivos que hayamos copiado en el ordenador, y los volverá a enviar a este cuando realicemos cambios.</p>
{:.fig.medium}
</p>
El último paso es configurar a Orgzly para que lea y escriba de esa carpeta. Para esto entramos en la configuración de la aplicación, y bajo Sync</em> seleccionamos Repositories</em> → Directory</em>. Escogemos la ruta que definimos antes para el almacenamiento de Syncthing. A partir de ahora, Orgzly guardará en ese directorio los archivos org</em> que cree, y leerá los nuevos archivos que aparezcan.</p>
{:.fig.medium}
</p>
Por último, Syncthing permite sincronizar datos entre muchos dispositivos y ser relativamente selectivo en cuanto a qué se sincroniza con cada uno. Así, nuestros archivos de org</em> pueden estar siempre actualizados vayamos donde vayamos, y sin necesidad de almacenarlos permanentemente en servidores externos.</p>


Métodos de aproximación en Ruby
2017-01-28T00:00:00+00:00
Entre las tareas de una práctica para la asignatura de Mecánica
Celeste (todo
el
código disponible en GitHub</a>),
he tenido que programar un par de métodos numéricos de aproximación
iterativos. Resultó ser una aplicación muy práctica de los
enumerables de Ruby</a> y
me parece un buen ejemplo del ahorro de código que puede suponer su uso.</p>
Para abstraer distintos métodos iterativos de aproximación, definí una
clase abstracta Approximator</code> de la que derivarían el resto. Permite
almacenar la aproximación actual y la tolerancia o error que se quiera
aceptar. Las clases derivadas implementan el método next_one</code> que
calcula la siguiente aproximación a partir de la actual.</p>
#</span> Clase base para métodos numéricos de aproximación de funciones
</span></span>class</span></span> </span>Approximator</span></span>
</span></span>
</span></span>  </span>#</span> Datos miembro
</span></span>  #</span>  - current:   valor de la aproximación actual
</span></span>  #</span>  - tolerance: valor de tolerancia
</span></span>  attr_accessor</span> :</span>current</span>,</span> :</span>tolerance</span>
</span>  
</span>  def</span></span> initialize</span></span> </span>initial</span>,</span> tolerance</span> </span>=</span></span> DEFAULT_TOLERANCE</span></span>
</span>    self</span>.</span>current =</span> initial
</span>    self</span>.</span>tolerance =</span> tolerance
</span>  end</span>
</span>
</span>  #</span> Método a implementar en las clases hijas
</span></span>  def</span></span> next_one</span></span>
</span>    raise</span> NotImplementedError</span>
</span>  end</span>
</span>end</span>
</span></code></pre>
El punto clave para aprovechar la potencia de los enumeradores es
implementar un método each</code> que haga uso de la función yield</code> para
proporcionar los resultados parciales. En este caso, proporciona la
aproximación encontrada en cada iteración. Lo interesante de yield</code>
es que no devuelve el control al método hasta que se necesita un nuevo
resultado, de forma que sólo se realizan los cálculos necesarios. Por
ejemplo, podría haber implementado (y lo hice, al principio) el método
each</code> como un loop</code> infinito, sin condición de parada, y podría
iterar las veces necesarias para obtener una precisión arbitraria
(suponiendo convergencia del método). Sin embargo, para poder hacer un
uso práctico de las clases, añadí la condición de parada con la
tolerancia.</p>
Una vez implementado each</code>, basta con incluir el módulo Enumerable</code>
que añade toda la funcionalidad de los enumeradores, como to_a</code> que
acumula en un array todos los elementos devueltos por each</code>. Así,
para calcular la mejor aproximación basta con devolver el último
elemento de ese array.</p>
class</span></span> </span>Approximator</span></span>
</span></span>  </span>#</span> Método que calcula y proporciona aproximaciones
</span></span>  def</span></span> each</span></span>
</span>    previous =</span> Float</span>::</span>INFINITY
</span>    until</span> (</span>current -</span> previous)</span>.</span>abs <</span> tolerance
</span>      #</span> Proporciona una aproximación y espera a que se
</span></span>      #</span> pida la siguiente
</span></span>      yield</span> current
</span>      previous =</span> current
</span>      self</span>.</span>current =</span> next_one
</span>    end</span>
</span>  end</span>
</span>
</span>  #</span> Incluimos herramientas que permiten enumerar
</span></span>  #</span> las aproximaciones
</span></span>  include</span> Enumerable</span>
</span>
</span>  #</span> Método que devuelve la última aproximación
</span></span>  #</span> para la tolerancia dada
</span></span>  def</span></span> approximate</span></span>
</span>    to_a</span>.</span>last
</span>  end</span>
</span>end</span>
</span></code></pre>
Además de consultar la mejor aproximación, podremos realizar otras
tareas como obtener una lista de n</em> iteraciones con take(n)</code>.</p>
Por último, basta implementar especializaciones de esta clase con
métodos de aproximación concretos. El siguiente es el método de
Newton-Raphson, que permite calcular raíces de funciones a partir de
sucesivas evaluaciones en la función y en su derivada.</p>
class</span></span> </span>NewtonRaphson</span></span> <</span></span> </span>Approximator</span></span>
</span>  #</span> Datos miembro
</span></span>  #</span>  - function:   almacena la función f
</span></span>  #</span>  - derivative: almacena la derivada de f
</span></span>  attr_accessor</span> :</span>function</span>,</span> :</span>derivative</span>
</span>  
</span>  def</span></span> initialize</span></span> </span>initial</span>,</span> tolerance</span> </span>=</span></span> DEFAULT_TOLERANCE</span></span>,</span> function</span>,</span> derivative</span></span>
</span>    super</span>(</span>initial,</span> tolerance)</span>
</span>    self</span>.</span>function =</span> function
</span>    self</span>.</span>derivative =</span> derivative
</span>  end</span>
</span>  
</span>  def</span></span> next_one</span></span>
</span>    #</span> Método de Newton-Raphson para encontrar raíces:
</span></span>    #</span> Calcula Φ(current) = current - f(current)/f'(current)
</span></span>    current -</span> function.</span>call(</span>current)</span>/</span>derivative.</span>call(</span>current)</span>
</span>  end</span>
</span>end</span>
</span></code></pre>
Un ejemplo de uso de esta implementación sería el cálculo de la raíz
cuadrada de 5, como la raíz del polinomio correspondiente:</p>
example =</span> NewtonRaphson</span>.</span>new</span>(</span>
</span>  3.</span>0</span>,</span>
</span>  -</span>></span>(</span>x)</span> {</span> x**</span>2</span> -</span> 5</span> }</span>,</span>
</span>  -</span>></span>(</span>x)</span> {</span> 2</span>*</span>x }</span>
</span>)</span>
</span>example.</span>approximate
</span>#</span>=> 2.23606797749979
</span></span></code></pre>
Otra especialización es la aproximación de la suma de una serie
convergente, a partir de una función que evalúe el n-ésimo término:</p>
class</span></span> </span>SeriesApproximator</span></span> <</span></span> </span>Approximator</span></span>
</span>
</span>  #</span> Datos miembro
</span></span>  #</span>  - term: función que evalúa el término n-ésimo de la serie
</span></span>  #</span>  - n: índice del término actual se la serie
</span></span>  attr_accessor</span> :</span>term</span>,</span> :</span>n</span>
</span>  
</span>  def</span></span> initialize</span></span> </span>tolerance</span> </span>=</span></span> DEFAULT_TOLERANCE</span></span>,</span> term</span></span>
</span>    super</span>(</span>0</span>,</span> tolerance)</span>
</span>    self</span>.</span>term =</span> term
</span>    self</span>.</span>n =</span> 0</span>
</span>  end</span>
</span>
</span>  #</span> Calcula el siguiente término de la serie y lo suma a
</span></span>  #</span> la aproximación actual
</span></span>  def</span></span> next_one</span></span>
</span>    self</span>.</span>n +=</span> 1</span>
</span>    self</span>.</span>current +=</span> term.</span>call(</span>n)</span>
</span>  end</span>
</span>end</span>
</span></code></pre>
Podemos usarla para calcular la suma de Σ1/2^n:</p>
series =</span> SeriesApproximator</span>.</span>new</span>(</span>-</span>></span>(</span>n)</span> {</span> 1.</span>0</span>/</span>2</span>**</span>n }</span>)</span>
</span>series.</span>approximate
</span>#</span>=> 0.999999999998181
</span></span></code></pre>
En particular, las sumas de series nos pueden permitir aproximar los
valores de algunas funciones en diversos puntos, utilizando
por ejemplo desarrollos de Fourier</a>.</p>
Y si habéis leído hasta aquí, ¡gracias! Espero que os haya parecido útil
y os sirva para aprovechar los enumerables en otros proyectos.</p>


Un sistema de contribuciones a blogs Jekyll para gente sin conocimientos de Jekyll, GitHub o Markdown
2016-08-22T00:00:00+00:00
Durante un tiempo, los colaboradores del blog de LibreIM</a> hemos tenido que componer los posts prácticamente a mano, haciendo uso de un editor de texto para escribirlos, Git para llevar el registro de cambios y una pull request</em> en GitHub para enviar el post, revisarlo y corregirlo. Evidentemente, este puede ser un proceso ideal para desarrolladores acostumbrados al proceso, pero está lejos de ser perfecto cuando tratamos de mantener un blog colaborativo abierto a que cualquiera publique su conocimiento. Lo que buscamos es una forma de abstraer el proceso de edición y envío de posts para hacer el blog accesible a mucha más gente.</p>
La solución que concebimos consta de dos partes: por un lado, un backend que utilizaría una cuenta bot</em> de GitHub para la gestión automática de ramas y pull requests</em>; por otro, una aplicación web con un formulario y un sencillo editor desde la que se enviarían los posts.</p>
{:.fig}

Un ejemplo del formulario resultante</a></p>
Preparativos previos</a>
</h2>
Para crear nuevos commits</em> y pull requests</em> necesitamos una cuenta de GitHub. Podemos usar la propia o crear una nueva. Otorgaremos a dicha cuenta permisos de escritura sobre el repositorio de blog en cuestión. Después, obtendremos un token de acceso personal</a> con permisos de modificación de repositorios. Dicho token lo almacenaremos en las variables de entorno de la shell donde vayamos a hospedar la aplicación, supongamos que bajo el nombre de GITHUB_TOKEN</code>.</p>
El backend</a>
</h2>
Componer un guion que trabaje con Git automáticamente no es muy complicado. Se podría utilizar directamente un guion de Bash pero, en vistas a integrarlo en la aplicación web, usamos la gema git</a> para Ruby. Esta permite realizar todo tipo de operaciones sobre repositorios Git, a nosotros nos basta con clonar, abrir una nueva rama, incluir un nuevo archivo en un commit</em> y enviarlo al repositorio remoto. El siguiente código Ruby define una función que realiza todo el proceso, notemos cómo se obtiene por parámetro un block</em> (similar a una función anónima) que permite realizar las modificaciones pertinentes al repositorio:</p>
#</span> repo.rb
</span></span>require</span> '</span>fileutils'</span></span></span></span>
</span>require</span> '</span>git'</span></span></span></span>
</span>
</span>def</span></span> modify_repo</span></span> </span>repo</span>,</span> head</span>,</span> commit_msg</span>,</span> &</span>block</span></span>
</span>  dir =</span> "</span>.repo"</span></span></span>
</span>
</span>  #</span> Usamos el token de acceso para clonar el repositorio
</span></span>  g =</span> Git</span>.</span>clone</span>(</span>"</span>https://</span>#{</span></span>ENV</span>["</span>GITHUB_TOKEN"</span></span></span>]</span></span>}</span></span>@github.com/</span>#{</span></span>repo</span>}</span></span>.git"</span></span></span>,</span> dir)</span>
</span>
</span>  #</span> Configuramos el email y nombre de la cuenta bot
</span></span>  g.</span>config(</span>"</span>user.name"</span></span></span>,</span> "</span>BOT"</span></span></span>)</span>
</span>  g.</span>config(</span>"</span>user.email"</span></span></span>,</span> '</span>BOT_EMAIL@example.org'</span></span></span>)</span>
</span>
</span>  #</span> Creamos una rama nueva
</span></span>  g.</span>branch(</span>head)</span>.</span>checkout
</span>
</span>  #</span> Realizamos modificaciones en el repo
</span></span>  g.</span>chdir {</span> block.</span>call }</span>
</span>
</span>  #</span> Commit y push
</span></span>  g.</span>add(</span>all:</span></span> true</span>)</span>
</span>  g.</span>commit(</span>"</span></span>#{</span></span>commit_msg</span>}</span></span>"</span></span></span>)</span>
</span>  g.</span>push(</span>"</span>origin"</span></span></span>,</span> head)</span>
</span>
</span>  FileUtils</span>.</span>rm_rf(</span>dir)</span>
</span>end</span>
</span></code></pre>
Ahora hemos de añadir la capacidad de crear pull requests</em>, para ello usamos la gema octokit</a>, que acepta el token de acceso que obtuvimos antes:</p>
#</span> form.rb
</span></span>require</span> '</span>octokit'</span></span></span></span>
</span>require_relative</span> '</span>repo'</span></span></span></span>
</span>
</span>github =</span> Octokit</span>::</span>Client</span>.</span>new</span>(</span>:</span>access_token</span> =></span> ENV</span>["</span>GITHUB_TOKEN"</span></span></span>]</span>)</span>
</span>
</span>repo =</span> "</span>BOT/blog"</span></span></span>
</span>base =</span> "</span>gh-pages"</span></span></span>
</span>head =</span> "</span>new-post"</span></span></span>
</span>
</span>modify_repo repo,</span> head,</span> "</span>Nuevo post"</span></span></span> do</span>
</span>  #</span> Creación del nuevo post
</span></span>end</span>
</span>
</span>response =</span> github.</span>create_pull_request(</span>repo,</span> base,</span> head,</span> "</span>Nuevo post"</span></span></span>,</span> "</span>"</span></span></span>)</span>
</span></code></pre>
Únicamente nos queda obtener del usuario los datos necesarios para crear un nuevo post: un titulo, un autor, una categoría y el contenido.</p>
El formulario</a>
</h2>
Sinatra</a>
</h3>
Sinatra</a> es un domain specific language</em> (DSL) para Ruby que facilita la creación de aplicaciones web sencillas sin apenas esfuerzo. Basta con escribir las peticiones HTTP que se aceptan y cuál es la respuesta. Además, es muy útil utilizarlo junto a otras gemas de Ruby que ahorren trabajo a la hora de escribir las plantillas y el estilo. Nuestro archivo de dependencias Gemfile</code> queda de la siguiente forma:</p>
#</span> Gemfile
</span></span>
</span>source '</span>https://rubygems.org'</span></span></span>
</span>
</span>gem</span> '</span>sinatra'</span></span></span></span>
</span>gem</span> '</span>sinatra-contrib'</span></span></span></span>
</span>gem</span> '</span>thin'</span></span></span>      </span>#</span> Web server
</span></span>gem</span> '</span>haml'</span></span></span>      </span>#</span> For layouts
</span></span>gem</span> '</span>sass'</span></span></span>      </span>#</span> For stylesheets
</span></span>gem</span> '</span>kramdown'</span></span></span>  </span>#</span> For the preview
</span></span>gem</span> '</span>rouge'</span></span></span>     </span>#</span> For syntax highlighting
</span></span>gem</span> '</span>octokit'</span></span></span>   </span>#</span> For pull requests
</span></span>gem</span> '</span>git'</span></span></span>       </span>#</span> Repo management
</span></span>gem</span> '</span>recaptcha'</span></span></span> </span>#</span> Some protection against bots
</span></span></code></pre>
Para instalar y manejar las dependencias usamos Bundler</a>: basta así con ejecutar gem install bundler</code> y tras esto bundle install</code>.</p>
Respondiendo a peticiones</a>
</h3>
Vamos a ampliar el archivo form.rb</code> creado anteriormente para aceptar y responder un par de peticiones HTTP. Responderemos a GET /</code> mostrando el formulario, que crearemos aparte en una vista en Haml. Por otro lado, al enviar dicho formulario se creará una petición POST /posts</code> con los datos que necesitamos para componer el nuevo post.</p>
-</span># views/form.haml</span></span></span>
</span>%</span>h1</span></span> Nuevo post
</span>%</span>form</span></span>{action:</span></span> "</span>/posts"</span></span></span>,</span> method:</span></span> "</span>post"</span></span></span>}</span>
</span>  %</span>input</span></span>{type:</span></span> "</span>text"</span></span></span>,</span> name:</span></span> "</span>title"</span></span></span>,</span> placeholder:</span></span> "</span>Título"</span></span></span>}</span>
</span>  %</span>input</span></span>{type:</span></span> "</span>text"</span></span></span>,</span> name:</span></span> "</span>author"</span></span></span>,</span> placeholder:</span></span> "</span>Autor 1, Autor 2, ..."</span></span></span>}</span>
</span>  %</span>input</span></span>{type:</span></span> "</span>text"</span></span></span>,</span> name:</span></span> "</span>category"</span></span></span>,</span> placeholder:</span></span> "</span>Categoría"</span></span></span>}</span>
</span>  %</span>textarea</span></span>{name:</span></span> "</span>content"</span></span></span>,</span> placeholder:</span></span> "</span>Contenido"</span></span></span>}</span>
</span>  %</span>input</span></span>{type:</span></span> "</span>submit"</span></span></span>,</span> value:</span></span> "</span>Enviar"</span></span></span>}</span>
</span></code></pre>
#</span> form.rb
</span></span>require</span> '</span>rubygems'</span></span></span></span>
</span>require</span> '</span>bundler'</span></span></span></span>
</span>Bundler</span>.</span>require</span>(</span>:</span>default</span>)</span></span>
</span>require_relative</span> "</span>repo"</span></span></span></span>
</span>
</span>get "</span>/"</span></span></span> do</span>
</span>  #</span> Mostramos el formulario
</span></span>  haml :</span>form</span>
</span>end</span>
</span>
</span>post "</span>/posts/?"</span></span></span> do</span>
</span>  #</span> Obtenemos los datos
</span></span>  title =</span> "</span>params[:title]"</span></span></span>
</span>  author =</span> "</span>params[:author]"</span></span></span>
</span>  content =</span> "</span>params[:content]"</span></span></span>
</span>  category =</span> params[</span>:</span>category</span>]</span> ||</span> "</span>unclassified"</span></span></span>
</span>
</span>  #</span> Creamos el nombre del archivo
</span></span>  date =</span> Date</span>.</span>today.</span>strftime "</span>%Y</span>-%m</span>-%d</span>"</span></span></span>
</span>  filename =</span> title.</span>downcase.</span>split(</span>"</span> "</span></span></span>)</span>[</span>0</span>..</span>4</span>]</span>.</span>join(</span>"</span>-"</span></span></span>)</span>
</span>
</span>  github =</span> Octokit</span>::</span>Client</span>.</span>new</span>(</span>:</span>access_token</span> =></span> ENV</span>["</span>GITHUB_TOKEN"</span></span></span>]</span>)</span>
</span>
</span>  repo =</span> "</span>BOT/blog"</span></span></span>
</span>  base =</span> "</span>gh-pages"</span></span></span>
</span>  head =</span> "</span>new-post-</span>#{</span></span>filename</span>}</span></span>"</span></span></span>
</span>
</span>  modify_repo repo,</span> head,</span> "</span>Nuevo post"</span></span></span> do</span>
</span>    #</span> Creamos el archivo del post
</span></span>    File</span>.</span>open</span>(</span>"</span>_posts/</span>#{</span></span>date</span>}</span></span>-</span>#{</span></span>filename</span>}</span></span>.md"</span></span></span>,</span> "</span>w"</span></span></span>)</span> do</span> |</span></span>f</span>|</span></span></span>
</span>        f.</span>write <<EOF</span></span></span></span>
</span>+++
</span></span></span>
</span></span></span>title = "</span>#{</span></span>title</span>}</span></span>"
</span></span></span>authors = "</span>#{</span></span>author.</span>split /</span>,\s</span>*/</span></span></span></span>}</span></span>"
</span></span></span>category = "</span>#{</span></span>category</span>}</span></span>"
</span></span></span>+++
</span></span></span>
</span></span></span></span>#{</span></span>content</span>}</span></span>
</span></span></span></span>EOF</span></span></span>
</span>    end</span>
</span>  end</span>
</span>
</span>  response =</span> github.</span>create_pull_request(</span>repo,</span> base,</span> head,</span> "</span>Nuevo post"</span></span></span>,</span> "</span>"</span></span></span>)</span>
</span>end</span>
</span></code></pre>
Para iniciar el servidor web con nuestra aplicación, debería bastar con ejecutar ruby form.rb</code> en el terminal.</p>
Añadiendo un editor de verdad</a>
</h3>
Todo esto ya está muy bien, y la aplicación ahorra un montón de esfuerzo para cada vez que se crea un nuevo post. Pero aún queda una barrera que evitaría que algunos usuarios estuvieran cómodos escribiendo: el marcado de formato con Markdown. Existen diversos editores Markdown que pueden incrustarse en una página web, algunos con amplias funcionalidades y otros más sencillos. Nosotros optamos por SimpleMDE</a>, que facilita la escritura mediante algunas pistas visuales en el código y unos botones que dan acceso a la mayoría de opciones de formato de Markdown.</p>
Este editor aporta además una opción de previsualización personalizable, lo que quiere decir que podemos modificar la forma en que se compila el código Markdown y se muestra dicha vista previa. Como los blogs Jekyll usan el intérprete Kramdown</a> por defecto, podemos añadir una ruta al servidor que compile un documento mediante esta herramienta. Además, utilizamos también la gema Rouge</a> para resaltado de código.</p>
#</span> form.rb
</span></span>#</span> ...
</span></span>post "</span>/preview/?"</span></span></span> do</span>
</span>  Kramdown</span>::</span>Document</span>.</span>new</span>(</span>params[</span>:</span>content</span>]</span>,</span> syntax_highlighter:</span></span> :</span>rouge</span>)</span>.</span>to_html
</span>end</span>
</span></code></pre>
Por otro lado, el editor habrá que inicializarlo mediante un código similar al siguiente:</p>
%</span>form</span></span>{action:</span></span> "</span>/posts"</span></span></span>,</span> method:</span></span> "</span>post"</span></span></span>}</span>
</span>  -</span># ...</span></span></span>
</span>  %</span>textarea</span></span>#markdown_editor</span>{name:</span></span> "</span>content"</span></span></span>,</span> placeholder:</span></span> "</span>Contenido"</span></span></span>}</span>
</span>
</span>%</span>link</span></span>{rel:</span></span> "</span>stylesheet"</span></span></span>,</span> href:</span></span> "</span>https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css"</span></span></span>}</span>
</span>%</span>script</span></span>{src:</span></span> "</span>https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"</span></span></span>}</span>
</span>:javascript
</span>  /</span>/ La típica función para peticiones AJAX
</span></span>  function AjaxRequest(url, method, data, callback) {
</span>    var xmlhttp;
</span>
</span>    if (window.XMLHttpRequest)
</span>      xmlhttp = "new XMLHttpRequest();"
</span>    else
</span>      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
</span>
</span>    xmlhttp.onreadystatechange = "function() {"
</span>      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
</span>        if (xmlhttp.responseXML) {
</span>          callback(xmlhttp.responseXML);
</span>        } else {
</span>          callback(xmlhttp.responseText);
</span>        }
</span>      }
</span>    };
</span>
</span>    xmlhttp.open(method, url, true);
</span>
</span>    if (method == "POST")
</span>      xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
</span>
</span>    xmlhttp.send(data);
</span>  }
</span>
</span>  /</span>/ Inicializa el editor Markdown con algunas opciones extra
</span></span>  var simplemde = "new SimpleMDE({"
</span>    element: document.getElementById("markdown_editor"),
</span>    blockStyles: {
</span>      code: "~~~"
</span>    },
</span>    /</span>/ Usa el sistema propio para vista previa (kramdown + rouge)
</span></span>    previewRender: function(plainText, preview) {
</span>      /</span>/ Esperar un segundo sin cambios para hacer la petición
</span></span>      if (window.delay)
</span>        clearTimeout(window.delay);
</span>
</span>      window.delay = "setTimeout(function() {"
</span>        AjaxRequest("/preview", "POST", "content=" + encodeURIComponent(plainText), function(response) {
</span>          /</span>/ `preview` es el nodo que contiene la vista previa
</span></span>          preview.innerHTML = "response;"
</span>        });
</span>      }, 1000);
</span>
</span>      return preview.innerHTML;
</span>    }
</span>  });
</span></code></pre>
Ahora sí, con todo esto tenemos un editor que facilita la tarea de escribir un post a cualquiera.</p>
Los extras</a>
</h2>
Un par de funcionalidades adicionales que hemos utilizado en el formulario para LibreIM</a> son la inclusión de MathJax</a> para interpretar fórmulas en LaTeX, y de un CAPTCHA mediante la gema recaptcha</a>. No entro aquí en más detalle porque son fáciles de usar; además, todo nuestro código está publicado en GitHub</a>.</p>
En conclusión...</a>
</h2>
Mantener un blog en Jekyll tiene muchas ventajas: se puede hostear en cualquier servidor ya que es un generador de sitios estáticos, se puede realizar control de cambios por Git, etc. Y, con un poco de trabajo y una pequeña aplicación web, también se puede hacer accesible la colaboración a cualquier persona, incluso sin conocimientos de GitHub, Jekyll o Markdown. Ahora queda la parte complicada: convencer a más personas para que contribuyan al blog ;)</p>


Iterating in Ruby: Enumerable and Enumerators
2015-08-24T00:00:00+00:00



Introducción a JavaScript. Programación con prototipos
2014-06-24T00:00:00+00:00