DEV Community: Andrés Baamonde Lozano

BTC onchain analysis (Redis Hackathon)

Andrés Baamonde Lozano — Sun, 21 Aug 2022 13:48:51 +0000

Overview of My Submission

As we all know, bitcoin works like a ledger whose updates or insertions are approved between the participating nodes in the block chain (how it works). This allows us to see the chain of blocks in real time and analyze this chain backwards.

In this application, only the forward block chain will be analyzed. This decision was made because the software is conceived as a toy application to exemplify the use of a technology (redis stack) and not as a final product.

The application will analyze the blockchain, the interactions between wallets and the price of bitcoin in real time. This will be done getting data of the following APIs:

We will provide a tiny SPA to see the processed information but is not the main purpose of the project.

Submission Category:

Microservice Mavens

Video Explainer of My Project

Language Used

Python, Javascript.

Link to Code

mandrewcito / RedisxDEVHackathon

RedisxDEVHackathon tiny btc onchain analysis

Project that queries BTC chain and discover interactions between wallets, trending wallets.

Architecture

Dashboard

Wallet detail

Overview video (Optional)

Here's a short video that explains the project and how it uses Redis:

[Insert your own video here, and remove the one below]

How it works

The application has as its central point the redis stack.

Two nodes (market and chain) provide information through the pub/sub and the redis cache. Graph, stats, stream and topk simply process what comes through the pub/sub, update the information in redis and expose it through an API.

Graph maintains a database where each node is a wallet and the edges are the transactions between wallets.
Stats maintains the information related to quotes and the number of transactions per minute and btc per minute.
Topk maintains a list of the wallets that appear the most on the blockchain I'm sending and…

View on GitHub

Additional Resources / Info

Architecture

Data ingest

Here we will comment on the functions of the services that ingest data and those entered in our system.

Market

Checks the kraken.com API periodically updates the price of btc in euros and dollars.
Update that price in the redis cache and post an event to let you know that price has been updated.

Outputs: Redis commands

Redis cache set market:cache:USD, market:cache:EUR.

Redis publish market:update

SET market:cache:USD {...}
PUBLISH market:update {....}

We can check cache value stored with redis insight:

Chain

Connects to the blochain.com websocket to retrieve bitcoin transactions

At this point a technical decision was made, being an example of a toy, we filter transactions less than one bitcoin so as not to have storage problems in the development of the app.

For each transaction, it calculates its value in eur/usd (consulting the cache) and publishes an event with the transaction information and the value in FIAT currency.

Outputs: Redis commands

Redis publish transactions:new

PUBLISH transactions:new "{...}"

Data processing

These nodes listen for events from the ingest nodes and process the information that comes to them. Each node is responsible for specific processing and exposing the data through an API.

Graph (Graph redis)

The responsibility of this node is to see the transactions between wallets, for this we use the redis graph database, so for each transaction we will create a node (if it does not exist) for the sender and receiver of the transaction, we will also create an edge with the transaction value.

Inputs: Redis commands

Redis suscribe transactions:new

Outputs: Redis commands

Redis graph wallets:graph

# Search for node

GRAPH.QUERY wallets:graph "CYPHER address=\"bc1q7cyrfmck2ffu2ud3rn5l5a8yv6f0chkp0zpemf\" MATCH (source:wallet {address:$address}) return source" 

# Create node
GRAPH.QUERY wallets:graph "CREATE (asotepwxth:wallet{address:\"bc1qrjkw3d0pfuklk8vd45xr78xfgdf0w396k3wavu\"})"
# Create edge
GRAPH.QUERY wallets:graph "CYPHER source=\"bc1q7cyrfmck2ffu2ud3rn5l5a8yv6f0chkp0zpemf\" destination=\"bc1qrjkw3d0pfuklk8vd45xr78xfgdf0w396k3wavu\" hash=\"a530a08e3baa1085b8fb07875467c95a6c51437ebe097f0022b2dd074033bd4f\" amount=8.92932302 MATCH (source:wallet {address:$source}) MATCH (destination:wallet {address:$destination}) CREATE (source)-[t:transaction {amount:$amount, hash:$hash}]->(destination)" "

With the following query we can see all nodes on the redis graph database.

TopK (TopK redis)

The responsibility of this node is to have a list with the top of the wallets that appear the most to see the wallets with the most activity (both sending and receiving btc), which should give us a list with wallets from SCAMs, exchanges... etc.

*Inputs: * Redis commands

Redis suscribe transactions:new

*Outputs: * Redis commands

Redis topK add topk:wallets:senders

Redis topK add topk:wallets:receivers

Redis publish topk:updated

TOPK.ADD topk:wallets:senders "bc1q7cyrfmck2ffu2ud3rn5l5a8yv6f0chkp0zpemf"

PUBLISH topk:updated "{\"senders\": [\"1GQdrgqAbkeEPUef1UpiTc4X...}"

Stats (Time series redis)

This as a responsibility to maintain the real-time statistics of the btc.
It will give us the real-time evolution of:

The volume of transactions per minute (blockhain.com).
The volume of btc per minute (blockchain.com).
The quote of the btc (with the info of kraken).

Inputs: Redis commands

Redis suscribe transactions:new

Redis suscribe market:update

Outputs: Redis commands

Redis timeseries add transactions:series:btc (btc per minute)

Redis timeseries add transactions:series:tx (transactions per minute)

Redis timeseries add btc:[USD|EUR]:bars:[close|high|low|open] (Stock)

TS.ADD transactions:series:btc "1661074336000" "8.92932302"
TS.ADD transactions:series:tx "1661074336000" "1"

TS.ADD btc:usd:bars:close "1661074356000" "21424.3"

Stream

This node will listen for redis pub/sub posts and relay them over a websocket to the presentation layer of our software.

*Inputs: * Redis commands

Redis suscribe transactions:new

Redis suscribe market:update

Frontend

SPA

React spa which will query an nginx that balances requests depending on the URL.

NGINX

API that exposes the application, redirect requests to each ingest node depending on the urls and the root address of the SPA.

Application overview

Dashboard

This pages provides a information of:

Btc quote (provided by redis cache)
Graphs of BTC/transaction volume per minute (provided by redis time series)
Real-time transactions (provided by redis pub/sub)

