Weblogism

Wrapping Things Up with JavaScript

That’s probably no secret for you, but I don’t quite like JavaScript: when it comes to use it, it always feels to me like I’m about to enter a world of deeply-buried secrets, where you have to deal with terrifying creatures which change of behaviour when exposed to any other browser – or magic powder.

However, the way Simon Willison uses JavaScript in this article to just wrap things up and bring the final nice “touches” really makes me enthiusastic.

First, he shows how to use the cite attribute of blockquote to render it as a link – a bit like here on Moz where this attribute appears below the quote itself, but not as a link. Then, he uses JavaScript to switch from one panel to another one. The demo doesn’t seem to be working but the solution he proposes looks quite elegant to me (something I didn’t think I would say about a JS script).

This might be useful to solve one problem I encounter while writing in here. When I type in the links for an article I cite, I always give a value to the accesskey attribute. The problem is that a) I don’t display it (useless, then), and b) I often type the same keys since in a blog, you don’t quite have the choice. The solution for that is going to be JavaScript one, I feel it! ¶

And the Winner Is... Who?!

Peter Canavan, BBC’s sports personality of the year, that’d be a great laugh – reading Slugger O’Toole’s readers comments on the subject is already a good one. Exit Jonny Wilkinson (gnark gnark gnark). That’s what people in Ireland are trying to do thanks to an email praising the Tyrone captain who won the All-Ireland Gaelic football games. In this email, the authors ask to vote for him on the BBC website so that he becomes 2003 BBC’s sports personality – probably also to remind the English that you don’t need to dial an international code to call Belfast…

That’d be hilarious if it were to happen because people in London just don’t have a clue of who the heck Peter Canavan may be. According to Ellen and confirmed by the Guardian article, it already happened earlier this year as an Irish rebel song, A Nation Once Again was elected the world’s favourite song.

Fed Up with All This Messy Code

Time for Code Review… It’s Christmas

Coding in PHP is dead easy. Any 3-year-old kid can play with it and connect to a database and display data. Coding in a clean manner is a totally different story. The problem is obviously not a PHP-related problem since it has been a conundrum since the developer is a developer. However, PHP, as any script-like language makes messy coding straightforward, not to say a rule. I’ve been taking a look to the code I’ve written in the past weeks because of my recent experience with Spip – of which I will talk below – and geez, how awful that is. Here’s me, preaching all around the place: “Don’t tie application logic and its presentation together or thou shall roast in hell in terrible pains, you crappy crap thing!” and as soon as I open any editor to type in some PHP code, I just don’t care anymore.

Why a Template Engine?

But those recent discoveries about my way of coding in PHP led me to nose around for some proper answer. I’m a big fan of templating because I think it is the answer to the eternal problem of developers and designers working hand-in-hand together. Developers don’t give a damn about design (I’m a bit ashamed to say I’m amongst those ones: when I code something at work, I really don’t bother about the look since there is someone in charge for that) and don’t want to have anything with HMTL, and designers can’t read (and don’t want to) any line of code. The results are sometimes dreadful: the styles are either not applied anymore or modified in an ugly way, or the code doesn’t work anymore becausethe designer deleted some code without realising it. Time lost, time lost and time lost (yes, thrice).

Tough Times with Spip

Those thoughts about my own code were inspired by another programme, though: Spip. On the road to W3C validation, Spip is always on the way. Spip has in fact its own template engine to generate the pages of a site. So far, so good. Except that:

• Spip still produces HMTL tags on the application logic side, tieing together presentation and contents. Those tags include old tags such as <br> (without /), <font> (yuuuuuk).
• Spip template engine is really straightforward, not to say simplistic. The aim is to provide the webmaster with a reduced but easily-usable Spip tags. One drawback of this is that anyone willing to extend this template with his own functions just suffers, bigtime. Another problem which, at first glance, mightn’t look that bad, is that those tags are in French, with no way to customize them since they are hard-coded. Which makes of Spip a franco-français tool, even though documentation has been translated.
• Spip administration interface does not use this template engine. And when you take a quick look at the code, you just close the file immediately because it’s just a nightmare. It is impossible to maintain, impossible to improve, impossible to extend. Well, it is, of course, but it would be a real pain in the ass, because functions are just written anywhere, sometimes several times and the presentation (with its cornucopia of <font> sigh) is scattered in different files, amongst the request processing lines of code. As a result, you just cannot customize the administration interface. Maybe that’s the goal they were looking for (which would be even worse).

