Para convertir una matriz (m):
const m = [
[42, 6174, 1],
[73, 13, 144],
[64, 1024, 5]
];A un array (a):
const a = [42, 6174, 1, 73, 13, 144, 64, 1024, 5];Se usa este método:
m.flat();Esto también se puede hacer en diferentes profundidades, para aprender más acerca de este método podés visitar la documentación Developer Mozilla/Array/flat
Cuando desarrollamos apps, es importante que las imágenes estén optimizadas, para que el sitio tenga mejor performance; utilizando Webpack podemos optimizar imágenes con el módulo image-webpack-loader, para que, cuando el sitio esté en producción, las imágenes pesen menos.
Primero tenemos que tener las imágenes ubicadas en la carpeta src.
instalación
npm install image-webpack-loaderimplementación en Webpack
rules: [
// Primero configuramos donde estará el output de las imagenes
{
test: /\.(jpg|png|gif|jpeg)$/,
use: [
{
loader: 'file-loader', // Este módulo debe estar instalado antes
options: {
name: '[name].[ext]',
outputPath: 'img/', // Dentro de la carpeta img
useRelativePath: true
},
},
],
},
/*
Ahora configuramos el módulo image-webpack-loader donde le
indicamos en qué calidad (en porcentaje) queremos las imágenes.
*/
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
optipng: {
enabled: true,
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
webp: {
quality: 75
}
}
}
]Fuente: UX Bites https://www.instagram.com/uxbites/
¿Qué es rest?
rest es un operador que reúne cualquier número de argumentos en un array y podemos hacer lo que queramos con ellos. Esto nos permite hacer definiciones de funciones realmente ordenadas.
La forma común
function author(name, age, nationality) {
console.log(name, age, nationality);
}
author('William Paul Young', 64, 'Canada');
//William Paul Young, 64, CanadaLa forma con rest
function author(...autor) {
console.log(autor);
}
author('Nacarid Portal', 28, 'Venezuela');
//["Nacarid Portal", 28, "Venezuela"]Nota : Parámetros usando el operador rest deben estar en el último argumento.
¿Qué es spread?
spread es un operador que es contario a rest, porque en vez recibir datos, podemos enviarlos a partir de un array que se expone y se convierte en un listado de argumentos.
Ahora sí, ¿cómo podemos agregar elementos a un array con spread?
La forma común de agregar elementos al inicio de un array
const arr = ['Joy', 'Wangari', 'Hola'];
arr.unshift('Mundo', 'Manzana');
console.log(arr);
//["Mundo", "Manzana", "Joy", "Wangari", "Hola"]La forma común de agregar elementos al final de un array
const arr = ['Joy', 'Wangari', 'Hola'];
arr.push('sandia', 'limon');
console.log(arr);
//["Joy", "Wangari", "Hola", "sandia", "limon"]La forma con spread
const arr = ['Joy', 'Wangari', 'Hola'];
const newArr = ['joykare', ...arr, 'pera'];
console.log(newArr);
//["joykare", "Joy", "Wangari", "Hola", "pera"]Al agregar un nuevo elemento al array con un spread no importa si es al inicio o al final, lo puedes hacer en cualquier de los dos lugares y no va a haber problema alguno.
TIL como mover archivos entre un servidor remoto y el sistema local; scp Secure copy protocol al rescate.
La estructura básica del comando es algo como:
scp <OPTIONS> <SOURCE_FILE_OR_DIRECTORY> <TARGET_FILE_OR_DIRECTORY>Cuando la ruta de los archivos incluye un servidor remoto, primero hay que agregar la dirección del servidor:
<user>@<ip_or_domain_name>:<remote_directory>Mover archivo desde local a un servidor remoto
scp <file_path> <user>@<remote_host>:<remote_directory>Mover archivo desde un servidor remoto a local
scp <user>@<remote_host>:<remote_file_path> <local_directory>Multiples archivos desde local a un servidor remoto
scp <file_path> <file_path> <user>@<remote_host>:<remote_directory>Mover un directorio desde local a un servidor remoto
scp -r <local_directory> <user>@<remote_host>:<remote_directory>Mover un directorio desde un servidor remoto a local
scp -r <user>@<remote_host>:<remote_directory> <local_directory>Tener pequeñas lineas de código publicadas en NPM package nos facilitará un poco nuestro flujo de trabajo, ya que, podemos acceder a ellas desde cualquier proyecto y con una sola línea de comando, lo cual nos beneficia en no perder tiempo buscando código que necesitamos y utilizamos en proyectos pasados que no sabemos en dónde está, o aún peor que no sabemos si tenemos.
npm loginPedirá que ingrese su nombre de usuario, contraseña y dirección de correo electrónico.
Username: joseth
Password:
Email: (this IS public) joseth@gmail.com
Logged in as joseth on https://registry.npm.org/.# Comando para crear la carpeta
mkdir mi-primer-paquete-en-npm
# Comando para acceder a la carpeta
cd mi-primer-paquete-en-npmnpm initnpm publishCuando el paquete se publicó exitosamente en el sitio de NPM package se mostrará en la terminal un mensaje como el siguiente
publishing-to-npm@1.0.0Fuente: zellwk
Image Replacement es una tecnica que, usando CSS, nos permite reemplazar el texto de un elemento por una imagen. Image Replacement te puede funcionar para cuando tu sitio tiene que utilizar varias tipografías y no quieres cargarlas, ya sea porque sólo se utilizan una vez, en un título ó en algo muy pequeño, si cargas la tipografía tu sitio se puede volver más lento o simplemente la tipografía no está para web.
En HTML escogemos la etiqueta que usaremos y le ponemos el texto a reemplazar
<h4 class="image-re">Hola</h4>Usando CSS podemos hacer el reemplazo de texto por imagen
.image-re {
background: transparent url("./hola.svg") no-repeat;
display: inline-block;;
margin: 0;
overflow: hidden;
text-indent: 100%;
width: 30%;
white-space: nowrap;
}Lo que devuelve el módulo (%) en Javascript es el residuo entre dos números.
¿Y cómo se saca el residuo de una división?
Multiplicando la parte decimal del cociente por el divisor.
Lo que básicamente, significa esto:
const obtenerResiduo = (dividendo, divisor) => {
const cociente = dividendo / divisor;
return +((cociente - Math.floor(cociente)) * divisor).toFixed();
}Se puede decir que es equivalente a esto:
const obtenerResiduo = (dividendo, divisor) => dividendo % divisor;Y bueno, esa es la naturaleza del módulo.
Cuando se colocan los backtips ergo "`", a la derecha de una función, esta se ejecuta pasando como argumento el string entre los backtips.
... Así que, ¿esto a qué se refiere?
Tenemos esta función
function sayHelloTo(someone) {
return `Hello, ${someone}`;
}Esta es la forma clásica de invocarla
sayHelloTo('cool person');Y este es su equivalente usando tag functions
sayHelloTo`cool person`;Cualquiera de las dos invocaciones devolverá: 'Hello, cool person'
Basándome en la documentación de Developer Mozilla, en español se les llaman Plantillas de cadena de texto con postprocesador
Documentación: https://codeburst.io/javascript-template-literals-tag-functions-for-beginners-758a041160e1
Conclusión, esto solo es "syntactic sugar"
Cuando desarrollamos apps con Node, es importante encriptar las contraseñas para que el sitio sea más seguro, en especial cuando se almacena información importante.
Podemos encriptar contraseñas usando Cryptr.
instalación
npm install cryptrimplementación
const Cryptr = require('cryptr');
const cryptr = new Cryptr('myTotalySecretKey');
const encryptedString = cryptr.encrypt('MyPassword');
const decryptedString = cryptr.decrypt(encryptedString);
console.log(encryptedString); // 5590fd6409be2494de0226f5d7
console.log(decryptedString); // MyPasswordHoy eche a perder un branch local, a tal punto que era más fácil borrarlo y crear uno nuevo basado en el remoto que solucionar los conflictos.
Normalmente para crear un branch nuevo es tan sencillo como hacer fetch y crear el branch:
git fetch
git checkout <branch-name>Lo anterior funciona bien cuando se tiene sólo un remote configurado, pero, en este caso tenía dos; la solución es indicar el nombre del remote y del branch remoto:
# para saber el nombre del remote
git remote -v
git checkout -b <branch-name> <name of remote>/<branch-name>El comando tail se usa frecuentemente para mostrar el final de un archivo de texto. Cuando se tiene un log que se actualiza de manera constante, digamos logs de accesos en un servidor, es útil ver los últimos registros y cualquier nueva entrada que se incluya mientras tenemos el archivo abierto.
Usando tail, y un par de argumentos extras, podemos lograr lo anterior: -f va a estar revisando los últimos registros en el archivo y con -n podemos definir el número de líneas a mostrar, el default son 10.
tail -f -n100 /the/log/file/locationFuente: https://medium.com/@devron/how-to-view-log-files-in-terminal-6a1142ee6776
Debido a que Heroku tiene este problema de quedarse dormido en el trabajo después de un tiempo de inactividad resulta mejor hacer un deploy de una app en una plataforma como Netlify.
Así que aquí va un video que dice cómo hacerlo
El siguiente código es parte de lo que se escribió en el video
const express = require("express")
const serverless = require("serverless-http")
const app = express()
const router = express.Router()
router.get("/", (req, res) => {
res.json({
success: true,
error: null,
data: "BUMP OF CHICKEN「Hello,world!」",
})
})
app.use("/.netlify/functions/api", router)
module.exports.handler = serverless(app)