As an alternate view, dashboard could show incoming BTC transactions as a graph, the result would be something like this:

Top wallets

Wallets with more transactions (Provided by redis TopK)

Wallet detail

Graph with btc transactions (provided by redis graph)
information about the wallet (provided by blockchain api and cached)
Reports to the wallet (future work iframe consult an api and redis search)

Stock

Time series info from stock data provided by kraken and hosted in time series redis.

References

Redis

Backend

Frontend

Collaborators

mandrewcito

Future work

Perform wallet info obtanied from bitcoin abuse with Redis search

Check out Redis OM, client libraries for working with Redis as a multi-model database.
Use RedisInsight to visualize your data in Redis.
Sign up for a free Redis database.

Crear y flashear tu propio keymap con QMK firmware

Andrés Baamonde Lozano — Sun, 09 May 2021 21:37:30 +0000

Hace unos meses compré un teclado dividido para mejorar la postura a la hora de escribir. La verdad es que la experiencia me gustó mucho. A pesar de que el cambio fue muy grande (mi teclado es un corne keyboard, por lo que es ortogonal) me acostumbré muy rápido.

Para el no que sepa de la existencia de los teclados divididos, aquí dejo un git donde se pueden ver la multitud de teclados divididos que existen. Es un mundo gigante y, a modo de advertencia, digo que de ahí no se sale. Engancha muchísimo :D

Por dar un poco de contexto, para montarte un teclado de este tipo necesitas comprar todas las piezas (los hay ya montados):

Cableado
Placas
Switches
Keycaps

Esto mínimo. Después, casi todos llevan pantallas oled, LEDs si son retroiluminados, escoger el switch que más te guste... un sin fin de posibilidades. No estamos aquí para hablar de eso, así que os dejo un par de enlaces de canales que sigo que os darán una idea:

Hola Mundo Me encanta este canal:D.
Nate Gentile

El problema

Bien, supongamos que ya tienes tu teclado nuevo montado. Probablemente los micros que trae ya vengan con un mapeo de las teclas ya flasheado, pero ese keymap estará en inglés. Ojo, esto no está mal en absoluto, de hecho, para programar a mi me resulta súper cómodo. Mi problema radica al cambiar de PC.

