DEV Community: Juan Belieni

Functors in programming

Juan Belieni — Sat, 19 Feb 2022 22:07:10 +0000

In category theory, functors are mappings between categories. I.e., functors are "containers" that lifts objects from one category to another. Here, I will present how to understand this concept in terms of types and functions.

What is considered a functor?

To be considered a functor, a mapping between two categories must preserve identity and composition.

So let's imagine two categories C and D and a functor F that maps objects from C to D.

Identity is a unique morphism that connects one object to itself. This morphism is useful because if you compose this morphism with any other morphism f, you will still have f. I.e., these three functions (our morphisms) will behave in the same way:

(x) => f(id(x))
(x) => id(f(x))
(x) => f(x)

Preserve identity means that, for every object x in C, mapping F(x) with the identity morphism is the same as applying the identity morphism to F(x). I.e., these two expressions must return the same thing:

F(x).map(id)
id(F(x))

And preserve composition means that mapping with a composition of functions in a functor will have the same behavior as mapping with the two functions separately. I.e., these two expressions must return the same thing:

F(x).map((x) => f(g(x)))
F(x).map(g).map(f)

Types as objects and endofunctors

Knowing then what functors are, we can proceed to see how they can be applied in programming. In fact, the application is much simpler to understand than the theory. That's because in a programming environment, the type system will be considered our category, and all the functors will be just endofunctors.

And what is an endofunctor? It is basically a functor that maps objects from one category to the same category. In our case, all the functors will map values from one type (object) to another type (still in the same category).

So let's see a simple example of the application of functors in TypeScript.

The Maybe functor in TypeScript

As we saw, functor must be a mapping. So we have to define an interface that requires an implementation of a map function:

type FunctorMap<A, B> = (a: A) => B;

interface Functor<A> {
  map<B>(f: FunctorMap<A, B>): Functor<B>;
}

With this interface, it will be simple to implement the Maybe functor. In short, Maybe is a type that is able to contain an empty value (Nothing) or a value of a respective type (Just).

But to implement the map function, we have to ask ourselves: the Maybe type is a functor? To answer this, we just have to check if it respects the properties.

First, every value of type Maybe can be constructed two ways: Maybe.nothing() or Maybe.just(<value>). So,

// "Maybe" preserves identity
Maybe.just(x).map(id)
Maybe.just(x)
id(Maybe.just(x))

// And preservers composition
Maybe.just(x).map(g).map(f)
Maybe.just(x).map((x) => f(g(x)))

And what about the Maybe.nothing() constructor? In this case, all maps will simply skip the application of the function, and return another Maybe.nothing().

With this, we have demonstrated that the Maybe type is a functor. Let's finish to implement it now:

class Maybe<A> implements Functor<A> {
  constructor(private value: A | null) {}

  static just = <A>(value: A) => new Maybe<A>(value);
  static nothing = <A>() => new Maybe<A>(null);

  map<B>(f: FunctorMap<A, B>): Maybe<B> {
    if (this.value === null) return Maybe.nothing();
    return Maybe.just(f(this.value!));
  }
}

With this implementation, we can test how it will perform with a basic example:

Maybe.just<number>(1)
  .map((x) => x + 1)
  .map((x) => x * 2) // Just(4)

Maybe.nothing<number>
  .map((x) => x + 1)
  .map((x) => x * 2) // Nothing

Conclusion

As you see, functors are very simple, especially if you see them as containers that implements a map function. If you look closely, this is very similar to what we do in JavaScript with arrays and promises, with just a bit more of formality :)

How to use constructor tear-offs in Dart

Juan Belieni — Wed, 19 Jan 2022 18:08:01 +0000

In Dart 2.15, it was announced a new language feature called constructor tear-offs. Now, you can treat constructors as regular functions that returns an instance of a class.

Enabling constructor tear-offs

To use this feature, you just have to have Dart 2.15 (or any higher version) installed in your system:

$ dart --version  
# Dart SDK version: 2.15.1 (stable) ...

At your pubspec.yaml, it is import to update the SDK version to have 2.15 (or any higher version installed in your system) as the minimum version:

...
environment:
  sdk: ">=2.15.0 <3.0.0"
...

Examples with Flutter

1 - Let's think in a simple example:

Column(
  children: ['Apple', 'Orange'].map((word) => Text(word)).toList(),
);

