CSS syntax errors via CSSlint in VIM

In action
CSSlint via syntastic

You gonna need nodejs and then install CSSlint:

sudo npm install -g csslint

CSSlint options:

$ csslint

Usage: csslint-rhino.js [options]* [file|dir]*
 
Global Options
  --help                                   Displays this information.
  --format=                        Indicate which format to use for output.
  --list-rules                             Outputs all of the rules available.
  --quiet                                  Only output when errors are present.
  --errors=<rule[,rule]+>                  Indicate which rules to include as errors.
  --warnings=<rule[,rule]+>                Indicate which rules to include as warnings.
  --ignore=<rule[,rule]+>                  Indicate which rules to ignore completely.
  --exclude-list=<file|dir[,file|dir]+>    Indicate which files/directories to exclude from being linted.
  --version                                Outputs the current version number.


Next comes the VIM plugin Syntastic. The installation process requires a plugin manager. The README uses pathogen so I stayed with it.
So first install pathogen:

$ mkdir -p ~/.vim/autoload ~/.vim/bundle
$ curl -LSso ~/.vim/autoload/pathogen.vim https://tpo.pe/pathogen.vim

Next edit and add to ~/.vimrc:

execute pathogen#infect()

Finally download syntastic:

cd ~/.vim/bundle
git clone https://github.com/scrooloose/syntastic.git

I added this line to my ~/.vimrc

let g:syntastic_csslint_args="--ignore=outline-none"

For a complete list of rules execute:

csslint --list-rules
Advertisements

Right alignment (justification) of a PHP string

In a project the client wanted that I right align numbers in a table that have text-align: left table cells. Great that PHP has a core function named str_pad which helps solving this situation. So in my case I used

echo '<td><span class="white-space-pre">
    ' .  str_pad( $number, 6, ' ', STR_PAD_LEFT ) . '
</span></td>';

Then I had to fix the white space issue because it looked like this:
without-white-space-pre

After adding the following CSS rule it moved like I wanted.

.white-space-pre {
    white-space: pre;
}

with-white-space-pre

Invisible CAPTCHA to avoid SPAM submissions

Finally found a nice SPAM protection solution
http://www.ngenworks.com/blog/invisible-captcha-to-prevent-form-spam/

Example HTML markup:

<label for="email">Email:</label>
<input name="email" type="text" value="" />
<span class="confirmation-field">
<label for="email-confirmation">Email confirmation:</label>
<input name="email-confirmation" type="text" value="" />
</span>

CSS:

.confirmation-field { display: none; }

Disable, turn off CSS

My internet connection is out 😦

740 packets transmitted, 220 received, +501 errors, 70% packet loss,
time 740082ms
rtt min/avg/max/mdev = 4.201/5.043/7.303/0.593 ms

So I switched to mobile, but I used my prepaid 700MB data limit so downstream is only 64kbps 😦
Needed to find a way to turn off CSS and found http://sumtips.com/2012/07/turn-off-css-on-a-specific-website-in-browser-for-testing.html