Cuando utilizo el ordenador de otra persona, mi portátil o el portátil de la empresa no doy una :( por que estoy acostumbrado a estar con el idioma de entrada en inglés. Así que, si necesito trabajar en otro, necesito andar instalando los paquetes de idioma y a ver, esto práctico práctico no es.

Entonces en estas estamos, con el teclado en inglés y queriendo escribir con el idioma de entrada en español. La solución sería fácil. Me busco un teclado en español y lo flasheo con la qmk toolbox. No encontre ninguna configuración en español para mi teclado, será que no se buscar :(.

Lo que podría pasar como solución

Una solución que a mi no me resultó por lo de andar instalando los layout sería crear el tuyo propio. Lo de que no me servía me di cuenta una vez ya tenia todo hecho y funcionando por lo que os dejo una pequeña información de como lo hice.

Utilicé la herramienta de windows, lo cierto es que es sencilla, simplemente de creas tu layout ejecutas la herramienta y hace un .exe que puedes instalar en cualquier PC, después simplemente tendrías que cambiar el idioma de entrada.

La solución real

Necesitaba tres cosas:

No instalar nada cada vez que enchufaba el teclado.
Trabajar con el idioma de entrada(layout) en español.
Tener acceso fácil a los símbolos para programar.

Podía buscar cualquier keymap en el repositorio de qmk firmware y luego flashearlo en el teclado. Esto, sería lo más rápido, de hecho si quería una configuración concreta podía acudir a la página, configurar el teclado con una herramienta web y ya flashearlo. El único problema es que no tenía teclados es español, pero primero probar que la toolbox funciona.

Flashear un .hex en el teclado

Tremendamente sencillo, tan soló es cargar el archivo en la aplicación, que se puede descargar aquí. Resetear el teclado y pinchar en flash:

El camino "largo", crear y compilar tu propio keymap.

Para crear tu propio keymap lo más sencillo es copiar uno existente y modificarlo, pero para eso primero tenemos que instalar el entorno para poder desarrollar, en este caso estoy en el wsl de windows:

Setup

git clone https://github.com/qmk/qmk_firmware.git
cd qmk_firmware/
python3.9  -m venv venv
source venv/bin/activate
pip3 install qmk
qmk setup

Después con la siguiente línea puedes compilar un teclado en concreto, en este caso el crkbd con el keymap default:

qmk compile -kb crkbd/rev1 -km default

Este comando generará un .hex en la carpeta actual.

Los ficheros del keymap

> tree keyboards/crkbd/keymaps/mandrewcito/
keyboards/crkbd/keymaps/mandrewcito/
├── config.h
├── keymap.c
└── rules.mk

Esto es un copia de otro teclado, para así simplemente editar las teclas concretas a mapear, pero ¿que teclas y comó? Dependerá del teclado que tengas en mi caso eran las ISO inglesas a las ISO españolas, la distribución también puede ser ANSI, para una diferencia rápida, dejo la siguiente imagen:

¿Cómo localizar las teclas que faltan? Bajo la carpeta /quantum/keymap_extras están todos los keymaps mapeados del ISO en inglés a otros idiomas y nosotros utilizamos el keymap_spanish.h aquí podemos ver todas teclas y utilizar sólo la que nos faltan. Para el resto te teclas se pueden buscar en los ficheros de cabeceras o la solución fácil es utilizar la página de qmk de configurar teclados y ver el código:

Ahora simplemente necesitamos editar el keymap.c pero antes enseño una vista previa del keymap_spanish.h para que se vea cómo localizar las teclas:

// clang-format off

/*
 * ┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───────┐
 * │ º │ 1 │ 2 │ 3 │ 4 │ 5 │ 6 │ 7 │ 8 │ 9 │ 0 │ ' │ ¡ │       │
 * ├───┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─────┤
 * │     │ Q │ W │ E │ R │ T │ Y │ U │ I │ O │ P │ ` │ + │     │
 * ├─────┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┐    │
 * │      │ A │ S │ D │ F │ G │ H │ J │ K │ L │ Ñ │ ´ │ Ç │    │
 * ├────┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴───┴────┤
 * │    │ < │ Z │ X │ C │ V │ B │ N │ M │ , │ . │ - │          │
 * ├────┼───┴┬──┴─┬─┴───┴───┴───┴───┴───┴──┬┴───┼───┴┬────┬────┤
 * │    │    │    │                        │    │    │    │    │
 * └────┴────┴────┴────────────────────────┴────┴────┴────┴────┘
 */
// Row 1
#define ES_MORD KC_GRV  // º 
#define ES_1    KC_1    // 1
#define ES_2    KC_2    // 2
#define ES_3    KC_3    // 3
#define ES_4    KC_4    // 4
#define ES_5    KC_5    // 5
#define ES_6    KC_6    // 6
#define ES_7    KC_7    // 7
#define ES_8    KC_8    // 8
#define ES_9    KC_9    // 9
#define ES_0    KC_0    // 0
#define ES_QUOT KC_MINS // '
#define ES_IEXL KC_EQL  // ¡

Incluyendo este keymap_spanish.h en nuestro keymap.c podemos utilizar estas constantes para remapear las capas del teclado. Dejo un enlace a mi keymap.c aquí por si os es de utilidad, puedo dejar también el .hex si alguien lo pide, pero considero que la configuración de las teclas es algo bastante personal, debes de hacer muchas pruebas antes de quedarte con una distribución:

#include QMK_KEYBOARD_H
#include "version.h"
#include "keymap_spanish.h"
// ......

La diferencia con otros keymaps, radica en que yo la mayoría de símbolos los tengo en una capa diferente. Así, de alguna manera palio la falta de teclas que tiene el corne:

Dejo aquí el enlace al fork que hice para añadir mi teclado, en concreto al commit donde subo los ficheros necesarios para compilar mi keymap. Compilarlo sería algo
así:

qmk compile -kb crkbd/rev1 -km mandrewcito

Después solo sería flashear el archivo que se genera y listo.

La verdad es que no se si esto será de mucha utilidad, no es algo que sea extremadamente difícil pero a mi me llevo un ratín configurar todo y pasé por varios modelos fallidos. Así que si esto le sirve a alguien para no perder tanto tiempo como yo pues genial.

Cualquier pregunta me la dejáis por aquí :D

PD: Este post, y el keymap de mi teclado lo iré actualizando si encuentro alguna cosa más que vea que es de utilidad.

SignalR core python client (VIII): MessagePack

Andrés Baamonde Lozano — Sun, 15 Nov 2020 22:30:02 +0000

I had been with this pending task about a year, and a month ago i decided to implement message pack on library pushed by an issue on github´s library. These was my original plans, but i´ve been procrastinating it to this weekend.

As it can read on title, my implementation was SignalR message pack protocol. First i need to be thankful to the user @ Apollo3zehn on git. That implementation helped me a lot!. If you want see implementation details you can check library´s github. There is also the @Apollo3zehn´s fork, the links are below.

The example

The example will be the most simple, a chat. I don't want to make something too long because i have wrote a lot of examples in my library´s examples or previous posts.

Server configuration

This configuration is only for message pack. A full example can be found here.

CSPROJ

Add signalr message pack dependency

    <PackageReference Include="Microsoft.AspNetCore.SignalR.Protocols.MessagePack" Version="3.1.4" />

Startup.cs

public void ConfigureServices(IServiceCollection services)
{
    /// ...
    services
        .AddSignalR()
        .AddMessagePackProtocol();
    /// ...
        }

Python client configuration

Python client syntax is like javascript´s signalr client. This example is an interactive chat (like MS examples). If you have worked with library the only thing you must add to builder config is the following

from signalrcore.protocol.messagepack_protocol import MessagePackHubProtocol

  # 
hub_connection = HubConnectionBuilder()\
  # ...
  .with_hub_protocol(MessagePackHubProtocol())
  # ... builder config

A full working example is avaible here

Links

Thank you for reading, and write any thought below :D

JSON to python object

Andrés Baamonde Lozano — Wed, 11 Nov 2020 22:20:23 +0000

This is a very fast how-to encode and decode python objects to json.

For decoding we will use the parameter object_hook. With it, we can pass a function to the json.loads function.
For encoding we will use a Custom JSON encoder.

Mapping incoming object with standard library

import json
my_json_str = '{"name":"John", "age":31, "city":"New York"}'
my_dict_json = json.loads(my_json_str)
print(my_json_str)
# output: {"name":"John", "age":31, "city":"New York"}

Now, with a dictionary we have different approaches for making the object mapping

Mapping approach with dict and constructor´s parameters

class MyObject(object):
    def __init__(self, age:int, city:str, name:str):
        self.name = name
        self.age = age
        self.city = city

    def __repr__(self):
        return f"{self.name} {self.age} {self.city}"

my_obj = json.loads(my_json_str, object_hook=lambda data: MyObject(**data))

print(my_obj)

# output: John 31 New York

Decode class with a Custom encoder

class CustomJSONEncoder(json.JSONEncoder):
    def default(self, obj):
        if issubclass(type(obj), MyObject):
            return json.dumps(obj.__dict__, default=lambda _: None)
        return json.JSONEncoder.default(self, obj)     

obj_str = json.dumps(my_obj, default=CustomJSONEncoder().default)
print(obj_str)
#output: "{\"name\": \"John\", \"age\": 31, \"city\": \"New York\"}"

Mapping approach with NamedTuple

from typing import NamedTuple

class MyObjectTuple(NamedTuple):
    name:str
    city:str
    age:int

my_obj = json.loads(my_json_str, object_hook=lambda data: MyObjectTuple(**data))

print(my_obj)
# output: MyObjectTuple(name='John', city='New York', age=31)
print((my_obj)._asdict())
# output: {'name': 'John', 'city': 'New York', 'age': 31}

Decode class without custom encoder

obj_str = json.dumps(my_obj._asdict())
print(obj_str)
# output: {"name": "John", "city": "New York", "age": 31}

Do you any other method to object decode/encode? Do you think that it can be done better?. Leave your thoughts below, feedback is always welcomed :)

VueJS: Double range slider component

Andrés Baamonde Lozano — Sat, 09 May 2020 15:28:17 +0000

Yesterday i built an advanced search component. For that component, we needed to implement a range search between two numbers. I didnt need something really complex and i had no plans to add a new library to the project. After a couple dumb searches like ' range slider double' and 'doublerange slinder'. I found this amazing codepen. So frist the acknowledgments, if you are reading that post, Thank you Kristof Friess.

This guy has a cool codepen with vanilla JS of that i was looking for, and it works perfectly :)