With constructor tear-offs, you can simplify this expression as the following:

Column(
  children: ['Apple', 'Orange'].map(Text.new).toList(),
);

2 - Code abstraction is also made easier with this syntax:

Widget widget;

switch (type) {
  case "outlined":
    widget = OutlinedButton(
      onPressed: () {},
      child: const Text("Button"),
    );
    break;
  case "text":
    widget = TextButton(
      onPressed: () {},
      child: const Text("Button"),
    );
    break;
  default:
    widget = ElevatedButton(
      onPressed: () {},
      child: const Text("Button"),
    );
}

Abstracting...

Function button;

switch (type) {
  case "outlined":
    button = OutlinedButton.new;
    break;
  case "text":
    button = TextButton.new;
    break;
  default:
    button = ElevatedButton.new;
}

Widget widget = button(
  onPressed: () {},
  child: const Text("Button"),
);

My Command Line Tools for Linux Terminal in 2022

Juan Belieni — Mon, 17 Jan 2022 12:31:46 +0000

In the beginning of this year, I started to search some new and modern command line tools for the Linux terminal. Here are some that I am currently using.

LSD

LSD (or LSDeluxe) is a rewrite of ls command, with a lot of new features like colors, icons, tree-view, etc.

This tool uses icons from the Nerd Fonts project, and is capable of creating beautiful and useful outputs of your files and directories.

After installing this command, you can create an alias for LSD, replacing the traditional ls command:

alias ls="lsd"

Bat

Bat is a cat clone with syntax highlighting and Git integration.

Like LSD, Bat can be used to replace the cat command, and it is recommended to use this alias to preserve the default behavior:

alias cat="bat --paging=never"

Zoxide

Zoxide is a smarter cd command, inspired in z and autojump. The best feature of this tool is to remember the paths you use most frequently.

Besides its z command, Zoxide has the zi command, which uses fzf to interactively select the path.

This tool supports all major shells, so you can use it on Zsh, Fish, PowerShell, etc.

Fzf

Fzf is a general-purpose command-line fuzzy finder. Like I commented in Zoxide section, Fzf is used to interactively find and select something.

It can be used to find paths, host names, environment variables and much more.

Currently, I am using this tool with the fzf-tab plugin for Zsh, which replaces zsh's default completion selection menu with Fzf, and it is working very well.

There is a tool that you are using this year that I have not commented here? Write it below! I will love to find new interesting projects.

Dart and Functional Programming: applying Haskell concepts with dartz

Juan Belieni — Mon, 03 Jan 2022 12:47:34 +0000

Haskell is a purely functional programming, with a lot of powerful features. In the other hand, Dart is a language focused on creating fast multiplatform apps.

But how could we bring some good features and concepts from Haskell into the Dart language? This is exactly what dartz tries to do.

Maybe (or Option)

The first concept we will try to apply in Dart is Maybe, a data structure in Haskell that can hold Nothing or Just <value>. In Haskell, Maybe would be used in a context where the return value of a function will not necessarily be a meaningful value.

Example:

classifyAge :: Int -> Maybe String
classifyAge age | age < 0   = Nothing
                | age < 13  = Just "Child"
                | age < 20  = Just "Teenager"
                | age < 65  = Just "Adult"
                | otherwise = Just "Elderly"

With dartz, we would use the Option type to have the same behavior:

Option<String> classifyAge(int age) {
  if (age < 0) return none();
  if (age < 13) return some('Child');
  if (age < 18) return some('Teenager');
  if (age < 65) return some('Adult');
  return some('Elderly');
}

But why you would use such a type in Dart? Because mapping values and dealing with edge case turns to be much easier:

classifyAge(12)
  .map((classification) => 'This person is a $classification')
  .getOrElse(() => 'Invalid age');

// This person is a Child

Either

Either is another very important data structure in Haskell, because it can express two different types in terms of Left and Right.

Example:

safeDiv :: Int -> Int -> Either String Int
safeDiv x y | y == 0    = Left "Division by zero"
            | otherwise = Right (x `div` y)

Here, we used Either to express a type of value that can be either an error or an actual return value.

In Dart, we can use this to handle cases like an API call, where the left value will be an error message (or the error object itself) and the right value will be the data fetched:

Future<Either<String, Data>> getPost(int id) async {
  try {
    final response = await http.get('$url/$id');
    return right(response.data);
  } catch (e) {
    return left('Failed to fetch post');
  }
}

