DEV Community: Giandomenico Pagliara

Tailwind CSS senza Node.js

Giandomenico Pagliara — Sat, 04 Feb 2023 18:39:52 +0000

Installazione

Per usare TailwindCSS senza Node.js dobbiamo innanzitutto scaricarlo. In questo tutorial utilizzerò il package manager Scoop:

scoop install tailwindcss

Installazione senza Scoop

Se non volete utilizzare scoop potete scaricare Tailwind direttamente dalla loro repo github. Scarichiamo il file, installiamolo e aggiungiamo il path dell'eseguibile alle variabili di sistema Windows. Così facendo possiamo chiamarlo ovunque senza doverci ricordare il path assoluto.

Inizializzazione

Inizializziamo tailwind nel nostro progetto con il seguente comando:

tailwindcss init

Ora troveremo nel nostro progetto il file tailwind.config.js. Andiamolo a modificare inserendo in content i path dei file in cui tailwind dovrà ricercare le classi che inseriremo:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,php}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

In questo caso ho inserito tutte i file con estensione .html o .php presenti nelle cartelle figlie di src.

Creare il file di input CSS

Inserite nel vostro main file css le direttive che servono a Tailwind:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

In questo caso tailwind non funzionerà correttamente se userete @tailwind anziché @import

Launch

Lanciamo tailwind con il seguente comando:

tailwindcss -i ./src/input.css -o ./src/output.css --watch

-i sta per input file e il path seguente punta al nostro main file css contenente le direttive aggiunte nel passaggio precedente. Invece -o sta per output e quello che segue è il path del file che tailwind andrà a creare o modificare ogni volta che inseriremo una classe. Invece --watch serve a indicare di monitorare le modifiche e di ricostruire il file output.css in caso di necessità.

Conclusione

Non ci resta che installare l'estensione di tailwindcss per il nostro editor preferito in modo da avere l'autocomplete per le classi css.

Spero questa guida vi sia piaciuta , considera di mettere ❤️ al post e seguirmi sui miei social:

Linkedin
GitHub

Installare Node.js su Siteground

Giandomenico Pagliara — Sat, 01 Oct 2022 18:03:16 +0000

Introduzione

Questa guida è stata pensata per chi necessita di Node.js su un piano di hosting Siteground sprovvisto.

Connessione via SSH

Prima di installare Node.js colleghiamoci al server tramite ssh.
Nella sezione Sviluppatori di SiteTools cliccare su Gestione Chiavi SSH, inserire il nome della chiave per poi crearla.
Tutti le credenziali sono disponibili nello stesso pannello, serviranno per il passo successivo. Ora copiamo la chiave segreta sulla nostra macchina in un file .pub e apriamo un terminale.

Colleghiamoci via SSH dipendentemente dal nostro sistema operativo:

su Linux/Mac OS: ssh USER@HOST_NAME -pPORT Su Siteground la porta di default ssh è la 18765:

ssh -i "path/to/key/nome-chiave.pub" username@hostname.com -p18765

su Windows: in PuTTY inserire il nome del server host, impostare il tipo di connessione su SSH e la porta su 18765. Immettere il nome utente e premere Invio.

Ora se richiesta inseriamo la password impostata su SiteGround in precedenza.

Installazione

Eseguiamo un veloce check sulla nostra distro con:

uname -srm

Nel mio caso è una Linux 3.12.18-clouder0 x86_64. Ora andiamo nella sezione download del sito di Node.js e copiamo il link dell'installer del nostro sistema operativo verificato in precedenza. Nel mio caso copio il link del Linux Binaries (x64).

https://nodejs.org/dist/v16.17.1/node-v16.17.1-linux-x64.tar.xz

Prestate attenzione all'estensione del file perché se non sarà uguale a .tar.gz il terminale vi darà errore. Come nel mio caso basterà cambiare l'estensione ed il gioco è fatto.

Ora ci basterà seguire le seguenti istruzioni per installare Node.js e npm:

cd ~
curl https://nodejs.org/dist/v16.17.1/node-v16.17.1-linux-x64.tar.gz | tar xz
mv node-v6.2.2-linux-x64/ nodejs
mkdir ~/bin
cp nodejs/bin/node ~/bin
cd ~/bin
ln -s ../nodejs/lib/node_modules/npm/bin/npm-cli.js npm

Prestate attenzione in quale cartella eseguite i comandi, soprattutto l'ultimo: ln -s viene usato per creare nomi simbolici. Se non lo farete nella cartella ~/bin allora il comando npm non verrà riconosciuto dal server.

