Autordany

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

Modificando Eventos con Vuejs

En algunos casos tenemos comportamientos en nuestra aplicaciones de eventos que se propagan de un hijo a un padre o queriamos dejar de escuchar,  nuestro querido jquery nos brindaba .off  para dejar de escuchar un evento  o event.stopPropagation() para evitar propagarlo.

Podemos realizar lo mismo en vuejs de una forma más limpia e integrada vue, en este ejemplo el evento click de contenedor player se propaga al padre.


Vuejs  nos brinda una forma elegante de evitar la propagación usando evento.stop , evitar el envio de un formulario con event.prevent  o que solo se ejecute una vez event.once.

He modificado el ejemplo anterior, haciendo uso de .once para solo permitir hacer click una vez en el team,  .prevent para evitar  el submit del form y .stop para que no propague el evento click al padre.

Como han visto es una forma muy elegante, simple de modificar el comportamiento de los eventos, si deseas saber mas sobre gestionar eventos en Vuejs
https://vuejs.org/v2/guide/events.html 

Porque vendí mi Magic Mouse 2 ?

En el día de hoy he vendido mi Magic Mouse 2, la verdad hacen unos meses cuando lo compre los aspectos principales eran un lo un mouse hermoso y se podía cargar con el mismo cable del Iphone , era la mejor solución para decirle adiós a las baterías , en resumen perfecto.

Pasaron los meses y aparte de la belleza , la funcionalidad en Mac estaba “bien”, los gestos, pero .. a partir de ahí.. nada especial, en mi día a día en el trabajo uso un Mouse Logitech de no más de 9 euros.

Me he acostumbrado al comportamiento de Mouse Logitech, ademas que cuando inicio la maquina virtual con Windows, el Magic Mouse no tiene la fluidez que esperaba o la suavidad al mover el mouse.

Si eres una persona que solo usa Mac, porque siempre usas Magic Mouse pues será una compra segura, pero si te pasas 8 horas  con un mouse “normal” y apenas usas el Magic Mouse pocas horas cuando estás en casa entonces no creo que sea una buena inversión.

Por menos de 20€ tienes opciones mejores que funcionan perfectamente bien tanto en Windows como en Mac.

Un Saludo.

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

}

Hola Vue-Cli

Cuando queremos desarrollar una aplicación con Vue con toda la potencia de ES6, ademas detener un entorno de desarrollo listo, con de diferentes templates o configuraciones predefinidas dependiendo del nivel de complejidad de nuestra aplicación, entonces tenemos que mirar vue-cli.

Vue CLI

Vue  CLI nos brinda templates con es6, webserver, hot reload, bundle, sass, testing y mas. Depende de nuestro proyecto,  podemos elegir entre los diferentes templates:

  • simple 
  • webpack simple 
  • webpack
  • browserify
  • browserify simple.

Instalando Vue CLI

Para instalar vue-cli tenemos que tener nodejs instalado, e igual que cualquier otro paquete de nodejs usamos el siguiente comando para tenerlo disponible de forma global.

npm install -g vue-cli

Al finalizar instalación, podemos ver los templates que vue-cli disponibles con el comando vue list.

vue list muestra todo los templates disponibles.

En este demo utilizare webpack-simple, que me brinda webpack + vue-loader preconfigurado.

Para crear el proyecto escribimos el comando vue init webpack-simple holavue, este nos pedirá descripción del proyecto, el autor y si queremos usar Sass.

Ahora solo tenemos que entrar al directorio creado, ejecutar npm install, al finalizar npm run dev este iniciara webpack transpilando el código, detectando los cambios y el servidor web con la siguiente página de inicio.

npm run dev

 

Vue Project Template

Un vue proyect consta de un grupo de archivos y directorios:

.babelrc: define la configuración de babel para transpilar el código de es6 a es5.

.gitignore: específica a git que ignore los directorios y archivos innecesarios.

index.html: Página de inicio que hace referencia a una main.js que es la instancia principal de vue. package.json para los paquetes de nodejs.

webpack.config.js  Configura los loaders, webpack, compilación, minificación y varios temas mas.

main.js: Es punto de entrada y contiene una instancia de vue escrita en es6, sin un template y utilizando render, para sobrescribir la propiedad template, pasandole el componente App.vue.

import Vue from 'vue'
import App from './App.vue'

new Vue(
{
el: '#app',
 render: h => h(App)
})

Root Component y Single File Components .Vue

