Obteniendo data desde un GraphQL Api con React

#React #ReactHooks #UseQuery #GraphQL

How to fetch GraphQL data in React

Link target _blank - Security Issue

La etiqueta html "a" tiene un atributo "target" y enter sus valores que puede recibir está "_blank" que es el que nos permitirá abrir la página html en una nueva ventana de tu browser. Eso seguramente ya lo sabías así como yo. Pero hoy, trabajando en un enhacemente que reportó mi equipo de QA, aprendí algo nuevo.

Que cuando estás ocupando el "_blank", por temas de seguridad necesitas poner rel="noopener noreferrer"

<a href="www.tupaginaaqui.com" target="_blank" rel="noopener noreferrer">

rel="noopener " impide que la nueva página pueda acceder a la propiedad window.opener y asegura que se ejecuta en un proceso separado. Sin esto, la página de destino puede potencialmente redirigir su página a una URL maliciosa. 

rel="noreferrer" tiene el mismo efecto, pero también evita que el encabezado del Referido sea enviado a la nueva página. Eliminar el encabezado de referencia afectará al análisis.

Cómo ver las base de datos de mongo que se crean automáticamente

Si estás buscando poder ver las base de datos de MongoDB que se van creando automáticamente en los proyectos que estás trabajando sin tener que crear las conexiones manualmente, lo que tienes que hacer es crear una conexión a la base de datos ADMIN. Deberás crear el usuario administrador.

* Creando el usuario administrador

Después de iniciar *mongod* y *mongo*, escribe lo siguiente en el shell:

(los valores de user y pwd los escoges tú)

use admin
db.createUser(
  {
    user: "admin",
    pwd: "admin123*",
    roles: [ { role: "userAdminAnyDatabase", db: "admin" } ]
  }
)

Luego, reinicias el servicio y en la GUI que estés utilizando, deberás crear la conexión con las credenciales que acabamos de crear, en mi caso yo uso Robo 3T. 

Como ves en la siguiente imagen, en el tab de Connection deberás agregarle un nombre y el address. Luego en el tab de Authentication, deberás ingresar las credenciales que acabamos de crear para la base de datos, digamos la principal, que se llama *admin*

 

Luego te conectas, y verás dentro de ella todas las base de datos que se crearon. Y voilà!

Node JS use import instead of require - Babel

SyntaxError: Cannot use import statement outside a module

Si te has topado con este error es porque seguramente en tu aplicación nodeJS estabas cambiando de algo como esto... a esto... Mira:

El error se debe a que tu versión de NodeJS no soporta ES6 por eso es que debes instalar Babel para compilar y hacer que entienda el require, o sea, que transforme tu código.

Y no solo require, ya que Babel funciona en base a plugins en el que le podemos decir qué cosas es que queremos que transforme.

Instala Babel así:

npm install --save-dev @babel/core @babel/node @babel/preset-env

Configura Babel así:

Y deberás crear un archivo llamado .babelrc y con la siguiente data adentro (pueden haber otras cosas):

Ejecuta tu aplicación así:

Instala nodemon

npm install nodemon --save-dev

Crea el siguiente script dentro de tu package.json

"start": "nodemon --exec babel-node index.js"

Y voilà. 

Happy coding :)

SASS / SCSS vs LESS

¿Qué es un pre-procesador CSS?

Es un programa que escribe CSS por ti basado en el código que tú escribiste a través de ese pre-procesador. Cuando usas un pre-procesador, puedes hacer cosas que no son posibles con CSS nativo como por ejemplo el uso de herencia, mix-ins, etc., haciendo un código más útil, productivo y mantenible.

Hay muchos pre-procesadores disponibles, sin embargo, en este apartado hablaré de dos de ellos: SASS y LESS.

 

¿Qué es SASS?

Por sus siglas en inglés, Syntactically Awesome Style Sheets. Es el pre-procesador CSS más popular y el más antiguo (2006). Tiene una comunidad grande y muchos recursos disponibles en la Web para beginners. 

Podemos utilizar SASS mediante dos sintaxis: Sass o SCSS.

SASS

Su extensión es .sass 

Está basado en indentación

Es un poco difícil de leer

El signo de asginación es =

SCSS

Su extensión es .scss

Utiliza llaves y puntos y comas

Es fácil de entender y se parece a CSS

