Forem: Marius

Preserve aspect ratio for images

Marius — Thu, 23 Dec 2021 16:15:37 +0000

I'm currently working on a website where I have images of random sizes. They all need to be responsive and be placed within a solid container that will maintain the aspect ratio of the image it contains. This can be done with the padding-top: x% and position:relative on parent element while the child (image) has position: absolute and top:0; left:0; right:0; bottom:0
So I found needed a way to calculate image radio based on dimensions. In my project I use chakra UI so, the radio has the form of a/b Let's look into it:

I'm using a API based CMS where I need to convert radios from strings into a/b format (not string)

// Transforms 'a/b' string into a/b
export const parseRatio = (prop: string) => {
  let newRatio = prop.split('/'),
      first = Number(newRatio[0]),
      second = Number(newRatio[1])
  return  first / second
}

Next I found this neat little function that calculates my ratio based on image dimensions (that I can query from the API)

// compute ratio based on dimensions
export const ratioCalc = (w:number, h:number) => {
  let gcd :any = (a:number, b:number) => (b == 0) ? a : gcd (b, a%b),
    ratio = gcd(w, h),
    left = w/ratio,
    right = h/ratio
  return parseRatio(left + '/' + right)
}

Let me know what you think.

JS practice: day2 - password decoder

Marius — Sun, 10 Oct 2021 16:12:17 +0000

Yesterday I wrote a script for generating passwords based on a priming word. It's a basic function that uses Regex to match vowels and consonants. Next, it ads each into separate arrays, then does some counting, addition, and multiplication on the initial numbers. Ultimately, it scrambles it all in a single array which I then join('') into the returned string.

It's not rocket science, but it's fun and useful. Today I wrote a little script to decode these passwords; let's get into it.

// the RegExp patten that matches all letters and one digit after
let decodeRegex = new RegExp('[a-z][0-9]','gi');

const decodePW = (c) => {

  let chainInitial = [], chainArranged = [];
  // initial array containing pairs of letters and indexes 
  chainInitial = c.match(decodeRegex);

  chainInitial.map((el) => { 
    // get a var that contains only numbers
    let index = Number(el.substring(1))
    // get a var that contains only letters
    let letters = el.substring(0,1)
    // reassign indexes in the array
    chainArranged[index] = letters
  });

  // make it a string
  let primedWord = chainArranged.join('').toLowerCase()
  return primedWord
};

console.log(decodePW(pwString));

And this is pretty much it. This script has a limitation; the priming word needs to be a maximum of ten characters; otherwise, the decoding will not work. That is due to the Regex pattern that I use here let decodeRegex = new RegExp('[a-z][0-9]','gi');. It will select only one number after the letter. Feel free to comment if you can make it work with longer words.

Thanks for reading.

JS practice: day1 password generator

Marius — Sat, 09 Oct 2021 21:31:35 +0000

There are plenty of ways to generate secure passwords, but why not use your own password-generating algorithm? It will be better than using the same password everywhere, and you'll have some fun in the process. Let's get to coding!

First some html

<h1>password generator</h1>
<label>write a word</label>
<input type="text" id="word" value="">
<input type="button" value="generate"><br>
<strong>generated password:</strong>
<input type="text" id="pw" value="">

next let's write a function that takes in a priming word and returns a password.

let vowels = 'aeiouyw';
let vowelRegex = new RegExp(`[${vowels}]`,'gi'); // List of vowels (Global and Insensitive)
let consonantRegex = new RegExp(`(?![${vowels}])[a-z]`, 'gi'); // List of consonants (Global and Insensitive)
let allRegex = new RegExp(`[a-z]`, 'gi'); // List of consonants (Global and Insensitive)


const encodePW = (c) => {

  // turn the string into an array
  arrayed = c.match(allRegex)
  // create an empty array that will hold your strings
  newArr = []
  // add the index next to each el
  arrayed.map((a, index)  => { newArr.push(a + index); });

  // create two empty arrays
  g1 = []; g2 = []

  // add elements inside this empty array
  newArr.map(el => {
    el.match(vowelRegex) ? g1.push(el) : g2.push(el)
  })

  let vowelStr = g1.join('').toUpperCase(),
      consonantStr = g2.join('').toLowerCase();
      // the compose algo
      pwCompose = '#' + c.length + vowelStr + g1.length + g2.length + consonantStr + (c.length * g1.length + g2.length + '1903')

  console.log(pwCompose)

  let vowels = c.match(vowelRegex).join('').toUpperCase();
  let consonant = c.match(consonantRegex).join('').toLowerCase();
  let pw = '#' + c.length + vowels + vowels.length + consonant.length + consonant + (vowels.length + consonant.length + c.length) + '5475'

  return pw;
};

Now let's hook all this up with the HTML

const primedInput = document.getElementById('word')
const genBtn = document.querySelector('[type="button"]');
const primedWord = primedInput.value || ''
const pwField = document.getElementById('pw');

genBtn.addEventListener("click", e => {
  pwField.value = encodePW(primedWord);
});

And voila, you have your own password generator with a badass encryption algorithm. The next step will be to write a script that decrypts the password.

what do you think ?

The decoder script is in the next post.

My first javascript experiment

Marius — Mon, 01 Mar 2021 20:10:00 +0000

Dear internet, I decided to learn javascript. ES6 has some pretty cool features, and the minimal syntax is freaking awesome. I am learning mainly from freecodecamp.org, youtube and a book I stumbled upon a while ago: eloquent javascript.

There is a long road ahead, however everything starts with a first step, so here I am taking the first step with this exercise.

So, I made a simple script that makes a non-uniform rectangles
grid on the screen, the result can be considered more or less generative art.

First I start with an array of random numbers where each number is unique.

const myArr = [];

function randomize() {
    maxNo = 16; // range of the random generated nr
    rNo = Math.floor(Math.random() * Math.ceil(maxNo)) // generate random nr
    const summit = myArr.reduce((a, b) => (a + b), 0); // sum of array numbers

    // see if the total is 100
    if (summit < (100 - maxNo)) {
        if (myArr.includes(rNo)) {
            randomize();
        } else {
            myArr.push(rNo);
            randomize();
        }
    } else {
        return
    }
}

Next I am going to create the html elements

function populate() {
    randomize();
    // Prepare your array
    const arrDiff = (100 - myArr.reduce((a, b) => (a + b), 0))
    myArr.push(arrDiff);
    myArr.sort((a, b) => a - b);

    // populate the html
    const myCompo = [];
    const freak = document.querySelector('#monsters');
    const roar = document.createElement('div');
    roar.classList.add('roaw');
    freak.appendChild(roar);

    myArr.forEach (function(el, item) {
        let node = document.createElement('div');
        node.style.width = el + 'vw';
        node.style.gradient
        myCompo.push(node);
    });

    // Insert them all inside the container
    myCompo.forEach(function(el) {
        roar.appendChild(el);
    });

    myArr.forEach(function(el) {
        clone = roar.cloneNode(true);
        clone.style.height = el + 'vh';
        freak.appendChild(clone)
    })
} populate();

You can see this experiment live on codepen

Feel free to let me know what you think.