Two things. First: I have upgraded from Hardy Heron to Lucid Lynx and it all works very nicely, except a minor bug that has something to do with visual effects, the bonobo server and the screensaver...I'm not using a screen saver and the problem is gone. I upgraded, probably a new install from the CD would solve the problem completely, but I don't mind, it's fine as it is.

The second thing: I thought my web site was written in XHTML 1.0 Strict (it validates as such) but I found out that, since I'm serving pages with a MIME type of text/html, I'm not really using XHTML (HTML5)...

Read this: Dive Into HTML5

“ Dive Into HTML5 seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards. I shall publish Drafts periodically, as time permits. Please send feedback. ”

Dive Into HTML5 by Mark Pilgrim

“ The web is designed to be consumed by humans, and much of the rich, useful information our websites contain, is inaccessible to machines. People can cope with all sorts of variations in layout, spelling, capitalization, color, position, and so on, and still absorb the intended meaning from the page. Machines, on the other hand, need some help. ”

• Introduction to RDFa
• Introduction to RDFa 2

PHP Quick Profiler is a small tool (think Firebug for PHP) to provide profiling and debugging related information to developers without needing them to add a lot of programmatic overhead to their code:

PQP

On A List Apart :

Advanced Debugging with JavaScript

A list of resources on HTML 5 by Cameron Moll :

12 resources for getting a jump on HTML 5

Via an article on Particle Tree:

• Pretty code
• Code brevity
• Style is substance

A Javascript function to check if a variable is empty:

Feelin' Empty

A few links :

• Anchor buttons on buttons, on Mezzoblue
• 10 Principles of the PHP Masters
• CopyAndPaste Click a character to copy it

On Chris Shiflett's blog:

Inspecting and Hacking HTTP

Interesting use of telnet and lots of links to different HTTP debugging (and not only) tools.

“ 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

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

To Title Case

“ 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

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 >>) :

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!!

A series on Authentic Boredom :

“ Introducing “The Highly Extensible CSS Interface”, a four-part series of how-to's and savvy conversation to be published in the coming weeks, with the first article debuting this week. The phrase “highly extensible” is in reference to designing and coding interfaces that are flexible enough to adapt in ways the designer or developer may not foresee when handing off coded templates, while still retaining the overall aesthetic integrity of the layout.”

The Highly Extensible CSS Interface ~ The Series

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.

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.

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...

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...

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.

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..

On 456 Berea St. :

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

A post about XMLHttpRequest via Stringify :

Re-inventing XMLHttpRequest

Stringify has a new look, very nice.

An article on Digital Web Magazine about building forms using php:

Building a Bulletproof Contact Form with PHP

Nothing new but accurate and simple, good to have a link to for reference.

On Vitamin :

The Standards Way to Do Dynamic Data

On The Strange Zen of Javascript :

How to build a simple calendar with JavaScript

On Content with Style :

array_diff_assoc and the order of parameters

On Content with Style :

Swapping nodes in a DOM tree

“ 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

“..an excellent cross-platform, language-agnostic checksheet of common software security risks...a brief summary of each of the 19 sins, along with a count of the number of vulnerabilities I found in the Common Vulnerabilities and Exposures database for each one.”

Sins of Software Security

“ HTML 4.01 may be a good, stable ground for developers to stand on, but it could be better. Lots of things have changed in the way the web is used and perceived in the last eight years, but particularly from a developer perspective, we've gained an understanding of what HTML 4.01 failed at, and where it could be improved. The next generation of these technologies is arriving, and they are worth keeping an eye on. These technologies will affect everyone in the business.”

HTML5, XHTML2, and the Future of the Web

On A List Apart:

“ While building a browser slideshow object for a demonstration on dynamically pulling image information from a web server, I ran into difficulty with the DOM-compliant approach I had envisioned. A two-day journey into the world of XML DOM support for web browsers lay between me and a satisfactory solution. My plan was to pass an XMLHttpRequest (XHR) with the name of an image to the server, which would return, from a combination of a database and the image itself, a title for the image, a description, and all meta data stored for the image. This data would be sent in XHTML format so that the client could simply import the XML response and append it to some container elements, thus speeding up the slideshow application.”

Cross-Browser Scripting with importNode()

On Coding Horror :

Primary Keys: IDs versus GUIDs

The GUID stays unique globally while the ID is unique only within a single table.

