DEV Community: Gustavo Flores

Convert an Image to HTML pixel by pixel

Gustavo Flores — Sun, 07 Mar 2021 02:25:21 +0000

Hi!
This is a tutorial to convert an image to HTML pixel by pixel, with this you can analyze your image :)

first, you need some HTML

<!-- canvas need to be hidden, here you will load your image and take information about it -->
<canvas
    id="canvas"
    style="visibility: hidden;"
></canvas>
<!-- here you will print your matrix of span tags, each of them with a single color -->
<div
    id="final-image"
    style="line-height: 7px;letter-spacing: -3px;"
></div>

now some javascript


const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const imgUrl = "https://images.unsplash.com/photo-1549740425-5e9ed4d8cd34?ixid=MXwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwzOTU0NTB8fGVufDB8fHw%3D&ixlib=rb-1.2.1&w=1000&q=80";
const img = new Image();
const imgWidth = 100;

let html = "";
img.crossOrigin = "Anonymous";
img.onload = function() {
    canvas.width = imgWidth;
    canvas.height = (this.height * canvas.width) / this.width;
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    for (let i = 0; i < canvas.height; i++) {
        for (let j = 0; j < canvas.width; j++) {
            add(ctx.getImageData(j, i, 1, 1).data);
        }
        html += "<br />";
    }
    document.getElementById("final-image").innerHTML = html;
    canvas.parentNode.removeChild(canvas);
};

img.src = imgUrl;

function add(c) {
    html += `<span style="color: rgb(${c[0]}, ${c[1]}, ${c[2]});">&#9632;</span>`;
}

with this code, you can print your image on text

Pulse Loading with CSS

Gustavo Flores — Sun, 07 Mar 2021 02:00:34 +0000

Hi!
this is a quick tutorial to make a Pulse Loading with only HTML and CSS!

HTML

<div class="pulse-wrapper">
  <div class="pulse"></div>  
</div>

CSS

/* this is to keep you loading wrapper on the middle of screen */
div.pulse-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

