Forem: casiimir

Less 3 Than - The Heming(way) approach to buy game keys

casiimir — Wed, 03 Mar 2021 07:40:56 +0000

How to find the best and cheapest game keys from internet

For whom code types ⌨️, and gamers! 🎮

My dear friends, this is Casiimir speaking. I have spent too many days on this. They have gone by so fast, but now the time is due! I therefore welcome the opportunity to present my final project during the #AmplifyHashnode hackathon!

The Heming(way) to solve any problem is:

"Now is no time to think of what you do not have. Think of what you can do with what there is."

The Old Man and the Sea

What's this?

Less3️⃣Than

Less 3 Than is a very useful web app that's basically what all gamers want! It makes it possibile to find the lowest price available for any video game (only PC/Mac), by comparing more than 25 stores and it gives you which game is under 3$!

The web app takes the gamer by the hand and guides him towards the lists of the cheapest and top rated games, the stores and the link where to buy them. Everything with common interface, minimal and clear design.

The most incredibile thing to ever happen in other website is the presence of free games too!!

Usefulness: the beating heart of an idea

Monday - concept of necessity 🌱

My friend: hey Casiimir!, are there any free game this week?
Me (thinking): have you tried just Googling "free pc games this week"?
Me (answer): let's keep talking about this in a couple hours... (five hours later)
Me: hey! Check out this cool web-app (no css, no nothig!)
My friend: Woah! Today Epic Games has on RAGE 2 for free! Thank you man!
Me (thinking): maybe i could use React... maybe SASS too... just a little piece of code, nothing else...

Tuesday - the dawn of a new app 🌅

The project grew fast, especially with the implementation of React... I totally immersed myself in that, so much that I haven't got time to think. That night, 4 hours of Figma *and 3 hours testing *CSS, I reach an accord on the UI *and *UX *- **destined to change rapidly*.

Wednesday - It's verse, verse, code ✒️

The code traveled along the walls of my room, my fingers new **dependencies **of the keyboard, the whole room's **extension **of my computer. Time had a way of making a different journey in that place.

Time is what turns kittens into cats.

Thursday - Merlin, fetch my spells, please ✨

Finally it works. The magic of a Fetch, a few lines of CSS and* the power of React's rendering*. The code is dirty and messy, and very smelly, fortunately there is no one around - but commits on Github, speak for themselves...

First attempt:

Friday - You need to put more pressure on the brush 🧹

Now, what we want is a deep cleanse. Turn all the CSS into SASS - you're probably wondering why I just didn't do that in the first place.

Saturday - To the end, and beyond that, if need be 🏁

It is said that "ideas are more powerful than guns". I've had it up to here. I was overflowing with ideas, but now kittens are aged, just one last day to the Hackathon’s deadline.

Well, with the promise to add more stunning features I continued to cleaning the code.

Sunday - The result, finally! 🤩

At this very moment I'm writing the article...

Features include ✔️

These are all qualities which are to be appreciated:

A catalogue of the cheapest Top Rated game keys (by comparing more than 25 stores)
Mobile first, optimized for user experience
Intuitive and minimal view
Faster and responsive
Complete with the search option (searching for lower priced too!)
Open Source, under the MIT License, available on Github
More features very soon!

Mobile first: the philosophy 📱

The web app was born in my Iphone 6S, piece after piece. Smartphone are smart. Precisely because of its responsivity characteristics and the quicker accessibility I decided to optimize the Mobile version.
But it works well in other device, desktop too!

But in the future I'll want to improve this aspect.

The cradle of the app 🔧

Sass
React
Figma
AWS Amplify
API from cheapshark.com (thank you!)

Improvements to be made ⏳

Sort by price
Select range of price, from - to
Dedicated sections for every game
Specific stores section
More interactivity for the user
Add more stores to compare
and much more...

Demo
Repo

Thank you reader too, it's incredibly important for me that you are here with me!

Do you like my app? Would you support me? Please leave a like (in Hashnode too, if possibile) 🙏 Or buy me a coffee ☕

Router in plain JS

casiimir — Sat, 09 Jan 2021 23:07:33 +0000

Gallary, a minimal gallery with Grid

casiimir — Mon, 04 Jan 2021 21:46:45 +0000

Work in progress, every advice is essential.

Covid19 Italy - a project for my Country

casiimir — Thu, 31 Dec 2020 09:46:10 +0000

