25 consigli su jQuery

Giorni fa mi sono letto l’articolo “Improve your jQuery – 25 excellent tips” dove ho trovato dei consigli molto interessanti (sinceramente non tutti perchè alcuni erano banali).
Il consiglio che più mi ha “affascinato” è il seguente:

Google have been hosting several JavaScript libraries for a while now on Google Code and there are several advantages to loading it from them instead of from your server. It saves on bandwidth, it’ll load very quickly from Google’s CDN and most importantly it’ll already be cached if the user has visited a site which delivers it from Google Code.

Cioè fare riferimento alla libreria prendendolo dal hosting di Google scrivendo:

  1. <script src="http://www.google.com/jsapi"></script>
  2. <script type="text/javascript">
  3.      google.load("jquery", "1.2.6");
  4.      google.setOnLoadCallback(function() {
  5.          // Your code goes here.
  6.      });
  7. </script>

Questa lettura è quindi la risposta al post “Google potrebbe hostare alcuni frameworks Javascript nei proprio server?“.

Se volete saperne di più vi consiglio di leggere le Google AJAX Libraries API.

Fare il trim di tutti i campi di una tabella sql

Ho dovuto sbatterci un po’ la testa ed il risultato è il seguente:

  1. CREATE PROCEDURE pulisciTabella(IN db_name VARCHAR(255), IN tab_name VARCHAR(255
  2. ))
  3. BEGIN
  4.     DECLARE done INT DEFAULT 0;
  5.     DECLARE colonna VARCHAR(255);
  6.     DECLARE colonne CURSOR FOR SELECT COLUMN_NAME FROM
  7.      INFORMATION_SCHEMA.COLUMNS WHERE table_name = tab_name AND table_schema =
  8.       db_name;
  9.     DECLARE CONTINUE HANDLER FOR NOT FOUND SET done = 1;
  10.     OPEN colonne;
  11.     REPEAT
  12.         FETCH colonne INTO colonna;
  13.         IF NOT done THEN
  14.             SET @A = colonna;
  15.             SET @B = tab_name;
  16.             SET @C = CONCAT("UPDATE ",@B," SET ",@A,"=","trim(",@A,")");
  17.             PREPARE pulisci FROM @C;
  18.             EXECUTE pulisci;
  19.             DEALLOCATE PREPARE pulisci;
  20.         END IF;
  21.     UNTIL done END REPEAT;
  22.     CLOSE colonne;
  23. END;

I dati vengono importati da un gestionale che “riempie di spazi” i campi fino a raggiungere la loro massima dimensione (non chiedetemi il motivo…non l’ho fatto io): ecco il perchè di questa procedura che fa il trim di tutti i campi di una tabella.
Purtroppo richiede abbastanza tempo per essere eseguita (circa 2 milioni di campi) quindi se qualcuno conosce un’alternativa più veloce, ben venga!

Latitudine e Longitudine di Google Maps

Ogni volta mi ritrovo a ricercare su Google sempre la stessa cosa: come avere i valori di latitudine/longitudine di un determinato indirizzo usando Google Maps?
Ecco il motivo di questo post: la prossima volta andrò direttamente a leggermi ciò che ho scritto ;)

Questi sono gli steps:

  1. Ricercare su Google Maps l’indirizzo desiderato (in modo che venga centrato);
  2. Scrivere sulla barra indirizzi del browser la seguente stringa Javascript:
    1. javascript:void(prompt('',gApplication.getMap().getCenter()));
  3. Premere Invio (:P)

A questo punto vi apparirà una finestra simile a questa contenente le coordinate separate da una virgola e comprese tra parentesi:
Google Map Javascript

Ed il gioco è fatto…

UPDATE: Grazie a Francesco sono venuto a conoscenza di http://econym.googlepages.com/example_geo.htm che permette di inserire qualsiasi indirizzo e successivamente di conoscerne le coordinate geografiche.

Opacità CSS

Qualche volta mi ritrovo a cercare “Opacity CSS” su Google perchè puntualmente mi dimentico come settare la trasparenza mediante CSS.
Ecco un esempio di classe che setta la trasparenza al 75%:

  1. .opacity75 {
  2.     filter:alpha(opacity=75);
  3.     -moz-opacity:.75;
  4.     opacity:.75;
  5. }