So today i will create a vue component based in that codepen and make a small contribution.

First, i will move the javascript code to a independt file, called ZbRangeSlider.js, and i will import it to my component. On the following steps i would like to migrate code to the component. But as a first aprroach it will work .And also, having the code on a different file enables us to use another double range implementation. We only will need changing our import and adapting html.

I will use $emit to update my model parameters. I am not happy at all with that solution, if you know a better one please leave a comment below.

Implementation

<template>
<div class="content">
  <div id="my-slider" :se-min="minThreshold" :se-step="step" :se-min-value="min" :se-max-value="max" :se-max="maxThreshold" class="slider">
    <div class="slider-touch-left">
      <span></span>
    </div>
    <div class="slider-touch-right">
      <span></span>
    </div>
    <div class="slider-line">
      <span></span>
    </div>
  </div>
</div>
</template>

<script>
import ZbRangeSlider from './ZbRangeSlider'

export default {
  props: {
    minThreshold: {
      type: Number,
      default: -100
    },
    maxThreshold: {
      type: Number,
      default: 100
    },
    step: {
      type: Number,
      default: 1
    },
    min: {
      type: Number,
      required: true
    },
    max: {
      type: Number,
      required: true
    }
  },
  data: function () {
    return {
      instance: undefined
    }
  },
  mounted: function () {
    this.instance = new ZbRangeSlider('my-slider')
    this.instance.onChange = (min, max) => this.updateValues(min, max)
  },
  destroyed: function () {

  },
  methods: {
    updateValues: function (min, max) {
      this.$emit('update:min', min)
      this.$emit('update:max', max)
    }
  }
}
</script>