On Array Studio Workshop:

MySQL insert a new row or update old one

On Sitepoint:

The Joy of Regular Expressions [4]

links to part [3], part [2] and part [1]

Sound with Javascript:

sound in web browsers without Flash

On perishablepress:

htaccess tricks

“ Just added a preliminary 9-block IP identification feature to Daily, my blog server to enhance commenter identity beyond name and website. Basically, what I am doing is using a privacy protecting derivative of each commenter's IP address to build a 9-block image and displaying it next the commenter's name.”

Visual Security: 9-block IP Identification

And the PHP version of it:

Visiglyphs for IP visualisation

“ 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

“ The relationships among HTML, XML and XHTML are an area of considerable confusion on the web. We often see questions on the webkit-dev mailing list where people wonder why their seemingly XHTML documents result in HTML output. Or we're asked why an XML construct like <b /> doesn't actually close the bold tag. This article will attempt to clear up some of that confusion.”

Understanding HTML, XML and XHTML

I've added a printer friendly button on the studies pages. Some very simple PHP and the bit of mod_rewrite in the .htaccess file to keep the URLs clean. I also found out a way to force IE to forget the credentials used in an Apache based HTTP authentication, making log out possible (see article for details):

<script type="text/javascript">
var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("msie") != -1) {
document.execCommand("ClearAuthenticationCache");
}
</script>

Adding also a redirect it's possible to have a log out button that actally acts like a proper one, except that it still prompts for a user and password window that needs to be canceled.
Tested only on Firefox 1.5.0.6 and IE6 running on Windows XP.

Some more about HTTP authentication and .htaccess:

• HTTP user authentication
• Authentication, Authorization and Access Control
• Securing Your Web Pages with Apache
• A Guide to Web Authentication Alternatives

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

Closures Are Not Magic

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.

Javascript includes
calling a script from within another script

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

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.

On A List Apart: automatic magazine layout

Auto-resized images are a common feature on the web now. Automating the process of resizing images saves a lot of time - it's certainly quicker than manually resizing images in Photoshop - and is a good way to manage images on a site.

Once you have ten or so images, you are better off using an AJAX based image gallery, but this script will fill the gap nicely up until that point.

On Airbag: a ruler to debug stylesheets.

On Interconnected: making senses

On Clagnut: line breaks in tooltips

Following yesterday's post I changed my URLs structure. Now they read:

http://sevencolors.org/post/post-title

I have written the code to keep backward compatibility: posts bookmarked with the previous structure will not be broken.

Graphic Push has an interesting article about URL structure

My URLs read like this:

http://sevencolors.org/post/###

which, thinking about it, only says that is a post and its number. I have noticed the spreading habit of using the title of the post and I think it makes sense. I use the post part because I have different categories. Maybe I will substitute the number with the post title..

On A List Apart: behavioral separation

I just posted about it but I think is good to insist.

The other article on A List Apart is about styling forms but I think that the solution proposed is too complicated. I like to keep it simpler. Also, display:inline-block does not validate.

On Friendly Bit: 4 tier web development

I think of the 4 tiers as content, structure, presentation and behaviour. Almost the same. The content (or data) and the structure go together since, usually, there is (for example) a title that should be placed into a <h1> tag, chapters into <h2> etc. When it all looks readable without presentation then I add the design, using CSS. I don't like to add tags to accomodate design, I try to use only the tags necessary to the structure. The last layer (behaviour) should be unobtrusive, which basically means that is not mixed up with the structure but sits in an external file. I removed all inline Javascript calls after reading
separating behaviour and structure in 2004. The point of all this is just to build a site easy to update and apply changes to.

On DOMScripting: Javascript teleprompter

On Web-Graphics: Javascript and Selectors

DHTML is HTML that includes JavaScript code that changes the content or layout of the page in the browser without going back to the server. When you write an HTML page, you're actually writing an object tree. All the tags become objects in the JavaScript space. Using JavaScript, you can change their content, Cascading Style Sheets (CSS) styling, and location - all without ever going back to the server. DHTML is the intersection of HTML, CSS, and JavaScript:
PHP and DHTML, Part 1

On Digital Web Magazine: Build for the Future

On 456 Berea St:

• Indicating language choice
• Language tags in HTML and XML

On A List Apart: secure your code

On Dustin Diaz' site: awkward looking javascript

