Processus //

Yesterday I posted a very old text I wrote, that I slightly remelted with my “today”‘s eyes. This text is a kind of letter I wrote (and I actually mailed it…) to my former high school with some funny/trash content in it (well funny/trash is my stand point at least). The letter is joined with a narrator’s comment explaining what’s supposedly happening in real life, which comes to be quite different from what’s written in the letter (if you red it, put yourself at rest, none of the letter or the comment were actually close to reality).

Anyway, in order to transcribe it for the web, I wanted to keep the original appearance of the text, using a regular font for the narrator’s comments, and a “hand script” font for the letter. So I decided to look at what’s available nowadays to apply a custom font to an ordinary HTML page in a portable, cross-browser way, without cheating or being annoyed with bitmap pictures like grids of PNG or whatever dirt.

And here is what I did.

Applying custom styles in WordPress

First, I needed to be able to apply custom CSS styles within my wordpress blog. I didn’t want this to be hard-coded in the WordPress theme I’m using (using Appearance > Editor for instance). I kinda wanted a cleaner way to do it, so I searched and I stumbled upon the “Enhancing CSS” WordPress plugin, which uses the internal rewrite WordPress engine in order to embed a custom style sheet you define in the admin WordPress interface.

If you want to do so, install the plugin at http://wordpress.org/extend/plugins/enhancing-css and go in the “Appearance Menu” > “Enhancing CSS” menu item, so you are able to edit your custom style sheet in a pretty cool editor. Here is the snippet of code I used for my “narrator” font (I called it the ‘story’ CSS style):

  p.story:first-letter {
    font-weight: bold;
  }
  p.story {
    font-family: 'trebuchet ms', arial, helvetica, sans-serif;
    padding-left: 20ex;
    text-align: right;
    font-size: 9pt !important;
    font-weight: normal;
    color: #F93;
    line-height: 150%;
}

To use this style within your posts, just declare a <p/> paragraph with a “story class” like this:

<p class="story">And here is my story</p>

Specifying a custom font in CSS

To specify a custom font, you need a few things. To begin with, you need the font! (we’ll see below where to find good fonts), available as different formats (TTF and OTF are probably the most widely known). Also, you need to know how to specify it within a CSS style, and finally you need to be sure it will be supported by different kind of browsers (namely, the ineffable Internet Explorer).

Finding and preparing the font

Downloading fonts

To find a bunch of good fonts for free, google around for “free fonts”, and download the one you love. I personally like to browse DaFont.com to find good fonts. Take care to the license though. Most fonts are free for non-commercial use as far as I can see, but you might want to (must in some cases) support the author with good money.

Prepare the font

As you will see below, you need to convert your font to different formats so it’s supported by all browsers. Particularly, Internet Explorer only supports the EOT proprietary format, so you need to find a converter.

I used the following online converter to prepare my font: http://www.fontsquirrel.com/fontface/generator

Click on the “Add font” button, and follow the instructions until you get a .zip file full of different formats (ttf, eot, svg, woff, and even sample CSS and HTML snippets).

Publish the font

Once you’ve got the font you like, you must make it available on the web, so you need to publish it at some place, let’s say at the /fonts path of your web site.

So get your FTP client and upload your font files (ttf, eot, svg and woff) on the web.

Use the font!

The @font-face CSS element

Now that the font is available on the web, you can embed it in your style sheet (just like we did at the beginning of this article) using the ‘@font-face’ CSS element, like follows:

@font-face {
  font-family: 'TenMillionFirefliesRegular';
  src: url('/fonts/ten_million_fireflies-webfont.eot');
  src: local('☺'), url('/fonts/ten_million_fireflies-webfont.woff') format('woff'), url('/fonts/ten_million_fireflies-webfont.ttf') format('truetype'), url('/fonts/vten_million_fireflies-webfont.svg#webfontwV3dmlwM') format('svg');
  font-weight: normal;
  font-style: normal;
}

This is really just like the CSS snippet you get from the fontsquirrel.com fontface generator. The explanation for this fuzzy syntax is Internet Explorer, of course, which will look at the first ‘src’ attribute and load the font as EOT format. Afterward, it will stumble upon the second ‘src’ attribute, beginning with local(‘☺’), which will make IE happy. Don’t forget it, or it won’t be happy.

Then, the other (clever) browsers will browse the intelligent ‘src’ syntax, within which you can specify any kind of font format, using a url(path) format(expected_format) syntax.

Well, just copy-paste it from fontsquirrel.com ‘s generated CSS snippet, it will do the trick :)

Use your font in a CSS style

Finally, use the font!

The CSS stylesheet using the font:

p.penmanship:first-letter {
  padding-left: 7ex;
}
p.penmanship {
  font-family: 'TenMillionFirefliesRegular', 'Chiller', 'Mistral', 'Script', script;
  text-align: justify;
}

Then, in the wordpress editor, use the HTML syntax, just like we did at the top of this article:

<p class="penmanship">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque laoreet, mauris at dapibus volutpat, lorem massa auctor eros, at faucibus nisi urna quis nisi. Ut id nunc sapien, sed feugiat erat. Integer et purus purus. Ut lacus justo, pharetra eget facilisis molestie, porta in lacus.</p>

Final advice

To be sure your article will be Ok under every browsers, one thing you can do is installing all these browsers and test by yourself, or you can go to the web site below and ask for some “screenshots” of your web page under different Browsers and Operating Systems.

http://www.browsershots.org

Just enter the URL of your web page, choose the browsers you want to test on, and wait for some time the screen shots to become available. Your request will be queued so you don’t get the screen shots immediately. Also, you’ll probably need to click on the “Expand” button if your request will last for more than half an hour.

