La base di tutto il web
In genere per tracciare l'utente si usa Javascript con un linguaggio lato server per immagazzinare i dati.
Oggi vediamo come eseguire il tracciamento con i CSS.
Ma in questo caso, per CSS, intendiamo più nello specifico CrookedStyleSheets!
Potete vedere nella pagina linkata cosa si intende di preciso.
Per fortuna anche Firefox è compatibile con la input date di HTML 5!
In questo modo sto abbandondando plugin specifici solo per il calendario.
Personalmente lo reputo un pò uno spreco (a meno di cose molto particolari).
Uso molto spesso il componente modal di Bootstrap, soprattutto per visualizzare loading-dialog nel caso di operazioni AJAX.
Ad esempio:
function myFunc() {
$.ajax({
// OPZIONI
beforeSend: function (xhr) {
$('#modal_wait').modal('show');
}
}).done(function (res) {
$('#modal_wait').modal('hide');
}).fail(function (err) {
$('#modal_wait').modal('hide');
alert("ERRORE: " + err);
});
}
Il componente pagination, non è nuovo di Bootstrap 4.
Però, almeno al momento, in questa versione non risulta molto responsive.
Possiamo ovviare aggiungendo una classe al componente.
Sto migrando un sito da Bootstrap 3 a Bootstrap 4, che fornisce anche una pagina apposita per facilitare la migrazione.
Ci sono comunque alcune cose un pò oscure.
Una di queste riguarda le classi visible e hidden, che in sostanza si occupano di rendere visibile / nascondere dei componenti solo a determinate risoluzioni.
Per creare grafici nelle nostre pagine web, siamo abituati ad usare librerie esterne in Javascript.
Anche giustamente, visto che ce ne sono alcune spettacolari.
Ma in verità possiamo creare grafici anche per conto nostro, usando HTML, Canvas e Javascript (ovviamente).
Ho scoperto che nelle applicazioni web è possibile utilizzare un file manifest, che da determinate informazioni quando si "installano" nelle homescreen dei dispositivi mobili.
E' una tecnologia non ancora stabile e pienamente suppoortata, ma sarebbe già il caso di aggiungerla ai nostri siti.
CSS è in continua evoluzione, e sta prendendo anche spunto dai più tradizionali linguaggi di programmazione.
Oggi vediamo come usare le variabili, per riutilizzare un determinato valore in tutto il documento.
Supponiamo di voler usare il font nero ovunque, tranne che nei componenti h1, dove vogliamo usare il rosso.
Se vogliamo impostare l'autocomplete di un form a off, in modo che non visualizzi eventuali dati salvati, ci basta fare questo:
<form method="post" action="" autocomplete="off">
<div>
<label>Email:</label>
<input type="email" name="email" value="" placeholder="Email">
</div>
<div>
<label>Password:</label>
<input type="password" name="password" value="">
</div>
<button type="submit" name="btn">Salva</button>
</form>
Oppure possiamo impostarlo un campo specifico:
<form method="post" action="">
<div>
<label>Email:</label>
<input type="email" name="email" value="" placeholder="Email" autocomplete="off">
</div>
<div>
<label>Password:</label>
<input type="password" name="password" value="">
</div>
<button type="submit" name="btn">Salva</button>
</form>
Il problema è che su Chrome (e Chromium) questo non funziona benissimo.
Centrare orizzontalmente un div è facile, in quanto basta usare i margin:auto a sinistra e destra.
Centrarlo verticalmente può essere un pò più complicato.
Oggi vediamo una possibile soluzione, considerando che non penso funzioni con le vecchie versioni di IE (ma sinceramente a me non interessa!).