TOKI WOKI. 

“W-Architectures is an archi­tec­ture and urban-planning agency. The firm brings together a highly-qualified team of archi­tects with inter­na­tional expe­ri­ence.” This is how they intro­duce them­selves and I couldn’t have said it bet­ter myself.

I recently pub­lished their brand new web­site, designed by Chris­telle Bon­net and devel­oped by me. It’s been a pretty long process (they are very busy guys) but it’s here and I like it!

I used mostly Word­Press and MooTools to develop it. Every­thing was designed to be light and sub­tle, I think I can safely say that it is.

I’ve had this blog for 2 and a half years now, and it never really evolved visu­ally. So I decided to update it a bit, from scratch.

So that means a new theme?

Yay! Since the blog has been redesigned and you’re prob­a­bly read­ing this from your RSS reader you should defin­i­tively come by and see how it looks. And share some feed­back, if you feel like it.

Can’t remem­ber what it looked like before? I’ve archived screens over at Flickr.

A con­sis­tent look

Updat­ing the blog’s look is good, but a com­plete rewrite is bet­ter; for con­sis­tency, fool! I used to have a dif­fer­ent look for every sin­gle page: home, projects, blog and so on. No more.

Long story short:

“Before: all dif­fer­ent. Now: all good.”

I’ve been into grids since the day I learned about Blue­pint CSS and Josef Müller-Brockmann, this is why I wrote Boks. And this is why this site now heav­ily relies on a grid struc­ture. For grid freaks out there, click here to tog­gle the columns and see what I mean. Of course if you’re on a small device (such as a phone) the UI is a bit dif­fer­ent, but we’ll get into that later.

Got a key­board? Like short­cuts? Press that key!

I imple­mented a few key­board short­cuts, from use­ful to use­less. For exam­ple, if you liked the grid tog­gle, just press G (for grid) or W (for InDe­sign users) and you’ll get the same effect. OK, that one is pretty useless.

But what about scrolling to the next arti­cle by press­ing N (or the Down key)? And you guessed it already, P (or Up) will jump to the pre­vi­ous (inspired by AisleOne). You can also time-travel by press­ing Shift+P (for Past) or Shift+F (Future). Handy? Yep.

Feel like you’re stuck in the blog? Just press 1 to go to the Home page, or 2 for Projects. 3 is for the Blog and 4 is the About page.

My screen is smaller than yours

I dis­cov­ered that tech­nique on Hicks­de­sign and imme­di­ately thought I had to imple­ment that: CSS Media Queries! The thing is pretty easy, you define your base CSS styles and then over­write some dec­la­ra­tions if the screen size matches some rules… I imple­mented 3 dif­fer­ent lay­outs so the site should look good on about any device. Just resize your browser win­dow and see things move. How cool is that?

My brother (and his iPhone 4) helped me test the retina-display-ready logo, too. Optional but cool.

More awe­some

• I’ve always wanted to use Web­fonts but never really knew where. Here it is, you’ll find a nice OFL Sorts Mill Goudy TT on the home page. Thanks Google.
• Another tiny thing is the “Sub­tle Prompt”. It hap­pens when you use a key­board short­cut or when you click the Con­tact link…
• If you’re on a WebKit browser (Safari or Chrome) you should see cus­tom scroll­bars, styled with CSS. Yeah.
• I kind of don’t sup­port Inter­net Explorer. Yes, this IS an awe­some feature!
• Track­backs are now sep­a­rated from reg­u­lar comments.
• A blog post’s author (my) com­ments appear dif­fer­ently, so you know who’s the boss out there.

Open­Source

I always try my best to share the use­ful and reusable bits. Here are some JavaScript (MooTools required) goodies:

• LazyScroller: turns your key­board keys into a nav­i­ga­tion dashboard.
• Sub­tlePrompt: nice and gen­tle prompt for your sen­si­tive users.
• Lblr: form input in-context labeler.
• ta-bg: allows a textarea’s back­ground image to scroll with its content.

I’ll try to post docs/demos soon, I know this is prob­a­bly a lit­tle bit rough right now…

What now?

Well, you tell me! I’m pretty happy with it, but things can evolve—just share feedback!

Word­Press’ Short­code API is a really cool thing, and since I’m work­ing on a Dru­pal site these days I’ve been look­ing for some­thing sim­i­lar. Unfor­tu­nately I couldn’t find any­thing… There are some imple­men­ta­tions out there but the ones I found and tested always come pre-bundled with spe­cific tags and don’t always pro­vide an exten­si­ble and sta­ble logic.

So I made mine!

