Forem: Capua

Como crear una guía de estilo con Figma

Ayoze Barrera 🇮🇨 — Sun, 01 Mar 2020 14:54:29 +0000

La imagen de un proyecto es súper importante, y va a influenciar al usuario directamente para que siga utilizando la aplicación y la identifique rápidamente o para que salga huyendo confuso y asustado.

Cuando trabajan varios diseñadores o programadores en un proyecto muy grande, lo mejor es crear una guía de estilo para que nadie se salga del guión y acabe diseñando algún componente fuera de tono en comparación al resto.

Para evitar esto, existen las guías de estilos.

Así que cuando llega alguien nuevo al proyecto, le podemos dar la bienvenida con una bonita guía de estilos.

Que es una guía de estilo

Una guía de estilos, como bien dice su nombre, es una guía para saber que materiales se deben de usar para seguir construyendo, como por ejemplo, que tipografía usar en los títulos, cuáles son los colores principales de la aplicación, que sombras utilizar, y cualquier aspecto que queramos definir.

En nuestra empresa, hemos creado una guía de estilos muy simple para una aplicación que llevamos desarrollando cuatro años: Fleetview.

Nuestra guía de estilo ha servido a otros compañeros para poder crear manuales y vídeos sobre la aplicación.

Hemos decidido hacerla en Figma ya que es una aplicación increible y nos permite exportar cualquier elemento en vectorial.

Que elementos añadir

Podemos añadir los elementos que consideremos más importantes, y en nuestro caso fueros los siguientes:

Branding

Los logos de la aplicación y sus variantes. Cualquier otra variante que no esté aquí definida no estará permitida.

Paleta de colores

Colores principales y secundarios.

Tipografía

La tipografía que usamos en el logo, en los títulos y en los párrafos. De cada uno de ellos definimos la familia, peso, tamaño, altura de línea, espaciado entre letras, color y un ejemplo.

Iconos

El sistema de iconos que usa la aplicación. Si hay que diseñar un icono nuevo, debe tener el mismo tamaño y mismo el grosor en las líneas.

Componentes

Los componentes más importantes que utilicen algunos de los aspectos anteriores.

Y todo junto pues se vería así:

Hasta la próxima batalla!

🖖

Integrando Prettier con ESLint

Mario Blas 🇮🇨 — Thu, 27 Feb 2020 18:24:02 +0000

Este post fue publicado originalmente en mayo de 2019.

En el siguiente artículo vamos a conocer Prettier y cómo podemos integrarlo con ESLint para mejorar nuestro flujo de trabajo.

Configurar estas herramientas será una inversión que haremos una vez y sus beneficios los notaremos durante todo el proyecto.

¿Qué es ESLint?

Si aun no lo conocéis, ESLint es un linter para JavaScript y JSX. Ayuda a identificar e informar sobre patrones que se encuentran en el código con el objetivo de evitar errores.

Principalmente, hay que tener en cuenta que las reglas de los linters se dividen en dos categorías:

Reglas de formato

Por ejemplo: longitud de línea máxima, tipo de indentación, tamaño de la indentación...

Reglas de calidad del código

Por ejemplo: no permitir variables que no se usen, no permitir declaraciones de variables globales...

Son las más importantes que ofrecen los linters ya que pueden detectar errores en el código.

¿Qué es Prettier?

Prettier es una herramienta para formatear el código, tiene soporte para HMTL, CSS, JavaScript, JSX, TypeScript, GraphQL... entre otros.

Se encarga de garantizar que el código se ajuste a un estilo consistente de manera automática. Para ello, analiza el código y lo re-escribe cada vez que se ejecuta.

Su objetivo es acabar con los debates sobre el estilo del código, de ahí que no trate de cubrir todos los casos de uso. Es una herramienta dogmática, por tanto, los debates sobre estilo simplemente pasarán a ser debates sobre qué opciones de Prettier usar.

Gracias a Prettier ahorraremos tiempo y energía en hacer que el estilo de nuestro código esté normalizado.

Configuración

Como hemos visto, cada herramienta tiene sus puntos fuertes e intentaremos aprovechar lo mejor de cada una. En definitiva, ESLint estará enfocado en lo relacionado a la calidad del código mientras que Prettier se encargará de su formato.

En la siguiente configuración nos centraremos en su uso con JavaScript.

Instalar Dependencias

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier: desactiva las reglas de ESLint que entren en conflicto con Prettier.
eslint-plugin-prettier: añade una regla que formatea el contenido usando Prettier.

Configurar ESLint

En nuestra configuración de ESLint añadiremos las siguientes líneas:

// .eslintrc.js

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  rules: {
    'prettier/prettier': 'warn',
  },
}

