New version 2.0.0 of pdfmake-wrapper is here! This version has great features about security, vectors (shapes), icons, custom fonts, SVG support and a new tool to generate fonts. There are few changes about the installation and configuration as well.

Pdfmake is installed separately

In the previous version pdfmake-wrapper included pdfmake by default, now, you need to install pdfmake by apart, the reason is to give flexibility to update pdfmake if you need it, this version was built considering from pdfmake@0.1.60 to new minor versions.

Custom fonts

Now is possible to customize fonts to your PDF documents. This lib does easier to use custom fonts than pdfmake.To use custom fonts in pdfmake you need to generate them, but doing that is tedious, you need to access to the package itself in your (node_modules/pdfmake), create directories, install some dependencies like gulp and it does not allow you to put your fonts wherever you want (you can read the process here). To tackle this, a new tool was built to generate them. This is called pdfmake-font-generator which allows you to read the fonts to generate wherever they are and save the generated file anywhere. After that, you need to import the generated file as your custom fonts. More about custom fonts here.

Icon support

This is a great feature of pdfmake and this one comes to pdfmake-wrapper as well. The process to use icons in your PDF documents is similar to use custom fonts, you can download icons from fontello. More about icons here.

Relative and absolute positions

Another feature is to use relative and absolute positions allowing us to set our objects in a specific position on the page by giving the point where the object will be placed.

Drawing shapes

Another super cool feature is the possibility of drawing shapes in our PDF documents, but in an easy way. Pdfmake-wrapper tries to do the things easier for developers. This package has four types of shapes which are Line, Rect, Ellipse and Polyline. Now you can draw and create nice PDF docs using shapes. More about shapes here.

SVG support

Now you can use SVG in your PDF documents, but this feature is limited since you need to pass the svg string directly in the new SVG('<svg>....</svg>').end, this will be improved later. More about svg here.

Security feature

The last nice feature is about security, now, you can add password to your documents, prompting for a password when an user opens the file and permission privileges, allowing defines the actions are allowed in a document. More about security here.

Introduction

This time I’m going to talk about an interesting feature of javascript that probably is not as well known, but it could help us to understand how other features work.

What are they?

In javascript there are features to iterate collections, for example, for loops, map method and forEach method. Iterators are another way to iterate collections, but they allow us to customize the result of the iterations. Now imagine you have an object and you could do this:

By doing this you need to know how these protocols work.

Iterator protocol

The iterator protocol defines an standard to produce a sequence of values. This protocol is really an object that contains a next() method and this one returns another object with two properties, value and done. Similar to this which is an iterator that returns a counter, the important is that an iterator is an object which returns another object with two properties, value and done (this is just an example of how an iterator looks if we implement it from scratch):

The next() method always returns an object with value and done properties. The value property contains the value to be returned and the done property indicates the termination of the iterator. You can call the next method whenever you want, but in this example after the third call, you will be receiving { value: undefined, done: true }. If you consume this code, you need to check when the property done is true in your code logic, but you won’t do that in this way, if you need something like this, it’s better to use Generators (I’ll write about it later).

This was just our own explicit implementation of an iterator (just to understand how it works) which returns a simple counter. Since javascript has an easy way to implement it and write it, we are going to implement this protocol using the implicit way later.

Iterable protocol

The iterable protocol allows an object to be iterable and customize its iteration behavior. By being an iterable object it needs to implement an @@iterator method (an iterator key), by creating this key/property you need to implement the constant Symbol.iterator, this method needs to returns an iterator protocol. we are going to use our own explicit iterator protocol.

Probably this can be a bit confusing, it’s ok, as I mentioned above, javascript has a better way to implement a function that returns an iterator which is called Generator.

Is this stranger than the previous example?… Let me explain it.

You can see an asterisk in the function statement (function*), the asterisk indicates that the function is a generator which returns an iterator. Another thing is the yield keyword, this one returns the value when the next() method is called and freezes the execution up to a next() is called again returning the next yield. Remember that the generator returns an iterator, therefore, when this function is called is not executed immediately, it returns the iterator protocol (similar to our explicit iterator). This example can clear up the confusion (The generators return extra methods).

For a deeper understanding of this code, you need to know Generators in javascript, but it’s not a problem if you don’t know it by now. I’ll write a next post talking about Generators as well. Since you need to know iterators to understand Generators in detail. you can check on MDN too.

