DEV Community: VikingCodeBlog

Guía de teclados mecánicos para programadores

VikingCodeBlog — Tue, 17 Aug 2021 14:44:53 +0000

Qué es un teclado mecánico y en que se diferencia de uno normal?

Seguramente, la primera vez que busques información sobre un teclado mecánico encuentres algo similar a esto:

Teclados con más luces que una feria, eso es porque el mundo de los teclados mecánicos ha tenido un target muy fuerte durante los últimos años en la comunidad gamer.

Así que eso es lo primero que quiero aclarar, un teclado mecánico no tiene porqué ser para gamers, tampoco tiene que tener luces de colores, ni ser extremadamente ruidoso como se ve en las principales marcas.

Un teclado mecánico es en esencia un teclado con interruptores individuales bajo cada una de sus teclas.

Aclarando:

En un teclado convencional, debajo de sus teclas, se encuentra una membrana que tiene un punto de activación para cada tecla.

Por otra parte, debajo de las teclas de un teclado mecánico, se encuentran interruptores independientes sobre una PCB

Veamos un interruptor más de cerca:

Sin entrar en cada una de sus partes, un interruptor(switch) está formado por piezas no electrónicas, de ahí el nombre de teclado mecánico, estos interruptores al presionarse dejan pasar corriente por la PCB pero el interruptor en sí es algo bastante analógico.

Origen de la imagen

Por qué un teclado mecánico?

Motivo 1: Velocidad, sin saber escribir más rápido, creeme que lo harás, el feedback que da un teclado mecánico nos permite reaccionar más rápido y sin darnos cuenta, estaremos escribiendo a una velocidad superior que como lo hacíamos hasta ahora.

Motivo 2: Sensaciones, hace bastantes años aparecieron los coches con cambio de marchas automáticas, al principio fueron un desastre, pero con los años, han ido mejorando hasta ser mucho mejor que un cambio de marchas manual, ahora bien, ¿conoces a alguien que le gusten los coches y tenga un cambio de marchas automático? seguramente no, porque al que le gusta conducir, le gusta sentir el cambio de velocidades en cada marcha.

Con los teclados mecánicos pasa algo similar, cuando pruebas las sensaciones que dan los switches, cuesta volver a un teclado de membrana, algunas veces lo he hecho y ha sido una experiencia horrible, notaba las teclas lentas, un desplazamiento irregular, unas teclas más duras que otras... Nunca había sentido esos problemas hasta que conocía los teclados mecánicos. Lo que me lleva al tercer motivo.

Motivo 3: No hay vuelta atrás: No conozco a nadie, repito NADIE, que después de tener un teclado mecánico, decida comprarse de nuevo uno convencional, por algo será.

Motivo 4: Reduce el cansancio: ¿Pasas horas escribiendo en tu día a día? si decides adecuadamente un teclado específico para escritura, lo notarás.

Motivo 5: Customización, puedes seleccionar desde cero cada pieza de tu teclado a tu gusto.

Incluso hay webs como wasd keyboards que te permiten crear tu teclado online

Tipos de teclado según su factor forma.

La cantidad de formas en las que puedes encontrar un teclado mecánico son infinitas, pero estas son las principales, personalmente uso siempre teclados tkl o 60%, a priori puede que pienses que con menos teclas te faltarán números o funciones esenciales pero la verdad es que estos teclados aportan las mismas soluciones con menos teclas, colocando las funciones secundarias en atajos de teclado, es un tema muy personal, pero yo prefiero sacrificar teclas secundarias para tener más espacio.

Como te digo, la cantidad de formas diferentes que puedes encontrar, es espectacular, algunos llevan la ergonomía a su límite, como por ejemplo los split keyboards o los ortholineales.

Diferentes layouts

Las teclas pueden encontrarse en diferentes distribuciones, por ejemplo, los teclados españoles suelen llevar la distribución ISO pero los teclados americanos suelen llevar la distribución ANSI.

