CategoríaCOMO?

Como hacer ciertas cosas del dia a dia.

Como llevar tus datos de Strava a Nike+

En estos días he estado usando Nike+ como alternativa a Strava porque me permite configurar mas cosas de cara a usar la música cuando empiezo a correr y otros detalles que luego os contare.

Pero tengo todo mi histórico de carreras en Strava, así que para importarlo a Nike he encontrado este servicio gratuito (que puedes donar) , en el cual solo descargado los gpx de Strava o Garmin puedes subirlos e importarlos a Nike.

https://www.awsmithson.com/tcx2nikeplus/

Keep Running!

 

 

Como verificar la accesibilidad de una web con AXE CLI

Aparte de seguir por twitter y ver algunas charlas de @kastway sobre el tema de la accesibilidad en la web, decidí buscar un poco mas sobre este tema y buscando encontré  “axe-cli”.

AXE-CLI

Se basa en AXE que es un motor de automatización de test de accesibilidad para interfaces web,  pero con el cli lo puedo correr de forma automática ya que nos configura todo, una de las colaboradoras es https://marcysutton.com/ defensora de la accesibilidad.

Instalacion

Para instalarlo,  requiere nodejs y ejecutando el comando desde la terminal npm install axe-cli -g ya lo tenemos disponible para jugar.

Como puedo usarlo

Desde la termina llamamos a axe y le especificamos la url ejemplo google.com y nos mostrara en la pantalla todas las violaciones de accesibilidad que tenemos en la web.

Danys-iMac:~ danyparedes$ axe https://google.com
Running axe-core 2.3.1 in phantomjs
Testing https://google.com ... please wait, this may take a minute.
  Violation of "color-contrast" with 3 occurrences!
    Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds. Correct invalid elements at:
     - #gb_23 > span.gbts
     - #gbztms1
     - #hplogo > div
    For details, see: https://dequeuniversity.com/rules/axe/2.3/color-contrast
3 Accessibility issues detected.
Please note that only 20% to 50% of all accessibility issues can automatically be detected. 
Manual testing is always required. For more information see:
https://dequeuniversity.com/curriculum/courses/testing
Danys-iMac:~ danyparedes$ 

Podemos especificar reglas mas especificas para validar con el flag rules –rules y ademas acotarlo a una area especifica ejemplo un formulario o un widget especifico usando el flag –include y –exclude.

axe www.miweb.com --include #main-container --exclude #sidemenu

Para guardar los resultados usamos el flag –save que en vez de retornar los mensajes en la misma consola nos permite guardarlos en formato json ademas poder especificar el directorio con –dir .

En mi caso jugare un poco mas a profundidad con axe ya que me permite a aplicaciones ya existentes que tenga que mejorar su accesibilidad ejecutar de forma rapida test y asi mejorar la calidad de la misma.

Si quieres saber más sobre axe y axe-cli puedes visitar la pagina de axe-core y axe-cli ademas que te recomiendo que veas las charlas de @kastwey

Como crear typings para librerías en Typescript ?

Si algo tengo que reconocer es que Typescript nos permite sentir que tenemos el control en javascript y eso es gracias también a los typings (tsd) , pero algunas librerías no tienen los tiene typings, yo me he visto en necesidad de escribir los typings de la librería rdjs.

Creando los typings

Para crear nuestro typings de la librería, tenemos que tener nuestra librería instalada por npm y dentro de de nuestro proyecto creamos un directorio llamado typings y dentro otro con el nombre de la libreria que queremos en mi caso rdjs

typings/index.d.ts
typings/rdjs/index.dt.ts

Typescript interpreta los archivos * .d.ts como archivos de declaración y estos describen los métodos que expone la librería sin la implementación de ellos.

En el directorio de typings tenemos un index.d.ts que contendrá una referencia a cada uno de nuestros archivos de declaración.

En este caso, typings/index.d.ts contendrá una referencia al archivo rdjs/index.d.ts.

/// <reference path="rdjs/index.d.ts" />

Definiendo los typings

Todas las definiciones de los typings la realizare en typings/rdjs/index.d.ts, lo primero que debemos hacer es crear un ambient module los cuales son declaraciones de tipo que no definen nada de lo que el código realmente hace, sino que simplemente define su forma.

Declaramos un módulo con el mismo nombre que el módulo npm en mi caso rdjs.

declare module 'rdjs'{

}

Luego definimos una interfaz con los métodos y su firma que queremos que utilice, en este caso he puesto los diferentes métodos que expone get, post, put y delete.

Realizamos un export del objecto rdjs es un objeto, nuestro módulo exportara una variable const implementando la interfaz que contiene nuestras especificaciones.

const rdjs: rdjs
export = rdjs