What is the different?

The iterator protocol allows to an object to produce a sequence of values, which can be used by other expressions that use this one to iterate and display the values.

The iterable protocol indicates that an object is iterable and uses the iterator protocol in it. so, you can iterate it using, for example, for…of and the spread operator ([…obj]).

Relation with for…of and spread operator

The reason for the for…of and spread operator work is because internally these call to those protocols, checking if the object has the iterable protocol which indicates that the object can be iterated and therefore, it contains the iterator protocol to produce its values using the next() method that it has.

Try to do this […myCustomObject] or for (let p of myCustomObject) {} without implementing the protocols, you’ll see a type error:

TypeError: myCustomObject is not iterable

Built-in iterables objects

In javascript there are objects that implement these protocols, for example, Array, String, Set, Map, TypeArray (Int16Array, etc…). This is the reason you can use spread operator and for…of on them.

Introduction

Hi! I wrote a search algorithm that works similar to Front and back search algorithm, but this one works double faster then front and back. I was looking for an algorithm similar or if the algorithm exists, but I found nothing. If you know some algorithm like this, please, comment below about it. By now, I just want to show you this one and how it works.

If you are wondering about the name, I didn’t know how to name it. But it works similar to front and back. If you have some suggestion about a name, comment it.

Time complexity: O(n)

Space complexity: O(1)

How it works

The difference between this algorithm and the front and back is that this one has two extra indexes for searching, but these start from the middle, one of these decreases its value by one and the another one increases its value by one. In short words, two indexes work from the beginning to the middle and the other indexes works from the middle to the end. It probably seems confusing, but in the example you will understand better.

Implementation

Here the implementation:

How you can see, this algorithm has four indexes, headfront and headBack interact from the position 0 to the middle, where headFront starts in position 0 and headBack in the middle, while headFront increases its value by one, headBack decreases its value by one until headFront being greater than headBack or when the value searched is found, the tailFront and tailBack perform the same, but on the other side.

Introduction

This time we’ll implement an algorithm to search an element in an unsorted array. The most common algorithm to search an element in an unsorted array is using a linear search, checking element by element from the beginning to the end, this algorithm takes O(n) complexity. Using the front and back algorithm can take us a half of time.

Time Complexity: O(n)

Space complexity: O(1)

How it works

The way of this algorithm works is similar to a linear search, but the difference is that uses two indexes to search, the first one starts to the beginning (position 0) and the second one starts to the end (position length -1).

The first index starts from the position 0 to up and the second one starts from the last position to down, when the first index is greater then the second one the iterations stop or when the value is found.

Implementation

Now, we’ll implement the algorithm in python:

This is an easy algorithm to implement and useful. Now you can perform searches a little faster.

Introduction

A stack is a linear data structure that follows a LIFO (First In Last Out) order. There is a common example about a stack, imagine a stack of plates, the plate that is placed first is the last to leave the stack and the last that is placed is the first to leave it.

Another example could be the back button in the browser, each time you navigate on pages, the pages are stacked (push) and when you click on the back button it removes your last visited page (pop), then the forward button stack is filled (push) with the page that the back button was removing (pop). Therefore, the first visited page is the last to leave the stack and the last one is the first to leave it.

I tried to explain the functionality of a stack using a simple example like the back button.

Operations

A stack is an ADT (Abstract Data Type) that mentions what operations will perform but not how it will be implemented, this means that you can implement a stack using a linked list data structure, therefore, the stack name is gained for the operations it does. It contains the following basics operations:

• push(data) — Inserts a data in the stack
• pop() — Removes the last data inserted in the stack
• peek() — Displays the last data inserted in the stack, but it doesn’t remove it
• isEmpty() — Displays if the stack is empty

Implementation

It’s time to implement a stack, first of all, we need to create the stack class and the node class, I’ll explain in detail about them.

Implementing the Node class

A node is a structure which contains the passed data and the reference to another node. It looks like this:

Implementing the Stack Class

The Stack class will contain the operations that it needs and use the node class in it. We are going to implement the class constructor and then, we’ll create and explain each method (operation) it has.

This is a basic stack class

Push(data)

This method adds items or elements to the stack, it creates a new node and checks if the list is empty, if it is, assigns the node to the head (it is the first element), else, the new node points to the head property becoming it as the next node of it and the new one is become to the first one.

