Blog

Je viens de publier Clamp, un outil en ligne de commande pour démarrer un stack AMP à la vitesse de l'éclair. Tapez "clamp" et voilà !

Pourquoi ?

Pour faire du développement en local, plusieurs options, chacune avec ses défauts :

  • MAMP
    • Installe un autre Apache et PHP sur le système
    • Structure de fichiers complexe
    • Toujours obligé de créer les hosts manuellement
    • Difficile de configurer chaque projet différemment
  • Vagrant
    • Taille imposante
    • Ajoute de la complexité
    • Lent
  • serveur interne de PHP
    • Pas de MySQL
    • Pas d'Apache
    • Pas de hosts

J'ai tout essayé, mais aucun ne me donnait ce que je voulais: faire comme avec node.js ou meteor, taper une commande et bim !

Je m'en suis plains sur twitter :

FOR GOD SAKE, can we have a #LAMP stack running as easy as #nodejs ?

Je viens de publier mon premier jeu, Photomime.

Les régles sont simples: Quelqu'un mime l'image affichée pendant que le reste de l'équipe doit trouver.

Vous pouvez y jouer en ligne sur http://photomime.net/ et télécharger l'application Android sur Google Play.

Le jeu a été développé en HTML5 / JS et Apache Cordova. Je reviendrai plus en détails sur les aspects techniques dans un futur post.

"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.
Syndiquer le contenu