Notes on a web journey

posted on: 07 February 2009

Javascript debugging

filed under:javascript @ 10:38:22

On A List Apart :

Advanced Debugging with JavaScript

tags:

posted on: 16 October 2008

Empty variables

filed under:javascript @ 16:18:23

A Javascript function to check if a variable is empty:

Feelin' Empty

tags:

posted on: 07 July 2008

Javascript binding

filed under:javascript @ 10:36:55

Overall, binding in JavaScript is not a difficult concept, but it is far too often ignored or glossed over by JavaScripters, which leads to confusion.

Getting Out of Binding Situations in JavaScript

tags:

posted on: 07 June 2008

Title Case

filed under:javascript @ 10:36:22

Javascript code to turn text into a title capitalizing the first letter of each word:

To Title Case

tags:

posted on: 19 May 2008

Lazy loading

filed under:javascript @ 18:10:03

Every JavaScript file that needs to be loaded is a new connection to the server, and every connection to the server means more data; all this occurs before the end user even gets to interact with the page. Thankfully, there is a better way to do this - loading pieces of your web application as the user wants them.

Improve Your Page Performance With Lazy Loading

tags:

posted on: 20 April 2008

Flickr badge solved

filed under:javascript @ 10:31:41

After almost three weeks I found the solution to the Javascript Flickr badge...

