Blog

I just released Clamp, a command line tool to make starting a full Apache, PHP, MySQL stack up and running a breeze. Go to your project folder, type "clamp" and you're good to go !

But... Why ?

For local development, you had these options, all of which have their downsides :

  • MAMP
    • Installs another Apache and PHP on your system
    • File structure is a bit messy
    • You still have to manually create hosts
    • It's difficult to have different configurations for each project
  • Vagrant
    • It's big
    • Adds a layer of complexity
    • Since it's a VM, it's slow
  • PHP internal server
    • Does not run MySQL
    • No Apache here, so no extensions etc.
    • And of course still no hosts

I've tried all these options, but none gave me what I really needed, something as simple as running node.js or meteor : type something at the command line and get it running !

I ranted about that on twitter :

I just released my first game, Photomime.

The rules are simple : Someone mimes the picture on the screen while the rest of the team must find it.

You can play it online on http://photomime.net/ and download the free Android app on Google Play.

The game was made using HTML5 / JS and Apache Cordova, I'll come back on the technical details later in an in-depth post.

"Le Moteur De Recherche", a website to promote a documentary of the french television program canal plus called Made in France, has just been released.

It is a fun search engine which allows you to enter a query and get its french "equivalent". For example "Quentin Tarantino" gives "Michel Audiard" - with multimédia assets and a page of results.

I was in charge of the development with Anthony Pigeot, and the project was driven by Bigger Than Fiction.

Technically, we used node js with express and mongo db on the server, bootstrap, less, jade, javascript on the client side, and made some scrapping to grab images and descriptions.

Try it, it's fun ! http://www.canalplus.fr/moteurderecherche

A quick service script to show / hide hidden files in the Finder on Mac OS X.

Associate the service with a global hotkey and you're on !

The other day, I stumbled upon this question on stackoverflow on how to cleanly customize Bootstrap :

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

That pushed me to put this workflow on github :

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

Clone the repository, and you're good to go and customize the variables, mixins and classes of bootstrap while keeping it intact in its own subdirectory. This will allow easy update and keep everything clean.

Under the hood, I created a Grunt task that automatically copy the variables.less file from bootstrap into your less folder while modifying the font path to be correct. This will be done on your first launch of Grunt.

But there is also a default variables.less file in case you don't want to use grunt.

On webkit browsers on mac, font smoothing is kind of too bold. The known hack for this is to use :

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

But this won't work on form elements such as inputs and also on elements having "-webkit-appearance" set to a similar value. So :

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

And voilà !

I had to replace words in a text while keeping the capitalization in Javascript.

Given the text :
"It is a good burger. Or an hamburger. Burger is good".

With the replacement word "sandwich", it should become :
"It is a good sandwich. Or an hamburger. Sandwich is good".

It has 2 challenges :

  • Match only real words, e.g. match "burger", but not "hamburger"
  • Keep the capitalization of the word, e.g. "Burger" should become "Sandwich"

For the first one, we should use lookahead and lookbehind features of regular expressions, but unfortunately, in javascript there is no lookbehind, so we have to capture that part and return it with the result.

So here we go :
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);
}
}

I've had hard times setting up a LAMP Vagrant box. There are tons of "tutorials", but none gave me the right direction to have a fully functional LAMP stack running as localhost.

So, hey, since I'm a nice guy, I'll spare you some headaches and tell you how you can do it easily.

We'll use this box : https://github.com/TomJaeger/vagrant-puppet-lamp, which has Apache, PHP and MySQL.

  1. Obviously, you'll need Vagrant and VirtualBox. Go get them, and install both.
  2. Clone the repo : git clone https://github.com/TomJaeger/vagrant-puppet-lamp.git
  3. Go to the box folder : cd vagrant-puppet-lamp
  4. Run the VM: vagrant up
  5. Connect to the VM via SSH: vagrant ssh
  6. The tricky part: Run postinstall.sh as a sudoer: sudo ./postinstall.sh
  7. It works ! Visit http://localhost:8080. You can access MySQL at localhost:8889 with user "root" and password "root".

Edit: As Pol said in comments, you can use the openlayers_taxonomy module to do this. But it turns out I had to use content types as layers too, so this technique still was useful to me. Thank you Pol :)

I wanted to create layers depending on some taxonomy terms with Openlayers. But the only way to create layers with views is to add one display per layer. What if you want as many layers as terms ? Some Views trickery to the rescue !

  1. Create your Openlayers view.
  2. Add a layer display for the first term.
  3. Create a filter for the term.
  4. Export the view through code.

Then, edit the view code to create one layer per term :
/**
* 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(

I see that everytime, mostly in Wordpress / Drupal / Whatever templates :

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

Don't ! here is why :

  • No one but an hypothetic future developer will ever need this. But you serve it to the entire world.
  • It makes HTML file heavier, since the browser will download these comments. At least use PHP comments.
  • With correct indentation, this is most of the times useless. Code is readable enough if correctly indented. It is actually less readable and adds noise.
Syndicate content