...

Widget build(BuildContext context) {
  return FutureBuilder<Either<String, Data>>(
    future: getPost(1),
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        return snapshot.data.fold(
          (error) => Text(error),
          (post) => Text('Post: ${post.title}'),
        );
      }

      return CircularProgressIndicator();
    },
  );
}

Traversable

Let's build a simple function that returns the RNA transcription of a DNA, but when a character is invalid, it returns just the character.

In Haskell, we can build this using the Traversable data structure, that implements the sequenceA function:

toRna :: String -> Either Char String
toRna dna = sequenceA $ map transcribe dna
 where
  dnaToRna = zip "GCTA" "CGAU"
  transcribe c = maybe (Left c) Right $ lookup c dnaToRna

In this case, sequenceA receives a list of Eithers, and concatenate them in an Either of a list. But an interesting behavior of this function is that, when a Left value is found, it is returned immediately.

In Dart, we can do everything we did in Haskell, because dartz implements all the functions needed:

Either<String, String> toRna(String dna) {
  final dnaToRna = IMap.fromIterables(
    ['G', 'C', 'T', 'A'],
    ['C', 'G', 'A', 'U'],
    StringOrder,
  );

  Either<String, String> transcribe(String c) => dnaToRna.get(c).fold(
        () => left(c),
        (n) => right(n),
      );

  final transcribedDna = IList.from(dna.split('')).map(transcribe);

  return IList.sequenceEither(transcribedDna).map(
    (dna) => dna.toList().join(''),
  );
}

...

print(toRNA('GCTA')); // Right(CGAU)
print(toRNA('CGAU')); // Left(U)

Conclusion

The dartz package offers a lot more functions and data structures than those mentioned here. If you have a functional programming background, programming in Dart can be much more intuitive with this package. But if you don't, data structures like Option and Either can be still very useful.

Some useful links:

How to run JupyterLab on Docker

Juan Belieni — Thu, 07 Oct 2021 23:14:25 +0000

Jupyter and JupyterLab are great tools for data science. Sometimes it is more convenient to simply run them with Docker as containers, which can be easily stopped and deleted after use.

Selecting the image

Jupyter has a lot of images at Docker Hub. Fortunately, Jupyter documentation covers this topic very well. Here, I will use the jupyter/datascience-notebook image, which "includes libraries for data analysis from the Julia, Python, and R communities".

Running with Docker Compose

I particularly like to create a Docker Compose file for each service I use with Docker, because it is better to manage all the necessary options.

First, you have to map the port of the service to a port at your computer. I recommend using the same default port as Jupyter.

jupyter:
  image: jupyter/datascience-notebook:latest
  container_name: jupyter
  ports:
    - 8888:8888

Now, it will just be necessary to define two environment variables, JUPYTER_ENABLE_LAB and JUPYTER_TOKEN. Here, you can define the most convenient token for you.

jupyter:
  image: jupyter/datascience-notebook:latest
  container_name: jupyter
  ports:
    - 8888:8888
  environment:
    JUPYTER_ENABLE_LAB: "yes"
    JUPYTER_TOKEN: "docker"

Finally, just run the Docker Compose command to start your container.

docker-compose up

Running from Docker CLI

If you prefer to run this container from Docker CLI, just copy and paste this command.

docker run -p 8888:8888 \
           -e JUPYTER_ENABLE_LAB=yes \
           -e JUPYTER_TOKEN=docker \
           --name jupyter \
           -d jupyter/datascience-notebook:latest

Accessing JupyterLab

At your browser, just enter http://localhost:8888 and provide the token defined by you.

How to create horizontal scroll with mouse wheel using JavaScript

Juan Belieni — Sun, 12 Sep 2021 15:44:38 +0000

Native horizontal scroll with mouse wheel is not so trivial for the user. However, this behavior can be changed using an event listener.

In fact, there are some events involving scrolling and mouse wheel such as mousewheel and DOMMouseScroll. But here I will be using the wheel event.

So, to accomplish this behavior, the JavaScript code will look like this:

element.addEventListener('wheel', (event) => {
  event.preventDefault();

  element.scrollBy({
    left: event.deltaY < 0 ? -30 : 30,
  });
});

Where element is the HTML element that the user will scroll by.