<style>
.slider {
  display: block;
  position: relative;
  height: 36px;
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.slider .slider-touch-left,
.slider .slider-touch-right {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  position: absolute;
  height: 36px;
  width: 36px;
  padding: 6px;
  z-index: 2;
}
.slider .slider-touch-left span,
.slider .slider-touch-right span {
  display: block;
  width: 100%;
  height: 100%;
  background: #f0f0f0;
  border: 1px solid #a4a4a4;
  border-radius: 50%;
}
.slider .slider-line {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  width: calc(100% - 36px);
  left: 18px;
  top: 16px;
  height: 4px;
  border-radius: 4px;
  background: #f0f0f0;
  z-index: 0;
  overflow: hidden;
}
.slider .slider-line span {
  display: block;
  height: 100%;
  width: 0%;
  background: orange;
}
</style>

Using the component

On the component´s demo i will add some inputs to see the value change event.

<template>
  <DoubleRangeSlider :min="min" :max="max" @update:min="value => min = value" @update:max="value => max = value"></DoubleRangeSlider>
</template>

    <label>Min</label><input type="text" v-model="min">
    <label>Max</label><input type="text" v-model="max">
<script>

import RatingComponent from '@/components/shared/rating/stars'
import ScrollTopArrow from '@/components/shared/blog/ScrollTopArrow'
import DoubleRangeSlider from '@/components/shared/slider/DoubleRangeSlider'

export default {
  data () {
    return {
      min: 0,
      max: 10
    }
  },
  components: {
    DoubleRangeSlider
  },
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

Result

References

Github
CodePen
zebresel Code Pen
StackOverflow - jquery ui :S
Multiple bindings

VueJS: Scroll top component

Andrés Baamonde Lozano — Fri, 24 Apr 2020 20:40:09 +0000

To start my weekend i have decided code a customizable scroll top component, component will be implemented with vue slots. Slots will allow us to passing any kind of html element to the component.

Component implementation

We will bind to scroll event and check Y axis scroll, this will allow us to hide/show compoment depending on the scroll of the page.

Next, we will make a function that scroll to top of the page step by step and make an simple animation.

Scroll top component

<template>
    <a @click="scrollTop" v-show="visible" class="bottom-right">
        <slot></slot>
    </a>
</template>

<script>
export default {
  data () {
    return {
      visible: false
    }
  },
  methods: {
    scrollTop: function () {
      this.intervalId = setInterval(() => {
        if (window.pageYOffset === 0) {
          clearInterval(this.intervalId)
        }
        window.scroll(0, window.pageYOffset - 50)
      }, 20)
    },
    scrollListener: function (e) {
      this.visible = window.scrollY > 150
    }
  },
  mounted: function () {
    window.addEventListener('scroll', this.scrollListener)
  },
  beforeDestroy: function () {
    window.removeEventListener('scroll', this.scrollListener)
  }
}
</script>

<style scoped>
.bottom-right {
  position: fixed;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
}
</style>

Scroll top arrow

Now, with a generic component we will implement a new one: we will use font awesome icon and a simple css styles.

<template>
  <ScrollTopComponent>
      <a class="btn btn-light">
        <font-awesome-icon :icon="['fas', 'angle-double-up']" size="3x" />
      </a>
  </ScrollTopComponent>
</template>

<script>
import ScrollTopComponent from './ScrollTopComponent'
export default {
  components: {
    ScrollTopComponent
  }
}
</script>

<style>
.btn {
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.55);
    padding-top: 27px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
}
</style>

Use

The component using is quite simple, we only need to place component on the DOM.

<template>
    <div class="container">
        <p>A super long component</p>
        <ScrollTopArrow></ScrollTopArrow>
    </div>
</template>
<script>
import ScrollTopArrow from '@/components/shared/blog/ScrollTopArrow'
export default {
  components: {
    ScrollTopArrow
  }
}
</script>

Result

Now when we are on top of the page component is hidden but when we scroll component shows up, you can see component ´s implementation on my github.

References

Github
vue font awesome

Looking for Proverbs websites and APIs

Andrés Baamonde Lozano — Fri, 17 Apr 2020 23:10:25 +0000

Proverbs are something very characteristic across regions among the world, every proverb has a huge component of popular culture. People knows proverbs of their region but, probably igonres proverbs of a nearby region despite of they are on the same language. This is my main reason why i started building this app. Retrieving and preserving the maximum number of proverbs possible of any language and region, and help a bit sharing this part of popular culture.

I started a few months ago with a toy. I built a telegram bot which shares Galician proverbs(my native language). It has 2 main functions:

A subscription (sends you a random proverb each day).

A inline search to send on chats proverbs.

Telegram bot was built with pyTelegramBotAPI a quite simple library. I strongly redommend it if you want to quick setup a python bot.

The project

So, my idea is storing proverbs and share it citing the original source. As a second iteration of the project i would like to make a form wich enable to anyone send proverbs to my database and mark it as a draft. But before runing we need to walk, the PVM is the website wich only shows the proverbs. Because the bot i built months ago can be integrated easily with other languages/databases, so in this point there is no much work to do.

Of course, i am a developer. All the proverbs that i will be retrieving and indexing i will be exposed it via API, so anyone can integrate other apps on it. Code will be open source, i will publish it in my Github. But firstly i would like to publish web with a few of websites retrieved and indexed.

Why i´m asking for help ?

Simple, i know proverbs websites on my native languages (Galician, spanish). But on other languages i dont.

Do you known a cool site with proverbs i can query/scrap/API in your respectives native languages? A website that you can query, in which I do not break any law: P

Some questions/ feedback

What do you think about this project, do you consider it usefull ?
Do you consider usefull the website that i previously describe ?
and finally, what do you think about the bot?

Thank you for reading me! :D

VueJS: Rating component with stars

Andrés Baamonde Lozano — Fri, 10 Apr 2020 14:48:15 +0000

Today i will implement amazon rating component, i will build it with vue and font awesome. but it can be done with any library with icons with stars filled, half filled and empty.

Component implementation

Componnent will be very simple, we call it with 2 params. Number total of points(max stars) and the score(value of stars). With this parameters our component will draw the number of star filled, partialy filled and empty.

Previously to the implementation, we will need passing a number to a array of numbers in javascript. There are a lot of implementations i only show 2. There are a lot of posts talking about this.

Making an array from a number

I´m currently using the following function

const range = (start, end, length = end - start + 1) =>
  Array.from({ length }, (_, i) => start + i)

range(0, 5)
// [0, 1, 2, 3, 4]

but the following function can be used too:

[...Array(5).keys()]
// [0, 1, 2, 3, 4]

both functions will create an of number of a specified lenght.

Component

Now i will code component with font awesome components, but on the next section i will decouple component from library.

<template>
  <div class="rating-container">
      <font-awesome-icon icon="star"  v-for="idx in completeRange" v-bind:key="idx + 'st'" />
      <font-awesome-icon :icon="['fas', 'star-half-alt']"  v-for="idx in halfRange" v-bind:key="idx + 'stt'" />
      <font-awesome-icon :icon="['far', 'star']"  v-for="idx in totalRange" v-bind:key="idx" />
  </div>
</template>

<script>
const range = (start, end, length = end - start + 1) =>
  Array.from({ length }, (_, i) => start + i)

export default {
  name: 'RatingComponent',
  props: {
    value: Number,
    total: Number
  },
  data () {
    return {
      completeRange: range(0, this.value - 1),
      halfRange: range(0, this.value % 1 === 0 ? 0 : 1),
      totalRange: range(0, this.total - this.value)
    }
  },
  created: function () {
    if (this.value > this.total) {
      throw new Error('total lower than value')
    }
  }
}
</script>

<style scoped>
.rating-container {
  display:flex;
  justify-content: center;
}
</style>

How to use

<template>
    <RatingComponent :value=5 :total=10></RatingComponent>
    <RatingComponent :value=3.5 :total=5></RatingComponent>
</template>
<script>
import RatingComponent from '@/components/shared/rating/stars'
export default {
  components: {
    RatingComponent
  }
}
</script>

Refactoring component, decoupling from font awesome

On the refactoring we will face to a big problem, we cant iterate slots. we need wrap it with another element

Component

<template>
  <div class="rating-container">
      <slot name="filled" v-bind="!!idx|| null" v-for="idx in completeRange" />
      <slot name="half" v-bind="!!idx|| null"  v-for="idx in halfRange" />
      <slot name="empty" v-bind="!!idx|| null"  v-for="idx in totalRange" />
  </div>
</template>

<script>
const range = (start, end, length = end - start + 1) =>
  Array.from({ length }, (_, i) => start + i)

export default {
  name: 'RatingDecoupledComponent',
  props: {
    value: Number,
    total: Number
  },
  data () {
    return {
      completeRange: range(0, this.value - 1),
      halfRange: range(0, this.value % 1 === 0 ? 0 : 1),
      totalRange: range(0, this.total - this.value)
    }
  },
  created: function () {
    if (this.value > this.total) {
      throw new Error('total lower than value')
    }
  }
}
</script>

How to use

<template>
    <RatingDecoupledComponent :value=3.5 :total=5>
        <font-awesome-icon  slot="filled" icon="star" />
        <font-awesome-icon slot="half" :icon="['fas', 'star-half-alt']" />
        <font-awesome-icon  slot="empty" :icon="['far', 'star']" />
    </RatingDecoupledComponent>
</template>

<script>
import RatingDecoupledComponent from '@/components/shared/rating/StarsDecoupled'
export default {
  components: {
    RatingDecoupledComponent
  }
}
</script>

Result

Example component will look like this:

Despite of decoupling components from libraries is a good choice, changing icons library is something that i dint't do ofendly. But this is a implementation that i did only for fun .With the porpuse of taking a look to implementation, and check if it is usable. But in my opinion doesnt make sense on a application. I prefer simpler components.

References

Github
vue font awesome

Serilog Configuration in aspnet core

Andrés Baamonde Lozano — Sun, 05 Apr 2020 20:01:20 +0000

On the previous post we fully configurate a serilog on a console application, one of the advantages of defining configuration on a json file, is that we can migrate configuration only copiying the file.

Create the project

mkdir AspnetcoreSerilog
cd AspnetcoreSerilog
dotnet run webapi

Now, we copy serilog config from our previous appsettings file and add dependencies to our new csproj and restore:

  <PackageReference Include="Serilog.AspNetCore" Version="3.2.0" />
  <PackageReference Include="Serilog.Settings.Configuration" Version="3.1.0" />
  <PackageReference Include="Serilog.Enrichers.Thread" Version="3.1.0" />
  <PackageReference Include="Serilog.Sinks.File" Version="4.1.0" />
  <PackageReference Include="Serilog.Sinks.Console" Version="3.1.1" />
  <PackageReference Include="Serilog.Filters.Expressions" Version="2.1.0" />
  <PackageReference Include="Serilog.Sinks.RollingFile" Version="3.3.0" />

Modify your program.cs file, add to CreateHostbuilder the function use serilog call.

        public static IHostBuilder CreateHostBuilder(string[] args) =>
            Host.CreateDefaultBuilder(args)
                .UseSerilog((hostingContext, loggerConfiguration) => loggerConfiguration
                    .ReadFrom.Configuration(hostingContext.Configuration))
                .ConfigureWebHostDefaults(webBuilder =>
                {
                    webBuilder.UseStartup<Startup>();
                });
    }