De esta manera será ESLint el que se encargará de ejecutar Prettier.

He añadido eslint:recommended a modo de ejemplo, se puede usar la configuración que deseemos. Por otro lado, también he configurado que los elementos que no cumplan con las reglas de Prettier se muestren en forma de aviso, si queremos que muestren en forma de error simplemente hay que sustituir 'warn' por 'error'.

Configurar Prettier

En la configuración de Prettier vamos a añadir algunas reglas, por ejemplo:

// .prettierrc.js

module.exports = {
  printWidth: 100,
  singleQuote: true,
  trailingComma: 'all',
};

Script de npm

Añadiremos la siguiente línea en los scripts de nuestro package.json

"scripts": {
  "lint:fix": "eslint --fix ./src"
}

ESLint corregirá los problemas que sea capaz de resolver automáticamente y aplicará el estilo al código con Prettier, tal y como hemos configurado anteriormente.

Resultado

Si con la configuración anterior ejecutamos el script con npm run lint:fix obtendremos para el siguiente fichero de ejemplo un resultado como este:

Antes de ejecutar el script

Después de ejecutar el script

Ahora podremos cambiar entre proyectos con distintas configuraciones de manera cómoda, no deberemos preocuparnos si usar 2 espacios o 4, comillas simples o dobles… simplemente nos centraremos en la solución que estamos implementando.

Integración con VSCode

Vamos a configurar VSCode para que ejecute ESLint y dé formato al código cuando guardemos un fichero, para ello:

Instalaremos la extensión ESLint en caso de no tenerla.
Abriremos preferencias de VSCode y haremos click en el primer icono situado en la esquina superior derecha para editar el fichero settings.json y añadimos lo siguiente:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Conflictos con la opción editor.formatOnSave

En caso de tener configurado que VSCode formatee nuestro código al guardar un fichero (con la opción editor.formatOnSave), deberemos desactivarla para JavaScript y JSX, ya que de este proceso se encargará ESLint.

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Pre-commit hook

Si queremos asegurarnos de que el código que se sube al repositorio cumple con las reglas establecidas, podemos configurar un hook de git para automatizar el proceso.

Una de las ventajas es que es agnóstico al editor que utilicemos, además de ser muy útil si trabajamos en equipo.

Instalar dependencias

npm install --save-dev husky lint-staged

husky: es una herramienta que facilita la configuración de hooks de git.
lint-staged: es una herramienta para ejecutar linters sobre los ficheros que se encuentren preparados para el commit.

Configurar Husky

En la configuración de Husky añadiremos lo siguiente:

// .huskyrc.js

module.exports = {
  hooks: {
    'pre-commit': 'lint-staged'
  }
};

Ahora cada vez que vayamos a hacer un commit antes se disparará el hook pre-commit y este ejecutará lint-staged.

Configurar Lint-staged

En la configuración de Lint-staged añadimos lo siguiente:

// .lintstagedrc.js

module.exports = {
  '*.js': ['eslint --fix', 'git add']
};

Para todos los ficheros con extensión .js ejecutará ESLint para corregir los problemas automáticamente y dará formato a los ficheros preparados, una vez modificados vuelve a prepararlos para el commit.

Recuerda que ESLint ejecutará Prettier tal y como vimos antes.

Repositorio de ejemplo

En el siguiente enlace he preparado un ejemplo con el mítico create-react-app usando la configuración de ESLint que ofrece por defecto (la cual no incluye reglas de estilo) e integrando lo que hemos visto en el artículo.

capua / cra-prettier-eslint-example

Ejemplo para el artículo: Integrando Prettier con ESLint

¡Nos vemos en la próxima publicación!

Mapeando tus movimientos con React y Leaflet

Ayoze Barrera 🇮🇨 — Mon, 24 Feb 2020 12:12:45 +0000

Hoy en día usamos mapas para todo… para buscar direcciones, consultar cuál es el mejor camino a tomar para llegar a un punto en concreto, para promocionar un local, o simplemente viajar desde casa (asi es, he visto a youtubers que se pasan horas dando vueltas por paises gracias a los mapas… y hacen visitas!)

Pues por ese motivo vamos a ver cómo podemos hacer un mapa con nuestros movimientos.

Moves app

Moves

Para registrar los movimientos, aunque hay otras, he usado la aplicación moves.

Moves se ejecuta en segundo plano y nos permite importar tus movimientos en diferentes formatos, y uno de ellos es geojson.

Para empezar nos vamos a la página web de moves. Allí nos permitirá importar lo registrado desde nuestro dispositivo.

Configuración

Lo primero será instalar los paquetes de leaflet y react-leaflet:

$ npm -i S leaflet react-leaflet

