Automatic LESS compilation using mod_rewrite and lessphp

I have been using LESS (and before SCSS) and I enjoy it, but I have to admit that I was spoiled by Symfony, Twig and Assetic that compile them automatically and I am really not looking forward to compile all my assets. I could use an application that watches a directory and compiles them on the fly, but there’s none that works on all OS and you still have to fire them up and configure them each time you start a project or reboot your computer.

Using lessphp, I made a simple script that will compile your LESS files, do some caching, gzip, etc.

It works by checking that a .css file exists. If not, it checks if the corresponding .less exists. If so, it fires up lessphp.

It is not perfect, but is worth using on simple projects.

The little quirks of using Twitter Bootstrap

Twitter Bootstrap is awesome to get started quickly on a custom layout. It had a lot of features that are very good best-practices like intuitive colours for buttons, error highlights and some good normalizations. However, like any CSS framework, it has its quirks. Here are some rules that are applied on elements without any classes and the issues they may cause. Keep in mind that this Bootstrap v2.1.1 and it in no way an exhaustive list nor a bug list. It is simply some things to put some extra attention on.

input[type="file"] {
  height: 30px;
  line-height: 30px;
}

On Chrome and Firefox, I had problems where the Browse button was not correctly vertically aligned.

---

h1,h2,h3,h4,h5,h6 { text-rendering: initial; }

May cause some troubles with custom fonts.
I noticed this problem with Google Webfont Advent Pro.

---

img { max-width: 100%; }

May cause some troubles if your wrapper box is smaller.
You may also see flicker and reflows during loading while the size is readjusting.
To correct this problem, you should always specify height and width attributes, but sometimes it is not possible.

---

button, input { line-height: normal; }

Will cause button and input not to inherit the line-height specfied in parent.

---

h1 { font-size: 36px; line-height: 40px; }

Occurs with all headers. Since the line-height is not in em, you will need to update it manually if you change the font-size.

---

input, select, textarea { 
    &[readonly], &[disabled] {
      cursor: not-allowed;
    }
}

This is not a problem in itself, but you may not want this cursor.
I stumbled upon it when I was trying to style an input as a seemlessly inline element.

---

And of course all of the rules for text-shadow, border-radius, box-shadow, etc.
All in all, I found myself using rules like theses quite often.
The exact rules will depend on your usage, but you can see the point.
They are not specific to Twitter Bootstrap.

.reset-font {
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
}
.reset-size {
    height: auto;
    width: auto;
    max-height: auto;
    max-width: auto;
}
.reset-effects {
    text-shadow: none;
    box-shadow: none;
    border-radius: none;
}

Generate a multi-resolution favicon using ImageMagick

PNG format for favicons are supported by most browsers, but as you are all aware, the current state of the Web implies we must not only develop for "most browsers".

ICO favicons are very well supported and offer a bonus feature: multiple resolution in a single file. This way, the browser decides which resolution he prefers. This is notably useful in the era of iPads and Macbooks with high resolutions (Retina).

Here is a simple script to resize an image multiple times and combines them using ImageMagick. Should work with all supported formats of ImageMagick

Simple templating system using Bash

I often have to deploy several config files that are very similar. Things like Apache VirtualHost and PHP FPM pools. The solution to this kind of problem is to use something like Puppet or Chef that will apply a real template engine and much more like creating folders and stuff. However, this kind of solution is often lengthy to implement and prevents you from doing some quick editing on-the-fly.

Hence, for very simple needs, I started using simple scripts that would only replace variables and give me a basic template to start with. This is however not very flexible and needs to be adapted for each case. And so I did a templater that replaces variables with the value in the environment. It also supports defining default values and variable interpolation.

Example with Apache + FPM

{{LOG_DIR=/var/log/apache2}}
{{RUN_DIR=/var/run/php-fpm}}
{{FCGI=$RUN_DIR/$DOMAIN.fcgi}}
{{SOCKET=$RUN_DIR/$DOMAIN.sock}}
{{EMAIL=$USER@$DOMAIN}}
{{DOC_ROOT=/home/$USER/sites/$DOMAIN/htdocs}}
<VirtualHost *:80>
  ServerAdmin {{EMAIL}}
  ServerName {{DOMAIN}}
  ServerAlias www.{{DOMAIN}}

  DocumentRoot "{{DOC_ROOT}}"

  <Directory "{{DOC_ROOT}}">
    AllowOverride All
    Order allow,deny
    Allow From All
  </Directory>

  AddHandler php-script .php
  Action php-script /php5.fastcgi virtual
  Alias /php5.fastcgi {{FCGI}}
  FastCGIExternalServer {{FCGI}} -socket {{SOCKET}}

  LogLevel warn
  CustomLog {{LOG_DIR}}/{{DOMAIN}}.access.log combined
  ErrorLog {{LOG_DIR}}/{{DOMAIN}}.error.log
</VirtualHost>

Invocation

DOMAIN=cslavoie.com ./templater.sh examples/vhost-php.conf

Help

If you add the -h switch to the invocation, it will print all the variables and their current values

And the code is available on GitHub.