Test

Per testare se è tutto corretto vi basterà eseguire i seguenti comandi:

node --version
npm --version

Se come risposta riceverete le rispettive versioni allora Node.js e npm sono stati installati correttamente.

Spero questa mini guida vi sia piaciuta , considera di mettere ❤️ al post e seguirmi sui miei social:

Linkedin
GitHub

Scroll Animation con Vanilla JS e CSS

Giandomenico Pagliara — Sat, 17 Sep 2022 14:01:00 +0000

Introuzione

In questa quida vedremo come creare delle scroll animations con JS Vanilla e CSS.

Intersection Observer API

Per ottenerle utilizzeremo questa API: ciò che fa è determinare se un elemento del DOM è visibile all'utente finale.

HTML & CSS

Per questa parte avrete carta bianca. In questo caso animeremo delle scritte. Per avere abbastanza spazio per lo scroll ho dato ad ogni <section> un'altezza di 100vh e ho centrato i titoli <h1> con display:grid; e place-items: center. Identifichiamo gli elementi che vogliamo osservare con una classe: in questo caso hidden e le diamo un' opacity: 0; (poichè inizialmente questi elementi non saranno visibili).
Inoltre creiamo un'altra casse show con opacity: 1; che andremo ad aggiungere agli elementi con classe hidden quando saranno visibili all'utente finale. Per rendere tutto più fluido aggiungiamo una transizione transition: all .6s a hidden.

<section class="hidden">
  <h1>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </h1>
</section>

<section class="hidden">
  <h1>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </h1>
</section>

<section class="hidden">
  <h1>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </h1>
</section>

section{
  height: 100vh;
  background-color: #1B1F24;
  color: #ffffff;
  display: grid;
  place-items: center;
}

.hidden{
  opacity: 0;
  transition: all .6s;
}

.show {
  opacity: 1;
}

JavaScript

Ora prendiamo tutti gli elementi con classe hidden:

const hiddenElements = document.querySelectorAll(".hidden");

Il prossimo step è quello di creare l'intersection observer che è una classe che prende una callback nel suo constructor.
Il vantaggio è che può osservare più elementi allo stesso tempo. Quindi itereremo ogni entry con un forEach:

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
  })
})

Questa funzione verrà eseguita ogni volta che la visibilità di un elemento osservato cambierà.

Ora aggiungeremo un check su ogni entry per vedere se è visibile nel viewport, ed in caso avvenga aggiungeremo all'elemento la classe show dichiarata in precedenza:

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if(entry.isIntersecting){
      entry.target.classList.add('show');
    }
  })
})

Se vogliamo che l'animazione venga eseguita ogni volta che un elemento rientra nel viewport ci basterà inserire un else statement in cui togliamo la classe show:

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if(entry.isIntersecting){
      entry.target.classList.add('show');
    } else {
      entry.target.classList.remove('show');
    }
  })
})

Ora che abbiamo l'observer dobbiamo dirgli cosa osservare: in questo caso possiamo fare un loop su tutti gli elementi e dire all'observer di osservare ogniuno di essi:

hiddenElements.forEach((el) => observer.observe(el));

Esempio pratico

In questo esempio potete notare che le scritte animate provengono da destra. Per ottenere questo effetto basta giocare con le proprietà di trasformazione CSS:

.hidden{
  opacity: 0;
  transform: translateX(100px);
  transition: all .6s;
}

.show {
  opacity: 1;
  transform: translateX(0px);
}

Spero questa mini guida vi sia piaciuta , considera di mettere ❤️ al post e seguirmi sui miei social:

Linkedin
GitHub

Guida Isotope Filtering

Giandomenico Pagliara — Wed, 14 Sep 2022 20:44:24 +0000

Introduzione

Isotope è una libreria javascript che permette di filtrare e ordinare vari elementi. In questa guida vedremo come filtrarli.

Risorse

Prima di tutto importiamo nel nostro file .html il cdn:

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<!-- o la versione Minified -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

Oppure lo script della libreria che potrete trovare qui: Isotope Metafizzy. Inoltre potete inizializzare Isotope con jquery.

Se userete jquery importatelo prima dello script di isotope

Struttura HTML

In questo esempio vedremo come filtrare vari box in base al colore.

Filtri

Definiamo ogni filtro come un <button> e ad ognuno aggiungiamo l'attributo data-filter="". In data-filter inseriremo il nome della classe degli item che verranno filtrati alla pressione del medesimo bottone.