React-leaflet lo que hace es cargar componentes pero sin renderizar nada, simplemente usa los métodos de leaflet en el lifecycle del componente.

Podríamos conseguir nuestro mapa sin react-leaflet pero lo he usado anteriormente y ayuda mucho.

El mapa

Ya estamos listos para empezar así que lo primero será importar los paquetes que vamos a necesitar.

import { Map, TileLayer } from 'react-leaflet';
import L from 'leaflet';

De momento solo he importado dos componentes de react-leaflet: Map y TileLayer. Esto es lo básico que necesitarás para mostrar un mapa.

También he importado leaflet porque vamos a usar el método circleMarker para poder tratar los puntos de los geojsons de nuestros datos.

Map

Capa principal del mapa que controla el zoom, bordes y el centro. Lo que vayamos a representar en el mapa, lo pasaremos como hijos.

TileLayer

Componente que se encargará de mostrar los tiles correspondientes en base al zoom y al centro.

Este componente necesita la propiedad url que será al montarse.

Para este ejemplo, voy a usar un mapa en blanco y negro, pero puedes encontrar mas urls aquí.

https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}{r}.png

Ah! Antes de poder usar nuestro mapa, necesitaremos importar el css de leaflet, que puedes encontrar en su apartado de descargas.

Configurados estos dos componentes, deberíamos de tener algo muy parecido a esto:

Tanto rollo para tener un mapa vacío?

Calma… ahora viene lo bueno 😁

Nuestros movimientos

Moves, aparte de ofrecerte muchos formatos, también te separa los datos en movimientos diarios, semanales, mensuales, anuales y por último, todos en un mismo fichero. Yo voy a utilizar mis lugares visitados separados por años. En concreto los de 2016, 2017 y 2018.

Para ello voy a usar una capa de GeoJSON de leaflet, que como no, también lo tenemos como componente en react-leaflet:

import { Map, TileLayer, GeoJSON } from 'react-leaflet';

El siguiente paso sería importar los datos de nuestros movimientos:

import places2016 from './data/places_2016.js';
import places2017 from './data/places_2017.js';
import places2018 from './data/places_2018.js';

Después, tenemos que usar el componente GeoJSON como un children más en nuestro component Map:

<Map style={styles.map} center={props.center} zoom={props.zoom}>
  <TileLayer url={props.url} />
  <GeoJSON
    data={places2016}
  />
</Map>

Además de pasarle los datos a la capa GeoJSON, el componente necesita la propiedad style, que es una función que usará internamente para aplicar el style que queramos a cada elemento de nuestro geojson:

function getStyle(feature, layer) {
  return {
    weight: 1,
    opacity: 1,
    color: '#000'
  }
}

Cuidado! La función anterior solo te servirá para elementos que NO sean de tipo Point.

Dentro de mis geojsons, solo tengo elementos de tipo Point, asi necesitaré utilizar una propiedad extra: pointToLayer.

const geojsonMarkerOptions = {
  radius: 4,
  fillColor: "#EE4266",
  color: "#000",
  weight: 0,
  opacity: 1,
  fillOpacity: 0.4
}

function pointToLayer(feature, latlng) {
  return L.circleMarker(latlng, geojsonMarkerOptions);
}

En mi caso, el componente GeoJSON se queda de la siguiente manera:

<GeoJSON
  data={places2016}
  pointToLayer={pointToLayer}
/>

Ya casi terminamos!

Como voy a representar tres geojsons diferentes, y quiero representarlos con diferentes colores, tengo que crear tres funciones diferentes de pointToLayer

<Map style={styles.map} center={props.center} zoom={props.zoom}>
  <TileLayer url={props.url} />
  <GeoJSON
    data={places2016}
    pointToLayer={pointToLayer2016}
  />
  <GeoJSON
    data={places2017}
    pointToLayer={pointToLayer2017}
  />
  <GeoJSON
    data={places2018}
    pointToLayer={pointToLayer2018}
  />
</Map>

Este es el resultado final del componente:

Voilá, nuestro mapa estaría listo:

Nos vemos en la próxima batalla!

🖖🏼

Cómo crear un paquete de Node

Ayoze Barrera 🇮🇨 — Fri, 14 Feb 2020 10:02:24 +0000

Cuando vamos a crear un proyecto nuevo, nos pasamos una gran parte del tiempo copiando y pegando código de antiguos proyectos… ¿para que vamos a reinventar la rueda?

El nacimiento de nuestra librería personal

Para empezar, creamos una carpeta con el nombre del paquete, yo lo llamaré capua-package-sample, y dentro ejecutamos el siguiente comando de npm para generar nuestro package.json:

$ npm init --yes

Este comando te creará un package.json básico extrayendo información de la carpeta donde se ejecuta.

Deberíamos de tener algo parecido a esto:

{
  "name": "capua-package-sample",
  "version": "1.0.0",  
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Ayoze Barrera",
  "license": "ISC"
}

Fichero principal

Ahora que tenemos el package.json, necesitamos crear el fichero que se usará cuando se importe nuestro paquete. Este fichero se especifica en la propiedad main, y por defecto es index.js.

En este fichero, para nuestro ejemplo, exportaremos cualquier cosa, como por ejemplo una función sencilla:

exports.myAwesomeFunction = function () {
  return 'b' + 'a' + + 'a' + 'a';
}

Esta función debería de devolver «baNaNa».

Ahora solo faltaría subirlo a nuestro repositorio o publicarlo en npm!

Instalando nuestro paquete

Si has publicado el paquete sabrás como instalarlo, pero si no lo has hecho, quizás no sepas… pues es muy fácil, solo tienes que ejecutar el siguiente comando:

$ npm install <git-service>:<git-user>/<repo-name>

Si no rellenamos el servicio, buscará en github por defecto, pero soporta muchos otros… para saber más mira la documentación de npm install.

$ npm install -S github:capua/capua-package-sample
└── capua-package-sample@1.0.0  (git://github.com/capua/capua-package-sample.git#e5903fa2a1e4ee1e751a53fb0aa420cba07e949a)

Y ya solo tendríamos que importarlo:

import { myAwesomeFunction } from 'capua-package-sample';

myAwesomeFunction(); // => "baNaNa"

Nos vemos en la próxima batalla!

Desplegando apps en Meteor con Heroku y mLab

Mario Blas 🇮🇨 — Wed, 12 Feb 2020 20:05:23 +0000

Este post fue publicado originalmente en noviembre de 2016.

A continuación veremos como desplegar nuestra aplicación Meteor en 6 sencillos pasos. Los servicios que usaremos para ello son:

Heroku, una plataforma como servicio (PaaS) que permite crear, ejecutar y escalar aplicaciones web, su medio principal para el despliegue es git.

mLab, una plataforma de base de datos como servicio (DBaaS) para alojar y gestionar bases de datos MongoDB, actualmente ofrece alojamiento en AWS, Azure y Google.

0. Requisitos para empezar

Registrarnos en mLab.
Registrarnos en Heroku.
Instalar Heroku CLI.

1. Crear la Base de datos

Creamos una base de datos Mongo con el proveedor y plan que más se adapte a nuestras necesidades.

En el apartado Single-node el plan Sandbox es gratuito y ofrece 0.5Gb aunque no se aconseja para producción.

Asignamos un nombre a la base de datos, pulsamos en Create new MongoDB deployment y una vez creada entramos en ella.

Para terminar hacemos click en la pestaña Users, creamos un nuevo usuario y listo.

En la parte superior podemos ver nuestra MongoDB URI, que será la que usaremos más adelante y que tiene un aspecto parecido a lo siguiente:

mongodb://<dbuser>:<dbpassword>@ds<012345>.mlab.com:<12345>/<dbname>

2. Autenticarse con Heroku CLI

Desde la terminal nos identificamos con nuestras credenciales usando el siguiente comando:

$ heroku login

3. Crear la app en Heroku

Nos situamos en nuestro proyecto git y creamos la aplicación en Heroku indicando el nombre que deseamos.

Además podemos definir el nombre con el que vamos a referirnos a nuestro repositorio remoto y la región donde queremos alojar nuestra aplicación (por defecto son heroku y us respectivamente).

$ cd <my-git-project>
$ heroku apps:create <app-name> --remote <remote-name> --region <us|eu>

4. Aplicar un buildpack

El buildpack preparará nuestra aplicación Meteor para ser ejecutada por Heroku.

En este ejemplo vamos a utilizar el genial meteor-buildpack-horse.

$ heroku buildpacks:set https://github.com/AdmitHub/meteor-buildpack-horse.git

5. Configurar las variables de nuestra aplicación

# Variable para la URL
$ heroku config:set ROOT_URL="https://<app-name>.herokuapp.com"

# Variable para enlazar a nuestra Base de datos (MongoDB URI)
$ heroku config:set MONGO_URL="<mlab-uri>"

# Settings de Meteor (suponiendo que están en settings.json)
$ heroku config:set METEOR_SETTINGS="$(cat settings.json)"

6. Desplegar

Una vez tenemos todo configurado lo último que tenemos que hacer es un git push a la rama master de nuestro repositorio remoto en Heroku.

$ git push <remote-name> master

Bonus

Para terminar os dejo algunas anotaciones que os pueden ser de utilidad…

*Trabajar en equipo

Para que el resto del equipo de desarrollo pueda desplegar sus cambios tan solo tienen que añadir el repositorio remoto a su proyecto git usando:

$ heroku git:remote -a <app-name> -r <remote-name>

*Mostrar el log

Si queremos ver el log de nuestra aplicación tan solo tenemos que ejecutar:

$ heroku logs

*Integrar add-ons

Podemos agregar herramientas y servicios desde la terminal con el siguiente comando:

$ heroku addons:create <proveedor:plan>

*Desplegar una rama distinta de master

Lo haremos de la misma manera que haríamos con git:

$ git push <remote-name> <local-branch>:master

*Trabajar con varias instancias de Heroku

Si tenemos varios repositorios remotos de Heroku en un mismo proyecto para ejecutar algunos comandos tendremos que especificar la aplicación, por ejemplo:

# Development
$ heroku config:add METEOR_SETTINGS="$(cat settings-development.json)" --app <dev-app-name>

# Production
$ heroku config:add METEOR_SETTINGS="$(cat settings-production.json)" --app <prod-app-name>

Mapeando con Javascript

Ayoze Barrera 🇮🇨 — Mon, 10 Feb 2020 16:56:11 +0000

Este post fue publicado originalmente en julio del 2015

Hablaremos de Mapbox y aprenderemos a manejar y reproyectar nuestros datos geoespaciales con QGIS, para añadirlos a un mapa estilizado por nosotros.

El mundo de la cartografía es enorme, y puedo decir que me queda mucho por descubrir. Este artículo es parte de la experiencia que he obtenido en un proyecto reciente.

Antes de trastear con nuestros datos geoespaciales, primero necesitamos nuestro lienzo, el mapa.

Mapbox es una plataforma para crear y usar mapas, y está basada en la librería de LeafletJS. Tiene un buen abanico de herramientas, datos y servicios que se conectan muy bien entre sí, por ejemplo, podemos estilizar un mapa con Mapbox Studio, una aplicación que usa CartoCSS para darle vida a nuestro mapa junto con otras utilidades, para luego conectarlo con la librería Mapbox.js para jugar con nuestros datos vía Javascript.

Y eso amigos, en resumen, es lo que haremos hoy 🤗.

El plan starter nos permite estilizar un mapa y guardar 100mb de datos en los servidores de Mapbox. Si subes los datos a los servidores de ellos, luego podríamos usarlos en Mapbox Studio para estilizarlos junto a nuestro mapa, pero en nuestro caso no lo haremos así, lo haremos con js usando geojsons a través de la librería Mapbox.js.

Tarifas de Mapbox

Mapbox Studio

Mapbox Studio está disponible para OS X, Windows y Linux. Incluso tenemos acceso a su código en github.

Hablemos de sus posibilidades.

Datos

Gran Canaria con la vista previa a la izquierda y vista de datos a la derecha

Nos permite añadir nuestros propios geodatos, además de todos los datos que nos ofrece por defecto, como calles, terreno, satélite… con la posibilidad de controlarlos y de inspeccionarlos a nuestra merced.

Estilo

Podemos darle colores y formas a nuestro mapa gracias al preprocesador de estilos CartoCSS desarrollado por Mapbox. También tenemos acceso a una coleccion de iconos llamados Maki que están optimizados para tres tamaños diferentes y a un catálogo de tipografías con la posibilidad de añadir la nuestra propia.

Las posibilidades de la aplicación son mayores, pero con esto nos bastará para cumplir con el objetivo del artículo.

Empecemos

Vamos a crear nuestro mapa.

Nuevo proyecto en Mapbox Studio.

Cuando vamos a crear un nuevo proyecto, tenemos la posibilidad de elegir un mapa o de añadir datos propios para luego usarlos en algún mapa. En nuestro caso, como nuestros datos irán de la mano con js, vamos a experimentar un poco con CartoCSS. Elegiré el de Run, Bike and Hike.

Lo primero que vemos al elegir el mapa es que además de éste, tenemos la hoja de estilos a nuestra derecha separadas en varios ficheros. En estos ficheros tenemos todo el estilo que forma Run, Bike and Hike y será el que modifiquemos para conseguir nuestra “obra”.

Empezaré por cambiarle el color al mar. Para cambiar el aspecto de un elemento del mapa, debemos saber su identificador. Simplemente tenemos que ponernos en la vista de datos haciendo click en el botón que está a la derecha del zoom.

En esta vista, si hacemos click en algún punto del mapa, aparecerá un tooltip con la información de todos los datos de ese lugar. También podemos irnos a la sección Layers (Capas) del menú lateral izquierdo, el cual nos desplegará una ventana con la lista de todos los elementos que tenemos actualmente en nuestro mapa. Si os fijáis en la parte superior de esta ventana, veremos que los datos están bloqueados. Eso se debe a que se necesita un orden específico de capas para que el mapa funcione bien y en el caso de que quisiéramos añadir datos nuestros no podríamos, a menos que editemos el fichero project.yml y borremos el listado de capas. En nuestro caso no necesitamos desbloquearlo.

Una vez que sepamos el identificador del agua tenemos que identificarlo en nuestro proyecto. Lo encontraremos en el fichero bg.

#water {
  polygon-fill: @water; //relleno del polígono
  polygon-gamma: 0.5; //gamma, para reducir huecos entre polígonos
  ::shadow { //symbolizer
    polygon-fill: @water; //otro relleno
    opacity:0.9; //opacidad
    comp-op: screen; //operación de composición. efecto screen
    image-filters: agg-stack-blur(10,10); //sombra del agua(costas)
  }
  [zoom>12] { //estilo para zoom superior a 12
    polygon-gamma: 0.75; 
  }
}