On Stringify: Class attributes and Javascript

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..

Via Web-graphics: nifty corners by Alessandro Fulciniti

Yahoo's site explorer "allows you to explore all the web pages indexed by Yahoo! Search"

An essential guide to understanding and using
Web Content Accessibility Guidelines 2.0

Compiled from a variety of online sources by Web application developers in IBM's Global Production Services organization:

• Recommended PHP reading list

On Particletree:

• replacing trackback
• Lightbox gone wild

Very nice. I downloaded the files and I'm going to study them to see how it's done.

On Sonspring:

• hoverbox image gallery
• removing dotted links

I added two tags search "forms" for del.icio.us and technorati. Since the functioning of the "forms" is based on Javascript, the "forms" are created using the DOM so that, if Javascript is not enabled, they just don't appear.

I use Firefox and I have the del.icio.us search form in the toolbar but when I'm not using my computer I have to go to the web site or type the full address for the search. Now I can do it from anywhere as long as I have access to my web site.

An interesting use of Javascript :

Lightbox

From Web-graphics:

• JavaScript Function Arguments

This site is now powered by my own hand written code.

The features are almost the same as before, just much simpler. I used only 20% of what Wordpress made possible anyway. There are still a few things that I want to add but the core is done.

On web-graphics:

• top 20 of 2005 by Alessandro
• Building a Query String

On A List Apart:

• Thinking Outside the Grid

Scripts based on the Prototype Javascript framework, visual effects and controls with AJAX:

script.aculo.us

On Evolt, some useful PHP tips: these things I know.

An interesting article on variables scope and free fonts via this mezzoblue post.

Through Simon Willison's weblog:

userscripts.org

Then:

• window.onload
• window.onload 2
• clean URLs

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.

I upgraded again.

I really hope that I will not have to do it for a while because every time is a pain. I have a dial-up connection, it takes time to download and re-publish everything. Then I must be online to make my site look the way I want and the all thing becomes an expensive process.

I'm seriously thinking of writing my own code and be done with it. I use one tenth of all the WordPress features anyway.

I set up the whole WordPress thing on my local machine so I can work on it without being online..

After six months I noticed that the nav menu wasn't behaving as supposed..

The links were meant to appear as plain text and red when on their target page but an error in the code was preventing it. I have fixed the error and updated the script in the studies page.

I just finished updating to WordPress 1.5.1.3. I got hacked in twice (through that XMLRPC file) so I had no choice. Using a modem connection it took quite a while to download the new files, delete the old files and then upload again the all thing..

Once I'm finally done I check out how my index page looks and...there is nothing, not even one single tag showing. After much looking around I found out that I had to erase

 < ?php include(ABSPATH . 'wp-comments.php'); ?>

and replace it with

 < ?php comments_template(); ?> 

Now, so far, everything works.

Interesting technique:

• Footnotes

This mouseover effect is also interesting because simple:

• Mouseover effect

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.

Javascript shell:

• single line
• multiline

I have updated the Protected copyright photo using
Simon Willison's addLoadEvent() function.

The problem for me is to be able to write a tutorial that can be understood easily by a beginner, copied and used without too much re-writing. I have a Javascript file that I import which controls the email address display and the events. To avoid conflicts, I had removed the imported file from the Protected photos page (I could have written another Javascript file with all the window.onload calls, imported it and solved all the problems, but it would have been even more difficult to explain, making the tutorial understandable only by advanced Javascript programmers). Now I wrote it back in and added some comments in the Javascript code to explain what is going on. For a beginner is confusing: how to import files, what happens, why, in which order..Simon Willison solution is pretty straightforward and should be easily understood, especially since there is a clear explanation of how it works.

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.

I have published the PHP code of my menu. The idea behind it was to have a menu that can be updated from a single file otherwise every change would mean re-pulish the whole site. The file can be used only on PHP pages, I still have some static XHTML ones and those I have to manually update and re-publish but it's a small percentage. The code could be streamlined since I repeat the same process four times but that's due to the fact that I want the menu to look the way it does and I don't know another way to float the links like that except coding each category in its own unordered list.

I also published a page that enables a user to paste a piece of code and get all the “<” and “>” symbols replaced by entities (&lt; and &gt;) so that it then becomes readable and can be published since the browser does not try to interpret it as active code. I find it useful and it definitely saves a lot of time.

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.