Smarty

This is the bitter analysis which led me to take an insightful glance at my own way of coding. And this brings me to Smarty. I had heard zillions trillions of times of Smarty without really taking a look at it. But I am working at the moment with bBlog, a weblog tool written in PHP, which uses Smarty. The results are terrific: a code which is crystal-clear, easily extensible, easily maintanable. I’ve added my own functions with no pain and customized my pages very easily thanks to Smarty templates. And those pages validate.

Smarty has one strong point: you can call PHP functions within the template. One might say this goes the wrong way on the path to application logic/presentation separation. But no. There is a a big difference between removing all the code from HMTL and separating application logic and presentation since you still need to process a list of data to display them. This has nothing to do with business logic and yet it requires code which would be closer to presentation layer. That’s why it is an excellent thing that Smarty allows PHP functions calls within the templates.

The drawback is that Smarty is really a big big thing and you have to be patient to master it properly. It is also a bit complicated to put a programme together with it. But you are quickly awarded for using a template engine: you know where to modify what, you can modify your site layout without touching a single character in your application logic code, you can easily add new functions to your site, etc. All the time you’ve “lost” learning how to use it is paid back darn quickly. Today, I really think that there’s no way I could do without it anymore.

Smaller Letters to Save Paper

That’s the idea a Karin Torstensson Hirsmark came up with to save about 10% of the paper costs: reduce the size of letters.

“Stadsdirektör Karin Torstensson Hirsmark fick en idé att om man skrev med mindre bokstäver på alla kommunala papper så skulle kommunen spara upp emot tio procent av papperskostnaderna”

Stadsdirektör Karin Torstensson Hirsmark got the idea that if people wrote with smaller letters on every communal papers, the commune would save up to ten percent of the paper costs.

Grand idea, wasn’t it? The problem was… that the politicians couldn’t read the documents any more – they were just damn too small to read. Everything just went back to normal size because of that. Funny isn’t it? (I found that link on Typographi.ca)

About <acronym title="Synchronized Multimedia Integration Language">SMIL</acronym>

As I went recently onto RTÉ, I found out that the streams had a .smil extension – and Real Player had no trouble opening it. A bit baffled, I realised that cybercodeur.net had released a brief article about SMIL. SMIL (pronounce “smile”) which “allows authors to write interactive multimedia presentations. Using SMIL 2.0, an author can describe the temporal behavior of a multimedia presentation, associate hyperlinks with media objects and describe the layout of the presentation on a screen” (W3C). SMIL is an XML-like language allowing to position media contents as well as synchronizing them.

I found a fairly old (1999) but good tutorial written by Hervé Foucher; on the website there is also a viewer called “Soja”. Anyway, SMIL is already a few years old but it begins to get out. It has to fight against Flash and SVG… The thing is, SMIL looks pretty close to HTML and that is a good thing: it will allow webmasters, who might not have the sufficient skills (even though it is kind of easy to create Flash animations) nor the money to pay for Flash tools, to go multimedia.

To read more about SMIL: A Realist’s SMIL Manifesto part I and part II.

The Scary Stuff of the Week

If you’re from Northern Ireland, here’s something to remind you for whom you voted on Thursday:

Spooky, eeh*? The Sunday Mirror states it quite well:

The burning question now, of course, is where does the process go from here? The British government needs to be supportive of the pro-agreement parties, particularly the SDLP, which has been left out in the cold in recent months and paid for the snub at the ballot box. What it or the Irish government cannot afford to do, however, is ignore the disillusionment within unionism.

Here are a few facts about your man, just for the craic.¶

*’m talking about the tie, of course.

Blogging Without Knowing