Las posibilidades son muy amplias: cambiar bordes, sombras, añadir patrones, aplicar efectos entre los elementos, pero no me complicaré mucho (ya me luciré mas tarde jaja) así que simplemente cambiaré algunos colores y la tipografía. Tal vez en algún artículo escriba sólo de CartoCSS y sus posibilidades, pero de momento podéis consultar la documentación para aprender todo lo que ofrece CartoCSS.

Mapa antes y después del cambio

Una vez tengamos nuestro mapa, tenemos que subirlo al servidor de Mapbox para generar un ID el cual usaremos más tarde porque de momento, tenemos que hablar un poco de los datos geoespaciales.

Datos geoespaciales

Los datos geoespaciales o datos espaciales sirven para representar features (puntos, líneas o áreas) en una superficie. Estos datos pueden tener una tabla de datos con información.

Para poder tratarlos, usaremos un GIS (Geographic information system) donde podremos hacer una infinidad de cosas relacionadas con la geografía, como administrar los datos de cada punto, representar los datos o cambiarles la proyección, por nombrar algunas.

El GIS que usaremos se llama QGIS, de código abierto, el cual aparte de tener las herramientas típicas de un sistema geográfico, tiene una buena comunidad de plugins muy interesantes. Ya le dedicaremos un artículo en el futuro.