After Roger Johansson's help I kept looking around and ended up checking out
the Flickr API (I knew about it but I didn't think of it as the logical solution until then..). Anyway, I soon found out that I could get an XML document back with all the info needed to build a flickr badge. But...XMLHttpRequest cannot do cross scripting (XSS) because of security reasons and my php set up did not allow me to parse XML or send a call with XML-RPC. I still didn't want to have to change much to attain the result I was looking for.

Then I found an article on Vitamin by Cameron Adams of The Man in Blue.

I could get a response in JSON, no XSS problems and still be able to parse it with plain old Javascript.

I still had some problems and Cameron (thanks again) answered a question I asked him which pointed me in the right direction (code lines that shouldn't be broken marked with >>) :

function jsonFlickrApi(rsp){
if (rsp.stat != 'ok') return;
var div = document.createElement('div');
div.setAttribute('id','photos_wrapper');
var div2 = document.createElement('div');
div2.setAttribute('id','photos');
for (var i=0; i<rsp.photos.photo.length; i++){
var p = rsp.photos.photo[i];
var a = document.createElement('a');
a.setAttribute('href','http://www.flickr.com/photos/13067897@N00/'+p.id+'/');
a.setAttribute('title',p.title);
var img = document.createElement('img');
img.setAttribute('src','http://farm' +p.farm+'.static.flickr.com/'+p.server+'/' >>
+p.id+'_'+p.secret+'_t.jpg');
img.setAttribute('alt',p.title);
a.appendChild(img);
div2.appendChild(a);
}
var target = document.getElementById('badge');
if(!target) return;
div.appendChild(div2);
target.appendChild(div);
}
function call_flickr(){
var newScript = document.createElement('script');
newScript.setAttribute('src','http://api.flickr.com/services/rest/?method >>
=flickr.people.getPublicPhotos&api_key=xxxx& >>
user_id=idididi&per_page=8& >>
page=1&format=json&callback=jsonFlickrApi');
var obj = document.getElementById('write');
if(!obj) return;
obj.appendChild(newScript);
}

On the page I now have two empty, unstyled divs. The first has an ID of write and the other of badge. I build the container divs with Javascript and then append the result inside the badge div.

It validates and now, if Javascript is disabled, I just get nothing which is exactly as it should be!!

tags:

posted on: 15 April 2008

Delegating events

filed under:javascript @ 09:41:37

On quirksmode.org :

Delegating the focus and blur events

Catching mouse events bubbling up the DOM tree ..

tags:

posted on: 09 April 2008

Flickr badge five

filed under:javascript @ 15:37:02

I have done a bit more testing and I found out that on Firefox the Javascript call returns only <img> and <a> but on IE6 it still returns <td>..I should have been more attentive. That's why the images end up outside the DIVs.

tags:

posted on: 07 April 2008

Flickr badge four

filed under:javascript @ 19:59:02

I'm still looking for a solution to the Flickr badge “problem”. I sent an email to Roger Johansson of 456 Berea St. and I got an answer back extremely fast. I already thanked him and I'm going to do it again: thanks!

He pointed me to this post by Chris Heilmann of Wait till I come. It's definitely interesting but I'm happy with the simple Javascript call I got from Flickr and I'm just trying to figure out why IE puts the images outside the DIV.

I did some more tests, actually coding Javascript on the page old style:

<script type="text/javascript">
document.write('<div id="photos_wrapper">');
document.write('<div id="photos">');
document.write('<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?..."><\/script>');
document.write('</div>');
document.write('</div>');
var div = document.getElementById('photos');
alert(div.firstChild.src);
</script>

It does not validate so I'm doing it just to test. The alert at the end of the script gives back the correct URI or script if I do alert(div.firstChild.NodeName) but the images are still OUTSIDE the DIVs in IE6...or, at least, they appear to be.

Using the DOM to build the Javascript external call to Flickr :

<script type="text/javascript">
document.write('<div id="photos_wrapper">');
document.write('<div id="photos">');
document.write('</div>');
document.write('</div>');
var div = document.getElementById('photos');
var js = document.createElement('script');
js.setAttribute('type','text/javascript');
js.setAttribute('src','http://www.flickr.com/badge_code_v2.gne?...');
div.appendChild(js);
alert(js.parentNode.id);
</script>

The result given by the alert at the end is correct (photos) but in Firefox it does not show the pictures the first time it loads the page (the Javascript call doesn't fire, I suppose) and doing a refresh causes the Javascript call to Flickr to take over the document making it blank and getting stuck on a bad URI call. On IE6 it just does not show the pictures (the Javascript call doesn't fire, I suppose).

Weird....

I also noticed that basically everyone that uses the Flickr badge as I do has the same “problem”, but it doesn't seem to bother them.

tags:

posted on: 04 April 2008

Flickr badge continued

filed under:javascript @ 10:35:02

On Javascript kit I found this tutorial: external JavaScript and php. At this point, I really thought I had the solution.

So, I rewrote the php function accordingly:

<?php
header("content-type: application/x-javascript");
echo "document.write('<div id=\"photos_wrapper\">');";
echo "document.write('<div id=\"photos\">');";
echo "document.write('<script type=\"text/javascript\" src=\"http://www.flickr.com/badge_code_v2.gne?...\"></script>');";
echo "document.write('</div>');";
echo "document.write('</div>');";
?>

then placed a link to the external file inside the page where the badge is supposed to be:

<script src="functions/flickr.php" type="text/javascript"></script>

In Mozilla Firefox everything is all right, it validates and...IE puts the images OUTSIDE the div!! Why? Have no idea...

IE screenshot

The simple fact that is possible to have some kind of data exchange between php and Javascript is very interesting in itself and I had never read anything about it before. I definitely learned something but I still haven't found the solution to the problem...

tags:

posted on: 03 April 2008

More Javascript flickr badge

filed under:javascript @ 10:19:04

Still trying to get my head around the same Javascript problem. I tried the DOM (my first idea, actually, but I didn't want to have an extra div to use as a hook):

function flickr_badge(){
var target = document.getElementById('photos_hook');
if(!target) return;
var div = document.createElement('div');
div.setAttribute('id','photos_wrapper');
var div2 = document.createElement('div');
div2.setAttribute('id','photos');
var js_s = "<script type='text/javascript' src='http://www.flickr.com/badge_code_v2.gne?...'></script>";
div2.appendChild(js_s);
div.appendChild(div2);
target.appendChild(div);
}

and using innerHTML :

function flickr_badge(){
var target = document.getElementById('photos_hook');
if(!target) return;
var div = document.createElement('div');
div.setAttribute('id','photos_wrapper');
var div2 = document.createElement('div');
div2.setAttribute('id','photos');
var js_s = "<script type='text/javascript' src='http://www.flickr.com/badge_code_v2.gne?...'></script>";
div2.innerHTML = js_s;
div.appendChild(div2);
target.appendChild(div);
}

with the same result: the Javascript call to Flickr takes over and rewrites the whole page, I get only unstyled photos and a loopy request to connect with flickr...

I also tried embedding the Javascirpt directly in the page :

<script type="text/javascript">
document.write('<div id="photos_wrapper">');
document.write('<div id="photos">');
document.write('<scr'+'ipt type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?...."></scr'+'ipt>');
document.write('</div>');
document.write('</div>');
</script>

I had to break the <script> tag in two pieces, otherwise I get a Javascript unterminated string error (script tag nested inside another one), it works but it doesn't validate. Basically, so far, most of my possible solutions don't work and what works doesn't validate.

tags:

posted on: 02 April 2008

Javascript flickr badge

filed under:javascript @ 14:27:21

Beside the lack of web standards attention, I had another problem with the Flickr badge: with Javascript disabled I ended up with a rectangular empty div, 76px height, just sitting there..

I looked around on Google for a solution, at first I thought I could check if Javascript was enabled with php. It turns out that it's pretty easy to check if the browser has Javascript abilities but not if it's actually enabled. I know that php is a server side language and Javascript mostly client side, so it's not possible to call a php function from a Javascript script (except maybe using XMLHttpRequest but I did't even go there).

After trying various unsuccessful combinations I finally figured it out and I wrote the php function so that it writes what I need using Javascript:

<?php
function flickr(){
echo "<script type=\"text/javascript\">\n";
echo "document.write('<div id=\"photos_wrapper\">');\n";
echo "document.write('<div id=\"photos\">');\n";
echo "</script>\n";
echo "<script type=\"text/javascript\" src=\"http://www.flickr.com/badge_code_v2.gne?....."></script>\n";
echo "<script type=\"text/javascript\">\n";
echo "document.write('</div>');\n";
echo "document.write('</div>');\n";
echo "</script>\n";
}
?>

Now, if Javascript is enabled, all is good, otherwise just no empty divs and no flickr badge...I thought... but NO, now it doesn't validate because since there are three <script> “blocks” the parser sees an opening and ending mismatch of the divs ..So, I'm back where I started. More when I fix it..

tags:

posted on: 05 March 2008

Javascript Date Object

filed under:javascript @ 15:19:05

An article on Digital Web Magazine:

Extending The JavaScript Date Object with User Defined Methods

tags:

posted on: 17 February 2008

getElementById in Internet Explorer

filed under:javascript @ 10:57:04

On 456 Berea St. :

Beware of id and name attribute mixups when using getElementById in Internet Explorer

tags:

posted on: 22 October 2007

Cross-browser XMLHttpRequest

filed under:javascript @ 19:24:32

A post about XMLHttpRequest via Stringify :

Re-inventing XMLHttpRequest

Stringify has a new look, very nice.

tags:

posted on: 02 October 2007

Lay out images with Javascript

filed under:javascript @ 18:40:03

An article on A List Apart:

If I Told You You Had a Beautiful Figure...

tags:

posted on: 02 May 2007

JavaScript calendar

filed under:javascript @ 09:08:05

On The Strange Zen of Javascript :

How to build a simple calendar with JavaScript

tags:

posted on: 30 April 2007

InsertBefore

filed under:javascript @ 19:05:32

On Content with Style :

Swapping nodes in a DOM tree

tags:

posted on: 28 April 2007

JavaScript techniques

filed under:javascript @ 09:24:08

Whether or not your JavaScript is maintainable often seems to be relative to the task you're trying to accomplish. You can follow best practices, or not, and sometimes you'll be fine either way. Nevertheless, in this article, we'll demonstrate seven techniques you can add to your daily code writing habits to make you a better programmer.

Seven JavaScript Techniques

tags:

posted on: 06 April 2007

Accesskeys with Javascript and DOM

filed under:javascript @ 19:29:41

On Vitamin:

Setting & Retrieving Accesskeys

tags:

posted on: 01 February 2007

Sound on web browsers

filed under:javascript @ 19:33:08

Sound with Javascript:

sound in web browsers without Flash

tags:

posted on: 24 September 2006

Object oriented Javascript

filed under:javascript @ 09:47:01

In JavaScript, a function is an object; creating a function creates an object. Function objects can be a little more useful than the object literals we just discussed, though, in that they can be used as a template for new objects.

Objectifying JavaScript

tags:

posted on: 28 July 2006

JavaScript closures

filed under:javascript @ 20:58:09

This article explains closures so that a programmer can understand them - using working JavaScript code.

Closures Are Not Magic

tags:

posted on: 25 July 2006

Object Oriented Javascript

filed under:javascript @ 19:01:42

Object Oriented Javascript:

Private, public and privileged members
One core thing about JavaScript that tends to confuse people is how to get private, public and privileged members.
Namespacing your JavaScript
Perhaps a very uncommon approach to developing web applications that require JavaScript (but should be more common) is namespacing your scripts.
Private Members in JavaScript
JavaScript is the world's most misunderstood programming language. Some believe that it lacks the property of information hiding because objects cannot have private instance variables and methods. But this is a misunderstanding. JavaScript objects can have private members.

tags:

posted on: 22 July 2006

Javascript includes and link thumbnail

filed under:javascript @ 19:07:55

Javascript includes
calling a script from within another script

Link thumbnail
displays a small image of the destination page when hovering on a link

tags:

posted on: 18 July 2006

JSON, Ajax, and UTF8

filed under:javascript @ 18:44:08

On Particletree: JSON, Ajax, and UTF8

How do you go about sending any type of character to the server via JSON? The solution turns out to be quite simple, but arriving at the solution involved many attempts in the wrong direction.

tags:

posted on: 12 July 2006

Building Accessible Widgets for the Web

filed under:javascript @ 18:48:09

On Digital Web Magazine: accessible widgets for the web

When building web applications, we're working with a fairly restricted set of widgets, compared to those available for native desktop apps. The recent surge of interest in JavaScript points to a solution: we can replicate the functionality of sophisticated native widgets through some clever DOM scripting, and provide our users with exciting interfaces that bridge the gap between native apps and web apps.

tags:

posted on: 24 June 2006

Javascript search form

filed under:javascript @ 13:18:45

I published the code for the two "search forms" under the ␄search posts” feature on the home page of this site.

tags:

posted on: 15 June 2006

Prototype and base

filed under:javascript @ 11:15:32

On Dean Edwards's site: prototype and base

Comments on this post are interesting too.

tags:

posted on: 14 June 2006

Responsible use of JavaScript

filed under:javascript @ 10:42:33

On The Web Standards Project:
promoting the responsible use of JavaScript

tags:

posted on: 12 June 2006

Javascript teleprompter

filed under:javascript @ 10:22:18

On DOMScripting: Javascript teleprompter

tags:

posted on: 09 June 2006

XmlHttpRequest debugging

filed under:javascript @ 10:35:13

On Curiosity is bliss: XmlHttpRequest debugging

tags:

posted on: 03 June 2006

AJAX and DOM Scripting

filed under:javascript @ 09:57:21

On Garret Dimon's site:AJAX and DOM Scripting

tags:

posted on: 03 June 2006

Guide to Prototyping Ajax

filed under:javascript @ 09:53:09

On ParticleTree:

tags:

posted on: 01 June 2006

Responsible Asynchronous Scripting

filed under:javascript @ 19:29:47

On Vitamin:
responsible asynchronous scripting

tags:

posted on: 31 May 2006

AJAX page transition

filed under:javascript @ 18:51:08

On Stringify: AJAX page transition

tags:

posted on: 30 May 2006

AJAX and accessibility, IE7 and Javascript

filed under:javascript @ 12:09:21

On 456 Berea St. :
AJAX, JavaScript support and screen reader accessibility

On Quirksmode:
IE 7 and JavaScript

tags:

posted on: 26 May 2006

Extending prototypes

filed under:javascript @ 10:52:33

On Web-graphics: extending prototypes

tags:

posted on: 16 May 2006

Javascript and Selectors

filed under:javascript @ 11:38:21

On Web-Graphics: Javascript and Selectors

tags:

posted on: 11 May 2006

AJAX tutorials

filed under:javascript @ 17:20:33

On Max Kiesler: 60 AJAX tutorials

tags:

posted on: 21 April 2006

Secure and awkward Javascript

filed under:javascript @ 13:53:50

On A List Apart: secure your code

On Dustin Diaz' site: awkward looking javascript

tags:

posted on: 18 April 2006

Class attributes and Javascript

filed under:javascript @ 19:03:45

On Stringify: Class attributes and Javascript

tags:

posted on: 15 April 2006

DOM and XMLHttpRequest

filed under:javascript @ 19:09:38

On Web Standards Project: DOM builder

On DOM Scripting: XMLHttpRequest on the W3C

tags:

posted on: 27 March 2006

Bookmarklet

filed under:javascript @ 14:03:48

I want to write a bookmarklet to copy a quote from another site and save it formatted with a link to it. Just to make things even easier..

tags:

posted on: 09 March 2006

AJAX

filed under:javascript @ 09:17:22

On A List Apart: getting started with AJAX

I have read comments and opinions about AJAX breaking accessibility rules. AJAX is a tool. As such it's not inherently "good" nor "bad" but defined by the the use that it's made of it. A hammer can be used either to build or to destroy a house.

tags:

posted on: 23 February 2006

Object Oriented JavaScript

filed under:javascript @ 10:11:21

On Web-Grapics: OOJS - overhyped and overcomplicating.

tags:

posted on: 18 January 2006

Periodic table of Elements with AJAX

filed under:javascript @ 16:02:35

From Jalenak:

Periodic Table of the Elements AJAX Demo

tags:

posted on: 17 January 2006

AJAX and JSON

filed under:javascript @ 21:40:32

AJAX :

tags:

posted on: 14 January 2006

Javascript Lightbox

filed under:javascript @ 19:20:32

An interesting use of Javascript :

Lightbox

tags:

posted on: 13 January 2006

Javascript defaults

filed under:javascript @ 13:06:23

From Web-graphics:

tags:

posted on: 11 January 2006

AJAX login system

filed under:javascript @ 14:35:26

On Evolt:

AJAX login system

tags:

posted on: 25 December 2005

AHAH

filed under:javascript @ 12:57:35

Funny title? No, actually an interesting technique:

tags:

posted on: 12 September 2005

Javascript event handler - addEvent()

filed under:javascript @ 10:12:50

From Scott Andrew LePera cross-browser event handler has stemmed a Peter-Paul Koch article and even a coding contest.

I have been using the traditional event registration model that, as explained, has some drawbacks but since my scripts are pretty simple I find it good enough. I also make use of Simon Willison's addLoadEvent() function as of my post.

tags:

posted on: 01 August 2005

Footnotes and mouse over

filed under:javascript @ 11:47:31

Interesting technique:

This mouseover effect is also interesting because simple:

tags:

posted on: 30 May 2005

Javascript and nodeType(s)

filed under:javascript @ 14:08:41

Found today:

When working with XML one regularly needs to test whether a node has a certain node type

and this could be a convenient solution.

tags:

posted on: 17 April 2005

Javascript shell

filed under:javascript @ 15:55:00

Javascript shell:

tags:

posted on: 14 April 2005

Language options with XMLHttpRequest

filed under:javascript @ 10:48:52

I have been looking for a solution to a multi-language site that doesn't need to have the same pages repeated in different languages. I had tried using only Javascript but the translated text had to be saved together with the rest of the Javascript code and it didn't seem a practical solution.

I think that the solution could be XMLHttpRequest. I save all the “Studies” text in a XML file that has the same tags as the XHTML page and change the content of the page according to the language chosen by the user. I'm working on it, still polishing out a few glitches.

tags:

posted on: 12 April 2005

More XMLHttpRequest

filed under:javascript @ 09:37:50

I found more links:

I didn`t realize that XMLHttpRequest was such a popular topic..I have been using XML for a while but it's difficult to find good articles and practical applications.

tags:

posted on: 10 April 2005

XMLHttpRequest

filed under:javascript @ 20:46:17

Learning about XMLHttpRequest..

tags:

posted on: 30 March 2005

Small adjustements

filed under:javascript @ 10:09:10

The random quotes are back again.

Also, fixed a few bad links and the Javascript code for the random quotes adding a check that avoids error alerts.

This post on Simon Willison site poses an interesting problem that I have encountered already many times.

tags:

posted on: 22 March 2005

Pop up menu

filed under:javascript @ 14:36:13

As I said, I'm back online (even if with a few glitches..) and I have published the pop-up menu on the studies page.

It is very simple, the mark-up is valid XHTML and the CSS that I use for the layout can be changed to anything else. The menu works with Javascript-disabled/CSS-enabled, Javascript-enabled/CSS-disabled, Javascript and CSS disabled.

tags:

CSS,Javascript and Php studies

Anti spam email
A solution to writing an anti spam email contact link
filed under: Javascript
Background image
A background image randomizer that I used in the second version of this site.
filed under: Javascript/CSS
Javascript menu
A menu that uses Javascript and session cookies.
filed under: Javascript/CSS
MiniSite
Experimenting with CSS and Javascript.A simple but, in my opinion, nice navigation “system”. The MiniSite is a one page site.
filed under: Javascript/CSS
Photo display
Protect copyrighted photos: a simple but effective solution.
filed under: Javascript/CSS
Photo gallery
A photo gallery made for a friend
filed under: Javascript
PHP menu
A PHP menu that can be updated without having to re-publish all the pages is on.
filed under: PHP
Pop-up menu
A very simple pop up menu powered by Javascript. It works also if Javascript is disabled.
filed under: Javascript/CSS
RSS feed
How to write and use an RSS feed
filed under: rss-xml
Tag replacer
The Tag replacer explained and a link to it.
filed under: PHP
Tags search
A search form build and powered using Javascript and the DOM
filed under: Javascript