As I was preparing a few posts about blogs, it suddenly occurred to me that a while ago, back in 1999, as I was about to move to Sweden, I was already writing something which was more or less a blog – I’m not even sure the term had been coined at that time… The aim was back then to let my friends know what I was up to.

At first, I was struggling to put the whole lot online: I had to copy a template I had written, write the message in it, get the previous page, update the link and put both of them online. There was also a link on the main page which was leading to the latest page. When I got pissed off with all this, I wrote a Java programme generating the new page from the text I had typed in a Swing application and updating the previous page as well as the main page. It also calculated the number of days since my arrival there to display it in the message. But I had to put those pages online via FTP anyway… That was not a wonderful system but it was still a great improvement to me.

Funny to read this again, looking back at the time I spent in Gothenburg. I’m pretty sure anyone who’s gone there to spend a year as an exchange student might appreciate it as well. And that’s why blogs are so interesting, at the end of the day: people can share their everyday life. Even though it may look somewhat boring because it’s very personal, there is always something in there which might interest someone else. That’s a the great thing about blogs.¶

Have You Not Seen This Typeface Yet?

I was in Stockholm two weeks ago and I could see that Helvetica™ was splashed everywhere around the place there too, just like here in Paris. For those who are not quite aware of how present Helvetica is in Paris, here is its look as it appears in its light version on Linotype web site:

More obvious, the French will go here and see what I am talking about. The plane lovers will have a look at American Airlines, Lufthansa or Bombardier Aerospace – and I’ve just found Air France on-board magazine whose title (magazine, funly enough) and article look like it too*.

Helvetica was designed by Max Medinger in 1956 – though A Type Primer by John Kane mentions 1954 – and has become one of the most used typefaces since then. Quite easy to spot thanks to its typical ‘a’ and ‘Q’ as well as spot on the ‘i’, I came across it in Stockholm quite a few times: on ads for banks, mobile phones, clothes… Anything really. A bit like here: this morning I was wandering around in La Défense and realised the signage was typeset in Helvetica.

Even though Helvetica is used a lot, the general opinion about it is quite similar to the one given by Pelle Anderson from A4 quoting one of his interviewees answering to the question “If you had to live with only one typeface till the rest of your life, which one would you choose?”:

En annan av de tillfrågade kommenterade att om han tvingades att bara använda Helvetica skulla han begå självmord. Ändå är Times och Helvetica världens mest använda typsnitt, synbarligen utan självmordensepidemier bland formgivare.
“Another interviewee replied that if he were to use only Helvetica, he would commit suicide. Although Times and Helvetica are the most used typefaces, there’s obviously no suicide epidemy amongst the designers.”

Typographers usually don’t like Helvetica. Too big a counter, too high a x-height, I guess. But the biggest problem of Helvetica is its use. It is everywhere you look and it tends to become a bit boring – just like its competitor, Arial. How come, then, even though people all say it’s used far too much it still appears every now and then? Well, the letterforms are plain and don’t convey any significant feeling and that’s why it’s used and in any field. It lacks of real identity and therefore corresponds to any. I’m pretty sure as Christmas is approaching that brand new ads will appear – showing one more time Helvetica’s success.¶

* I’m still no expert and I might be wrong. I’m just trying to learn on my own by reading books and observing…

Rewriting Slashdot with Web Standards

A List Apart has issued an article about rewriting Slashdot with XHTML and CSS standards. It is pretty interesting because it is very much a case study about how to convert an existing web site into a validating site.

Thus, menus were converted everywhere, tables for layout have been replaced by divs, a CSS style sheet has been applied and the result is pretty stunning:

• Savings per page without caching the CSS file: ~2KB per request
• Savings per page with caching the CSS file: ~9KB per request

Though a few KB doesn’t sound like a lot of bandwidth, let’s add it up. Slashdot states
that they serve 50 million pages in a month. When you break down the
figures, that’s ~1,612,900 pages per day or ~18 pages per second.
Bandwidth savings are as follows:

• Savings per day without caching the CSS files: ~3.15 GB bandwidth
• Savings per day with caching the CSS files: ~14 GB bandwidth