Hagamos lo que hagamos con nuestros datos, lo que nos interesa es, recordad, un fichero geojson.

En el caso de que no tengamos a mano ningún fichero, podéis generar uno entrando en geojson.io, un editor a tiempo real, con la posibilidad de agregar features fácilmente y con muchas opciones para la exportación. También lo uso para visualizar ficheros y saber si están bien proyectados.

En la siguiente parte cargaremos nuestros datos en un mapa con la librería de javascript mapbox.js o leaftlet.js.

Github también tiene un buen API de mapas. Subid algún fichero a Gist y lo podréis comprobar. Éste es el mío

Lo vamos a dejar por aquí!

En la siguiente parte cargaremos nuestros datos en un mapa con la librería de javascript de mapbox o leaftlet.

🌎

Intro a Sublime Text

Mario Blas 🇮🇨 — Wed, 05 Feb 2020 20:44:24 +0000

Este post fue publicado originalmente en abril de 2015.

Como buenos gladiadores además de estar bien preparados es importante familiarizarnos con nuestras armas. Cuanto más cómodos y adaptados estemos en nuestro entorno de batalla mayor será nuestro rendimiento. Una de las herramientas más importantes para un programador es su editor.

Personalmente somos de los que prefieren editor de texto en vez de IDE por su simplicidad y ligereza, para nuestros menesteres no nos hace falta más.

Sublime Text en su versión 3, a pesar de estar en beta es bastante estable y funciona realmente bien. Al abrirlo por primera vez sientes que viene casi “pelado” y es una de sus ventajas, ya que se puede personalizar prácticamente todo.

Sublime Text recién abierto.

Algunos de sus puntos fuertes son:

Ligereza.
Capacidad de personalización.
Selecciones y cursores múltiples.
Paleta de comandos.
Movernos entre ficheros, buscar en los mismos, ir a una función o linea determinada…
Cambiar de proyecto instantáneamente, recordando el estado del área de trabajo.
Acceso a una infinidad de paquetes creados por la comunidad.

¡A las armas!

A continuación os voy a mostrar algunas de mis preferencias.
Una de las primeras cosas que debemos hacer después de instalar Sublime es instalar Package Control siguiendo los pasos que indican en su web.
Para instalar un paquete tenemos que abrir la paleta de comandos (⌘+⇧+P) o (⌃+⇧+P), escribir install package y buscar por el nombre del paquete que deseamos.
En la web de Package Control podemos ver los paquetes de moda, nuevos y populares, además de mucha información extra.