In this year together, we have fought, and we keep doing that, a war. It might sound exaggerated, but think it over, about the effects: crisis in every field. Who suffer from it? The economies of the countries. Who suffers most often? The society, the human relation and, more than any other, every single man and woman who faced (and facing), with difficulty, this crisis.

Let us not be discouraged, however, by the difficulties, together, once again in the human history, we will rise. Renewed. Stronger and united.
This is the big lesson from this big crisis.

Sorry for this introduction. My project starts precisely from that.
I wrote this that takes the data from Italy official dataset (protezione civile, whom I thank) and it renders these in a minimal format.

I started the project about less than 10 days ago, with one goal:

provide information on the state of alert about our national lockdown for the Christmas holidays;
provide information on the numbers, updated daily;
humbly asking to stay home, if not really needed
give thanks to every doctor, nurse, officer and every single man who have to take care of the other

WebApp
Repo

This is my personal Christmas Hackathon Project.
Maybe it isn't impressive, but this is my really first project in React that I loved. Not for what the code does, but for what it communicates.

Code needs refactoring, I had to write it quickly, but it works.

I would love to receive your opinion, it's also my first post here!

Wishing you a serene and profitable year, I think we all deserve that.

(This post was originally posted on my Hashnode Blog)

Merry Christmas, by Python

casiimir — Fri, 25 Dec 2020 16:46:28 +0000

Developers from the four corners of the World, Merry Christmas!

x, y = 10, 0
while (x > 1):
  print(' ' * x + 'O' + ' ' * y + 'O')
  x-=1
  y+=2
print (' O' + '*' * 18 + 'O')
for y in range (2):
  print (' ' * 9 + '#' * 3 + ' ' * 9)

Higher Order Function in JS

casiimir — Thu, 12 Nov 2020 08:58:03 +0000

” ‘ THIS, SAID LAYELAH, ‘ IS THE WAY WE HAVE OF ESCAPING. ‘ “

const powerOf = (exponent) => {
   return num => num ** exponent;
}

1. If you can read this, then you’re able to understand the rest

Higher-order functions are functions that operate on other functions, for example, one of these can take functions as arguments or return another function. We can have three different types of these:

Functions inside functions
Functions that change functions
Function that manage the control flow

Lucky for me, we have here an inner function example inside a mainly function (give a reading to closure). In this example, powerOf requires an ‘exponent‘ parameter and returns an anonymous function. The latter, accept a ‘num‘ parameter which will be multiplied by itself for ‘exponent‘ times (the ** operator was introduced by ECMAScript7).

Take a deep breath …

powerOf(3)(4);     // powerOf(exponent)(num)
> 64              // 3 times 4 multiplied by itself = 64, wasn't it?

As a matter of fact, we can try to find a different approach:

const powerOfThree = powerOf(3);
powerOfThree(4)
> 64              // Holy abstraction!

Hey, check that out! Let’s read it and find out what’s in there. First of all we have assigned the function ‘powerOf(3)‘ to ‘powerOfThree‘ constant. Makes sense? But beware… powerOfThree need another argument, namely ‘num‘. So let’s give him num 4 and … ta-dah: it returns 64!

2. Becouse when the going gets tough, the tough get going

Higher-order functions are important to understand the three main built-in array methods, such as:

Map
Filter
Reduce

Map is very simple to understand. It takes a callback, then, it returns an operation with the same. The operation returns a new array, because map does not mutate the array on which it is called. How does it works?

const array1 = [2,4,6,8,10];
const array2 = array1.map(num => `Number: ${num}`);

Well, first of all, the callback is called for every element of the array, then, each element is added to ‘array2‘. It is very simple to read this code!

Sometimes we don’t need to use map:

When you don’t use the array that map returns
When you are not returning any value from the callback

Well, in these cases, you can use the good ol’ For-of:

const array1 = [2,4,6,8,10];
const array2 = [];
for (number of array1) array2.push(`Number: ${number}`);

3. Reinventing the wheel

For a proficient understanding of them let’s rewrite, step-by-step, our personal map function:

const iMap = function(array, callback) {
    const newArray = [];
    for (number of array) {
        newArray.push(callback(number));
    }
    return newArray;
}

Does it make sense? Now try to read it!
(If you feel so lost, don’t worry about that. Logical processes are extremely hard to understand. So give yourself time!)

It just so happens that higher-order functions are related to functional programming paradigm. But this is a whole other thing …

Further reading:

post scriptum:

I would like it very much any advice about this article, it's my first post on Dev and my first attempt to write few notes in English. Therefore, I thank you for suggestion about that.
You're Welcome!

Espressioni Regolari in JavaScript

casiimir — Sat, 26 Sep 2020 12:54:02 +0000

Una breve introduzione al John Wick delle stringhe

Le espressioni regolari sono estremamente utilizzate e terribilmente confusionarie. Con l’esperienza, prendendoci la mano, rimarranno solo terribilmente confusionarie.

Le RegExp (termine tecnico) sanno essere ragazze veramente difficili da gestire: problema difficile da risolvere, difficoltà maggiori da controllare. Eppure talvolta si rilevano essere l’approccio più veloce, simpatico e soprattutto “pulito”. Fare la loro conoscenza — il che non significa risolvere ogni problemi con esse, anzi — ci rende dei programmatori più vissuti.
Non sono un’esclusiva di Javascript. Ciò non ci interessa, in questo articolo andremo a vedere proprio come utilizzarle con il linguaggio web più in voga del momento.

“Avete mai sentito l’arcaica espressione trovare un ago nel pagliaio? Sembra essere vecchia di 500 anni. Le espressioni regolari servono proprio a questo: tu indichi il pagliaio, che cosa trovare e loro lo trovano… a dir il vero fanno anche di più: separano l’ago dal pagliaio e, con esso, anche ogni singolo filo di paglia.”

Signori, tra le mani abbiamo forse il tool più potente per processare e ispezionare stringhe di testo, caratteri alfanumerici, numeri, simboli e lettere senza senso. Sono tra i giocattoli dei grandi, e i piccoli sviluppatori — come me — non dovrebbero toccarli. Anche questo non sembra interessarci, andiamo a sporcarci le mani!

Le espressioni regolari, come quasi ogni cosa in JS, sono di tipo Object e possono essere richiamate in due modi: usando il costruttore RegExp; oppure servendoci dei slash di apertura e di chiusura:

let xyz= new RegExp(“xyz”);
let xyz = /xyz/;

L’uno o l’altro caso significa esclusivamente: questa variabile xyz è un’espressione regolare ‘xyz’. Quindi una lettera x seguita da una y a suo volta seguita da una z. Niente più, niente meno. Se andassimo ad aprire la console del nostro browser preferito e scrivessimo:
console.log(/xyz/.test(“Che sciocchezza le espressioni regolari”));
scopriremo che il risultato che ne verrà fuori sarà ineluttabilmente False.

Possiamo “risolvere il problema” studiando un po di più, o cambiando la stringa: le espressioni regolari non sono affatto facili, dice Mr. xyz — provate su — la nuova stringa passata come parametro della funzione test, prevede la presenza della nostra espressione ricercata, appunto xyz, sarà costretta a restituire un bel True.

test è il metodo più comune: accetta una frase come parametro e restituisce un tipo Boolean. Se la stringa inserita è presente nella nostra frase restituisce un altro bel True.

Per ostacolare ancor più la comprensione, con “stringa” mi riferisco all'espressione regolare e con “frase” alla stringa nella quale andremo a effettuare la ricerca.

/iron/.test(“Guarda c’è ironman!”));
True

Ma metodi per stringhe indexOf e includes svolgono praticamente lo stesso compito di questo metodo per le espressioni regolari, test. Ma fidatevi di Mr. xyz, e portate un po di pazienza: di fatto, per compiti tanto semplici, non si ricorre alle regexp. Le cose cambiano invece quando dobbiamo cercare un insieme di caratteri alfanumerici non ben definiti, seguiti magari da strani simboli alieni… Vediamo qualche esempio.

/\D[0–5][6–9]\D/.test(“Ho appena compiuto 27 anni”);
True

La seguente espressione si può leggere in questo modo: dentro la frase “Ho appena compiuto 27 anni” è presente l’espressione \D[0–5][6–9]\D:

\D sta per “qualsiasi carattere che non sia un numero
[0–4] sta per “qualsiasi numero compreso tra 0 e 4, non ripetuto
[5–9] stessa cosa per sopra ma tra 5 e 9
\D sta nuovamente per “qualsiasi carattere che non sia un numero”