Anyway, some browsers variants are currently failing because they are probably not quite maintained, but still, you’ll get some idea of the “cross-browser” support of your site.

Note: I think I finally found out the way to publish this news: disenchanted mood, under the ‘Schmoozing’ category, ‘whatever’ tag.

—

Last week, one of my co-workers sent me this link, just in case I’d forget to watch Adobe blogs (he was right). In short, it’s saying that Adobe decided, after thinking for 2 years, not to deliver and support FlashBuilder IDE under Linux.

Technically speaking, what is FlashBuilder? It’s a set of IDE tools based upon the Eclipse platform, using the Flex SDK, which helps to create, build and run rich internet applications under the Flash runtime. Three things that are cross-platform, and designed so you can “Write (code) once, run (it) anywhere“, at least under Microsoft Windows, GNU/Linux and Apple MacOS.

Now something is difficult to understand: how the hell are Adobe fellows doing to mix 3 cross-platform technologies and make something non cross-platform? No offense, but is there a kind of JNI mentor in the place, or something? Just wondering…

Maybe this is more like a management decision than a technical decision? Sometimes, it may be difficult for managers to understand technical plumbing, so let me try to explain this using real life examples: pick something hot. Pick another hot thing, and a third one. Put it together, what do you get? Cold stuff? No, hot stuff. Example #2: pick one drummer, one bassist, one singer and one guitarist, now what do you get mixing them? Led Zeppelin, not Gipsy Kings! Example #3: pick 3 puppies and cook them, what do you get? Dish with cat? No: Dish with dog.

It seems to me that, with FlashBuilder, Adobe is doing freezing Gipsy Kings pussies nowadays (don’t even try to understand that conclusion, I don’t).

Linux fans, since today, you are warned: Adobe’s programming tool suite does not support Linux. You’re welcome.

Hey, there’s more important things in the life than Adobe Flex, isn’t it? Go vim, or just don’t play Flex at all. Smoke something. Eat pizza’s. Join an open-source ActionScript/Flex IDE development community. Help healing the world. You’re that kind of freaks aren’t you?

Hier, mon collègue indiquait sur facebook s’atteler à l’installation de son environnement de développement sur le nouveau portable Dell fourni par l’entreprise. Il n’avait rien fait d’aussi passionnant depuis qu’il avait organisé ses DVD par ordre alphabétique, précisait-il.

Ma question: quel OS installé sur le portable? Je connaissais déjà la réponse: Windows XP.

D’où ma petite anecdote du jour: si l’on en croit la Wikipedia, Windows NT 3.51 date de 1995 AD (je précise), Windows XP date de 2001 et Windows 7 date de 2009. Ce qui fait que technologiquement parlant, l’écart devrait être moins grand entre Windows XP et Windows NT 3.51 (6 ans) qu’entre XP et Win7 (8 ans).

Au passage, j’en profite pour partager cet extrait de l’article, clin d’oeil peu connu qui devrait amuser les amateurs de science-fiction:

Le fait que David N. Cutler soit un ancien développeur de VMS est la cause de la rumeur voulant que WNT ait été nommé en fonction de VMS (en passant chaque lettre à la suivante, sans doute un clin d’œil à 2001 : l’odyssée de l’espace dans lequel l’ordinateur est nommé HAL 9000 par un décalage similaire depuis l’acronyme IBM)

Wikipedia – Windows NT

Je me demande si Dell vend toujours aux entreprises des PC équipés de Windows NT… on ne sait jamais ce qui peut arriver, avec ces nouveaux logiciels.

Et de repenser à ces petits veinards, dans certaines (peu nombreuses) entreprises, qui peuvent choisir leur OS…

I experienced some wifi issues last time on my Dell Studio XPS 16 (and my wife’s one), using both Intel Wifi Link 5300 AGN and Intel Centrino 6200-N.

I googled around and I was really sure the problem was coming from the 6200-N card, which was known on some posts to be very “roaming” sensitive, that said, subject to frequent disconnections. Some people resolved their issues by downgrading the wireless adapter driver from 13.2.1.x (the latest revision as today).

Intel also suggest in this troubleshooting page to disable power saving on the adapter, and to double check some device parameters, like the “roaming aggressivity” (set to medium).

The funniest thing about this is that I started having the same kind of troubles, which I never had before, on my own laptop, shipped several months ago with the 5300 AGN.

So I think I resolved my issues and here is how.

First, for the 6200-N card, I worked around the problem by applying intel’s recommendations, disabling the power saving and upgrading to the latest driver. Guess what, it worked. So I think the latest drivers from Intel must fix any roaming issue there was before and that we can safely use it now.

My problems were (I think):

1. My Netgear Router was overheating
2. My Bluetooth adapter was permanently enabled

For the first point, I was suspecting my wifi access point to be kinda like “breathing”, giving from bad to strong signal regularly and causing disconnections for sensitive devices like the 6200N.

Today, it looked like it was totally disconnecting every 10 seconds, causing troubles on my 5300 AGN. To check it, I installed the pretty cool android application “Wifi Analyzer“.

Using this app, I could really test the wifi signal in my living room like in the screenshot, and I was able to see that a signal lost was really dropping by every ten seconds. So, first solution: a fan :) Until I can get a better place than under the roof to install my router :) (By the way, Wifi Analyzer also helped me finding out a better wifi channel for my access point).

This didn’t totally solved my problem though, and I had to disable my bluetooth adapter as well (I don’t remember why it was switched on permanently). I think this had a bad influence on my wifi adapter as well, either because of interferences, or just because of overheat.

I hope this can help anyone having sudden wifi troubles, particularly with the Dell Studio XPS 16 laptop. At least, I wrote this entire blog entry without having a single network disconnection :)

Oh, and by the way, to take screen shots on my android, I followed this post.