But you can ask why left has static values. That's because different browsers will provide different values for event.deltaY. So it's better to put just one value, only varying when the element is being scrolled to one side or the other.

Result:

Video preview on hover with HTML and JavaScript

Juan Belieni — Mon, 06 Sep 2021 21:13:24 +0000

In this post, I will be showing how to add a preview feature for the videos inside your HTML page.

First, I will be using this simple HTML code as the base to create the preview feature:

<video>
  <source 
    src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
  />
</video>

So, to start, we should create the startPreview and stopPreview functions. To contextualize, the preview will be played during 4 seconds, starting after the first second at a playback rate of 50%.

The startPreview will set the values so that the preview will be played as mentioned, and stopPreview will reset the values to the default ones.

const video = document.querySelector("video");

function startPreview() {
  video.muted = true;
  video.currentTime = 1;
  video.playbackRate = 0.5;
  video.play();
}

function stopPreview() {
  video.currentTime = 0;
  video.playbackRate = 1;
  video.pause();
}

After it, we should create the event listeners so that the preview can be played on hover. To accomplish this, a timeout will be used to stop the preview after 4 seconds.

let previewTimeout = null;

video.addEventListener("mouseenter", () => {
  startPreview();
  previewTimeout = setTimeout(stopPreview, 4000);
});

video.addEventListener("mouseleave", () => {
  clearTimeout(previewTimeout);
  previewTimeout = null;
  stopPreview();
});

It's important to clear the timeout every time the user leaves the video area, because it can happen that a previous timeout stops the video when the user enters the video area for a second time before the 4 seconds.

Here is the result:

Creating an alias for deleting useless git branches

Juan Belieni — Mon, 30 Aug 2021 14:30:39 +0000

Sometimes, deleting branches that we are no longer working on can be tedious. For this, you can create an alias to do the hard work for you.

All git aliases are located at the ~/.gitconfig file:

...
[alias]
  cm = commit # Example alias

The custom alias we will create will delete all branches except master and the current one:

git branch | grep -v "master" | grep -v "^*" | xargs git branch -d

At ~/.gitconfig:

...
[alias]
  del-branches = !git branch | grep -v "master" | grep -v "^*" | xargs git branch -d

Finally, you just have to call the alias at your repository directory as a normal git command:

git del-branches

How to create sticky headers and footers with CSS

Juan Belieni — Tue, 24 Aug 2021 23:50:29 +0000

CSS offers a native way to create headers and footers that fix at the top (or at the bottom) of the screen.

Both ways, your elements have to be placed like this:

<div id="container">
  <header>...</header>
  ...
  <footer>...</footer>
</div>

Where the #container element is the one that users will scroll by. In other words, your header or footer will not be sticky to the screen if it has another element surrounding them.

At your CSS, you will just have to do this:

header {
  position: sticky;
  top: 0;
}

footer {
  position: sticky;
  bottom: 0;
}

Result:

TypeScript para iniciantes: como criar seu primeiro projeto

Juan Belieni — Wed, 29 Jul 2020 19:43:16 +0000

Como você já deve saber, o TypeScript vem crescendo bastante ultimamente, então é primordial que você conheça e saiba como começar um projeto nessa linguagem.

Felizmente, o TypeScript é não nenhum bicho de sete cabeças. Pelo contrário, essa linguagem não passa de JavaScript com algumas funcionalidades a mais. Ao longo desse artigo você verá o quão simples é começar um projeto nessa linguagem.

Eu irei utilizar o gerenciador de pacotes Yarn. Fique a vontade para utilizar qualquer um que você preferir.

Tudo o que eu fizer ficará disponível nesse repositório no GitHub: https://github.com/juanbelieni/typescript-iniciantes

Então, vamos começar.

Iniciando o projeto com o Yarn

Crie uma nova pasta e navegue até ela:

mkdir typescript-iniciantes
cd typescript-iniciantes

Inicie o projeto com Yarn:

yarn init -y

Após esses passos, um arquivo package.json vai aparecer na raiz do projeto com um conteúdo parecido com esse:

{
  "name": "typescript-iniciantes",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

Agora, vamos adicionar o TypeScript.

Adicionando e configurando o TypeScript

Antes de adicionarmos o pacote, temos que ter em mente que o TypeScript é uma ferramenta de desenvolvimento. Em produção, o TypeScript é compilado diretamente para JavaScript.

Portanto, iremos adicionar o TypeScript como um pacote de desenvolvimento:

yarn add -D typescript

Após isso, temos que criar um arquivo chamado tsconfig.json, usando o comando:

yarn tsc --init

Ao abrir esse arquivo, é possível ver uma infinidade de opções. Mas calma! Vamos mexer em apenas duas por agora, já que não é o nosso foco nos aventurar por todas as possibilidades que o TypeScript nos oferece.

Continuando, localize no arquivo tsconfig.json as opções outDir e rootDir. Elas são importantes pois vão definir em qual pasta vai estar o código em TypeScript e em qual pasta ele vai ser compilado em JavaScript. Substitua os valores padrões pelos seguintes valores:

"outDir": "./build", 
"rootDir": "./src",

Dessa maneira, o código em TypeScript deverá estar localizado na pasta src. Após compilado o código irá estar disponível na pasta build.

Se quiser fazer um teste, crie um arquivo index.ts dentro da pasta src contendo um console.log('Olá TypeScript') e execute o seguinte comando para ver a mágica acontecer:

yarn tsc

Criando os scripts `build`, `start` e `dev`

Até agora apenas adicionamos o TypeScript, porém ainda é necessário criar três scripts importantes para qualquer projeto nessa linguagem.
Esses scripts vão estar localizados no package.json:

{
  "name": "typescript-iniciantes",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {

  },
  "devDependencies": {
    "typescript": "^3.9.7"
  }
}

Para executá-los, basta escrever yarn <script> ou npm run <script>, se você estiver usando NPM.

Os scripts `build` e `start`

Eles vão servir para compilar o código em JavaScript e executá-lo após isso.

"scripts": {
  "build": "tsc",
  "start": "node build/index.js"
},

O script `dev`

Esse script vai servir para que, quando estivermos no ambiente de desenvolvimento, não precisemos compilar o código toda vez que fizermos alguma alteração.

Para isso, vamos usar um pacote chamado ts-node-dev:

yarn add -D ts-node-dev

E após isso, basta adicionar o script com a flag --ignore-watch node_modules para que ele ignore a pasta node_modules:

"scripts": {
  "build": "tsc",
  "start": "node build/index.js",
  "dev": "ts-node-dev --ignore-watch node_modules src/index.ts"
},

Começando o desenvolvimento

Agora que já configuramos tudo que era necessário, já podemos começar a desenvolver. Eu irei criar uma rota bem simples em Express para servir de exemplo. Para isso, eu irei adicionar o Express e o seu pacote de tipos:

yarn add express
yarn add -D @types/express

No arquivo src/ìndex.ts:

import express from 'express';

const app = express();
app.use(express.json());

interface RequestBody {
  name: string;
}

app.post('/', (request, response) => {
  const user = request.body as RequestBody;

  return response.send({
    message: `Hello ${user.name}`,
  });
});

app.listen(3000, () => console.log('Listening 3000'));

Concluindo

Como foi visto, essa foi uma configuração bem básica para quem quer começar a estudar TypeScript. Recomendo que você se aprofunde no estudo dessa ferramenta, que pode ajudar bastante na hora do desenvolvimento.

DEV Community: Juan Belieni

Functors in programming

What is considered a functor?

Types as objects and endofunctors

The Maybe functor in TypeScript

Conclusion

How to use constructor tear-offs in Dart

Enabling constructor tear-offs

Examples with Flutter

My Command Line Tools for Linux Terminal in 2022

LSD

Bat

Zoxide

Fzf

Dart and Functional Programming: applying Haskell concepts with dartz

Maybe (or Option)

Either

Traversable

Conclusion

How to run JupyterLab on Docker

Selecting the image

Running with Docker Compose

Running from Docker CLI

Accessing JupyterLab

How to create horizontal scroll with mouse wheel using JavaScript

Video preview on hover with HTML and JavaScript

Creating an alias for deleting useless git branches

How to create sticky headers and footers with CSS

TypeScript para iniciantes: como criar seu primeiro projeto

Iniciando o projeto com o Yarn

Adicionando e configurando o TypeScript

Criando os scripts build, start e dev

Os scripts build e start

O script dev

Começando o desenvolvimento

Concluindo

Criando os scripts `build`, `start` e `dev`

Os scripts `build` e `start`

O script `dev`