Now we continue host configuration modifications: Enable request logging modifying Startup.cs

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseSerilogRequestLogging();

            app.UseHttpsRedirection();
            /* ** file continues  ** */
        }

On the previous post i described the filter expressions functionality. This time we will use expressions to send log messages to differente files, in particular depending on it http method.

For doing this we need a few things. First i will destructure Http Request and then i will filter with a expression depending on the http method.

{
    "Destructure": [
      {
        "Name": "ByTransformingWhere",
        "Args": {
          "predicate": "t => typeof(HttpRequest).Equals(t)",
          "transformedType": "HttpRequest",
          "transformation": "a => new { RawUrl = a.RawUrl, Method = a.Method }"
        }
      }
    ],
}

{
           "Filter": [
              {
                "Name": "ByIncludingOnly",
                "Args": {
                  "expression": "Method = 'POST'"
                }
              }
            ]
}

Now we will see on console log all logs, and http post calls in his respective file.

My example includes GET and POST filter with two subloggers, you can check http file on my github repo see references below.

References

AspnetSerilog repository (this example)
desctructure
web classic enrich
filter expressions
destructure transforming

Playing with serilog and dotnetcore

Andrés Baamonde Lozano — Sat, 04 Apr 2020 22:59:55 +0000

Logging it's a must on any application. Making a simmilitude with the journalism when a event appears on our application, we need to answer some questions before writing it This is not strict at all but that i try to say is that an event alone means nothing, we need enrich it with some context. With that a log line will be more usefull:

Who: Method that generates our event.
What: Kind of event.
Where: Context of event, class, request ...
When: Timestamp of the event.
Why: Inner exception, data asociated to the event ...

And one thing that i concider very usefull wich is very personal, is that we need wrapping with quotes all parameter that we log, becouse there is a huge difference between this two log lines:

12-12-1988 Warning query paramters id = 12341

12-12-1988 Warning query paramters id = '12341    '

Setup application

I will start with something very simple. The simplest app is a console application, so we create a folder and open a terminal on the folder.

dotnet new console

Add serilog to our csproj and restore packages

<ItemGroup>
  <PackageReference Include="Serilog.AspNetCore" Version="3.2.0" />
</ItemGroup>

dotnet restore

My first log

Using serilog is very simple, so next snippet is a fast configuration, you can fount it on the serilog github doc. Let's modify our program.cs


namespace AspnetcoreSerilog
{
    class Program
    {
        static void Main(string[] args)
        {  
            Log.Logger = new LoggerConfiguration()
                .MinimumLevel.Debug()
                .MinimumLevel.Override("Microsoft", LogEventLevel.Information)
                .WriteTo.Console()
                .CreateLogger();
            Log.Information("Hello world!");
        }
    }
}

Output of the previous program:

PS D:\Workspace\dev.to\AspnetcoreSerilog> dotnet run
[23:21:53 INF] Hello world!

Configure via appsettings.json

Ok, but serilog's configuration will grow a lot. In a real world app we want a log with a lot of features, subloggers... and if we need changing a configuration section we will need recompile library, we dont want that.

So lets introduce the package serilog-configuration. As a dependency, we will need adding some packages.Reading configuration from a json file can be easly done with microsoft extensions this post may be helpfull. I directly add new dependencies to our csproj:

  <ItemGroup>
    <PackageReference Include="Serilog.AspNetCore" Version="3.2.0" />
    <PackageReference Include="Serilog.Settings.Configuration" Version="3.1.0" />
    <PackageReference Include="Microsoft.Extensions.Configuration" Version="3.1.3" />
    <PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="3.1.3" />
    <PackageReference Include="Microsoft.Extensions.Configuration.CommandLine" Version="3.1.3" />
    <PackageReference Include="Microsoft.Extensions.Configuration.EnvironmentVariables " Version="3.1.3" />
  </ItemGroup>
  <ItemGroup>
      <None Update="appsettings.json" CopyToOutputDirectory="PreserveNewest" />
  </ItemGroup>

Our program.cs will load configuration and provide it to the logger.

namespace AspnetcoreSerilog
{
    class Program
    {
        static void Main(string[] args)
        {  
            var configuration = new ConfigurationBuilder()
                .AddJsonFile("appsettings.json")
                .Build();

            Log.Logger = new LoggerConfiguration()
                .ReadFrom.Configuration(configuration)
                .CreateLogger();
            Log.Information("Hello world!");
        }
    }
}

Now, we can configure serilog with via appsettings.json

{
    "Serilog": {
        "Using": [],
        "MinimumLevel": {
            "Default": "Debug",
            "Override": {
                "Microsoft": "Information",
                "System": "Warning"
            }
        },
        "WriteTo": [
            { "Name": "Console" }
        ]
    }
}

If we run again the program, output is the same:

PS D:\Workspace\dev.to\AspnetcoreSerilog> dotnet run
[23:24:34 INF] Hello world!

I need customizing output

Serilog output can be easily configured with output template parameter:

{
 ... Take a look to previous json 
        "WriteTo": [
            {
                 "Name": "Console",
                 "Args": {
                    "outputTemplate": "{Timestamp:dd/MM/yy HH:mm:ss,fff} [{Level:u3}] {Message}{NewLine:1}"
                 }
            }
        ]
    }
}

Output will the following:

PS D:\Workspace\dev.to\AspnetcoreSerilog> dotnet run
04/04/20 23:39:09,387 [INF] Hello world!

This information it´is not enough, i want more. Enrich helps you

There are a lot of enrichers, depending on your needs, you can add its packages to your csproj file. For my example i will use thread enricher:

Add your dependency on csproj and restore:

    <PackageReference Include="Serilog.Enrichers.Thread" Version="3.1.0" />

Modify serilog configuration file adding enricher's using and modifying output template to include it:

{
    "Serilog": {
        "Using": [],
        "Enrich":["WithThreadId"],
        "MinimumLevel": {...},
        "WriteTo": [
            {
                 "Name": "Console",
                 "Args": {
                    "outputTemplate": "{Timestamp:dd/MM/yy HH:mm:ss,fff} [{Level:u3}] Thread:{ThreadId} {Message}{NewLine:1}"
                 }
            }
        ]
    }
}

Test output:

PS D:\Workspace\dev.to\AspnetcoreSerilog> dotnet run
04/04/20 23:48:37,002 [INF] Thread:1 Hello world!

Logger it's cool but i need sending my output to various sources

With WriteTo(subloggers) you can send log to any resource, and there are a lot of Sinks already implemented. So the only decisiton you have to take is where you want to place log. For simplicity i will store my log messages in two files and console. So the only sink i need is file sink.

 <PackageReference Include="Serilog.Sinks.File" Version="4.1.0" />

Add this 2 nodes to WriteTo section:

 {
                "Name":"File",
                "Args": {
                    "path": "./log1.log"
                }

            },
            {
                "Name":"File",
                "Args": {
                    "path": "./log2.log"
                }
            }

Output on powershell continue being the same but if we check content of the files will be the same too.

PS D:\Workspace\dev.to\AspnetcoreSerilog> dotnet run
05/04/20 00:01:16,177 [INF] Thread:1 Hello world!
PS D:\Workspace\dev.to\AspnetcoreSerilog> type .\log1.log
2020-04-05 00:01:16.177 +02:00 [INF] Hello world!
PS D:\Workspace\dev.to\AspnetcoreSerilog> type .\log2.log
2020-04-05 00:01:16.177 +02:00 [INF] Hello world!

Information it's duplicate! expressions to the rescue

On a real world app, we will probably need sending logs to diferent files or resources.On this example i will send error logs to one file and information to another. There are a lot of choices for log filtering you can find it here:

First, lets make some changes on our program.cs adding an error log.

namespace AspnetcoreSerilog
{
    class Program
    {
        static void Main(string[] args)
        {  
            // Configuration here
            Log.Information("Hello world!");
            Log.Warning("Oops!! ");
            Log.Error("Ouch!!!! ");
        }
    }
}

Add package to our csproj:

    <PackageReference Include="Serilog.Filters.Expressions" Version="2.1.0" />

Now our json file will change significally, despite of having 2 file sinks we will have 2 subloggers filtered with file sinks. I will show appsettings.json file complete:

{
    "Serilog": {
        "Using": [
        ],
        "Enrich": [
            "WithThreadId"
        ],
        "MinimumLevel": {
            "Default": "Debug"
        },
        "WriteTo": [
            {
                "Name": "Console",
                "Args": {
                    "outputTemplate": "{Timestamp:dd/MM/yy HH:mm:ss,fff} [{Level:u3}] Thread:{ThreadId} {Message}{NewLine:1}"
                }
            },
            {
                "Name": "Logger",
                "Args": {
                    "configureLogger": {
                        "Filter": [
                            {
                                "Name": "ByIncludingOnly",
                                "Args": {
                                    "expression": "@Level = 'Warning'"
                                }
                            }
                        ],
                        "WriteTo": [
                            {
                                "Name": "File",
                                "Args": {
                                    "path": "./warning.log"
                                }
                            }
                        ]
                    }
                }
            },
            {
                "Name": "Logger",
                "Args": {
                    "configureLogger": {
                        "Filter": [
                            {
                                "Name": "ByIncludingOnly",
                                "Args": {
                                    "expression": "@Level = 'Error'"
                                }
                            }
                        ],
                        "WriteTo": [
                            {
                                "Name": "File",
                                "Args": {
                                    "path": "./error.log"
                                }
                            }
                        ]
                    }
                }
            }
        ]
    }
}

Output must be the following: Log writes all messages, warning.log file only has warnings logs and error.log only has errors.

PS D:\Workspace\dev.to\AspnetcoreSerilog> dotnet run
05/04/20 00:33:51,927 [INF] Thread:1 Hello world!
05/04/20 00:33:51,948 [WRN] Thread:1 Oops!! 
05/04/20 00:33:51,954 [ERR] Thread:1 Ouch!!!! 
PS D:\Workspace\dev.to\AspnetcoreSerilog> type .\error.log
2020-04-05 00:33:51.954 +02:00 [ERR] Ouch!!!!
PS D:\Workspace\dev.to\AspnetcoreSerilog> type .\warning.log
2020-04-05 00:33:51.948 +02:00 [WRN] Oops!!

That's all! fell free to leave a comment below!

Resouces

Example repository:

working example app

Serilog´s documentation it is enough:

Building an archetype to my python apps

Andrés Baamonde Lozano — Sat, 28 Mar 2020 22:16:25 +0000

I have built a lot of python webapps, APIs with flask. But didnt have a good aproximation for made it, really maintanible.

This weekend i have been working on a new archetype, im not sure that it will be better than my current archetype but i share it here. Anyone can comment if thinks that is not a good aproximation or if have any improvement.

If i dont comment some part of the archetype and you want an why i choose that way of implementation just comment below and i will answer as soon as possible.

Folders

A quick description:

api: api endpoints.
cfgs: server configurations folder, at this moment only one.
host: Here will be all server configurations.
web: jinja2 cgi clasic web, static files like css and JS.

├── app
│   ├── api 
│   ├── cfgs
│   ├── host
│   └── web
├── docs
└── resources
    └── docker
        └── app // sites available file

Run file and configuration loader

└── app
    ├── api 
    ├── cfg_loader.py 
    ├── cfgs
    ├── host
    ├── main.py // main file that launch server
    └── web

main.py file will import server and will run it only if it is runned as a script, else will expose app for CGI apache servers.