App.vue Es el componente root, esta formado de <template>, <script> y <style>. Este sera el component principal y de donde colgarán los demás componentes que crearemos.

Los archivos .vue o Single File Components nos permiten definir el template, nuestro código javascript y estilo css en un solo archivo, todo esto gracias a webpack y  vue-loader.

Una App.vue se compone de un template el cual representará los elementos que queremos en el DOM y  script donde definimos nuestro componente de Vue y  style escribimos los estilos del componente.

<template>
</template>
<script>
export default {
}
</script>
<style>
<style>

Ya con nuestra estructura por defecto creada con vue-cli podemos empezar a crear mas componentes, registrarlos y consumirlos desde nuestro RootComponent,  por ejemplo podemos crear un directorio components y dentro crear un archivo player.vue.

En template definimos una variable {{playmode}} que expondremos en data, (retornando en una función) y  el método changeMode() que cambiará el modo del juego.

<template>
<div>
  <h2>Lebron James is {{playmode}}</h2>
  <button @click="changeMode">Play!</button>
</div>
</template>
<script>
  export default {
      data: function(){
          return {
              playmode: 'with the ball'
          }
      },
      methods:{
          changeMode(){
              this.playmode = 'shooting';
          }
      }
  }
</script>
<style>
</style>

Usando el componente

Para utilizar nuestro componente, podemos registrarlo globalmente en Main.js, primero importamos con una alias el componente player y registramos o Vue.component especificando el selector o tag y el y la variable o el objeto que referencia el componente.

import Vue from 'vue'
import App from './App.vue'
import Player from './components/player.vue'
Vue.component('my-player',Player)
new Vue({
el: '#app',
render: h => h(App)
})

Ahora podemos llamar el tag <player></player> desde nuestro App.vue 

Registrando Multiple components

Pero si quisiéramos registrar varios componentes, suponiendo que tenemos un componente header, footer y team, podemos usar la propiedad components de nuestro root elements e importarlos:

<script>
  import TopArea  from './components/top-area.vue';
  import FooterArea from './components/footer-area.vue';
  import Team from './components/team.vue';
  import Player from './components/player.vue';
  export default {
      components: {
          'top-area': TopArea,
          'footer-area': FooterArea,
          'team': Team,
          'player': Player
      },
      data: function(){
          return {
              title: 'root component'
          }
      },
}
</script>

Scope Style

Una de las cosa que más me ha gustado de .vue es tener scope de el css, por defecto cualquier estilo que agregamos al style en cada componente se crea a nivel “global” por tanto afecta a todos los componentes ejemplo.

Todos los componentes que he creado tienen una clase .container si le pusiera un tamaño o color pues aplicaría y afectaría a todos, como puedo controlar eso ?

Agregando scoped a los estilos del componente, esto permite que el estilo solo se aplique al componente actual.

<style scoped>
   h2{
       color: red;
   }
   .container{
       border:1px solid;
       background: #cacaca;
   }
</style>

Deploy to Production

Vue  nos permite realizar un build listo para optimizar nuestro código y publicarlo en producción,  con el comando “npm run build” , esto crea la carpeta dist donde tendremos nuestro código minificado y optimizado listo.

npm run build

Hasta aquí una pequeña introducción a vue-cli , si deseas saber más puedes pasarte por la página oficial.

https://github.com/vuejs/vue-cli
https://github.com/vuejs-templates

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!

Conociendo el Vue Object

Es muy fácil iniciar con Vuejs pero nos hemos preguntado si es posible comunicar apps de vue entre si ? o puedo controlar el ciclo de vida de la aplicación o puedo acceder a los elementos que no fueron definidos en Vue

Vuejs es una especie de middleware entre el las propiedades expuestas en data, métodos, watch o computed y nos permite tener acceso a ellas, podemos comunicar diferentes instancias.

Ciclo de Vida

La vida de una app de Vue inicia con new Vue() , luego se lanzan una serie de eventos como beforeCreate(), created(), beforeMount, updated, beforeUpdated, beforeDestroy y Destroyed.

Cada uno de ellos nos permiten realizar o acceder a ciertas áreas de la aplicación, comentare algunos que he usado.

beforeCreate:
Este inicia la creación de la instancia y registra los eventos.

created:
Compila el template o el elemento del DOM relacionado en “el”.

beforeMount:
Vue remplaza ‘el’ con el template compilado.

mount:
En este momento es donde el DOM es mostrado en el navegador.

destroyed
Este es lanzado cuando destruimos nuestra instancia de Vue usando this.$destroy();