The result can be seen here, as well as this page with the same XHTML code with a brand new CSS style sheet – uugh, ugly titles, though.

Pretty interesting because it shows the process for rewriting pages to convert them:

1. Clean the code by removing the useless tags as well as deprecated ones;
2. List’em all: “Essentially, anything that there was more than two of was put it into a list, for example: login, sections, help, stories, about, services, etc.”
3. Give structure to the document by using headers (<hn>);
4. Organise the layout thanks to boxes (<div>) by
   a) grouping semantically the contents and
   b) positioning them;
5. Add the final designing bits, such as pictures, fonts, colours, etc. ¶

About Comic Sans...

Read on the French list dealing with typography (managed by the Irisa) and posted by Dr Ph. Michel:

Petite erreur vue sur une présentation PowerPoint à un congrès : le mot « traitement » abrégé en « ttt », le tout en Comic Sans MS, (police à la mode visiblement) et répété au début de chaque ligne : comme le « t » dans cette police est en forme de croix, tout cela donnait un effet de cimetière militaire, dans une présentation de cancérologie…

Indeed (too lazy to translate, actually). :-) ¶

AIWA

Speak Up and Armin Vit pleased me today as they published an article about AIWA new logo.

I was strolling along some day in the metro in Paris when I noticed this big ad with a fairly illegible logo. A bit stunned, I had to give a second look to finally spot “Aiwa”. My first thought was that it was pretty unfortunate that one couldn’t even read the name of the brand. And then I though that it was pretty ugly.

The following day, the topic came up in this conversation on one of my favourite forums, Typophile’s. The general opinion was somwhat close to mine. Some of Sony’s logos where shown by Jay Fraser showing the trend in Sony, ligature-wise. All in all, they can hardly be read at all. And yes, I thought it was AIVA.

Three conclusions for myself:

• I’m not as tasteless as I first thought I was: the general opinion of Typophile’s as well as Speak Up’s experts seems to be mine


• Still loooots to learn from people like Typophile’s members


• Christmas is getting close, I’d better hurry up to buy presies, otherwise it’s going to be the usual rush to find anything at the last minute.

The Mummy-Compliant Blogger Survival Kit

This article should be called “How to Prevent Your Mom From Reading Your Blog”, but it is called instead “What to Do When Your Mom Discovers Your Blog”. It’s all Blogger-oriented but some of the bits in there are true for any blog. You wouldn’t want your mother discover your true self, would you?

Use a Pseudonym

That is a proper advice. I think it shouldn’t be limited to blogs, though. If you care for your privacy, I think you should use pseudonyms as much as you can – my favourite being sébastien, after some long time of thorough analysis. It is indeed very easy via Google (and I made the experience with people I know – everybody has, I’m sure) to spot the interests of someone – that is, if this someone is active on the Internet. Scary how sometimes you cannot quite forget you’ve been involved in things such as LaTeX…

Go Multi-Lingual

This leaves with me with a dreadful dilemma: do I want my mother of my girlfriend to understand what I write? In any case, Ellen would understand either French or English. I may as well write in English. And that’s fine with me, English is gibberish to my Mom. She’d be so ashamed to read about what her son is really into, after all.

Search and Destroy Modify

Righteo: “use a Mom-friendly language”.

Pull a Tony Pierce

I don’t quite know who the hell your man may be. But the thing is: put on a disclaimer pretending that nothing you write is true. There you go, Weblogism’s new disclaimer: nothing in here is quite true. You probably noticed the sub-title “Wild imaginings”… There you go, son.

Go to the Source…

…And remove your site from Google. Who would be foolish enough to do that?! That’d be like cutting your arms off, wouldn’t it?

Tomorrow, Marquee All Over the Place

Mozilla supports <marquee>

I thought we were finished with the <marquee> tag. Not quite. As I am working on the re-design of a forum, I realised with horror that on the existing one, the news were displayed with a marquee tag. And that Mozilla supported it. It therefore means that such a page can be fully seen and appreciated, which is quite spooky, really.

