Forem: Hyena

HTML canvas, web components and pianos.

Hyena — Fri, 09 Dec 2022 21:53:23 +0000

If you've ever thought about starting to code a music web application, chances are you've needed a piano keyboard in your HTML.

Notice how little code is needed to add a keyboard to an HTML page:

<html>
  <body>
    <piano-keyboard height="100" width="800" octaves="5"></piano-keyboard>
  </body>
  <script src="https://cdn.jsdelivr.net/gh/rafapaezbas/piano-keyboard/piano-keyboard.js"></script>
</html>

<piano-keyboard> ? That tag doesn't exist! No problem, web components to the rescue!

If you don't know what a web component is, let me explain quickly: a web component is a fully customized html element, but it's just as easy to use as any standard web element. You can see a good tutorial following this link.

Or maybe you are interested in seeing the full code of the component.

A calendar, a knob or a writing keyboard are good candidates to create a web component due to their reusability. Create the component and reuse or share the code. Also don't be afraid that the component's logic will interfere with your application's logic, this logic is fully encapsulated! A web component can only communicate with its parent by emitting events.

A simple example:

// hello-world-component.js

window.customElements.define('hello-world', class HelloWorld extends HTMLElement {
  builder () {
    super()
    this.root = this.attachShadow({ mode: 'open' })
  }

  async connectedCallback() {
      this.dispatchEvent(new CustomEvent('hello-world-event, { detail: { message: 'hello word!' }, bubbles: true, composed: true }))
  }
}

To include the component in your HTML page just add the script:

<html>
  <body>
    <hello-world></hello-world>
  </body>
  <script src="hello-world-component.js"></script>
  <script>
    document.querySelector('hello-world').addEventListener('hello-world-event', (e) => {
      console.log(e.detail.message))
    })
  </script>
</html>

It's that easy to create your own web component!

Of course, the combination of web components and HTML canvas offers endless possibilities. It's easy to imagine a collection of components that makes building and maintaining web applications truly modular.

Migrating web server from Ubuntu to FreeBSD

Hyena — Sun, 16 May 2021 13:05:49 +0000

Recently, I bought a second-hand HPE DL360e Gen 8 with the idea of trying to stop the EC2 instance where I host my personal website/online radio station.
First decision I had to take was the OS I would use. I tried to install Ubuntu Server unsuccessfully, so FreeBSD was my next option on the list.

According to the official FreeBSD page "FreeBSD is an operating system used to power modern servers, desktops, and embedded platforms." and "FreeBSD is an operating system for a variety of platforms which focuses on features, speed, and stability. It is derived from BSD, the version of UNIX® developed at the University of California, Berkeley. It is developed and maintained by a large community".

FreeBSD offers great documentation, all of it you can find in https://docs.freebsd.org/en/books/faq/. It has an amazing community hanging on https://forums.freebsd.org/ and IRC.

One of the main differences with a Linux OS is that Docker is not supported on FreeBSD but a great alternative is available, jails and the easy-to-use jails manager ezjail.

Those two approaches have some similarities on the surface, but are pretty much different once you start working with them.

We can consider both of them as containerization technologies. That means isolated processes from the host server. But FreeBSD's jails takes the concept further, since each jail has its own directory sub-tree (vs. Docker mounted volumes) and its own set of users and groups. That means is easy to create a jail, enable ssh, and a secure environment is created within the host.
On the other hand, Docker as standard is a fact, but keep in mind that these tools serve different purposes.

Ezjail makes the management of the jails a pretty easy job, see the "hello world" of it:

# Create a clone of the loopback interface
echo 'cloned_interfaces="lo1"' >> /etc/rc.conf
service netif cloneup
ezjail-admin create hello-world 'lo1|127.0.1.1'
# add dns nameserver for the jail
cp /etc/resolv.conf /usr/jails/hello-world/etc/
ezjail-admin start -f hello-world

In order to forward all the traffic from the jail through the external interface, we can use the FreeBSD packet filter:

ext_if="xn0"
jail_net="127.0.1.1"
nat pass on $ext_if from $jail_net to any -> $ext_if
pass out
pass in

Now, we can also redirect some of the host ports to the jails:

rdr pass on $ext_if inet proto { tcp, udp } from any to $ext_if_private_ip port 23 -> $jail_net port 22
rdr pass on $ext_if inet proto { tcp, udp } from any to $ext_if_private_ip port 81 -> $jail_net port 80

In addition we can use Nginx to configure a different domain for each jail:

events {
    worker_connections  4096;  ## Default: 1024
}

http {

    log_format upstreamlog '[$time_local] $remote_addr - $remote_user - $server_name $host to: $upstream_addr: $request $status upstream_response_time $upstream_response_time msec $msec request_time $request_time';

    access_log /var/log/nginx/access.log upstreamlog;

    include "servers/*.conf";

}

upstream example {
    server 127.0.1.1:443;
}

server {
    listen 80;
    server_name www.example.com example.com;
    return 301 https://$host$request_uri;
}

server{

    listen 443 ssl;
    server_name www.example.com example.com;
    ssl_certificate /home/ssl/example/fullchain.pem;
    ssl_certificate_key /home/ssl/example/privkey.pem;

    location / {
        proxy_pass https://example;
    }
}

In conclusion FreeBSD can offer a very nice alternative to Docker, running on a robust OS, with many good parts like the ZFS file system, its cleanliness and predictability, and the great documentation available.

Mini-mp3-player

Hyena — Sun, 10 Jan 2021 12:18:53 +0000

https://github.com/rafapaezbas/mini-mp3-player

What is mini-mp3-player?

Mini-mp3-player is a minimal, distracionless terminal mp3 player.

How do you use it?

First thing you have to do is compiling the source code. Mini-mp3-player is coded in C and uses SDL2 and Ncurses libreries.

The code and compilation has only been tested in a Ubuntu system, the followed step are:

apt-get install libsdl2-dev libsdl2-mixer-2.0-0 libncurses5-dev libncursesw5-dev && make install

Usage

Once the code has been compiled run:

sudo mini-mp3-player -c {path-to-music-collection}

This command will create or refresh a collection file used by mini-mp3-player.
If you already have a collection, only run:

sudo mini-mp3-player

Skip to next song pressing -n- or quit pressing -q-

Neal Stephenson's Cryptonomicon and Ordoemacs

Hyena — Sat, 19 Dec 2020 16:36:37 +0000

Ordoemacs.

What is Ordoemacs?

Ordoemacs is a fictional piece of software appearing in Neal Stephenson 1999 speculative fiction novel Cryptonomicon. In the book, Epiphyte is a corporation in the mission of creating a data haven. The members of Epiphyte use their own encryption software called Ordo (abbr. for "Novus ordo seclorum"), that was created by one of them. In addition, Randall "Randy" Lawrence Waterhouse uses a modified version of Emacs called Ordoemacs, decribed like this on the novel:

Returning to his seat, he fires up OrdoEmacs, which is a marvelously paranoid piece of software invented by John Cantrell. Emacs in its normal form is the hacker’s word processor, a text editor that offers little in the way of fancy formatting capabilities but does the basic job of editing plain text very well. Your normally cryptographically paranoid hacker would create files using Emacs and then encrypt them with Ordo later. But if you forget to encrypt them, or if your laptop gets stolen before you get a chance to, or your plane crashes and you die but your laptop is sieved out of the muck by baffled-but-dogged crash investigators and falls into the hands of federal authorities, your files can be read. For that matter it is possible even to find ghostly traces of old bits on a hard drive’s sectors even after the file has been overwritten with new data.
OrdoEmacs, on the other hand, works exactly like regular Emacs, except that it encrypts everything before writing it out to disk. At no time is plaintext ever laid down on a disk by OrdoEmacs—the only place it exists in its plain, readable form is in the pixels on the screen, and in the volatile RAM of the computer, whence it vanishes the moment power is shut down. Not only that, but it’s coupled to a screensaver that uses the little built-in CCD camera in the laptop to check to see if you are actually there. It can’t recognize your face, but it can tell whether or not a vaguely human-shaped form is sitting in front of it, and if that vaguely human-shaped form goes away, even for a fraction of a second, it will drop into a screen-saver that will blank the display and freeze the machine until such time as you type in a password, or biometrically verify your identity through voice recognition.

Basically Ordoemacs is able to do two things:

Encprypts every file before writing it to disk.
Is able to check if someone is actually in front of the computer, if not, the program will drop into a screen-saver until the owner logs in again.

What a fantastic idea! The concept is so well explained and original that is it makes de reader imagination fly. The author already saw the potencial of a camera attached to a computer for user indetification. Now, this part of the plot is based on the year 1997, 23 years later face recognition would also be totally posible!

Creating an Emacs minor mode for simuting Ordoemacs.

The flexibility of Emacs, allows to create a minor-mode (an optional mode that alters the functionality of Emacs) binded to a file extension, in this case ".ordo".
This minor mode will work for the first point mentioned before, with the help of Gnu Privacy Guard, it will encrypt and decrypt files only storing the plain content in RAM. Also, it will use an usb storage for saving the encryption key.

Installation:

Install gpg, openssl and emacs.
Mount the usb storage device in the folder /media/usb-drive:

mount /dev/sda /media/usb-drive

Generate random key:

openssl rand -base64 16 >> /media/usb-drive/passphrase.txt

Include minor mode in Emacs config.el:

(define-minor-mode ordoemacs-mode
  "Ordoemacs mode."
  :lighter "ordoemacs"
  (add-hook 'after-save-hook 'encrypt))

(defun encrypt ()
  "Encrypts the buffer and replaces file content"
  (let ((output-path "/dev/shm/w_temp"))
    (write-region nil nil output-path)
    (shell-command (concat "gpg --batch --passphrase-file /media/usb-drive/passphrase.txt -c " output-path))
    (shell-command (concat "rm " (buffer-file-name)))
    (shell-command (concat "mv /dev/shm/w_temp.gpg " (buffer-file-name)))
    (shell-command (concat "rm " output-path))))

(defun decrypt ()
  "Checks if file exists, if it does, decrypts it and inserts the content to the buffer."
  (when (file-exists-p (buffer-file-name))
    (let ((output-path "/dev/shm/temp"))
      (shell-command (concat "gpg --batch --passphrase-file /media/usb-drive/passphrase.txt -o " output-path " " (buffer-file-name)))
      (insert-file-contents output-path  nil nil nil t)
      (shell-command "rm /dev/shm/temp"))))

(defun enable-ordoemacs-mode ()
  "Enables ordoemacs mode and decrypts file."
  (progn
    (ordoemacs-mode +1)
    (decrypt)))

(defun disable-ordoemacs-mode ()
  "Disables ordo emacs mode."
  (progn
    (ordoemacs-mode 0)
    (remove-hook 'after-save-hook 'encrypt)))

;;; Every time a file is open, it enables or disables ordoemacs-mode
(add-hook 'find-file-hook
          (lambda ()
            (if (string= (file-name-extension buffer-file-name) "ordo")
              (enable-ordoemacs-mode)
              (disable-ordoemacs-mode))))

What is /dev/shm?

/dev/shm is a temporary that uses RAM normally functioning as a shared memory space for inter process communication.

Usage

Create a file with extension ".ordo". After save, the encrypt function will execute, encrypting the file using /dev/shm and storing the content in the buffer file location. In order to use it, the usb-storage must be mounted.

Some conclusions.

I am very impressed with the power of the Emacs editor. Without serious Lisp experience, in some hours I have been able to put together a pretty decent implementation of Ordoemacs.
On the other side, even though I see the power of Lisp, I cannot ignore how primitive the syntax is, making the language to difficult to use, at least from my perspective.
Neal Stephenson is one of the greatest of our time. His books a full of breaking concepts and the writing is just fenomenal, do not miss any of his books!

Github: https://github.com/rafapaezbas/ordoemacs

Sidecar pattern and Ursc

Hyena — Tue, 11 Aug 2020 17:39:41 +0000

Sidecar pattern

https://github.com/rafapaezbas/ursc

The sidecar pattern is a distrbuted single node application pattern where a side application is used to extend functionality of the main application. Ursc can keep track of registration and login of users for another application.

Ursc

Ursc is a containerized sidecar application that help on keeping registration and login of user for any application.

Ursc has a very simple API:

/user/register

curl -v -X POST -H "Content-Type: application/json"  -d '{"name":"name","password":"password"}'  localhost:8083/user/register

Returns 201 if user is created, if there is already a user with the same name, response is code 403.

/user/login

curl -v -X POST -H "Content-Type: application/json"  -d '{"name":"name","password":"password"}'  localhost:8080/user/login

Returns 200 and a signed JWT token if credentials are correct, otherwise response will be code 403.

/user/check

curl -i -H "Authorization: Basic eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJhYSIsImlhdCI6MTU5NzA3OTUwMCwiZXhwIjoxNTk3MDgzMTAwfQ.VCGsGjpAMEVUzQu2twamNUrbFeyjNECGjeq0nxlDlm1" -X GET localhost:8080/user/check

Check validity of the token sent in the Authorization header and returns 200 code with the name of user if the token is valid, if not response is 422.

Tutorial

If you want to deploy Ursc you also need a MongoDB instance. Make sure your database is up and running then have a look on the configuration file config.conf:

jwt_sign_secret=0123456
encryption_salt=0123456
mongodb_url=mongodb://mongodb:27017

Change the jwt signature and encryption salt to make your application saver. Then run init.sh, now you should have a Docker container running Ursc!

# Link mongodb container with alias "mongodb", expose application on port 8083
./init.sh -l mongodb:mongodb -p 8080

Cmus-analytics

Hyena — Thu, 30 Jul 2020 14:07:00 +0000

What is Cmus-analytics?

A small web application for data visualization extracted from a Cmus log file. Click on the example link and then import it.You will see something like this:

How can I get a Cmus log file?

Cmus is a very powerful music player with a lot possibilities. One of them is using a hook script for actions when the player status changes. With this script, you can create your own Cmus log file.

How do I set the script in Cmus?

First, you will have to modify the script (the one in the tools folder) in order to make it work in your computer. Change the path of the log file.

if [[ "$is_playing" = true ]] && [[ "$is_logging" = true ]]
then
    echo $entry >> {path_to_the_log_file}
fi

In Cmus use

:set status_display_program {path_to_the_script}

Can I use this code somehow?

Yes, of course! Please be so kind to do it. This application has been developed as a learning project of the Elm programing language. It also uses this awesome Elm linear charts library.

Tape-selecta Online Radio Station

Hyena — Thu, 19 Mar 2020 10:04:06 +0000

What is Tape-selecta?

Tape-selecta is a dockerized Icecast2 server together with Ezstream and Node.js that makes the perfect way to set up your own online radio station following just a few simple steps.

How does it work?

The setup is very simple:

Install Docker.
Copy your mp3 files into the music directory.
Run start.sh.
Check localhost:8000/mountpoint, your music should be streaming there!

The selector.sh

The selector.sh is the script that chooses what is the next file to be streamed. By default, the script just randomly picks the next file to be played. Have a look at the code:

#pick a random mp3 file under /home/music
song=$(find /home/music -name *.mp3 | shuf -n 1);
#write mp3 tag information to status.json
mp3info -p '{"title": "%t","artist": "%a" ,"category": "'${genre}'"}' "$song" > /home/info.json
#echo the info
echo $song;

Configuration

Before running your online radio station, it is important to make some security changes to the configuration of the Icecast2 server. Change the content of the file icecast-config/icecast.xml:

<authentication>
    <!-- Sources log in with username 'source' -->
    <source-password>password</source-password>
    <!-- Relays log in with username 'relay' -->
    <relay-password>password</relay-password>

    <!-- Admin logs in with the username given below -->
    <admin-user>admin</admin-user>
    <admin-password>password</admin-password>
  </authentication>

After this change the content of the ezstream-config/ezstream_mp3.xml file to match the password choosen for the Icecast2 admin user.

<sourcepassword>password</sourcepassword>

There are some other configuration options in both xml files please check the Icecast documentation page and Ezstream documentation page to know more on the subject.

Front end

The code of the project includes an Express/Node.js server, ready to the static files included in the web/public directory.
Futhermore, it is possible to retrieve the information of the current track playing in the endpoint localhost/status, the information can be useful in case we want to show information of the track provided by the mp3 tags of the file.

Next steps

If you setup your own radio station, please let me know! It would be great to have a community of self hosted stations and get to know your ideas for it.