Importante sottolineare che il nome della classe in data-filter è preceduto da un punto.

Per visualizzare tutti gli elementi senza filtri aggiungiamo un bottone con data-filter="*".

<div class="filter-button-group">
  <button data-filter="*">Show All</button>
  <button data-filter=".red">Red</button>
  <button data-filter=".blue">Blue</button>
  <button data-filter=".yellow">Yellow</button>
</div>

Griglia elementi

Inseriamo in un container con una classe specifica i vari item che filtreremo. Per ogni item inseriamo una classe che lo identificherà come un elemento da filtrare (in questo caso box). Inoltre aggiungiamo una classe che determinerà la categoria dell'elemento (red, yellow, blue):

<div class="griglia">
  <div class="box yellow"></div>
  <div class="box red"></div>
  <div class="box blue"></div>
  <div class="box yellow"></div>
  <div class="box red"></div>
  <div class="box blue"></div>
  <div class="box yellow"></div>
  <div class="box red"></div>
  <div class="box blue"></div>
</div>

Inizializzazione

Inizializziamo il nostro Isotope in Javascript.

con Vanilla Javascript:

var grigliaElementi = document.querySelector('.griglia');
var iso = new Isotope( grigliaElementi, {
  // options
});

con Jquery (consigliato):

var $isotope = $('.griglia').isotope({
  // options
});

Dove ci sono i commenti //options potrete inserire varie opzioni e il layout per la griglia. Potete trovare tutte le informazioni su Isotope Metafizzy.
Tutte le opzioni sono facoltative ma è consigliato usare sempre itemSelector che non fa altro che specificare quali saranno gli elementi del layout.

Quindi per questo esempio:

var $isotope = $('.griglia').isotope({
    itemSelector: '.box',
});

Filtraggio

Aggiungiamo un evento ai bottoni che abbiamo settato in precedenza:

$('.filter-button-group').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $isotope.isotope({ filter: filterValue });
});

Ogni volta che un <button> verrà clickato la variabile filterValue sarà impostata con la classe contenuta in data-filter del bottone e poi isotope filtrerà gli elementi per noi.

Un esempio pratico:

(Bonus) Griglia responsive e centrata

Vi capiterà di voler centrare la griglia degli elementi, per farlo il modo più semplice e efficace è inserire nelle opzioni del layout (di default) masonry l'opzione isFitWidth: true e impostare i margini della griglia su auto. Riprendiamo l'esempio precedente:

var $isotope = $('.griglia').isotope({
  masonry: {
    isFitWidth: true
  }
});