Pop()

It checks if the list is not empty, otherwise, it has nothing to remove. It assigns the head to its next node and returns the obtained value.

peek()

It just returns the last element in the list, returning null (None in python) if the list is empty.

isEmpty()

This method returns a boolean telling us whether the list is empty or not, the way of knowing if a list is empty, it’s checking if the head is null (None in python).

This is a basic implementation of a stack, you can also add extra properties like length and a method to get it, this would displays the number of elements that the list has.

Introduction

In this story I’m going to talk about how to implement the bubble sort algorithm and how it works, well, I’ll try to explain it in an easy way.

Time complexity: O(n²)

Implementation

First of all I’ll show you how the algorithm is implemented, so, in this time I’ll use Python language to implement the sorting algorithm. This is how the bubble sort looks like:

Explanation

The first loop (for i in range(len(arr)):) gets the first element in the array to compare it with the other elements, by doing this it is used the second loop (for j in range(i+1, len(arr)):), for example, the first loop gets the position 0 in the array, the second loop starts in the position i+1, the value of “i” is 0 in this time, therefore, i+1 is equal to 0+1 = 1, then the position 0 is compared with the position 1 in the array (arr[ i ] > arr[ j ]), if the first position is greater than the second one their values are swapped, the second loop repeats the process getting the next position and comparing the values and so on. When the second loop ends, the first loop gets the next position and the second loop repeats the process starting one position up of the first loop.

In short words the first loop gets the main position which is compared with the other positions (the second loop’s work).

This is my explanation about the algorithm, I hope you find it useful to understand how the algorithm works and how to implement it.

Introduction

Hi everyone! in this story I’m going to talk about how to create a desktop shortcut. Sometimes when downloading applications aren’t .deb files (in debian distributions), instead, they are downloaded as compressed files and when they are decompressed, they return us an application’s folder, in this cases we need to create a desktop shortcut.

Creating the .desktop file

The first step is to create a file with .desktop extension (create it where you want), the file name can be the app name by convention (or you can name it as you want). In this example the file will be named myapp.desktop.

A basic .desktop file looks like this:

Moving the file

Once you’ve created the file, you need to move it to the /usr/share/applications or ~/.local/share/applications, in these folders live all the .desktop files in your system.

moving the file in the terminal (use sudo if is required)

$ sudo mv myapp.desktop /usr/share/applications

or

$ sudo mv myapp.desktop ~/.local/share/applications

now you will be able to look the application shortcut on the application menu.

Conclusion

It’s annoying when some applications don’t create a desktop shortcut, because we need to find the folder to run the app, by example, Postman (it’s an app to do requests, it’s useful to test API’s). So, by creating these shortcuts, we avoid this tedious search.

Introduction

Hi everyone!. In this story I’m going to talk about how to create a PDF using a library called pdfmake-wrapper, (this is a brief introduction of pdfmake-wrapper), this one helps us generate a PDF in an easy way. If you’ve used the original pdfmake library, you know how confusing it is when the document starts to grow up, the object becomes so large that it’s tedious to maintain it.

Installation

First of all, you need to install the library:

$ npm i pdfmake-wrapper — save

Note: This library includes pdfmake internally. you don’t need to install it.

Usage

Once you’ve installed the package, you can start creating a PDF document:

You need to import the library where you’re going to use it and create an instance of it.

This is a simple PDF document that shows us a “Hello world!” text.

You can use images on your PDF documents in a simple way, and avoid transforming an image to base64 first. You can pass the URLs, base64 or images previously configured using the keys that you assign to them.

Conclusion

This library helps us generate PDF documents in an easy way, writting a few lines of code and an easy understanding about the document. It’s easier to understand a document with describable methods than a large object. For more details check the github repository.

Introducción

En este post quiero compartirles una forma de como adjuntar imágenes por defecto en Angular. Muchas veces en los proyectos tenemos la necesidad de poner imágenes por defecto, ya sea una imagen de perfil (por defecto), cuando el usuario no tiene alguna imágen en su perfil o cuando alguna imágen de alguna publicación no carga. Cualquiera que sea la situación, siempre necesitamos una imágen de emergencia. para no ver este tipo de cosas en nuestros proyectos:

Alternativas