import os
import json

from host.server import Server
from cfg_loader import CfgLoader

cfg = CfgLoader(
    resource_path = "cfgs",
    debug= __name__ == "__main__",
    root_path=os.path.dirname(os.path.abspath(__file__)))

app = Server(cfg)

if __name__ == "__main__":
    app.run()

cfg_loader.py file isnt interesting at all, it only loads cfg depending of the runing environment.

Host

└── app
    └── host
        └── server.py // host, receives api and web routes and manages cfg

Server file manages flask app, it will import api and web dependencies and delegates routes registration. It only manages server configuration like templates routes. If any service is needed by views or web it will be injected from here.

import os
from flask import Flask

from api.my_api import MyApi
from web.web_routes import WebRoutes

class Server(Flask):
    def __init__(self, cfg):
        super(Server, self).__init__(
            __name__,
            template_folder=os.path.abspath(cfg.templates_folder),
            static_url_path=os.path.abspath(cfg.static_folder))
        self.cfg = cfg
        self.web_routes = WebRoutes(cfg)
        self.api_routes = MyApi(cfg)
        self.api_routes.register(self)
        self.web_routes.register(self)

    def run(self):
        super(Server, self).run(
            host=self.cfg.host,
            port=self.cfg.port,
            debug=self.cfg.debug)

Api

The app Api at this moment has only uri versioning, at this point im not sure that it will not be the best choice, if anyone knows a py library for this problem any apport is welcomed. Because blueprints are not the best choice, at least in my opinion.

└── app
    └── api 
        ├── blueprints // Api blueprints
        │   ├── base_blueprint.py
        │   ├── v1 // Api blueprint version 1
        │   │   ├── api_blueprint.py
        │   │   └── my_view.py
        │   └── v2 // Api blueprint version 2
        │       ├── api_blueprint.py
        │       └── my_view_v2.py
        ├── errors // Errors, error handlers 
        │   ├── handlers.py
        │   └── validation_error.py
        ├── my_api.py
        └── responses // api responses

The funcitionality of these files is quite intuitive, my_api registers all api endpoints, default responses and error handlers.

Error handlers has not much interest because it are implemented like in flask documentation, a note for that is that i consider a good practice used as much as possible the Built-in Exceptions. Because using it will avoid unnecesary classes.

Base blueprint only has a generic implementation for reuse on child blueprints that implementation is a refactor for classic CRUD operations.

Now i will show the my_api implementation, as a commented previously this class has the responsibility of registering api routes.

from flask import Flask
from .blueprints.v1.api_blueprint import ApiBlueprint as V1
from .blueprints.v2.api_blueprint import ApiBlueprint as V2

class MyApi(object):
    def __init__(self, cfg, api_basepath="/api"):
        self.cfg = cfg
        self.api_basepath = api_basepath

    def register(self, app: Flask):
        #self.response_class = DefaultResponse

        # Register api with blueprints and views
        app.register_blueprint(V1(self.api_basepath))
        app.register_blueprint(V2(self.api_basepath))

        # Register error handler
        #self.register_error_handler(InvalidUsage, self.handle_invalid_usage)

Web

└── app
    └── web
        ├── static // JS/CSS files
        ├── templates // html jinja2 templates
        │   └── index.html
        └── web_routes.py // registers web routes on app

Web only has static files and templates, web_routes.py will register routing and template rendering functions, if a service is needed it will be provided on constructor.

from flask import Flask, render_template

class WebRoutes(object):
    def __init__(self, cfg):
        self.cfg = cfg
        self.routes = [
            ("/", self.index, ['GET'])
        ]

    def register(self, app: Flask):
        for (path, func, methods) in self.routes:
            app.add_url_rule(path,  view_func=func, methods=methods)

    def index(self):
        return render_template('index.html')

That´s all for now! if any of you wants more posts, detailed implementations or more information/improvements to this archetype. Place a comment below for this rookie developer :D

Refs

Vue JS: Notifications with mini-toastr and vue events

Andrés Baamonde Lozano — Sun, 22 Mar 2020 17:01:11 +0000

On the next develop of my personal website i decided create a toastr notifier. Notifications for javascript have a lot of choices. A cool library is vue-notifications that provides an abstraction from the rest of notifications libraries. But i will not use that library. I decidiced to build a notifications´s library wrapper and make this 'how to'. The notification library i will wrap is mini-toastr

setup

First, we nee install mini toastr library

npm i mini-toastr --save

with library already installed, we need a small edit of our Vue JS main.js

import miniToastr from 'mini-toastr'

miniToastr.init()

Wrapper

No we will code our wrapper. i called the file notificationService.js

import miniToastr from 'mini-toastr'

const notificationService = {
  defaultMessage: {
    type: 'info',
    title: 'default title',
    message: 'default message',
    timeout: 3000, // timeout autohide
    cb: undefined // callback funciton
  },
  types: miniToastr.config.types,
  notify: (apayload) => {
    var payload = { ...notificationService.defaultMessage, ...apayload }
    miniToastr[payload.type](payload.message, payload.title, payload.timeout, payload.cb)
  }
}

export default notificationService

On previous code, i only wrap the library types and i fill payload object with default values if they are not present in it using spread operator.

App.vue

Now we switch to the vue library. We will register our notification event callbacks. Iterate all the types library creating one callback for each type.

<template>
...
</template>

<script>
import notificationService from './notificationService'
export default {
  name: 'App',
  components: {
    ...
  },
  created: function () {
    Object.keys(notificationService.types).forEach(
      (key) => this.$root.$on(
        notificationService.types[key],
        (payload) => notificationService.notify({ ...{ type: notificationService.types[key] }, ...payload })))
  }
}
</script>

Use

Now we create a payload message and emit it with vue events. Our abstractions make possible use the notifications without any library import, and if we change our notification library we only need to reimplement our wrapper.

var payload = {
  type: 'error',
  title: 'funny notifications ! ',
  message: 'default message'
}
this.$root.$emit(payload.type, payload)

Demo

I implemented notifications on my personal website console. Console sends notification with emit and app.vue has registered the operation, so if one is received a notification will be launched.

Thank you for reading me. Feel free for comment any thought below.

References

Vue notifications
Mini toastr
Vue custom events emit
Vue custom events on
Spread operator (...)