Most of my work sim­ply con­sisted in copying/pasting the code in Word­Press’ shortcodes.php and bind­ing it into a Dru­pal fil­ter. Easy enough.

Now if you want to use it, you have to:

1. Get the module
2. Add it to your “mod­ules” directory
3. Enable it
4. Add it to one of your setup’s fil­ter bundle
5. Write your own mod­ule where you’d imple­ment one or more Short­codes (via add_shortcode) and make sure you add “depen­den­cies[] = short­codes” in your .info file

You might expe­ri­ence a nasty “Call to unde­fined func­tion add_shortcode”. If so, you have to change you mod­ule implementation’s weight, either directly in your data­base, or thanks to the cool Util­ity mod­ule. Set it to 10 and you’re set!

Hop, je viens de payer des nou­veaux habits à Ébruiter (le blog qui parle de musique à ceux qui ont des oreilles) qui ne se plai­sait plus dans son pre­mier ensem­ble… Grid sys­tem, bien sûr. Tou­jours Word­Press, avec un thème mai­son (merci Boks et Greg) et des hacks par-ci par-là.

Et puisque finale­ment j’aime bien le con­cept, je vais essayer de repren­dre l’habitude de poster des trucs. Ça va être super.

Chope le flux, poto !

Remem­ber my first and only Word­Press plu­gin? Well it just got better.

Snips 2.0 is basi­cally Snips rewrit­ten from scratch, updated to fit Word­Press’ Short­code API. Let’s see how good it is…

Tired of hav­ing to copy paste nasty HTML code from sites such as YouTube, Vimeo and so on? Look­ing for a way to insert recur­rent con­tent in your posts with­out hav­ing to type it every time? Would like to be able to inject para­me­ters in these snip­pets? Well, now you can.

Just install Snips and use the bun­dled short­codes or create/edit your own!

Each Snip is a com­bi­na­tion of a name, a model and optional para­me­ters. The name defines the short­code tag you will be able to use, the model is the con­tent that will replace your short­code calls and the para­me­ters (that look like #the-parameter# in the model) are por­tions of the model that can change from a call to an other. Those para­me­ters can have default val­ues or can be left empty and then become mandatory.

All of this can be edited via a sim­ple UI, found under Set­tings > Snips… Here’s screenshot:

For those that used Snips’ first ver­sion: (0.2) every­thing should be OK, the pre­vi­ous syn­tax will work ; but I rec­om­mend using the new one and the cor­re­spond­ing updated model files (ex: yt becomes yt2). Also, the #up# para­me­ter (used in mp3 and swf snips) has to be set man­u­ally to your blog’s upload path.

If you use it and find bugs, please let me know! This is the first time I use jQuery behav­ior (for the para­me­ters’ detec­tion in the Set­tings page) so it could act a lit­tle weird.

Hi there!

I’ve been quiet for some time because my lap­top died with­out warn­ing… But hap­pily I’m back with a brand new one (with Vista, ouch!) and just took time to enhance this blog a bit!

First of all I’ve updated the theme’s code so the HTML out­put is cleaner. Nobody cares, but I do.

Then, I’ve devel­oped a func­tion­al­ity that will allow me (and oth­ers?) to make this blog more active: Link dump. It’s still empty for the moment, but don’t worry it should fill quite quick!

Basi­cally it allows me to only post links and mys­te­ri­ous titles… No extra words, no image, just a sim­ple link. Click at your own risks.

These links will also pop in your feed reader and to make them look dif­fer­ent their title will be pre­fixed with a funny ∗ char­ac­ter. This is also true for the blog, here’s how it will look like:

You’ll still be able to com­ment on the links like you do on reg­u­lar posts…

Glad to be back!

Un bil­let en Français, pour une fois.

L’idée est sim­ple : j’écoute beau­coup de musique et j’aime la nou­veauté ; je con­nais des gens dans le même cas ; en par­ler c’est bien, l’archiver quelque part c’est mieux !

Voilà donc “Ébruiter” : un petit blog entre-nous, sans pré­ten­tion, pour partager nos points de vues sur nos écoutes respec­tives. Prob­a­ble­ment sans intérêt pour plein de monde mais on s’en fout, on est des dingues.

Nicholas et moi avons ouvert la danse. Alex, Rox et Renaud, faîtes chauffer !

Easy and quick upgrade. Enjoy­ing the new admin UI right now…

Intro­duc­ing Snips, my first Word­Press plugin!

Run­ning a Word­Press blog? Tired of hav­ing to switch to “code view” to copy/paste nasty HTML code from sites such as YouTube or Dai­ly­Mo­tion? Or fre­quently hav­ing to write the same things? Then Snips is for you!

Snips has been updated, see this post for fresh news.