Slow standards

Negli ultimi anni in molti hanno parlato di diverse politiche slow: slow food, slow life, ma forse nessuno ha mai parlato di slow web standard.

Fondamentalmente penso che ormai gli standard web siano veramente una cosa gigantesca, che se da un certo punto di vista permettono di costruire applicazioni sempre più complete e complesse, da un altro diventano estremamente difficili da seguire e introducono possibili rischi per la sicurezza e per la privacy.

Cominciai a scrivere per il web quando lo stato dell’arte erano HTML 4.01 e CSS 2.1 e ho assistito alla creazione dell’HTML 5 e di tante API che oggi gli sviluppatori danno per scontate e permettono di ottenere risultati un tempo ritenuti impossibili senza usare hack e/o javascript, da flexbox alle varie animazioni. Poi con gli anni un po’ ho perso la passione per lo sviluppo web, un po’ gli studi mi hanno assorbito il tempo, quindi non mi sono tenuto molto aggiornato.

Tuttavia, non è una mia impressione che le modifiche siano estremamente frequenti, infatti con HTML 5 hanno deciso di eliminare il numero e di trasformarlo in HTML Living standard una cosa che secondo me, anche sono anni che va avanti così, è sbagliata. … [Leggi il resto]

Contenteditable: un'utopia

Qualche tempo fa avevo cominciato a sviluppare una piccola webapp ad uso interno con Vue.js e, volendo implementare dei tag, mi serviva anche un input per modificarli.

Prima che un mio amico mi consigliasse Vue-Multiselect, avevo provato diversi tag input, di cui alcuni non funzionanti, altri invece che non soddisfacevano tutti i miei requisiti: l’integrazione con Vue, la possibilità di integrarli col design del resto del sito (o quanto meno che sembrassero abbastanza coerenti con Bootstrap, visto che mi sto basando su quello) e che avessero l’autocompletamento.

Non trovandone nessuno che facesse al caso mio, ho deciso di cominciare a scrivere un input tag “universale” con queste caratteristica:

  • indipendenza da qualsiasi libreria, in modo che se altri si fossero trovati nella mia situazione avrebbero potuto usarlo;
  • completa libertà grafica per i designer;
  • possibilità di implementare un auto completamento (scriverne uno che non abbia alcuna dipendenza è un lavoro abbastanza lungo e inutile).

Come soluzione avevo trovato di usare un div con contenteditable="true" (un attributo molto, molto vecchio, disponibile persino su Internet Explorer 6, “il terribile”) e un MutationObserver per individuare le varie modifiche fatte a questo. … [Leggi il resto]

Funzione "input" per Smarty

Ho creato una funzione per creare in automatico degli input su smarty, di tutti i tipi.

Forse quello più incompleto è il checkbox, che però per il momento non mi risulta utile cambiare.

Un’altra caratteristica di questa funzione è quella di fissare un value se presente in $_POST o in $_REQUEST ad esclusione dell’input type="password".

Il codice PHP è:

function smarty_tplinput($params, &$smarty) {

	$name=wp_specialchars(isset($params['name']) ? $params['name'] : '');
	$type=wp_specialchars(isset($params['type']) ? $params['type'] : 'text');
	$other=empty($params['other']) ? '' : ' '.$params['other'];

	if(isset($params['noautocompile'])) $params['autocompile']=false;
	if(!isset($params['autocompile']) && $type!='password') $params['autocompile']=true;
	elseif(!isset($params['autocompile'])) $params['autocompile']=false;

	$value='';
	if(!empty($params['value'])) {
		$value=wp_specialchars($params['value']);
	} elseif($type=='file') {
	} elseif($params['autocompile']==false) {
	} else {
		if(!empty($_POST[$name])) $value=wp_specialchars($_POST[$name]);
		elseif(!empty($_REQUEST[$name])) $value=wp_specialchars($_REQUEST[$name]);
	}

	$checked='';
	if(isset($params['checked'])) {
		$checked=$params['checked']==true ? ' checked="checked"' : '';
	} elseif($type=='checkbox') {
		$checked=$value=='on' ? ' checked="checked"' : '';
		$value='';
	} elseif($type=='radio') {
		if(!empty($_POST[$name])) $checked=$_POST[$name]==$value;
		elseif(!empty($_REQUEST[$name])) $checked=$_REQUEST[$name]==$value;
		$checked=$checked ? ' checked="checked"' : '';
	}

	switch($type) {
		case 'textarea':
			echo "<textarea{$other} name="{$name}" id="{$name}">n{$value}</textarea>";
			break;
		default:
			$value=empty($value) ? '' : " value="{$value}"";
			echo "<input type="{$type}" name="{$name}" id="{$name}"{$value}{$checked}{$other} />";
			break;
	}

}
$smarty->registerPlugin('function', 'input', 'smarty_tplinput');

È fatta per smarty 3 ma con qualche piccolo cambiamento dovrebbe essere compatibile anche con smarty 2. … [Leggi il resto]

Epic Win: Inserire un filmato SWF

Oggi mi sono reso conto di un mio epic win fenomenale che però appartiene al passato.

Qualche tempo fa mi appassionavo molto ai forum e ne seguivo uno di supporto a un hoster di forum.

C’era una discussione sui vari tag HTML per mettere i contenuti multimediali.

Per il flash c’era solo l’embed, così ho postato il vero codice, quello con l’object.

Allora uno mi dice su perché in realtà l’embed era contenuto nel mio codice, che non serviva a niente, che dicevo cavolate.

Precisiamo subito che per chi non lo sapesse l’embed è messo per compatibilità con i vecchi browser.

Oggi ho realizzato che il W3C vuole dichiarare obsoleto il tag embed un po’ come il font, anzi, l’ha già fatto (per esempio nell’XHTML 1.1 non c’è).

Ora, chi aveva il codice più sbagliato? Io o te utente di cui per fortuna tua non mi ricordo l’username?

Direi Epic Win!

Menu stile applicazioni con jQuery

È assai strano per me pubblicare post di questo genere.

Ho pubblicato ancora dei tutorial ma mai sulla costruzione di pagine web.

E così questo è il primo.

Avevo promesso a Lantaca di fare questo tutorial sui menu con jQuery perché lui ha fatto il suo tema di Windows.

Così lo scopo di questo tutorial è di creare… l’ambiente desktop di GNOME (l’ambiente desktop che hanno anche distribuzioni GNU Linux). Più precisamente ho usato lo sfondo standard di Debian e anche il suo logo.

Partiamo dall’HTML: ho usato un div in alto con id topmenu contenente una lista per i vari menu principali (Applicazioni, Risorse e Sistema). Degli elementi solo il primo ha una classe con l’unico fine di mettere il logo di Debian.

Dentro ogni elemento c’era uno span.menu-item contenente il nome del menu e un div.menucontent con il contenuto che è fatto sempre a liste.

Il CSS è facile.

Al div#topmenu è stato dato il posizionamento assoluto in alto, altezza di 24px, sfondo etc.

Ai li della lista principale è stato messo float: left; per tenerli ognuno a sinistra dell’altro. … [Leggi il resto]