.griglia{
  margin: 0 auto;

Spero questa mini guida vi sia piaciuta , considera di mettere ❤️ al post e seguirmi sui miei social:

Linkedin
GitHub

Guida React Props da Parent a Child

Giandomenico Pagliara — Fri, 26 Aug 2022 18:18:00 +0000

Introduzione

In questa semplice quida vi guiderò passo dopo passo all' utilizzo di props per il passaggio di valori da un componente all'altro. Nella guida vedremo come si passano i valori dal componente genitore al figlio.

Passiamo i props al Child

Il termine props non significa altro che proprietà . Ipotizziamo che vogliamo passare dei valori dal componente parent Videoteca.js al componente child Film.js.
Scriveremo in da Videoteca.js in <Film /> gli attributi che vogliamo passare:

titolo
genere
data

Ed impostiamo ad ogniuno il corrispettivo valore:

import React from 'react';
import Film from './Film';
import './style.css';

export default function Videoteca() {
  return (
    <div>
      <h1 class="text-center">Videoteca</h1>
      <div classname="container-film">
        <Film titolo="Godzilla" genere="Azione" data="2012" />
      </div>
    </div>
  );
}

Prendiamo i props dal Parent

Ora andiamo nel nostro componente child Film.js e impostiamo un argomento di nome props(la scelto del nome è a vostro piacimento, ma consiglio di scrivere props per una maggiore chiarezza).
Per accedere al titolo ci basterà scrivere props.title e per visualizzarlo nel componente ci basterà inserirlo tra parentesi graffe:

import React from 'react';
import './style.css';

export default function Film(props) {
  return (
    <div class="film">
      <h3>{props.titolo}</h3>
    </div>
  );
}

Semplice, no? Possiamo fare lo stesso con genere e data. Inoltre nulla ci vieta di farlo con altri componenti Film.js:

Sommario

Se non vi è ancora chiaro immaginate props come una scatola. Quando andiamo a inserire gli attributi HTML dal parent al nostro child immaginate che riempiamo la "scatola props" con quegli attributi e li passiamo al componente dove li abbiamo scritti. Fatto questo ci basterà scrivere props.nome-attributo nel child per farli "uscire dalla scatola".
(Non prendere questa come definizione, è solo un esempio per farvi capire il concetto).

Spero questa mini guida vi sia piaciuta , considera di mettere ❤️ al post e seguirmi sui miei social:

Linkedin
GitHub

Miglior UX con Scroll-padding-Top

Giandomenico Pagliara — Wed, 17 Aug 2022 19:10:00 +0000

Introduzione

Questa proprietà definisce un offset per la parte superiore dell'area di visualizzazione dello scrollport, o in altre parole, permetterà alla barra di navigazione di non coprire il contenuto quando premerete un link che vi farà scorrere a una sezione specifica della pagina.

Utilizzo

Tutto quello che dovete sapere è che dovete impostare la regola CSS scroll-padding-top all'elemento che dovrà 'scrollare'.

Esempio pratico

Ipotizziamo che la nostra navbar abbia un'altezza fissa di 60px.
Ci basterà aggiungere al container che 'scrollerà' la suddetta regola con valore uguale all'altezza della navbar stessa:

scroll-padding-top: 60px

Nel seguente codepen ci sono due container identici con la stessa barra di navigazione; in quello destro viene usata la regola scroll-padding-top, in quello sinistro no. Cliccate i link delle rispettive barre di navigazione per notare la differenza.

Noterete subito la differenza: nel container destro si legge il titolo selezionato dalla navbar, nel sinistro no. Questo migliorerà l'esperienza utente. Un piccolo dettaglio che farà la differenza.

Spero questa mini guida vi sia piaciuta , considera di mettere ❤️ al post e seguirmi sui miei social:

Linkedin
GitHub

Guida ScrollReveal.js

Giandomenico Pagliara — Wed, 17 Aug 2022 12:25:00 +0000

Introduzione

ScrollReveal è una libreria JavaScript robusta e flessibile che consente di animare facilmente gli elementi che entrano o escono dal viewport.

Quick Start

Includiamo la libreria nell'html:

<script src="https://unpkg.com/scrollreveal"></script>

Questo ci fornisce la funzione costruttore ScrollReveal(), che useremo in seguito.

Prima animazione

Una semplice configurazione:

<h1 class="appear-from-bottom">
    Hello World!
</h1>

ScrollReveal().reveal('.appear-from-bottom');

Opzioni di animazione

ScrollReveal.js offre varie opzioni di personalizzazione per ottenere l'effetto desiderato:

Delay: è il tempo in millisecondi prima dell'inizio delle animazioni, es. { delay: 500 }.
Distance: controlla quanto distanti si muovano gli elementi quando rivelati, es. { distance: '50px' }.
Duration: controlla il tempo di completamento delle animazioni in millisecondi, es. { duration: '600 } .
Easing: controlla la transizione delle animazioni tra i valori iniziali e finali, es. { easing: 'ease-in' }.
Inverval: è il tempo che intercorre tra ogni reveal, es. { interval: 600 }.
Opacity: specifica l'opacità che hanno prima di essere rivelati, es. { opacity: 0.8 }.
Origin: specifica da quale direzione provengono gli elementi quando vengono rivelati, es. { origin: 'top' } (accetta anche: bottom, left, right).
Rotate: specifica la rotazione che gli elementi hanno prima di essere rivelati, es. { rotate: { x: 20, z: 20 }.
Scale: specifica la dimensione degli elementi prima di essere rivelati, es. { scale: 0.85 }.

Esempio Pratico

Un esempio di come può essere utilizzata la libreria per avere diverse animazioni mentre si scrolla la pagina:

ScrollReveal().reveal('.appear-left', {
  origin: 'left',
  delay: 1000,
  duration: 600,
  distance: '100px',
});

ScrollReveal().reveal('.appear-right',{
  origin: 'right',
  delay: 1000,
  duration: 600,
  distance: '100px',
});

Lo stesso codice viene usato nel seguente codepen:

Risorse Aggiuntive

Per ulteriori configurazioni, metodi e callbacks visita la pagina API di ScrollReveal.js

Spero questa mini guida vi sia piaciuta , considera di mettere ❤️ al post e seguirmi sui miei social:

Linkedin
GitHub