Thursday, October 17, 2019

Cómo insertar un ObjectId customizado en MongoDB

Como sabrás, cuando haces un insert, mongo genera el _id automáticamente, este _id viene a ser la "primary key" de tu documento. Sin embargo, si querés agregar un ObjectId personalizado, tenés que tener cuidado de seguir el length o tamaño requerido de un ObjectId que es de 24. Aquí te dejo un ejemplo.

Happy coding!

Friday, May 17, 2019

¿Qué es Git LFS y cómo implementarlo?

LFS significa Large File Storage o en español Almacenamiento de archivos grandes.

Pero, ¿qué es lo que hace realmente?

Resulta que cuando versionamos código, éstos suelen ser planos, simples archivos que si lo pesamos, no representan un peso significativo. Y cuando hacemos push al servidor remoto, git crea una copia con los cambios y hasta ahí todo perfecto. Pero ¿qué tal si queremos versionar archivos cuyo peso puede significar un problema para nuestro repositorio? Se imaginan versionar un .dll por ejemplo.

Aquí es donde entra "git lfs". Veamos la siguiente imagen:



Cuando usamos git lfs, los archivos grandes no se suben al respositorio remoto sino unicamente se crea un acceso directo cuyo peso comparado con el archivo real será de bastante consideración.

Cómo implementar git lfs

1. Descarga e Instala https://git-lfs.github.com/

2. Crea e incializa tu repositorio

3. Ejecuta git lfs install

4. Selecciona los typos de archivos que quisieras que Git LFS administre:

git lfs track "*.psd, *.dll" 

5. Un archivo de congifuración llamado .gitattributes será modificado donde estarán todos los tipos de archivos o extensiones que hayas configurado en el paso 4. Y como tal, deberás versionarlo

git add .gitattributes

Y eso es todo!

Happy coding! :)

Thursday, May 16, 2019

Input type file accepts MS presentations

In html5, input tag has a property called accept to filter the kind of files. If we want to filter just power point files, we should do something like as follow:


With this, we are filtering .ppt, pptx and ppsx

But there is a trick xD
Look at the next screenshot:




Easy, right?

Happy coding! :)


Tuesday, March 19, 2019

Mostrar y ocultar el valor de un input tipo password

Seguramente hay muchos approaches pero el que estoy usando yo (para AngularJS) es el que voy a compartir por aquí. La idea es dar al usuario la opción de ver lo que está escribiendo como contraseña en un formulario a través de un botón - ícono de ojo que lo pueden encontrar en este link: https://material.io/tools/icons/?style=baseline

Los nombres de íconos que estoy utilizando son: visibility y visibility_off

So, let's start:

HTML


1. Agregamos una condicional en el type del input, de acuerdo a la condición será de tipo text o de tipo password.

2. Agregamos el ícono el cual tendrá un evento click.

3. El ícono será cambiado de acuerdo al flag que manejaremos desde el controller, entonces también vamos a manejar una condicional similar al punto 1.

CONTROLLER

1. Agregamos la función que manejará el valor de mostrar o no mostrar la contraseña.


Easy, right?

Happy coding!

Wednesday, February 13, 2019

[i18n] Implementar ngx-translate en un proyecto Angular 7

Hola! Hoy te presento una forma de implementar i18n en tu proyecto Angular y esta forma es utilizando la libreria de terceros llamada *ngx-translate*

Es muy sencillo, te los mostraré en 5 pasos y asumiré que ya tienes creado tu proyecto Angular:

PASO 1: Instalar la librería en tu proyecto:


npm install @ngx-translate/core @ngx-translate/http-loader rxjs --save


PASO 2: Importar ngx-translate en app.module.ts
Tu app.module.ts quedaría así:

PASO 3: Inyectar TranslateService en app.component.ts
Tu app.component.ts quedaría así


Nota que le agregué una función que hace el switch de idioma. Podrías Llamar a esta función desde un botoncito o desde otro control.

PASO 4: Crear los archivos JSON por cada idioma.
Recomendación: podrías ubicar estos archivos en la siguiente ruta: assets/i18n/en.json

Un ejemplo:


PASO 5: Editar los templates (HTML) y agregar los translate
Y como último paso, usamos los translations y tenemos dos alternativas: usando pipes o directivas. Me gusta más los pipes. Quedaría así:


Y voilà! Eso es todo.

Hay algunas herramientas que podrían serte de ayuda en el sitio oficial: ngx-translate.com