Packages

Emmet

Para mejorar el workflow cuando trabajamos con HTML y CSS.

Echad un vistazo al ejemplo de su web y dedicadle un rato a ver su cheat sheet, no tiene desperdicio.

Sublime Linter

El uso de un linter se hace esencial para escribir código mejor, más limpio y con menos bugs, empleando buenas prácticas de programación.

Los linters no están incluidos en el paquete así que además tendremos que instalar los que deseemos. En concreto los que más suelo usar son JSHint, CSSLint y SCSSLint.

Para obtener información acerca de un error en concreto tan solo hemos de situar el cursor en la linea del error y podremos ver una ver una breve descripción en la barra de estado (situada en la parte inferior de la ventana), zona donde también podemos ver el número total de errores en cualquier momento.

SublimeLinter-csslint

SideBarEnhancements

Ofrece una mejora a las operaciones que tiene por defecto el sidebar de Sublime. Por ejemplo: abrir con, copiar, cortar, mover, copiar rutas…

DocBlockr

Ayuda a comentar bien nuestro código completando todo lo posible a partir del elemento que comentemos. Soporta lenguajes como JavaScript, TypeScript y Objective C entre otros.

GitGutter

Como su nombre indica nos muestra en el gutter el estado de cada linea, ya sea insertada, modificada o eliminada, comparando las diferencias con un commit/rama/tag específico.

BracketHighlighter

Resalta la apertura y cierre de etiquetas, comillas, paréntesis, llaves, corchetes… Muy útil sobre todo cuando tenemos que tocar algo de spaguetti code.

Podemos mostrar los indicadores en el gutter, en el código, o en ambos a la vez, así como aplicarles distintos estilos.

BracketHighlighter con la configuración por defecto.

Project Manager

Muy cómodo para ordenar y manejar proyectos olvidándonos de donde están los ficheros. Es una mejora a la funcionalidad que trae Sublime por defecto.

Otros paquetes que uso:

jQuery, Underscorejs snippets, Handlebars, SCSS, Meteor Snippets, Color Highlighter, ColorPicker, EditorConfig...

¿Cuáles son vuestros preferidos?

Configuración

La configuración de Sublime Text se basa en ficheros JSON, podéis verla en Preferences → Settings — Default y los atajos de teclado en Preferences → Keybindings — Default.

Para añadir o sobrescribir los valores hemos de editar los ficheros que terminan por * — User, veamos algunos ejemplos:

Settings — User:

{
  // Resalta la linea actual
  "highlight_line": true,

  // Añade una linea en blanco al final del documento
  "ensure_newline_at_eof_on_save": true,

  // Elimina los espacios al final de las lineas al guardar
  "trim_trailing_white_space_on_save": true,

  // Modifica los separadores de palabras eliminando '-' para CSS
  "word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?",

  // Permite hacer scroll aunque se haya terminado el documento
  "scroll_past_end": true
}

Keybindings — User:

[
  // Indenta todo el documento
  { 
    "keys": ["super+shift+r"], 
    "command": "reindent", "args": { "single_line": false } 
  },

  // Intercambia los keybindings de "pegar" y "pegar e indentar"
  { "keys": ["super+v"], "command": "paste_and_indent" },
  { "keys": ["super+shift+v"], "command": "paste" },

  // Resalta el fichero actual en el sidebar
  { "keys": ["alt+shift+r"], "command": "reveal_in_side_bar" }
]

Sincronización

Si sois usuarios de Dropbox u otro servicio similar podéis sincronizar todas vuestras preferencias y ahorraros mucho trabajo para estar cómodos cada vez que cambiéis de equipo o sistema operativo.

Si vuestro Dropbox no está en la ubicación por defecto, debéis sustituir ~/Dropbox por vuestra ubicación.

Las siguientes instrucciones son para OS X, para otro sistema operativo las tenéis aquí.

En vuestro primer equipo:

$ cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/
$ mkdir ~/Dropbox/Sublime
$ mv User ~/Dropbox/Sublime/
$ ln -s ~/Dropbox/Sublime/User

En vuestros otros equipos:

$ cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/
$ rm -r User
$ ln -s ~/Dropbox/Sublime/User

Que comiencen los juegos

Ayoze Barrera 🇮🇨 — Mon, 03 Feb 2020 16:39:11 +0000

Capua es un blog de desarrollo & experiencia de usuario.

Tras una lucha “sangrienta” para conseguir el nombre de usuario capua en GitHub, ya no tenemos excusas para compartir nuestras locuras. Hace mucho tiempo que teníamos en mente este proyecto, pero al fin nos hemos puesto las pilas.

Capua