El signo de asginación es :

Sin embargo, es bueno saber que todo los features están disponibles para ambas sintaxis.

Boostrap 4, un framework de CSS muy popular, está escrito en SASS. Lo curioso es que su anterior versión usaba LESS, y desde que empezó a utilizar SASS, su popularidad subió.

¿Qué es LESS?

Por sus siglas en inglés, Leaner Stylesheets. Fue lanzado en 2009, está escrito en JavaScript. Es el competidor más fuerte de SASS. A diferencia de SASS, LESS utiliza @ para declarar variables lo cual puede causar confusión con @media y @keyframes, pero una de sus ventajas fuertes es su facilidad de adicionarlo a un proyecto, puede ser con NPM o Less.js

Bajo la pequeña comparativa que se hizo líneas arriba...

¿Por qué elegir SCSS sobre SASS?

-Legibilidad. La sintaxis es muy parecida a CSS

-Curva de aprendizaje. Solo se agrega algunos features extras con respecto a CSS

-Compatibilidad. Un archivo .css es archivo .scss válido

-Recursos: Existen muchos artículos colgados en la red y algunas librerías open source

-Expansibilidad: es fácil pasar de SCSS a SASS

¿Qué podemos hacer con SASS/LESS que con Vanilla CSS no podemos?

1. Variables. Podemos guardar iNformación dentro de variables y utilizarla en nuestra hoja de estilo.  Vanilla CSS usa variables pero con SASS/SCSS puedes iterar tu variables utilizando for-loop

SASS

En sass se define una variable con el signo $

@color: "#FF0000";

LESS 

En less se define una variable con el signo @

$color: "#FF0000";

2. Anidamiento. ¿Recuerdas el anidamiento en HTML? La indentación en Sass permite replicar cómo se anidan los elementos HTML. Es buena práctica para evitar escribir selectors repetitivamente.

SASS/LESS

1 2 3 4 5 6 7 8 9

nav {   margin: 50px auto 0;   width: 788px;   height: 45px;   ul {     padding: 0;     margin: 0;   } }

3. Mixins. Son funciones que se pueden incluir en cualquier parte de la hoja de estilo.

SASS

Utilizamos @mixin

2 3 4 5 6 7 8 9 10

@mixin border-radius ($values) {   border-radius: $values; }   nav {   margin: 50px auto 0;   width: 788px;   height: 45px;   @include border-radius(10px); }

LESS

Utilizamos un selector de clase

1 2 3 4 5 6 7 8 9

.border( @radius ) {   border-radius: @radius; } nav {   margin: 50px auto 0;   width: 788px;   height: 45px;   .border(10px); }

4. Herencia

El concepto es similar a mixins pero en lugar de copiar todas las propiedades CSS, agrupará los selectores que tienen exactamente las mismas propiedades y valores de conjunto usando el.

SASS

Utilizamos @extends

.circle {

  border: 1px solid #ccc;

  border-radius: 50px;

  overflow: hidden;

}

.avatar {

  @extend .circle;

}




LESS

Utilizamos :extend

.circle {

  border: 1px solid #ccc;

  border-radius: 50px;

  overflow: hidden;

}

 

.avatar:extend(.circle) {}

5. Error Handling

La notificación de errores también es un factor importante para facilitar la depuración del código.

SASS

Sass introduce nuevas directivas: @error, @warn and @debug.

La directiva @error y @warn te permite lanzar un mensaje de error personalizado. Esta característica adicional es genial si estás creando un sistema de diseño o un marco de trabajo basado en Sass, por ejemplo. Querrás que arroje un mensaje si están usando un mixin depreciado o cuando pasen un valor correcto, por ejemplo:

@mixin border-radius( $rad ) {

  @warn "The `border-radius()`

mixin will be deprecated in version 5.2,

use `corner-radius()` mixin instead";

  border-radius: $rad;

}




La directiva @debug funciona de forma similar al console.log() en JavaScript, por ejemplo:

$space: 10px;

div {

  @debug $space;

  margin: ($spaces * 2);

}




LESS

No proporciona una directiva especial para manejar errores personalizados como Sass.

More references

If you want to learn more about SASS, I recommend you this eBook: https://marksheet.io/sass.html

If you want to discover more about the differences between sass and less, you can check: https://css-tricks.com/sass-vs-less/