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! :)

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!

[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

¿Cómo corregir el mensaje de un commit con GIT?

*Puedes saltarte al primer subtítulo

Seguramente muchos ya han escrito sobre el comando git "amend". Seré una más que lo hace :D

De hecho, hace unos minutos atrás tuve que hacer uso de este valioso comando.

Estuve trabajando esta semana en un feature que terminé agregando varios archivos y modificando otros tantos más (lo sé, no fue buena práctica hacer mis commits a fin del día) Pero a mi me gusta hacer commits cuando realmente es código estable (y además presentable) Por eso únicamente los guardaba en mi equipo local.

Luego, en un notepad, escribí todos mis mensajes de commits y los files que irían a incluir cada uno. Entonces, en una de esas, copié el mensaje equivocado. ¿Cómo corregir el mensaje de un commit con GIT?   Hoy quiero coma

GIT AMEND

Aquí es precisamente donde entra el comando git commit --amend

Ya sea si quieres corregir el nombre de tu mensajito (sobreescribiendo o editando) o si quieres agregar un archivo o file más a tu commit, puedes usar este comando.

Entonces,

git add xxxxx (si quieres agregar x files)

O te vas directo a ejecutar el comando amend,

git commit --amend

(se te abrirá el editor para que cambies tu mensaje)

o si quieres sobreescribir todo el mensaje

git commit --amend -m "Nuevo mensaje"

¿CUÁNDO FUNCIONA?

Lo previamente visto te funcionará para tu último commit que no lo hayas pusheado todavía.
Pero en el caso de que ya hubieras pusheado tu commit antes de corregirlo, después de corregirlo deberás ejecutar el siguiente comando:

git push -f

PRUEBALO

Con el comando git log puedes ver que tu mensaje de commit ha sido modificado


Happy Coding :)

i18n for react app

Para configurar internationalization en una aplicación REACT, ursaremos la librería react-intl

1. Ejecutamos el siguiente comando en nuestra aplicación react para instalar la librería:

npm install react-intl

2. Creamos los archivos json donde estarán los labels por cada idioma. Yo los creo en la siguiente ruta:

src\i18n\locales\en.json
src\i18n\locales\es.json


3. Modificamos el archivo index.tsx (si estas usando typescript o index.js si estás usando javascript)
En este archivo haremos algunos imports, wrapearemos nuestra app (IntlProvider), y mandaremos como parámetros el idioma y de acuerdo a eso el archivo json que deberá leer. Sin tantas vueltas, debería quedar así:
4. Agregamos una función util que nos servirá para el tema de standard json notation. La función es flattenMessages:

5. Utilizamos los labels traducidos:
Hacemos un impor en el componente que vayamos a utilizarlo:

<FormattedMessage id="sign.in.forgot.password" />

Como ID nos basaremos en el JSON file que hemos estructurado previamente. También tiene otros parámetros, pero para mi caso me fue suficiente utilizar *id*