Esto implica que ciertas teclas especiales como []{};:'"<>,.ñ se encuentran en diferentes localizaciones o incluso pueden que no estén visibles y tengas que aplicar una macro para escribirlas.

Lo que más preocupa a un español siempre es que los teclados ANSI no tienen "ñ", básicamente la podemos escribir con "AltGR + n".

Diferentes switches

La esencia de un teclado mecánico son sus switches, cada uno genera una experiencia diferente y hay miles de marcas diferentes.

Las marcas clasifican los switches en colores, por ejemplo, los teclados gamer, suelen llevar cherry red, pero lo que importa no es el color, sino el comportamiento de cada uno de ellos, pueden haber switches lineales o clicky por ejemplo, más duros o incluso ópticos, en lugar del mecánico convencional.

¿Cómo detectar el mejor para ti? En mi experiencia, no puedes, tienes que probar hasta encontrar el que te guste, pero ahora te haré mi recomendación personal.

Modificaciones

Si, no es suficiente entre los miles de switches diferentes que existen, además de esto hay quien los modifican intercambiando piezas, lubricando con grasas industriales realmente caras, modificando la altura del switch... En fin, es algo que puede ser divertido, pero no te lo recomiendo todavía.

Diferentes keycaps

La capucha que lleva cada uno de los switches, es llamada keycap y si, existen miles de tipos.

Según su material

Principalmente pueden ser keycaps ABS o PBT, en resumen, PBT son mejores al tiempo, porque no se desgastan dejando ese efecto feo pulido en las teclas más usadas.

Según su producción

Se puede fabricar una keycap de muchas maneras pero si queremos que las letras permanezcan visibles durante toda la vida, nos interesa la fabricación DoubleShot, estas keycaps son dos materiales inyectados uno dentro del otro, la letra que tengas en la keycap es de un material blanco por ejemplo y el resto de la tecla es negro, por lo que por mucho que lo intentes, la tecla no se borrará ya que no es pintura, sino parte del material de construcción.

Según su forma

También hay diferentes formas entre las keycaps, algunas más grandes, otras con cierta inclinación, también es un tema de gustos, algunas te parecerán más ergonómicas que otras.

Comprar un teclado mecánico

Básicamente existen dos caminos, el fácil, buscas un teclado en Amazon por ejemplo, que cumpla los requisitos que quieras, o el menos fácil, que es comprar las piezas que te gusten para tú teclado y montarlo tú en casa.

Algunas recomendaciones:

Teclados en español (ISO)

Hay muy poca variedad entre los teclados con layout en español y la mayoría son teclados gaming con un solo tipo de switch o de calidades muy bajas.

Recomiendo alguno como este, no por que sea un gran teclado, sino que como teclado de entrada está bastante bien al poder seleccionar entre muchos switches diferentes.
https://amzn.to/3gaVSv4

Durante mucho tiempo, yo usé este Corsair, un teclado gaming, tiene unos switches rojos y ese fue el principal motivo por el que me lo quité, con el tiempo quería unos switches, más correctos para escritura, no todo son videojuegos.
https://amzn.to/3iS8QiU

Aun así, estuve AÑOS con él y al ser TKL tenía mucho espacio para el ratón en la mesa, muy cómodo para jugar, la verdad es que por su precio, me parece una opción genial como primer teclado.

Teclados (ANSI)

Esto ya es otra cosa, encontrar buenos teclados en ANSI es infinitamente más sencillo, además como veremos más adelante, si eres programador, esto implica ciertas ventajas.

Teclado con buenos materiales de construcción, en gran parte metálicos, con bluetooth y cable, buena batería, compatibilidad y diferentes configuraciones para windows que mac. Sí es posible.

