Giu
14
Posted on 14-06-2008
Filed Under (ajax, javascript, sviluppo, test, tool, validazione, web 2.0) by Mat on 14-06-2008

JSLint is probably the most powerful Javascript online syntax checker. It finds errors you have never thinked they could be exist. In fact the author gives you a warning: JSLint will hurt your feelings. It’s damn true, but it’s also a js tool you can’t live without more.
Just paste your code and push JSLint button, you’ll get all errors, warnings, and a detailed list of your variables and functions. You can customize your inspection, disabling some unwanted checks, just read the documentation. Inspection is all client-side (of course made with javascript), so don’t worry about your code privacy.

(0) Comments    Read More   
Mag
22
Posted on 22-05-2008
Filed Under (ajax, firefox, javascript, sviluppo, tool, web 2.0) by Mat on 22-05-2008

I didn’t find a free text editor to indent code, but I found this powerful beautifier. I use it to format js or json code. For example, Firebug can track ajax calls and shows the json response (unformatted). With this tool you can paste the response body, indent it, and finally read the content without going crazy…

(2) Comments    Read More   
Apr
12

Ext JS (Ext) is a javascript-based framework for developing Rich Internet Applications, and it’s simply wonderful.
Other Javascript frameworks like JQuery, Prototype and many others are powerful and let you make web pages cooler and more interactive, but their limits are evident. Yes, your web pages will be shorter than plain javascript files but if you wanna develop web applications or someother more complex, you need other, you need Ext.
Ext has many built-in components, which enables you with only a little lines of javascript to create an evoluted graphical user interface, with associated events. You can build forms with embedded form validation, data grid with dynamic options like editing or sorting, or you can simulate a desktop environment with windows in a web page. And more: feed readers, tabbed windows, trees, dynamic loaded combos, and all you can need. It’s also skinnable and customizable. It’s cross-browser compatible, and you don’t need to worry about browser incompatibilities.
And the magic of this tool is that you can forget all javascript functions, you’ll need to know only javascript and json syntax, all the rest is Ext and only Ext.
It’s used by many important and famous customers and that’s a sign of reliability and powerfulness of this framework. You find the customers list in home page. There’ s a complete and well explained documentation, and there are also nice examples to begin learning, some tutorials and a forum to get support.

A comparison between some frameworks
Read a related discussion about ajax frameworks (Italian)
Another review (Italian)

I’m an ExtJS developer, so contact me to get consultancy.

(1) Comment    Read More   
Apr
05
Posted on 05-04-2008
Filed Under (ajax, hack, javascript, sviluppo, web 2.0) by Mat on 05-04-2008

If you’re using a Mootools Accordion on Internet Explorer 7, sometimes it doesn’t open on item specified in show property.
You can simply fix this bug without using show property but calling Accordion.display method immediately after accordion creation, so you’ll get open item also in IE.

View Accordion documentation

(1) Comment    Read More   
Feb
12
Posted on 12-02-2008
Filed Under (ajax, html, javascript, ottimizzazione) by Mat on 12-02-2008

E’ un luogo comune il fatto che gli script javascript vadano inclusi dentro il tag head della pagina. Con l’approdo di ajax sul web, javascript è più utilizzato che mai e il caricamento di tutti i javascript nell’header della pagina rallenta il completamento della pagina. Per questo possono essere inclusi anche dopo, dentro al body, semplicemente prima del loro utilizzo. Certo che inserirli tutti insieme nell’header rende il codice più ordinato, ma in questo modo almeno parte della pagina si è già caricata e l’utente non deve attendere troppo per vedere qualcosa.
Dipende anche dall’utilizzo che se ne fa di questi script; per esempio uno script di validazione delle form come JSValidate è inutile caricarlo nel file header del vostro sito perchè è utile solo dove ci sono delle form, basterà caricarlo nelle pagine opportune. Script come quello di Google Analytics possono essere caricati tranquillamente nel vostro file di footer, prima della chiusura del body, così sarà presente in tutte le pagine e non inficierà sul caricamento del resto della pagina. Se usate script grafici in tutta la pagina, come scriptaculous o mootools, converrà includerli nell’header, in modo che la pagina sia interattiva il prima possibile rispetto ai tempi di visualizzazione della stessa.
Un’altro stratagemma per evitare il rallentamento dei javascript è l’uso dell’attributo defer nel richiamo dello script:

<script src="library.js" type="text/javascript" defer="defer"></script>

che però funziona diversamente a seconda del browser. Inizialmente era stato pensato per caricare lo script al termine del caricamento della pagina; IE invece ha reinterpretato quest’attributo, caricando il file nel momento del richiamo, ma eseguendo il codice all’interno dello script in differita, solo quando la pagina è stata caricata.
Personalmente utilizzo defer solo quando non posso farne a meno, preferisco il primo metodo che è cross-browser e più performante.

Vedi anche:
quirksmode.org
hunlock.com

(1) Comment    Read More   
Feb
11
Posted on 11-02-2008
Filed Under (ajax, google, guida, html, javascript) by Mat on 11-02-2008
  1. Cercare la locazione in cui punterà la mappa in maps.google.com
  2. Cliccare su “Link to this page” e prelevare il parametro ll dal codice dell’iframe, che sarà tipo ll=12.325678,34.567890
  3. Recarsi su code.google.com/apis/maps/ e cliccare “Sign up for a Google Maps API key”, aderire e inserire il dominio di destinazione della mappa
  4. Prelevare la chiave e il codice per quel dominio
  5. Il codice consiste in:
    • Due tag script; la chiave è già quella giusta, sostituire in GLatLng latitudine e longitudine prima prelevate (il parametro ll)
    • funzione load
    • chiamate a load e unload nel body
    • tag div dove inserire la mappa