Existen librarías que solucionan este problema, que se implementan de la siguiente forma:

<img src=”https://domain.com/original-image.png” fallback=”https://domain.com/emergency-image.png” />

Colocando literalmente la imagen por defecto (fallback) ó:

<img src=”https://domain.com/original-image.png” [fallback]=”variableWithEmergencyImage” />

Manteniendo una varibale con la imágen por defecto.

Esto es una muy buena alternativa, pero el problema es que en cada etiqueta IMG tienes que colocar la imagen por defecto, si en una vista tienes 5 imágenes, tendrás que poner en cada una de ellas la imágen de emergencia. Esto se vuelve incómodo cuando el proyecto requiere actualización, cuando se desea cambiar el recurso (El dominio, por ejemplo), si tienes la imágen de emergencia en una variable, esto ya sería más cómodo al hacer la actualización, pero el código sigue viendose sucio. lleno de fallback=”https://domain.com/emergency-image.png” ó [fallback]=”variableWithEmergencyImage” (tienes que declarar la variable que contendrá la imagen en cada componente). Pero ¿qué pasa cuando tenemos distintas imágenes de emergencia?… Por ejemplo, una para foto perfil, otra para publicaciones, etc… nuestro código se vería aún más sucio.

ng-fallimg

ng-fallimg es una librería para este tipo de situaciones, pero de una manera más cómoda y limpia.

Primero instalmos la librería:

$ npm install ng-fallimg — save