Keychron es una marca muy conocida y la recomiendo para iniciarse por un motivo muy sencillo, ¿Os acordáis cuando os he dicho que la única manera de saber que switch iba a ser tu favorito era probandolos? pues imagina tener que comprar un teclado nuevo cada vez que quieras probar unos switches diferentes, o tener que soldar unos nuevos a la PCB... Pues este teclado tiene los switches intercambiables (HotSwappable) es decir, podrías comprar cualquier switch en aliexpress por ejemplo y probar en tu teclado sin tener que ser un experto soldador, solo necesitas una pinza que te viene con el teclado para realizar el intercambio.

Si es tu primer teclado, cambiarás los switches 10000 veces más o menos, así que te recomiendo un hotswapp como este.
https://amzn.to/3yY9fpC

Ejemplo, cambio de teclas de un hotswapp

Group Buy

Otra opción es comprar un teclado mediante un Group Buy, esto son páginas que permiten reunir a compradores para hacer peticiones exclusivas a los fabricantes, normalmente, son caros y el tiempo hasta que se confirme el Group Buy puede ser de meses, pero cuando estás en el mundo de los teclados mecánicos, lo exclusivo suele ser lo más apreciado por los aficionados.

Solo estuve en una group buy y después de semanas, se canceló.

Eso sí, los teclados mecánicos más espectaculares siempre los he visto en estas Group Buys, así que no está de mal valorar la posibilidad. Ahora mismo, en una de estas páginas drop se pueden comprar teclados con temática del universo Marvel.

Construir tu propio teclado

Tarde o temprano lo vas a hacer, la tentación de tener algo lo más personalizado posible es parte de esta afición.

Las piezas que necesitas para montar tu propio teclado son las siguientes (Ordenadas de abajo a arriba en su montaje).

Cable USB

Normalmente, cualquier USB - C es válido.

Construir tu teclado a partir de un kit

Esto es evidentemente más sencillo e incluso más económico, existen kits para construir tu propio teclado y de hecho hay muchas marcas que te venden un teclado construido con este kit.
https://es.aliexpress.com/item/4001187066764.html?spm=a2g0o.productlist.0.0.2f06951431ZWKx&algo_pvid=c549c934-2d60-4bd4-a5c2-3a70525bc8ba&algo_exp_id=c549c934-2d60-4bd4-a5c2-3a70525bc8ba-32&pdp_ext_f=%7B%22sku_id%22%3A%2210000015198302818%22%7D

Sobre el ruido

Lo que más asusta a los programadores de oficina es que sus teclados generen tanto ruido que sean molestos para los demás.

Bueno, un teclado mecánico va a hacer más ruido que uno de membrana, eso es así, quien te diga lo contrario te miente, pero existen switches más silenciosos como los MX Silent

Además hay técnicas para encapsular el ruido como el foam o también hay quien le pone unos silenciadores independientes a cada switch

Con todo esto ¿Que necesitamos saber para comprar un teclado mecánico con el que pasar cientos de horas programando?

Lo primero es un layout con el que nos sintamos cómodos, seguro que conocéis a muchos programadores que han pasado a usar un layout ANSI, esto es porque las teclas especiales que se usan en la mayoría de lenguajes de código están mucho más accesibles en un teclado ANSI, al principio es duro y entiendo que quieras seguir con tu teclado ISO, eso es decisión tuya, pero ya te digo que merece la pena el esfuerzo inicial, con el tiempo, ganas mucha velocidad.

Los switches tienen que ser aptos para pasar muchas horas escribiendo, así que lo ideal son unos switches te activació no muy dura, hay algunos que necesitan ejercer más presión que otros para funcionar. Una buena opción, dentro de los convencionales serían los Cherry brown o los gateron brown, pero hay mucho más mundo ahí fuera, switches Tealios V2, Holy panda (los que yo uso)...

Tema ruido es importante, aplica alguna de las técnicas que hemos mencionado antes o busca unso switches silenciosos como los MX Silent.