After a bit of researching, I came across this. Soon, we’ll be allowed to prove our bad taste to the world and still validate.

Work Around (the Clock)

As I already pointed out yesterday the use of user style sheets to fight ad banners, I found on mozilla.weebeastie.net a way to disable this horrible spinning:

marquee {
	-moz-binding: none;
	overflow: auto;
	display: block;
}

I also decided t’was time to finish with blinking as well. I then added:

blink {
	text-decoration: none;
}

Now, the Oh Pointy Bird page looks more Andy Warhol-ish…

I’ve then fixed my personal problems, but this leaves me with a new one: how to do as ugly as the <marquee> tag with standard XHTML and JavaScript? I’m afraid I’m too lazy – and too respectful for the people who might decide to view any of my sites – to either write it or look for it… I guess I’ll wait until CSS3 is out… sigh

Off With Their Heads... Ads!

I had never been quite aware of how much a nuisance ads on the net could be. Of course, pop-up windows used to piss me off and then Mozilla came around and fixed that.

It wasn’t until today as I was chatting away with pierre that I realised how much I had grown accustomed to ad banners: they were part of the landscape, just still there and nothing to think of. Yet they were sometimes quite a pain in the ass, especially when they are big Flash animations or pictures right in the middle of the text. I know this sounds like I’m coming from another planet, discovering that only now. But if you look around you, people don’t bother: they simply accept the fact that ads are part of the Net.

Once again, CSS along with Mozilla appears to be the panacea in that matter. I found a user style sheet on the Web, placed it under:

C:Documents and profiles<myname>Application Data¶
MozillaProfilesdefault<whatever>.sltchrome

and when I restarted my browser, I experienced a totally new way of surfing: an ad-free one. And it’s only at that moment that one realises how irritating ads can be. As I’m a bit of an extremist, I even added the following:

embed[classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"] 

to the long list in order to hide Flash bits as well.

When you have a look at the user style sheet, it is only possible because Mozilla respects so much CSS standards. Thus, a selector such as *[href*="arandomdomain.net"] only works in browsers which try to get close to the W3C recommandation.

<i>The Fields of Athenry</i>

For those who know me, they also know how much I can’t help but mentioning Ireland from time to time. For those ones, I apologise in advance for spamming the Stup weblog digest with such an article.

Yesterday (Sunday), I watched Ireland being crushed by France (Ireland’s Call was probably not loud enough, the Irish didn’t even bother to come onto the pitch. Or did they?) in the rugby World-Cup quarter-final – not that I’m fond of sport; that was rather a matter of showing who the boss is to my girlfriend.

I watched it on French TV, unlike other matches. And I must admit the comments were quite a laugh. They started by talking about The Fields of Athenry. Fair enough, good idea, the French don’t know their left from their right and keep thinking Dublin is a few miles away from Liverpool. Well, a wee bit of researching before hand would have been great. First, your man mentioned it as being called Ze Fields of Atenree (Well, had I not been there, I would probably be still saying it this way). Then, he told the story: a mother crying the deporting of her son to Australia during the Great Famine. Everybody damn knows that it’s not his mother, but his wife! The song tells the story of Michael, who had to steal Trevelyan’s corn to feed his child, arrested and about to be exiled to Australia. The story goes that Lord Trevelyan had imported corn from America to struggle against the famine. It appeared that the corn was to be milled. People, starving to death, still saw it as corn, and broke into the stores. Some were arrested and deported to Australia.

It has become one of the Glasgow Celtic anthems, and whatever people might say, it has a political twist to it, even though the song could be sung by any poor people from Ireland to England.

Anyway, the waffling carried on until the so-called Irish “national” anthem, Ireland’s Call. Not quite, though. Oh, I came across this. Wonder this time whether to laugh or cry.

After a (long) while, Ireland finally managed to find their way and scored a try (I heard the sign-posts to the the try-line were written in Irish…), started the Loooow Liiiie the Fields… and the speaker said: “And they’re playing some celtic song!” Quite so. A song called The Fields of Athenry…