Una vez instalado, lo importamos en nuestro módulo principal (comúnmente AppModule) utilizando el método estático forRoot({ … }), el cual recibe un objecto con las imágenes de emergencia que vamos a utilizar, obligatoriamente se define una propiedad default al cual se le asigna un recurso de alguna imágen, este puede ser un recurso externo (https://anotherdomain.com/picture.png), local (/assets/picture.png) o en base64 ( data:image/png; base64, … ):

El método forRoot({ … }) inicia el servicio que administra internamente el dicionario de imágenes que se le pasan como parámetro. Sólo tendrás que utilizar el método forRoot({ … }) una vez, y será donde quieras iniciar el servicio (normalmente los servicios que sirven para toda la aplicación se inician en el módulo principal), ya que si lo llamas en otro módulo (Algún módulo de característica) estarías creando otra instancia del mismo.

Ahora en app.component.html podemos utilizar la directiva ng-fallimg:

Cuando la imágen principal (“/image-fails.png”) no cargue, se cargará la imágen por defecto.

Multiples imágenes por defecto

Como habíamos comentado, ng-fallimg recibe las imágenes por defecto que necesites:

Ahora para decirle a ng-fallimg qué imágen tomar de todas las que tenemos, le pasamos el nombre de la propiedad:

Nota: Si no se le pasa nada a la directiva (ng-fallimg) toma la imagen de la propiedad default.

Utilizando ng-fallimg en otro módulo

Si utilizamos ng-fallimg en otro módulo, tenemos que importar el módulo NgFallimgModule (como es normalmente en Angular) para poder usar la directiva (ng-fallimg), pero ahora sin usar el método forRoot({ … }) ya que el servicio lo tenemos listo en el módulo principal.

Y ocupar la directiva normalmente:

Nota: NgFallimgModule contiene el servicio que contiene las imágenes y la directiva (ng-fallimg) que le da la funcionalidad de poner la imágen de emergencia a las etiquetas IMG.

Conclusión

Esta librería nos facilita el control de las imágenes rotas en nuestros proyectos, de una manera más cómoda y limpia, si el recurso cambia, solo tenemos que ir al archivo donde está nuestro diccionario de imágenes y modificar el recurso, sin tocar ningún otro archivo. Para más detalle del paquete, checa en npm: ng-fallimg.

Introducción

He buscado en la web sobre cómo crear un paquetes de NPM usando Angular pero no he encontrado contenido completo de ello y menos en Español. Así que decidí escribir este Storie para compartir la forma en cómo yo desarrollo una librería Angular y cómo subirla a Github y a NPM.

NOTA: Se considera que el lector ya tiene instalado angular-cli.

Creando una librería

Lo primero que tenemos que hacer es crear un nuevo proyecto Angular, en este caso yo le llamaré “my-project”, para eso utilizamos el comando:

$ ng new my-project

Una vez creado el proyecto, nos posicionamos en la raíz, y en la terminal escribimos lo siguiente (el CLI de Angular nos proporciona un comando para crear una librería):

$ ng generate library my-lib

Esto nos genera una librería localizada en “projects/my-lib”, como se muestra a continuación:

Aquí es donde escribimos nuestra librería. Como el proposito de este post es enseñar como crear una librería y no una librería en especifico, no vamos a escribir mucho código. Por el momento vamos a eliminar los archivos que no nos sirven y sólo dejaré los archivos my-lib.component.ts, my-lib.component.spec.ts y my-lib.module.ts. En este ejemplo solo usaremos un componente con su respectivo archivo de pruebas y el módulo, pero puedes generar directivas, servicios, etc.

En nuestra librería tenemos un archivo llamado public_api.ts ahí es donde se encuentran todas las clases, componentes, directivas, etc.. que nuestra librería va a compartir. Si agregamos algún otro archivo, como por ejemplo una interfaz que se va a compartir con el usuario que ocupe nuestra librería, la agregamos a nuestro public_api.ts. Los archivos que son de uso interno para la librería y que no serán compartidos con el usuario, simplemente no se agregan.

En este caso solo exportamos el módulo ya que es el que contiene el componente a compartir. Ahora podemos escribir nuestra librería como nosotros queramos.

Transpilando la librería

Una vez escrita nuestra librería, es hora de prepararla como librería genérica. El comando ng generate library nos crea un directorio en la cual podemos escribir una librería, pero solo es la preparación, falta transpilarla para hacerla una librería un poco más profesional y compatible. y para eso nos vamos a apoyar de ng-packagr, es un paquete que nos simplifica la creación/transpilación de librerías para Angular.

Instalamos ng-packagr.

$ npm install ng-packagr — save-dev

En nuestro package.json del proyecto root my-project creamos un nuevo script, que nos ayudará a transpilar nuestra librería usando ng-packagr.

El nombre del script puede ser cualquiera, en este caso yo le puse “build:lib” y apunta al archivo ng-package.json que es el que le indica dónde está la librería y como la va a transpilar. Ahora ejecutamos nuestro nuevo comando:

$ npm run build:lib

Esto generará una carpeta dist en el proyecto raíz (my-project) con la librería transpilada.

Antes de transpilar la librería, recomiendo hacer algunas modificaciones en el package.json que se encuentra dentro de nuestra librería (projects/my-lib), indicando la descripción, repositorio, autor y todo lo necesario para subir una librería a NPM (aquí les dejo las opciones que soporta el archivo package.json), crear el archivo LICENSE (ya sea que lo creen manual o desde el repositorio) y modificar el README.md indicando el uso de la librería. Vamos a modificar nuestro script (build:lib) para copiar el README.md y el archivo LICENSE en nuestra librería transpilada.

Ahora nuestra librería transpilada con el archivo README.md y LICENSE se vería así:

Nota: Como puedes darte cuenta el proyecto raíz solo sirve como contenedor para generar nuestra librería.

Podemos crear otros scripts en nuestro package.json, por ejemplo, para hacer pruebas unitarias a nuestra librería.

¿Qué subir a Github?

En Github se sube el proyecto completo (my-project), con el README.md que describe el uso de la librería, y es donde se encuentran los comandos y las dependencias para hacer el transpilado.

¿Qué subir a NPM?

Para NPM entramos a la carpeta dist que se generó al correr el comando npm run build:lib y entramos a la carpeta my-lib.

$ cd dist/my-lib

Esto es lo que se subirá a NPM.

Una vez posicionado en la carpeta dist/my-lib, en nuestra terminal accedemos a nuestra cuenta de NPM:

$ npm login

les pedirá las credenciales y hacemos la publicación de nuestro paquete:

$ npm publish

Nota: Recuerda que cada modificación a nuestro paquete hay que cambiar la versión del mismo. Para más detalles de como profundizar con NPM les puedo compartir este enlace.

Conclusión

Es importante escribir código reutilizable para poder usarlos en proyectos futuros y evitar reescribir una funcionalidad, ahora con NPM podemos crear nuestras propias librerías y compartirlas con otros desarrolladores de una manera fácil.

Otras stories

• Angular: Autenticación usando interceptors.
• Typescript: Path mapping