Conectividad, A mi no me gustan los cables, así que uso teclados bluetooth, si vas a hacer esto, te recomiendo una buena marca, seguro que tiene mejores baterías y conectividad.

Retroiluminación: Yo odio las luces de colores, pero me encanta programar por las noches, así que es ideal un teclado que se pueda iluminar, incluso, lo mejor es que el texto de la tecla también se pueda iluminar.

Personalmente opto por una luz blanca o azul.

Por último, los materiales, un teclado plasticoso malo no te va a dar la misma experiencia que uno forjado y martillado en un yunque asgardiano enfriado en meado de Odin.

PD: Algunas marcas que me gustan.
https://www.melgeek.com/
https://iqunix.store/
https://www.keychron.com/

4 Maneras de llamar a una API Rest con JavaScript

VikingCodeBlog — Mon, 05 Apr 2021 18:04:29 +0000

¿Qué es una API Rest?

Antes de ver 4 Maneras de llamar a una API Rest con JavaScript, es posible que no conozcas que es esto de las API Rest, así que para ello, te comparto una definición que da BBVAAPIMarket, en esencia, una API Rest, es una interfaz que nos permite comunicarnos con otra aplicación que espera que hagamos una petición, puede ser para obtener datos, añadir datos, borrar…

Un Ejemplo

PokéApi es una API de prueba con temática nintendera, nos proporciona varias rutas como esta «https://pokeapi.co/api/v2/pokemon/ditto» la cual nos proporciona los datos del pokemon Ditto.

Puedes probar esta ruta simplemente desde tu navegador. Con ella obtenemos un JSON con todos los datos del pokemon.

4 Maneras de llamar a una API Rest con JavaScript

Ahora sí, vamos a ver 4 Maneras de llamar a una API Rest con JavaScript, todas ellas son válidas, iré opinando sobre ellas mientras te las muestro.

1. XMLHttpRequest (AJAX)

La primera forma de obtener datos que vamos a ver, va a ser mediante XMLHttpRequest, un objeto de JavaScript que fue diseñado por Microsoft y adoptado por Mozilla, Apple y Google.

Es un estándar de la W3C. Seguro que has oído hablar de la programación AJAX (Asynchronous JavaScript And XML), Esto era una forma de programar usando un conjunto de tecnologías que te permitían crear páginas más dinámicas, al hacer peticiones al backend para obtener datos nuevos sin tener que recargar la página al completo.

AJAX suena increíble ya que hoy en día todas las páginas webs hacen peticiones al backend sin necesidad de recargar la página actual pero estamos hablando de un término creado en 2005.



// Creamos un nuevo XMLHttpRequest
var xhttp = new XMLHttpRequest();

// Esta es la función que se ejecutará al finalizar la llamada
xhttp.onreadystatechange = function() {
  // Si nada da error
  if (this.readyState == 4 && this.status == 200) {
    // La respuesta, aunque sea JSON, viene en formato texto, por lo que tendremos que hace run parse
    console.log(JSON.parse(this.responseText));
  }
};

// Endpoint de la API y método que se va a usar para llamar
xhttp.open("GET", "https://pokeapi.co/api/v2/pokemon", true);
xhttp.setRequestHeader("Content-type", "application/json");
// Si quisieramos mandar parámetros a nuestra API, podríamos hacerlo desde el método send()
xhttp.send(null);

De esta manera obtenemos el siguiente resultado:

2. Fetch

Fetch es una nueva implementación de JavaScript, nos permite hacer lo mismo que XMLHttpRequest pero de manera más sencilla, el único defecto que le puedo ver es que al ser tan nueva, no funciona en internet Explorer, pero bueno, esto es un problema soportable para casi cualquier proyecto moderno.



fetch('https://pokeapi.co/api/v2/pokemon')
      .then(response => response.json())
      .then(json => console.log(json));

Con solo estas líneas estaríamos obteniendo el mismo resultado que en el código anterior con XMLHttpRequest, no es necesario importar ni instanciar fetch, simplemente se le llama😮.