div.pulse {
  height: 50px;
  width: 50px;
  background-color: rgb(199, 153, 8);
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
    40% {
        transform: scale(1.1);
        box-shadow: 0 0 0 20px rgba(199, 153, 8, 0.3);
    }

    80% {
        transform: scale(1);
        box-shadow: 0 0 0 40px rgba(199, 153, 8, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(199, 153, 8, 0)
    }
}

and that's all folks!

Equivocarse es humano: #howto debug en js

Gustavo Flores — Tue, 03 Dec 2019 00:50:35 +0000

Hola humano errador, hoy hablaremos de debug 🐞.

Existen formas de saber por que tu código funciona o no funciona.

si no quieres ser como mi amigo de aca arriba, sigue leyendo que estas de suerte 💁‍♂️✨

En mi lista de como debuggear en js, tengo 3 puntos a tener en cuenta:

console.log("");

si bien esta es la forma mas intuitiva, revisar las variables de este modo no esta del todo bien, es la forma más rápida de hacerlo, pero cuando tienes que hacerlo más a fondo, existen mejores formas de hacerlo.

const array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

array.forEach((number) => {
    console.log(number);
});

de este modo podrás ver en la consola de tu navegador uno a uno los números de array.

debugger;

debugger; es una herramienta poderosa al momento de poder debuggear tu código, pero esto depende de el navegador que estés usando, yo ~~que tengo RAM de sobra~~ uso Chrome para trabajar, por lo que las siguientes imágenes serán de Chrome.

const awesomeVariable = 'awesome';
let user = {
    first_name: 'gustavo',
    last_name: 'flores',
    age: -1,
    isCool: false
};
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

function debugVariable(variable) {
    debugger;   
}

debugVariable(awesomeVariable);
debugVariable(user);
debugVariable(array);

si ejecutas este código en tu navegador, dentro de las herramientas de desarrollador, en la pestaña Sources podrás ver esto:

puedes interactuar con tus variables, y revisar que esta sucediendo con todo el scope.

para manejar este debugger y los que vienen tienes 2 botones practicos, F8 y F10:

F8: salta hasta el próximo debugger, si no existe, el código sigue ejecutandose
F10: salta hasta la próxima función, con esto puedes hacer un seguimiento de que se esta ejecutando.

breack points

Si entendiste todo sobre debugger, enhorabuena, ya casi sabes todo de los breack points.

la única diferencia es que puedes ponerlo con tan solo click, en la pestaña Sources podras usar los break points haciendo click en el numero de tu linea de código.

al momento de recargar la pagina, los break points se guardarán para seguir usandolos.

Como procrastinar y morir en el intento ☠

Gustavo Flores — Sun, 17 Nov 2019 22:25:13 +0000

~~Escribo esto por que estoy procrastinando y tengo deberes que hacer~~

Hoy en este nuevo capítulo de procrastinadores anónimos...

hablo sobre mi experiencia como perdedor de tiempo senior, mientras intento llevar a cabo un proyecto personal, estas son las medidas que tomé para quitarme de encima este mal.

¿Procrastinar?

Además de ser difícil de pronunciar, tambien lo es evitarlo.
Según la RAE, procrastinar es diferir o aplazar.

Posicionar sobre tus deberes, actividades con mayor interés para placer personal, eso es procrastinar.

Gastar horas mirando redes sociales o que un momento a otro quieras ponerte a hacer manualidades, es mas común de lo que pensaba.
Yo con tal de no hacer mis deberes aburridos, comencé a regar las plantas y hacer ejercicio, como también comencé a mirar durante horas videos en youtube y perderme en las vidas de mis no-amigos de facebook hasta que no sabía en que hora me encontraba.

Puedo clasificar ✌ tipos de procrastinación:

Productiva
Desgraciada

Clasificar tu pérdida de tiempo a alguna de estas, es un tema personal, para mi regar las plantas, hacer ejercicio o aprender algun framework nuevo, es procrastinar productivamente, dejas de hacer tus deberes 👎, pero obtienes algo bueno a cambio 👍, pero pasar todo el día surfeando por la internet 🏄‍♀️, es una procrastinación desgraciada 😣.

Si bien, puedes perder tu tiempo de forma productiva, recuerda que tienes una lista de cosas que hacer 📓.

Sin saber de que se trataba procrastinar, el concepto me hizo mucho sentido, como si fuera un dejá vu que nunca sucedió, no sabía de la experticia que tenia sobre este modo de vida y sabiendo de que esto me afectaba comencé a tomar cartas en el asunto.

Cartas que tomé 🃏🃏🃏:

Ser prisionero en un panóptico. 🦝

Suena terrible, pero si... exageré.
De cierto modo tu jefe es el gran ojo y tu eres alguno de los que estan sentados en su escritorio (o en la celda, depende de como te sientas en tu trabajo)

Esto ayuda si tienes que rendir cuentas a alguien, si eres tu propio jefe, sigue al otro punto.

Planificar tus tareas, como si tu vida estuviera escrita por cada cosa que debes hacer.

Tal cual, esto fue lo que mejor me ayudó.

Para lograr organizar todo lo que tenia que hacer, para cada proyecto, comencé a crear pequeñas tareas, las cuales puedo completar en un rato, para que después de un día de trabajo, pueda ver mi lista de "Done" y se vea mas atractiva que mi lista de "Todo"

Para esto uso Trello.

Para trello necesitas manejar 3 conceptos que se adaptan a mi estilo de orden.

Tablero = Proyecto
Lista = Lista
Tarjeta = Tarea

Creo un tablero Ejemplo, donde Ejemplo es mi proyecto.

Luego creo 3 Listas, TODO, Doing y Done. Donde en la lista TODO iré agregando las tareas que estoy creando

TODO: tareas por hacer
Doing: tareas que se estan haciendo
Done: tareas terminadas

A medida que voy a hacer una tarea, la muevo a Doing y cuando esta lista, la muevo a Done.
Es muy simple y me ha funcionado genial para no perder el tiempo

Limitarme la cantidad de tiempo en webs basura

La única medida que tomé y funcionó bien fue esta extensión para chrome la cual te limita el tiempo, esto lo puedes configurar tu, así tu sabrás cuanto tiempo puedes perder en cada página.

Cada solución es personal, quizás incluso es positivo para ti procrastinar, pero depende de ti buscar que te ayuda. 🤜💥🤛

🎊 Dame tu opinión y las formas que usaste para dejar de procrastinar! 🎊