Por contar un poco de donde procede el nombre del blog, nos gusta la temática romana, y Capua, antigua capital de Campania, tuvo el primer anfiteatro del mundo romano, donde los gladiadores dominaban la arena.

Los desarrolladores, desde siempre, tienen que reciclarse diariamente pues cada día salen nuevas tecnologías u otras se van actualizando, y para conseguir eso creemos que debemos ser como los gladiadores de la antigua Roma, capaces de enfrentarnos a cualquier bestia que se nos ponga por delante.

Si has visto o si eres fan de spartacus, es posible que te suene todo esto de Capua. También te será familiar nuestro grito de guerra:

“Por Capua!”

Nuestra intención es compartir artículos interesantes de las cosas que hemos ido aprendiendo o que nos han enseñado a lo largo de los diferentes proyectos que hemos realizado.

Quiénes somos…

Ayoze Barrera 🇮🇨Follow

Javascript freak 🤓 · Loving React ⚛· Fixie user 🚲 · Patriots fan 🏈!

Mario Blas 🇮🇨Follow

Web app developer • JavaScript • React

…y donde estamos

Las Palmas, Canary Islands, Spain ☺

Contenido

Nuestros artículos se centrarán principalmente en dos campos, desarrollo y diseño. No descartamos hablar alguna vez de tecnología… o algún juego, quien sabe!

Desarrollo

Estamos constantemente desarrollando aplicaciones con frameworks, servicios y plataformas de última hora.

Nuestro mundo gira principalmente en torno a Javascript y todas las tecnologías relacionadas con éste lenguaje.

Actualmente, nuestra librería principal es React.

Diseño

Le damos mucha importancia al diseño de la experiencia de usuario (UX). UX es la calidad de experiencia que tiene un usuario cuando usa un diseño concreto.
Algunas tecnologías de las que usamos nos permiten tener mayor flexibilidad en nuestra aplicación para así conseguir una UX más elaborada…

Probablemente hablemos de todo un poco, pero intentando no aburrir ☺.

Objetivos

Somos algo novatos en el mundo de los blogs, pero intentaremos estar a la altura.

Unos de los objetivos que pretendemos conseguir con Capua es crecer como redactores. No queremos tener un blog de textos copiados, y puestos para rellenar simplemente por tener muchos artículos y visitas.

Le dedicaremos tiempo a cada artículo para intentar conseguir lo mejor de nosotros mismos. Y eso nos ayudará a conseguir otro de nuestros objetivos, la creación de nuestro propio imperio, nuestro lugar. Tenemos muchas ideas que llevamos guardando mucho tiempo.

Ya veremos hacia donde crece esto y con quien.

Dicho esto… Capua queda inaugurado!

Hasta el próximo artículo ☺

Forem: Capua

Como crear una guía de estilo con Figma

Que es una guía de estilo

Que elementos añadir

Branding

Paleta de colores

Tipografía

Iconos

Componentes

Integrando Prettier con ESLint

¿Qué es ESLint?

Reglas de formato

Reglas de calidad del código

¿Qué es Prettier?

Configuración

Instalar Dependencias

Configurar ESLint

Configurar Prettier

Script de npm

Resultado

Integración con VSCode

Conflictos con la opción editor.formatOnSave

Pre-commit hook

Instalar dependencias

Configurar Husky

Configurar Lint-staged

Repositorio de ejemplo

capua / cra-prettier-eslint-example

Ejemplo para el artículo: Integrando Prettier con ESLint

Mapeando tus movimientos con React y Leaflet

Moves

Configuración

El mapa

Map

TileLayer

Nuestros movimientos

Cómo crear un paquete de Node

El nacimiento de nuestra librería personal

Fichero principal

Instalando nuestro paquete

Desplegando apps en Meteor con Heroku y mLab

0. Requisitos para empezar

1. Crear la Base de datos

2. Autenticarse con Heroku CLI

3. Crear la app en Heroku

4. Aplicar un buildpack

5. Configurar las variables de nuestra aplicación

6. Desplegar

Bonus

*Trabajar en equipo

*Mostrar el log

*Integrar add-ons

*Desplegar una rama distinta de master

*Trabajar con varias instancias de Heroku

Mapeando con Javascript

Mapbox Studio

Datos

Estilo

Empecemos

Datos geoespaciales

Intro a Sublime Text

¡A las armas!

Packages

Emmet

Sublime Linter

Side​Bar​Enhancements

DocBlockr

GitGutter

BracketHighlighter

Project Manager

Otros paquetes que uso:

Configuración

Sincronización

Que comiencen los juegos

Capua es un blog de desarrollo & experiencia de usuario.

Capua

Quiénes somos…

Ayoze Barrera 🇮🇨Follow

Mario Blas 🇮🇨Follow

…y donde estamos

SideBarEnhancements