3. Axios

Hasta ahora, tanto XMLHttpRequest como Fetch eran nativas de JavaScript, pero Axios es una librería externa que tendremos que importar en nuestro proyecto antes de usarla.



<head>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

Una vez importada, podrás usarla en tu proyecto.



axios.get('https://pokeapi.co/api/v2/pokemon')
  .then(function (response) {
    // función que se ejecutará al recibir una respuesta
    console.log(response);
  })
  .catch(function (error) {
    // función para capturar el error
    console.log(error);
  })
  .then(function () {
    // función que siempre se ejecuta
  });

¿Por qué se usa tanto Axios? Parece que Fetch es perfecto ¿para que iba a querer importar otra librería a mi proyecto?

El primer motivo es sencillo, Fetch es nuevo y no puede implementarse en proyectos que sigan usando tecnologías viejas, algunas veces está limitado, mientras que Axios tiene muy buena compatibilidad.

Pero hay más motivos, por ejemplo, Axios te permite añadir un timeout a la llamada para que se cierre cuando lleva un rato intentando obtener datos sin éxito.

Otro motivo muy importante es que Axios parsea automáticamente las respuestas JSON.



// axios
axios.get('https://pokeapi.co/api/v2/pokemon')
  .then(response => {
    console.log(response.data); // response.data ya es un JSON
  }, error => {
    console.log(error);
  });

// fetch()
fetch('https://pokeapi.co/api/v2/pokemon')
  .then(response => response.json())    // a fetch le llega una respuesta en string que tiene que ser parseada a JSON
  .then(data => {
    console.log(data) 
  })
  .catch(error => console.error(error));

Axios tiene más funcionalidades como los interceptores, que te permiten interceptar las llamadas y reaccionar a ellas, esto se usa por ejemplo cuando nuestro backend tiene un sistema de seguridad que necesita que las llamadas lleven un token, podemos meterle el token a la llamada desde un interceptor para no tener que picarlo en código cada vez que lo vayamos a usar.



axios.interceptors.request.use(config => {
  // Aquí podríamos hacer algo con la llamada antes de enviarla
  console.log('Se ha enviado algo');
  return config;
});

// llamada común
axios.get('https://pokeapi.co/api/v2/pokemon')
  .then(response => {
    console.log(response.data);
  });

Creo que me he detenido demasiado tiempo en Axios, pero me interesaba hacer un pequeño análisis de por que es la librería que más he visto en los proyectos por los que he pasado.

4. jQuery.Ajax()

Obviamente si queremos hacer este tipo de llamadas, tendremos que importar la librería de jQuery a nuestro proyecto.

jQuery es una librería que muchos dan por muerta, pero creo que todavía le queda mucho recorrido, no hay más que ver las encuestas de StackOverflow o StateOfJs, sigue siendo una de las librerías/frameworks más usados, por lo que creo que es necesario conocer esta manera de llamar a una API Rest con jquery.



<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>



$.ajax({
  type: 'GET',
  url: 'https://pokeapi.co/api/v2/pokemon',
  dataType: 'json',
  success: function(data) {
    console.log(data)
  }
});

Realmente es un método bastante sencillo de utilizar.

Poniendo la teoría en práctica

Vamos a hacer uso de la API de PokéApi para obtener datos y pintar nuestra propia Pokedex.



<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="head">
      <h1>Pokedex</h1>
    </div>
    <div id="container"></div>
</body>
</html>



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body{
    background-color: #ececec;
    font-family: 'Ubuntu', sans-serif;
  }

  .head{
    background-color: rgb(187, 70, 49);
    padding: 20px;
    position: fixed;
    top: 0;
    width: 100%;
    color: white;
  }

  #container{
    width: min(100%, 1000px);
    margin: 100px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .card{
    width: 230px;
    margin-top: 100px;
    background-color: white;
    padding: 20px;
    border-radius: 20px;
  }

  .card img {
    width: 100%;
  }

  .card span{
    color: #6e6e6e;
    font-weight: 500;
  }



