Blog

"Le Moteur De Recherche", un mini site pour promouvoir la sortie du documentaire Made in France de canal plus, vient de sortir.

C'est un moteur de recherche très fun, qui vous donne l'équivalent français de votre recherche. Par exemple "Quentin Tarantino" devient "Michel Audiard" - avec image, vidéo et liste de liens.

J'ai été en charge du développement avec Anthony Pigeot, et le projet a été piloté par Bigger Than Fiction.

Au niveau technique, nous avons utilisé node js avec express et mongo db côté server, bootstrap, less, jade, javascript côté client, et développé un scrappeur pour capturer les images et les descriptions.

Essayez-le, c'est très fun ! http://www.canalplus.fr/moteurderecherche

Un petit script de service pour cacher / afficher les fichiers cachés du Finder.

Plus qu'à ajouter un raccourci clavier global et vous êtes bons !

Je suis tombé sur cette question l'autre jour sur stackoverflow :

http://stackoverflow.com/questions/8596794/customizing-bootstrap-css-tem...

Ce qui m'a poussé à créer un repo sur github avec le workflow que j'utilise :

https://github.com/jide/bootstrap-boilerplate

Clonez le repository, et vous êtes prêts à customiser Bootstrap.

Le lissage des polices sur webkit mac est un peu grossier. Le hack utilisé habituellement est :

html {
-webkit-font-smoothing: antialiased;
}

Mais cela n'agit pas sur les éléments de formulaires, ni sur les éléments ayant la propriété -webkit-appearance" avec une valeur équivalente. Donc :

html, input, textarea, select, button {
-webkit-font-smoothing: antialiased;
}

Et voilà !

J'ai eu besoin de rempalcer des mots dans un texte par un autre mot, tout en gardant la capitalisation.

Avec le texte :
"It is a good burger. Or an hamburger. Burger is good".

On doit obtenir :
"It is a good sandwich. Or an hamburger. Sandwich is good".

Voici :
var replace = function(text, r, v) {
return text.replace(new RegExp('([^a-z])('+r+')|(^'+r+')(?=[^a-z]?)', "gi"), function(match, p1, p2, p3, offset, string) {
p1 = p1 || '';
p2 = p2 || p3;
if (p2[0].toUpperCase() == p2[0]) {
// Assume its all caps.
if (p2[1].toUpperCase() == p2[1]) {
v = v.toUpperCase();
}
// Assume its capitalized.
else {
v = v[0].toUpperCase() + v.slice(1);
}
}
return p1 + v;
});
}

Testons :
var text = "It is a good burger. Or an hamburger. Burger is good";
console.log(text + "\n" + replace(text, 'burger', 'sandwich'));

Après des heures à tenter de comprendre comment monter une box Vagrant avec LAMP, j'ai fini par avoir une box fonctionnelle.

Comme je suis sympa, je vous explique comment faire.

Nous utiliserons cette box : https://github.com/TomJaeger/vagrant-puppet-lamp, qui contient Apache, PHP et MySQL.

  1. Vous aurez évidemment besoin de Vagrant et VirtualBox. Installez les deux.
  2. Clonez le repo : git clone https://github.com/TomJaeger/vagrant-puppet-lamp.git
  3. Allez dans le dossier: cd vagrant-puppet-lamp
  4. Lancez la VM: vagrant up
  5. Connectez-vous à la VM via SSH: vagrant ssh
  6. La partie "tricky": Lancez postinstall.sh comme sudoer: sudo ./postinstall.sh
  7. Ca fonctionne ! Visitez http://localhost:8080. Vous pouvez accéder à MySQL sur localhost:8889 avec l'utilisateur "root" et le mot de passe "root".

J'ai eu besoin de créer des layers dynamiquement avec Openlayers en fonction de termes de taxonomie. Un peu d'astuce avec Views et voilà le travail !

  1. Créez une vue Openlayers.
  2. Ajouter un display pour le premier terme.
  3. Créez un filtre sur le premier terme.
  4. Exportez la vue en code.

Ensuite, éditez la vue pour créer un display par terme :
/**
* Implements hook_views_default_views().
*/
function MYMODULE_views_default_views() {
$vocabulary = taxonomy_vocabulary_machine_name_load('VOCABULARY_NAME');
$terms = taxonomy_get_tree($vocabulary->vid);
// Your view code for the master display...
foreach($terms as $term) {
$handler = $view->new_display('openlayers', $term->name, 'layer_' . $term->tid);
// The display code...
$handler->display->display_options['filters']['tid']['value'] = array(
$term->tid => $term->tid,
);
}
// Remaining code...
}

De même pour la map :
/**
* Implements hook_openlayers_maps().
*/
function MYMODULE_openlayers_maps() {
$vocabulary = taxonomy_vocabulary_machine_name_load('VOCABULARY_NAME');

On trouve très souvent ceci dans les templates de Wordpress / Drupal / N'importe :

<ol class="commentlist">
...
</ol><!-- .commentlist -->

Ne le faites pas ! Voici pourquoi :

  • Personne n'aura jamais besoin de ces indications sauf un hypothétique développeur qui reprendrait votre code. Et pourtant, vous le servez à la terre entière.
  • Cela rend le fichier HTML plus lourd, car le navigateur télécharge ces commentaires. Utilisez au moins des commentaires PHP.
  • Avec une indentation correcte, le code est tout à fait lisible. En fait cela rend le code plus difficile à lire au final.

J'ai eu besoin d'altérer les meta data d'un post avant qu'il soient effectivement chargés. C'est très utile car de nombreux plugins ou thèmes les utilisent pour stocker des informations supplémentaires sur les posts.

function [your theme]_post_metadata($metadata, $object_id, $meta_key, $single) {
if ($meta_key == '[your meta key]') {
$meta_type = 'post';
$meta_cache = wp_cache_get($object_id, $meta_type . '_meta');
if ( !$meta_cache ) {
$meta_cache = update_meta_cache( $meta_type, array( $object_id ) );
$meta_cache = $meta_cache[$object_id];
}
if ( !$meta_key )
$metadata = $meta_cache;
if ( isset($meta_cache[$meta_key]) ) {
if ( $single )
$metadata = maybe_unserialize( $meta_cache[$meta_key][0] );
else
$metadata = array_map('maybe_unserialize', $meta_cache[$meta_key]);
}
// Do whatever you want with $metadata. You may need to unserialize it.
return metadata;
}
}
add_filter('get_post_metadata', '[your theme]_post_metadata', true, 4);

Je suis tombé sur cet article de Michael Barrett http://abouthalf.com/development/poor-mans-nth-child-selector-for-ie-7-a..., qui explique comment utiliser les sélecteurs adjacents pour simuler les pseudo sélecteurs nth-child.

Je me suis demandé si on pouvait utiliser cette astuce pour faire de même avec odd / even.

La réponse est "Oui, en quelques sortes". Cela fonctionne si vous avez un nombre limité de nodes enfants :

table tr {
background: red; // odd
}
table tr:first-child + tr,
table tr:first-child + tr + tr + tr,
table tr:first-child + tr + tr + tr + tr + tr,
table tr:first-child + tr + tr + tr + tr + tr + tr + tr
//...and so on {
background: blue; // even
}

Syndiquer le contenu