Ahora tenemos los métodos que utilizare en mi aplicación y puedo ver como visual studio code me autocompleta, me especifica la firma que necesita ese método y sus parámetros y el compilador me alerta de que no estoy enviado el tipo esperado.

Aqui todo el código completo o puedes verlo en Github

Ahora tenemos nuestro ideal puede autocompletar y ademas mostrarla firma de los métodos o visualmente alertarnos que no estamos pasando los parámetros especificados en la interfaz.

Ademas el compilador nos alerta de que no estoy enviado enviando los parámetros esperados.

scroller.ts(22,9): error TS2346: Supplied parameters do not match any signature of call target.

Happy Typings.

Como evitar ver .js y .map en Visual Studio Code

Cuando estas trabajando con Typescript, la verdad es que debes olvidarte de los .js y js.map para solo ver los .ts

Se que en algunos casos tenemos tasks runners que mueven ese tipo de archivo a una directorio, pero si y solamente quiere enfocarte en tus .ts en settings de visual studio code, poner excluir las extensiones de los archivos que no interesa ver y solo veras lo que consideramos importante.

"files.exclude": {

"**/.git": true,

"**/.DS_Store": true,

"nba/**/*.js": true,

"nba/**/*.js.mp":true

}

Como crear componentes con Vue ?

Vue nos permite crear componentes para hacer nuestra aplicación más desacoplada y reutilizable, en este post quiero explicar un poco sobre como crear componentes en Vue, cómo compartir data entre ellos y cómo registrarlo de forma local o global.

Porque usar componentes ?

Si tenemos una funcionalidad que quisiéramos reutilizar en otras aplicaciones o instancias, Vue nos permite crear componentes que pueden ser utilizados en la misma aplicación o en diversas, de una forma fácil y rápida.

Mi ejemplo se basa en la funcionalidad contador, que la sacaremos de estar incrustada en la aplicación a ser un componente.

Creando un Vue.Component ?

Un Vue.Component es igual que una  instancia de Vue pero con más opciones, para crear un componente utilizamos Vue.component y como primer argumento especificamos el tag del componente, ejemplo ‘my-counter’, y como segundo argumento un json object muy similar a una instancia de Vue.

Para este ejemplo voy a copiar la funcionalidad del counter de nuestra app1, pero con un cambio, como sabemos, component extiende instancia de Vue, la propiedad data del component va a interferir con nuestra instancia de data en Vue,  por eso convertimos el data del componente a una función evitar conflictos.

Ahora con agregar el nombre del tag en nuestra aplicación debe visualizar el contador, y podemos en las dos  instancias de Vue utilizar el componente <my-counter></my-counter>

Compartiendo data entre componentes

Cada instancia de components tienen el control sobre su scope de data, pero si quisiéramos compartir data entre componentes ?

Para este caso entonces podemos crear un objeto data y asignarlo a nuestro componente, Vue detectara el cambio en cada instancia de el componente y reflejara el cambio aunque sean dos aplicaciones diferentes.

Registrando componentes

Vuejs nos permite registrar los componentes de dos formas locales y globales,  en el ejemplo anterior el componente lo registramos de forma global,  eso quiere decir que cualquier app que llame el tag puede utilizar el componente, solo llamando el nombre .

Pero si quisiera llamar el componente con otro tag en mi aplicación o que mi componente solo se muestre en las apps que lo tenga registrado, entonces necesitamos un registrarlo de forma local.

Para registrar un componente de forma local,  tenemos que guardar nuestro componente en una variable y no utilizar Vue.component,  sino lo definimos como un objeto json y en nuestra aplicación utilizamos el atributo ‘components’ que es donde especificamos el tag con el cual queremos usar el componente en nuestra aplicación y como valor la variable donde hemos almacenado el componente, he aquí un ejemplo.

Pasando información a los componentes

Cada instancia de un componente en Vuejs tiene su propio ámbito aislado. Esto significa que no puede  hacer referencia directa a los datos de los padres, pero podemos  transmitir información a los componentes secundarios utilizando Props.

Un prop es un atributo personalizado para pasar información de la app al componente o de un componente padre a componente hijo, para lograr esto debemos declarar implícitamente las props que espera recibir en nuestro componente.

En este ejemplo tengo una app my-gallery que mostrara un listado de imágenes de “personas famosas de react”, para mostrar la imagen creare un componente gal-image el cual tiene una prop que se llama imageUrl, la cual permitirá que la app my-gallery le envíe la imagen a visualizar.

Utilizaré directiva v-for para iterar en el array de imágenes, como los atributos son sensibles a mayúscula y minúscula pasar el parámetro tenemos que usar kebab-case, en este caso mi propiedad se llama imageUrl pero la asigno como image-url.