Voilà, il codice per la mappa è pronto, copiare la nuova pagina generata nel vostro sito o inserire gli elementi citati nel punto 5 in una pagina esistente.
Per aggiungere funzionalità aggiuntive, si può consultare la documentazione.

(0) Comments    Read More   
Feb
04
Posted on 04-02-2008
Filed Under (ajax, css, hack, javascript, validazione) by Mat on 04-02-2008

19/7/2008 UPDATE
The code isn’t valid anymore. Read the comments.

In Thickbox css code there are some hacks that doesn’t validate the code (only css, rather xhtml is valid).
Invalid code is javascript inline css document. So, I changed invalid code with a js function call. Take an example:

* html #TB_overlay { /* ie6 hack */
position: absolute;
/*height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + ‘px’); NOT VALID*/
height: expression(fixHeight(document.body.scrollHeight, document.body.offsetHeight)); //VALID
}* html #TB_window { /* ie6 hack */
position: absolute;
/* margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + ‘px’); NOT VALID */
margin-top:expression(fixMarginTop(this.offsetHeight,document.documentElement,document.body.scrollTop)); //VALID
}

So substitute expression inline in css file with calls to fuctions externally defined, and load the following file whenever you’re using thickbox in your site:

expressions.js:

function fixHeight(scrollHeight, offsetHeight)
{
return (scrollHeight > offsetHeight ? scrollHeight : offsetHeight + ‘px’);
}
function fixMarginTop(offsetHeight,documentElement,scrollTop)
{
return (0 - parseInt(offsetHeight / 2) + (TBWindowMargin = documentElement && documentElement.scrollTop || scrollTop) + ‘px’);
}

To use Thickbox now you need these loadings:

<script src="/lib/thickbox/jquery.js" type="text/javascript"></script>
<script src="/lib/thickbox/thickbox.js" type="text/javascript"></script>
<script src="/lib/thickbox/expressions.js" type="text/javascript"></script>
<style type="text/css"> @import "/lib/thickbox/thickbox.css"; </style>

Download Thickbox 3.1 editated sources:
thickbox.css (editated)
expressions.js (added)

(13) Comments    Read More   
Gen
15
Posted on 15-01-2008
Filed Under (ajax, conflitti, javascript, trucco) by Mat on 15-01-2008

They’re very powerful ajax libraries but…what happens when you use them together? There are some conflicts because they all override $ function.
So if you want to use different libraries that are using both JQuery, Prototype and Mootools, like Lightbox, Slimbox, Thickbox, JSValidate or something else, you can use noConflict function. It’s only a JQuery feature, so you can use JQuery with Prototype or JQuery with Mootools. I never tried Prototype with Mootools but it seems there isn’t still a similar function like noConflict in these libraries.
This is the code you can set for calling JQuery:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">var $JQ = $; //rename $ function</script>

and then you must use the new prefix, $JQ, insted of $ for every JQuery call. For example, if you’re using Thickbox just replace every instance of $ with $JQ inside thickbox.js

Sources:
JQuery
Davide Salerno
Filippo Pisano

(3) Comments    Read More   
Nov
24
Posted on 24-11-2007
Filed Under (ajax, javascript, trucco, wordpress) by Mat on 24-11-2007

Did you insert Javascript code into a post or a page, but it doesn’t run?
Yes, because also without advanced editor the code into script will be changed, it will containes <p> tags and your script won’t be interpreted. So the solution is simply: first you should think if your code is useful in many pages. If it is so, you can include this line in your header.php file:

—HEADER.PHP—

<script type="text/javascript" src="/scripts/updatepage.js"></script>

And to call function contaied in the script, and to execute other js code, you can write code into post/page in this way:

—POST/PAGE CODE—

<script type="text/javascript">
<!–
updatepage();
…other js code…
//–></script>

Otherwise if the code is useful only in that post/page, you can include the first line directly into the post/page code:

—POST/PAGE CODE—

<script type="text/javascript" src="/scripts/updatepage.js"></script>
<script type="text/javascript">
<!–
updatepage();
…other js code…
//–></script>

In the last case, if you want to put code in all posts/pages you can edit file single.php (posts) or page.php (pages):

—HEADER.PHP—

—SINGLE.PHP OR PAGE.PHP—

<h3 class="storytitle">
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?></a>
</h3>
<div class="emailpage">
<script type="text/javascript">
<!–
emailpage();
//–>
</script>
</div>

(0) Comments    Read More   
Giu
23
Posted on 23-06-2007
Filed Under (ajax, web 2.0) by Mat on 23-06-2007

Negli ultimi tempi si sente molto parlare di Ajax, ma che cos’è? Ajax è una sigla che sta per Asynchronous Javascript and Xml, e rappresenta non un nuovo linguaggio di programmazione, bensì una nuova tecnica di programmazione orientata al web. Con Ajax è possibile aggiungere interattività ad un sito web, che risponderà alle richieste più semplicemente, senza dover ricaricare le pagine ad ogni click. Le richieste effettuate tramite il browser vengono così servite trasparentemente, rendendo le pagine web più simili ad applicazioni desktop e quindi più user-friendly. Grazie a questa tecnica è stato possibile spostare l’utilizzo di certe applicazioni verso il web, cosa prima impensabile data la scarsa rapidità di utilizzo dei dati sul web; sono nate applicazioni come i calendari, fogli di calcolo, feed reader online. Certo, queste applicazioni erano già disponibili in ambiente desktop, ma ora abbiamo la possibilità di utilizzare e consultare questi dati ovunque, senza dover ricorrere all’utilizzo di remote desktop o di chiavette usb.

(0) Comments    Read More