Analizzando nuovamente con comprendonio la nostra frase vedremo adesso che ho appena compiuto è un insieme di caratteri alfabetici e nessun numero, e che quindi rispetta la definizione \D;
27 sono due numeri, precisamente il 2 e il 7, non ripetuti, ove il primo è compreso tra 0–4 e il secondo è compreso tra 5–9;
infine anni sono tutti caratteri alfabetici e nessun numero, rispetta anch'esso \D.

Da notare come la **built-in-shortcut* \D accetta più di un carattere o la ripetizione delle stesso o ancora la presenza di uno spazio o di qualsiasi altra cosa che non sia un numero. Mentre la scorciatoia tra parentesi quadre, che abbiamo adottato per la gestione dei numeri interi da 0 a 4, prevede un solo numero, per l’appunto, compreso tra 0 e 4, inclusi.*

Lista built-in-shortcut:
\d   Solo numeri
\w   Sia numeri che caratteri alfabetici
\s   Qualsiasi spazio vuoto, tabulazione, linea a capo, et similia
\D   Solo caratteri alfabetici
\W   Solo simboli
\S   Qualsiasi elemento eccezion fatta per gli spazi vuoti, tab, et
     similia
.    Qualsiasi carattere, numero, simbolo e spazio, eccezion fatta
     per il ritorno a capo

Data la tabella sopra, e la breve introduzione all'uso delle parentesi quadre, proviamo ad analizzare un esempio pratico, talvolta anche utile, ma al momento… cosa?!?:
/^[A-Z]{6}\d{2}\D\d{2}\D\d{3}\D$/

L’espressione soprastante, rullo di tamburi, va a verificare se la frase inserita è un codice fiscale valido. Capisco che ci sono simboli sconosciuti che ancora non sono stati trattati e certamente destano non poche perplessità. Ma avete scelto voi di imparare a programmare, tenetelo a mente; episodi come questo sono frequenti!:

^       Identifica l’inizio dell’espressione
[A-Z]   Tutte le parole dalla A alla Z
{6}     Identifica il numero di volte che verrà ripetuto 
        l’elemento precedente (nel caso [A-Z])
\d      Identifica un numero (già visto)
{2}     Nuovamente identifica il numero di volte, in questo caso
        dell’elemento \d
\w      Identifica un carattere
...     e così via, fino a
$       che identifica la fine dell’espressione

Quindi proviamo a inserire il nostro codice fiscale sulla console e vediamo un po se per il nostro computer siamo tipi True o False.

test non è l’unico metodo a disposizione per la gestione delle espressioni. Diamo una veloce occhiata anche al metodo replace, che sostituisce parti di una stringa, e al metodo exec, che ci restituisce l’indice di riferimento di una porzione di stringa.

Il metodo replace, come suggerisce il nome, rimpiazza una porzione della nostra frase con un’altra.

“Ironman”.replace(“man”, “woman”);

Mentre il metodo exec restituisce un oggetto contenente — tra l’altro — l’indice di riferimento della porzione di stringa ricercata.

/\d/.exec(“uno è diverso da 1”);

Concludiamo in bellezza con un bel sommario semplice e conciso, rubato direttamente da Eloquent Javascript:

/xyz/     La sequenza di caratteri ‘xyz’
/[xyz]/   Almeno uno tra ‘x’ o ‘y’ o ‘z’
/[^xyz]/  Qualunque carattere eccetto la sequenza 
          ‘xyz’
/[0–9]/   Qualunque numero compreso tra 0 e 9
/z+/      Una o più occorrenze del carattere ‘z’
/z*/      Zero o più occorrenze del carattere ‘z’
/z?/      Zero o una occorrenza del carattere ‘z’
/z{2,4}/  Da due a quattro occorrenza del carattere 
          ‘z’
/(xyz)/   Il gruppo della sequenza ‘xyz’
/x|y|z/   Almeno uno tra ‘x’ o ‘y’ o ‘z’
/\d/      Solo numeri
/\w/      Sia numeri che caratteri alfabetici
/\s/      Qualsiasi spazio vuoto, tabulazione, linea a 
          capo, et
          similia
/\D/      Solo caratteri alfabetici
/\W/      Solo simboli
/\S/      Qualsiasi elemento eccezion fatta per gli 
          spazi vuoti, tab, et similia
/./       Qualsiasi carattere, numero, simbolo e 
          spazio, eccezione il ritorno a capo
/^/       Inizio
/$/       Fine

A questo punto spero proprio di non aver esagerato, e vi auguro di trovare tutti gli aghi in tutti i vostri pagliai!

Buona programmazione!