luisarmando-testcoder-blog

[luisarmando-testcoder-blog]

El método  mágico Object.entries()

Estaba usando ReactJS cuando me topé con este problema:  

<h3> Total amount of items selected : {props.numItems}</h3>

Según un array de items, como frutas por ejemplo, tenía que poner su cantidad en ese props.numberItems, se veía normal pero no había solo una lista de items, más bien la información tenía una estructura como esta:

{  

  "fruits": ["apple", "pineapple", "tomato", "banana"],  

  "vegetables": ["lettuce", "onion", "rice", "beans"]

}

Así que básicamente mi pregunta fue, cómo recorrer este object de la manera super concisa y simple para sumar los lengths de los array que tenía adentro, seguro hay varias formas, esta, después de consultar mozilla developer, se me ocurrió:

let itemsAmount = 0;  

Object.entries(foodObj)

           .forEach(i => itemsAmount += i[1].length);

Y listo! Al final, basándome en el ejemplo anterior, esto me habrá devuelto el hermoso número 8, a lo Leonardo Pisano.Object.entries(foodObj)

Esto pasa porque (teniendo en cuenta el ejemplo anterior)  Object.entries devuelve lo siguiente:

[  

  [    

    "fruits",    

    "apple",    

    "pineapple",    

    "tomato",    

    "banana"

  ],

  [

    "vegetables",

    "lettuce",

    "onion",

    "rice",

    "beans"

  ]

] 

[luisarmando-testcoder-blog]

Usando imágenes base64 y más

Aquí va un texto interesante...

Normalmente cuando se carga una imagen en mi paginita web, es después de un request al server, esto por añadido a la carga del documento inicial, la imagen no viene con el documento, pero ¿qué pasaría si con el documento las imágenes vinieran también? :> 

Digo, se puede?

Pos sí, tanto en el atributo src como dentro del url() de css.

Nada más se pone algo como esto:

<img src="data:image/jpeg;base64,/9j/2EGB...==“/>

Esos ‘...’ antes de los ‘==’ solo son para evidenciar que hay mucho más texto, pero para efectos de este post es más que suficiente.

El ejemplo anterior se aplica con las imágenes con la extensión .jpeg pero también se podría traer un svg, con algo como esto: 

<img src='data:image/svg+xml,<svg xmlns=“http://www.w3.org/2000/svg” > ... </svg> />

Ahora, estas data:image/no se qué blablabla.., ¿qué son?¿tienen nombre?

Sí, les llaman Data URIs, que son una forma de indicar un tipo de datos con un texto.

Los  Data URIs consisten de una estructura especial: 

data:tipo de dato(texto o imagen)/contenido de la data(svg, jpeg... etc),la data

Averiguando en Internet acerca de convertir imágenes en esta cosa de base64, encontré un motón de Base64 Image Encoder por ahí, aquí un recurso que me sirvió: 

https://www.base64-image.de

Al final para convertir la imagen de vuelta solo hay que poner ese texto en el atributo src del tag img en html/valor url en css y mostrarla en mi paginita web, y nada más con guardar imagen como ya está.

Pero en el proceso otra duda me surgió, ¿y si quisiera decodificar el texto base64 en vez de codificarlo? y pues antes de inventar el agua (como tenía planeado) me cayó esta información del cielo: 

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/atob 

Existe un método en javascript para decodificar esta información, se llama atob(), este decodifica un string que esté codificado en base64 de tal forma que lo pasaría a otro string más extraño todavía. HE AQUÍ UN EJEMPLO!!

Teniendo en cuenta esta función:

function base64ToBunchOfNumbers(str) { 

   // str pensado en obtener el texto del atributo src de un elemento

   let re64 = /,([^ ]{0,})/gmi;    let rawData = window.atob(re64.exec(str)[1]);    let newArray = [];

   // dos formas de hacer el mismo return    // return rawData.split('').forEach(i => newArray.push(i.charCodeAt()));    for(let i = 0; i < rawData.length; i++) {      newArray.push(rawData[i].charCodeAt());    }    return newArray;  }  

La variable rawData antes de ser manipulada vilmente por mi función, devolvía un string como este: 

ºÂÃÄÅÆÇÈÉÊÒÓÔÕÖ×ØÙÚáâãäåæçèéêñòóôõö÷ø... (más o menos)

Ahora voy a dejar una pregunta en el aire, ¿Si yo pongo ese texto en un archivo y lo guardo como un archivo jpeg, podré ver la imagen devuelta?

Serán experimentos para otro día...

[luisarmando-testcoder-blog]

SRI Hash para las librerías

Hoy usé esta herramienta para producir un hash para mis recursos/librerías 

https://www.srihash.org/

Lo que me genera un script como este.

<script src="https://luisarmando-testcoder.github.io/QuickerJS2/quicker.js" integrity="sha384-P3cu/+M8eNGYr5lh9BjMogOcClvNjspL+0RHBkTTMFoIdCtTWTJPht1qpMrQGmSD" crossorigin="anonymous"></script>

Los atributos ‘crossorigin’ e ‘integrity’ son usados para la validación SRI(Subresource Integrity), leí por ahí que aseguran que los recursos de terceros no hayan sido manipulados de ninguna forma.

Así que una nueva buena práctica añadida...

Checked!

[luisarmando-testcoder-blog]

Smooth scrolling en css

Si tengo un markup como este, por ejemplo: 

 <nav id="navHeader">    <ul>      <li><a href="#header">header</a></li>      <li><a href="#content">content</a></li>      <li><a href="#footer">footer</a></li>    </ul>  </nav>

Podría dirigirme a ciertos elementos con los id´s respectivos a los href.

Pero se dirigiría de un salto, PUM!!... así, entonces...

Si se le pone al body, html, o elemento con overflow. auto esto:

scroll-behavior: smooth;

Al darle click al anchor, el scroll se moverá hasta el elemento.

[luisarmando-testcoder-blog]

Regresión Lineal Simple

Sinceramente pensé que aprender mate para ml sería más difícil que interiorizar la lógica de programación, porque dentro de mi mente la lógica usada era muy diferente, pero cuando entendí este tema de la  regresión lineal simple me di cuenta de un super secreto a la vista de todos... La lógica matemática es un ancestro de la lógica de programación.

Primero tenía que en averiguar el objetivo de una ecuación usada en un tutorial de yt que estaba viendo. 

y = mx + b

Pues no tiene sentido usar una ecuación  que no se entiende.

Básicamente se trata de que con una variable x que ponés se puede calcular el valor aproximado de un valor y.

¿Y esto pa qué sirve? Bueno...

Digamos que tenemos estos datos:

Horas que estudió un estudiante -> x: [1,9,6,11,16,18,2,2,5,7]

Las notas respectivas -> y: [27,66,55,90,100,97,24,34,60,70]

Se necesita una fila de x*y y otra x*x

Y por último, las sumatorias

Con estos datos si le doy un número de x horas de estudio  a la ecuación esta me devolverá una nota aproximada para las horas que estudié. 

Las sumatorias son básicamente una suma de todos los elementos de una columna. 

Bueno, ya que se tiene los x y los y se puede hacer algo que se llama diagrama de dispersión(suena muy cool), and guest what, es un plano donde se dispersan los datos, más o menos algo así: 

En la ecuación  y = mx + b tenía que averiguar qué era m y b.

Así que básicamente lo diré en javascript:

//     m = (n * obj._xy - obj._x * obj._y) / (n * obj._xx - Math.pow(obj._x, 2)); //     b = (obj._y * obj._xx - obj._x * obj._xy) / (n * obj._xx - Math.pow(obj._x, 2));

Todas las variables, con un guión bajo antes, son sumatorias, y n es la cantidad de datos en el array de x( [1,9,6,11,16,18,2,2,5,7] ), en este caso serían diez.

Ya con todo eso dicho aquí va mi algoritmo de ejemplo:

const xyObj = {  x: [1,9,6,11,16,18,2,2,5,7], // x  y: [27,66,55,90,100,97,24,34,60,70] // y  // xy  // x*x } function linearRegression(obj) {  function simpleLinearRegression(x){    obj['xy'] = [];    obj['xx'] = [];    // summation    obj['_x'] = 0;    obj['_y'] = 0;    obj['_xy'] = 0;    obj['_xx'] = 0;    for (let i = 0; i < obj.x.length; i++) {      obj.xy.push(obj.x[i] * obj.y[i]);      obj.xx.push(obj.x[i] * obj.x[i]);    }    for (let i = 0; i < obj.x.length; i++) {      obj._x += obj.x[i];      obj._y += obj.y[i];      obj._xy += obj.xy[i];      obj._xx += obj.xx[i];    }    let m, b, y;    const n = obj.x.length;    m = (n * obj._xy - obj._x * obj._y) / (n * obj._xx - Math.pow(obj._x, 2));    b = (obj._y * obj._xx - obj._x * obj._xy) / (n * obj._xx - Math.pow(obj._x, 2));

   y = m * x + b;    return y;  }  // scaleX to scale the graphic width  // scaleY to scale the graphic height  // bool false, 0, undefined... to avoid drawing the line  function drawGraphicXY(scaleX = 1,scaleY = 1, bool = true, cWidth = 400, cHeight = 400) {    const c = document.querySelector('canvas');    const ctx = c.getContext('2d');    const manageCanvasSize = (function() {      c.width = cWidth;      c.height = cHeight;      window.addEventListener('resize', ()=> {        c.width = cWidth;        c.height = cHeight;      });    })();    let lineToDraw = [];    for(let i = 0; i < c.width / scaleX; i++) {      let yResult = simpleLinearRegression(i);      lineToDraw.push({        y: yResult * scaleY,        x: i * scaleX, // use to draw in canvas        realX: i,        realY: yResult      });      // console.log(i, '-', yResult);    }    // console.log(lineToDraw);    function drawLine() {      ctx.beginPath();      ctx.fillStyle = '#FF0000';      for(let i of lineToDraw) {        ctx.fillRect(i.x,c.height - i.y,5,5);      }    }    function drawXYDots() {      ctx.fillStyle = '#210CE8';      ctx.beginPath();      for (let i = 0; i < obj.x.length; i++) {        //ctx.fillRect(obj.x[i] * scaleX - scaleDotX / 2,        //             c.height - obj.y[i] * scaleY - scaleDotY / 2,        //             scaleDotX, scaleDotY);        ctx.fillText(`${i+1}°(${obj.x[i]},${obj.y[i]})`, obj.x[i] * scaleX,                     c.height - obj.y[i] * scaleY);        ctx.font = '12px sans-serif';      }    }    function animate() {      ctx.clearRect(0, 0, c.width, c.height);      drawXYDots(obj, ctx);      if(bool) drawLine();      window.requestAnimationFrame(animate);    };    animate();  }  // simpleLinearRegression(obj, 10);  return {    slr: simpleLinearRegression,    dxy: drawGraphicXY  } }

let studentsGrades = linearRegression(xyObj); console.log(studentsGrades.slr(11.2)); studentsGrades.dxy(18, 3.5);

Al final la función studentsGrades.dxy(18, 3.5), si se tiene un canvas en html producirá este gráfico:

Y entonces solo quería decir que entendí esto de la regresión linear simple. Cool.