Para enviar la url de la imagen a el componente no puedo usar  {{miobjeto.mipropiead}} , sino tenemos que hacer un bind a la propiedad usando v-bind o :image-url.

He aqui un ejemplo.

See the Pen vue example with components by Dany Paredes (@danywalls) on CodePen.

Happy Vue!

Como mejorar mi experiencia con Parallels ?

Uno de los puntos fuertes de Parallels es la integración, pero cuando esto te hacer perder el sentido de cada entorno es un poco complicado.

En estos días estoy usando Parallels con Windows 7 / 10 y aunque estoy muy contento con la experiencia hay puntos de configuración que considero que debo poner para poder tener cada cosa en su lugar.

Parallels por defecto comparte los discos, cloud folders (Google Drive y OneDrive)  y asigna tu directorio /home/tuuser en Mac como directorio por defecto del usuario en Windows.

Cual es el problema con esto, que cuando en mi caso uso Visual Studio los proyectos se crean en la Mac y no en el Windows  causando que si hago un backup de la pc de Paralles pierda lo que he trabajado, tanto en Mac y Windows aparecen varios directorios compartidos sumado a la vinculación de aplicaciones entre sistemas Mac/ Windows ejemplo tengo un .json y me lo ha vinculado con Visual Studio 2015, por tanto cuando quiero abrir un .json termina iniciando el Parallels y el Visual Studio o en casos peores que un .zip me lo quiera abrir con el 7zip que tengo en Windows.

A pesar de estas quejas estoy contento con Parallels y esta es mi configuración que he puesto para evitar estos comportamientos.

  1. Desconecte todo lo que se comparte  (la verdad no lo considero importante)

Desabilite compartir el perfil y los directorios de Cloud esto evita que aparezca el directorio de Google Drive y OneDrive en ambos y viceversa.

3- Elimine que compartan aplicaciones y notificaciones entre Mac y Windows.

Happy Parallels.

Como mover ventanas con el teclado en OSX ?

Poder mover las ventanas con el teclado es algo que me gusta mucho, para mi Windows 7 tiene  unos de los mejores controles de ventana con el teclado que existen y lo extrañaba en OSX.

Pero gracias a la aplicación Spectacle, puedo hacerlo en OSX, Spectacle me permite por defecto mover las ventanas en OSX con la misma configuración de Windows 7 o la puedo cambiar a mi antojo, ademas es muy es fácil de configurar, les dejo el enlace.

https://www.spectacleapp.com/

Designed by Freepik

 

Como acceder a IIS-Express remoto?

Cuando desarrollamos para asp.net y queremos acceder a nuestro servidor IIS-Express desde el otro ordenador o móvil.

IIS-Express Proxy es un paquete de Nodejs que nos permite acceder a nuestro IIS-Express desde cualquier dispositivo en la misma red.

Para utilizarlo solo basta con iniciar nuestra aplicacion web en Visual Studio modo debug y la aplicación iniciara el IIS Express en algún puerto ejemplo: http://localhost:9597, ahora para poder acceder desde nuestro móvil solo tenemos que instalar el paquete de node IIS Express.

1- Instalar iisexpress-proxy de forma global.

npm install iisexpress-proxy -g

2- Especificarle a iisexpress-proxy donde que puerto tiene que redireccionar.

iisexpress-proxy 9597 to 3000

Ahora desde nuestro dispositivo que este en la misma red, podemos acceder a nuestro IIS-Express, puedes leer mas informacion  en al pagina de github.

https://github.com/icflorescu/iisexpress-proxy

 

Negocios de vector diseñado por Dooder – Freepik.com

Como configurar NPM y VSCode detrás de un Proxy?

En estos días estaba trabajando en un lugar donde “el proxy” no era mi mejor amigo, al intentar de instalar mis paquetes mediante npm  o instalar las extensiones de VSCode era imposible por eso necesite configurar el proxy en ambos.

NPM> Desde la terminal:

npm config set proxy http://yourproxyiporaddress:port
npm config set https-proxy http://yourproxyiporaddress:port

Luego para instalar mis extensiones de VSCode también se requiere el “proxy”:

Preferences > User Settings

"http.proxy": "http://yourproxyiporaddress:port"

Happy Proxy!

Designed by Freepik

Como desbloquear nuestra Mac con el Iphone con KnocktoUnlock?

Knocktounlock es una app para poder desbloquear nuestra Mac con el IPhone, Mi primera impresión es que era una “pijada” o algo que  solo la usaria para mostrar a los amigos como desbloqueaba la Mac.

Pero con el tiempo de acostumbras a poder desbloquear la Mac sin necesidad de escribir la contraseña y la comodidad es fenomenal.

Mas informacion: http://www.knocktounlock.com

© 2017 Danywalls

Tema por Anders NorénSubir ↑