// Obtenemos los datos de todos los pokemon 
fetch('https://pokeapi.co/api/v2/pokemon')
        .then(response => response.json())
        .then(json => {
            printPokemons(json.results);
        });

// Pinta todos los pokemos insertando un HTML dentro del #container
function printPokemons(pokemons) {
  const container = document.getElementById('container')
  pokemons.forEach(pokemon => {
    container.innerHTML = `
    ${container.innerHTML}
    <div class="card">
    <img src="https://pokeres.bastionbot.org/images/pokemon/${getPokemonId(pokemon.url)}.png"/>
    <span>Nº.${getPokemonId(pokemon.url)}</span>
    <h2>${pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1)}</h2>
    </card>
  `;
  });
}

// En esta ruta de la API no nos viene el id de cada pokemon, pero si que nos viene
// una URL, para poder obtener todos los datos de ese pokemon, la cual contiene su ID
// así que le extraigo el ID a la URL
function getPokemonId(url) {
  return url.replace('https://pokeapi.co/api/v2/pokemon/', '').replace('/','')
}

El resultado es el siguiente.

Más maneras de llamar a una API Rest desde JavaScript.

Me parece interesante destacar otras maneras de llamar a una API Rest usando JavaScript.

HttpClient

En el caso del framework de desarrollo Angular, se nos proporciona una librería para hacer llamadas a este tipo de servicios.

La librería HttpClient de Angular es muy potente, interceptores, testing, integrada con TypeScript… La verdad que dudo de que alguien use otra librería en proyectos de Angular.

SuperAgent

SuperAgent es una librería muy ligera, bastante similar a Axios.

Request

No conozco mucho Request, pero he visto muchas librerías de empresas que se basan en ella para implementar alguna funcionalidad propia, no se si será por algo en especial o simplemente es casualidad.

Conclusiones

Uso fetch siempre que voy a desarrollar un ejemplo para el blog, pero realmente si quisiera crear un proyecto entero con JavaScript, Axios sería mi primera opción ya que tiene varias funcionalidades muy sencillas y potentes.

jQuery.Ajax, no creo que la use ya que no trabajo en proyectos que contengan esa librería, pero nunca se sabe.

Y XMLHttpRequest, ahora que Microsoft ha matado internet Explorer, creo que ya no será necesario y pondré a fetch por delante.

DEV Community: VikingCodeBlog

Guía de teclados mecánicos para programadores

Qué es un teclado mecánico y en que se diferencia de uno normal?

Aclarando:

Veamos un interruptor más de cerca:

Por qué un teclado mecánico?

Tipos de teclado según su factor forma.

Diferentes layouts

Diferentes switches

Modificaciones

Diferentes keycaps

Según su material

Según su producción

Según su forma

Comprar un teclado mecánico

Algunas recomendaciones:

Teclados en español (ISO)

Teclados (ANSI)

Group Buy

Construir tu propio teclado

Una Caja:

Una PCB:

Switches

Plate

Estabilizadores

Keycaps

Cable USB

Construir tu teclado a partir de un kit

Sobre el ruido

Con todo esto ¿Que necesitamos saber para comprar un teclado mecánico con el que pasar cientos de horas programando?

4 Maneras de llamar a una API Rest con JavaScript

¿Qué es una API Rest?

Un Ejemplo

4 Maneras de llamar a una API Rest con JavaScript

1. XMLHttpRequest (AJAX)

2. Fetch

3. Axios

¿Por qué se usa tanto Axios? Parece que Fetch es perfecto ¿para que iba a querer importar otra librería a mi proyecto?

4. jQuery.Ajax()

Poniendo la teoría en práctica

Más maneras de llamar a una API Rest desde JavaScript.

HttpClient

SuperAgent

Request

Conclusiones