Comunicándo instancias.

Vue nos sirve de proxy entre las propiedades y metodos definidos en la instancia, por tanto podemos acceder a las propiedades de otra instancia o ejecutar métodos.  Esto es realmente útil cuando tenemos aplicaciones que deben compartir información entre ellos.

Accediendo a el DOM

Cuando queremos acceder a elementos del DOM y sus propiedades para esto utilizamos ref para que Vue guarde una referencia de todos los elementos que nos interesa acceder.

Iniciando la instancia

En algunos casos tenemos que esperar que el DOM sea generado por nuestra aplicación , porque el área se carga a partir de cierta acción.

Components

Vue al igual que React, Angular o Aurelia; tiene la capacidad de permitir crear componentes para ser utilizado en diferentes instancias, los componentes nos permite registrar un tag  que tenga comportamiento y este pueda ser replicado en diferentes instancias de Vue.

Happy Vue

Directivas de Vuejs

Vue nos ofrece un listado de directivas para facilitar el desarrollo de SPA o componentes, las cuales nos permiten realizar binding, controlar visualización, escuchar eventos y varios aspectos. En este post trato de mencionar alguna de ellas.

v-bind

En el post anterior para mostrar una propiedad en data usamos {{message}} , pero si queremos realizar el bind en un atributo de un elemento sería diferente no podemos usar:

<input type="button" value="{{message}}/>

Para realizar el binding sobre un atributo de un elemento html, entonces usamos la directiva v-bind: especificando el atributo y asignando la propiedad, en el ejemplo asigno la propiedad mensaje al atributo value.

<div id="app">
<h1>{{message}}</h1>
<input type="button" v-bind:value="message"/>
</div>

v-on:

Esta directiva nos permite escuchar un evento de un elemento, por ejemplo detectar el mouseout sobre un h2  y llamar el método getTime.

<div id="app">
<h1>{{message}}</h1>
<h2 v-on:mouseout="getTime">{{currentTime}}</h2>
<input type="button" v-bind:value="message"/>
</div>

new Vue({
el:"#app",
data:{
message: "Vue Mola",
currentTime: new Date().toISOString().slice(11, -1)
},
methods:{
getTime:function(){
this.currentTime = new Date().toISOString().slice(11, -1); 
}
}
})

Además podemos agregando el parámetro  $event podemos obtener información del evento  o podemos detener eventos como el click o preventdefault para evitar efecto burbuja o detectar teclas v-on:keyup.enter.space para saber cuando presionan la tecla enter o space.

https://vuejs.org/v2/guide/events.html

v-once

Nos permite asignar que una propiedad sea evaluada solo una vez, esto es útil si queremos mantener el valor inicial y solo evaluara una vez esta propiedad.

<h2 v-once>{{currentTime}}</h2>
<h2 v-on:mouseout="getTime($event)">{{currentTime}}</h2>

v-html

Esta directiva nos permite inyectar html o elementos dinámicos en el DOM, como input, href o buttons.

<div id="app">
<div v-html="myinput"></div>
</div>
new Vue({
el:"#app",
data:{
myinput: "<input type='text'>"
}
})

v-model:

Nos permite el “two-way binding” a una propiedad pero este solo funciona en algunos elementos como input, checkbox etc.

<input type="text" v-model="message"/>
<p>{{message}}</p>

v-if

Podemos condicionar la visualización de un elemento, pero con un aspecto especial este, remueve el elemento de DOM tiene su importancia si estamos creando una spa que crea mucho html y queremos eliminar carga del DOM.

<div v-if="visible">
 <h1>Estoy visible</h1>
</div>

v-else

Esta directiva trabaja junto con v-if para realizar lo contrario a v-if.

<div v-if="hasUser">
<h1>Hay usuarios</h1>
</div>
<div v-else>
<h2>No tenemos usuarios conectados </h2>
</div>

v-show

Nos permite ocultar un elemento en el DOM, pero manteniendo su existencia en pocas palabras un display:none en toda regla.

<div v-show="isactive">
<h2>I'm active</h2>
</div>

v-for

Este nos permite iterar en arrays de elementos y acceder a sus objetos almacenados.

<div class="player" v-for="player in players">
<p>{{player}}<p>
</div>

Como ves Vuejs nos da un aire a angular 1x, si has trabajado con el, en otro post a prueba algunas de estas directivas.

Happy Vue!

© 2017 Danywalls

Tema por Anders NorénSubir ↑