Facile no?

3 Tecniche diverse per il RollOver in CSS

Colin Cochrane ha scritto un ottimo articolo che spiega in maniera piuttosto semplice 3 tecniche per implementare il RollOver in CSS.

CSS Preloading

  1. #rollover{background:url("/images/1.gif");}
  2. #rollover:hover{background:url("/images/2.gif");}

Risulta essere la tecnica più naturale per implementare il RollOver, ma il ritardo del caricamento della seconda immagine è spesso un problema.

Image Visibility Swap

  1. #rollover{background:url("/images/2.gif");display:block;height:50px;width:50px;}
  2. #rollover:hover img{visibility:hidden;}

Il HTML è il seguente:

  1. <a id="rollover" href="http://www.domain.com"><img src="/images/1.gif" alt="My Rollover's Inactive Image" /></a>

Non si fa altro che mascherare un’immagine per visualizzarne un’altra.

Multistate Image

  1. #rollover{background:url("/images/multi.gif") bottom;display:block;height:20px;width:100px;}
  2. #rollover:hover{background-position:top;}

Non è altro che un utilizzo degli Sprites CSS.

Come avete notato sono stato molto breve nello spiegare le 3 tecniche, perchè? C’è già tutto scritto nell’articolo citato sopra ;) Chi ha già smanettato con i CSS leggendo queste poche righe di codice capirà al volo la logica che ci sta dietro.

Javascript per hackers (giocherelloni)

Gareth Heyes giocherellando con PHPIDS ha “scoperto” alcune cosette interessati su Javascript.
Tutti sappiamo che per fare una cosa ci sono mille modi e l’articolo “Javascript for hackers” fa leva proprio su questo.
Un esempio di domanda: Cosa faccio se non posso usare eval()?

  1. x=eval;
  2. x();

Geko based browsers also allow you to call the eval function like this:

  1. 0['eval']('alert(/XSS/)')

So you can do stuff like, use your imagination:-

  1. 0['ev'+'al']('alert(/XSS/)');

L’autore risponde ad altre domande molto interessanti e particolari, da leggere!

La programmazione è arte ;)

Distruggere Internet Explorer 6/7 con una riga di codice

Hamachiya2 ha scoperto che, scrivendo la seguente riga HTML, Internet Explorer 6/7 alla visualizzazione della pagina darà un bel errorino:

  1. <style>*{position:relative}</style><table><input /></table>

Se volete provare con i vostri occhi (e con il vostro IE6/7) basta andare in questa pagina (o questa).

Ha qualche utilità sapere questa cosa? Assolutamente no, però è divertente ;)

PS: Internet Explorer 6 si pianterà sempre, mentre Internet Explorer 7 lo farà solo quando la finestra è maximizzata (e quindi occupa tutto lo schermo).

Antispam matematico più auto-compilazione Javascript

Dopo aver scritto il post “Aggiunto antispam matematico” mi sono arrivate mail e commenti per chiedermi come avevo fatto a svolgere l’auto-compilazione del campo somma mediante Javascript.
Eccovi i passi:

  1. Scaricare ed installare il plugin “Math Comment Spam Protection Plugin” (o un altro simile);
  2. Aggiornare il template dei commenti in modo da settare la proprietà name a commentform:
    1. <form action="http://read.melodycode.com/wp-comments-post.php" method="post" id="commentform" name="commentform">...</form>
  3. Isolare gli addendi modificando il template dei commenti in questo modo:
    1. < ?php echo '<span id="num1">'.$mcsp_info['operand1'].' + <span id="num2">'.$mcsp_info['operand2'].'</span> ?' ?>

    Cioè mettendoli tra span che abbiano ID rispettivamente settati a num1 e num2;

  4. Aggiungere questa porzione di codice Javascript al di sotto della domanda:
    1. <script type="text/javascript">
    2. var commentform;
    3. commentform = document.commentform;
    4. commentform.mcspvalue.value=eval((document.getElementById('num1')).innerHTML)+eval((document.getElementById('num2')).innerHTML);
    5. </script>

In teoria dopo aver seguito tutti questi passi, dovrebbe funzionare tutto correttamente; se così non fosse vi consiglio di vedere i sorgenti delle mie pagine (dove è presente tutto il codice) così magari sarà tutto più chiaro :)