yui-compressor before and after shot.

before yui-compressor (562 bytes):

AFTER (469 bytes)

Categories: CSS

Yui compressor – an easy way to minify your .css files

Yahoo!  open sourced, free of charge, an easy to use linux command line tool to minify your javascript and css.

The fantastic product I speak of is called “yui-compressor”. Yui compressor strips your .css or .js file of as much whitespace as possible. For javascript, yui-compressor shortens your variable names, usually making them only a single character long, or a little longer.

Another useful feature of yui-compressor that I found is that it can combine multiple.css or .js files, and then compress them.

For example, as I develop, I like to keep many .css files for the different elements of the page I’m working on. I’ll have “toolbar.css”, “hd.css”, “bd.css”…. and so on.Of course, it makes no sense for me to send several .css files over the wire,so I combine them in a combo file.

Here is how to combine multiple .css files with yui compressor

1. Fire up the terminal, go to the directory of your .css files

2. Find the files you want to compress, in our case y.css, u.css, i.css

3. Type  "yui-compressor --type css y.css, u.css, i.css -o combo.css --charset utf-8"

4. Your files are now combined, and minified in combo.css from yui-compressor

On ubuntu you can get yui-compressor from synaptic.

Here is a screen shot:

Categories: CSS

css tables – a simple 3 column layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type = "text/css"> .table, .tr, .td {border:1px solid #ff0000;} .table {display:table; width:100%} .tr {display: table-row;} .td {display: table-cell;} </style> </head> <body> <div class="table"> <div class="tr"> <div class="td nav">left</div> <div class="td main">Content</div> <div class="td right-nav">right</div> </div> </div> </body> </html>
Categories: CSS

filter_input() return value, an undesired result

September 27, 2010 Leave a comment

I love PHP built in filter functions… but in this use case, they always trick me:

I ran this on the command line:

$_GET['name'] = 32;

var_dump(filter_input(INPUT_GET, "name", FILTER_VALIDATE_INT));

I got null, when I should get (int) 32.

However, if I type in a browser, say the page is test.php … test.php?name = 32

and run the code

var_dump(filter_input(INPUT_GET, "name", FILTER_VALIDATE_INT));

I get the right answer (int) 32.

Evidently the built in filter functions treat $_GET[‘name’] differently in the script, than when it is actually passed over $_GET…

Go figure.

Categories: PHP News

Notes: Rendering on IE 8

September 21, 2010 Leave a comment

IE 6 – Aug 27, 2001
IE 7 – Oct 2006
IE 8 – March 19, 2009
IE 9 (beta) – Sept 15th 2010

IE 8 rendering modes:

IE 8 has stricter adherence to W3C than IE 7.

Pages coded to the quirks of IE7  break in IE8 because IE8 is closer to W3C standards.

To maintain backward compatibility between IE7 and IE8, MS came up with this solution:
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />, a meta element that tells IE to emulate ie7.
IE8 can also be told to emulate IE7 in the headers.

We also have such greats as:
<meta http-equiv=”X-UA-Compatible” content=”IE=8″ /> always render in IE 8

<meta http-equiv=”X-UA-Compatible” content=”IE=Edge” /> use the most current engine

IE8 has a black list of sites to render as IE7. (Users can opt out)

Coincidently, if a there is no doc type specified, IE 8 renders as IE 5.5, or quirks mode.

This post goes into a deeper and better explanation of the whole phenomenon. This is where I learned most about it:

As a side note, the part in Faruk Ateş article that I found most interesting is that if your website is viewed through a black listed frame, such as the digg bar or google images, it will render in IE7 mode, and vice versa.

If there is no doc type but “X-UA-Compatible” is specified, the browser will still stay in quirks mode.

Categories: CSS

How to specify specific style sheets for IE6, IE7

September 21, 2010 Leave a comment

<link rel="stylesheet" type="text/css" href="main.css">

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css"><![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css"><![endif]-->

Put in the document head AFTER  main style sheet. These conditional statements are proprietary to IE.


Categories: CSS

experiment – Adding images to Sqlite database with PDO, then display an image

September 10, 2010 Leave a comment

The best resource on using PDO is Wez Furlong’s talk available here


I used slide #43, and a further comment by Wez Furlong here http://www.launchcode.co.uk/archives/37-PDO-SQLite-support-just-doesnt-work-fully.html to hack together this script.

Now, a little on this script. You’re not going to want to use this code on a production server. This script is the bare minimum it took me to put an image into an sqlite database, and then to display it. It didn’t work exactly as I wanted. I wanted to add a picture then display it. This script adds a picture, then displays an image, but you have to specify the id.

http://php-blog.s3.amazonaws.com/test.png <– my test image

http://php-blog.s3.amazonaws.com/images.sqlite <– test sqlite database

$dbh = new PDO('sqlite:images.sqlite');
$stmt = $dbh->prepare("insert into images (id, contenttype, imagedata, name) values (?,?,?,?)");
$fp = file_get_contents('test.png');
$type = '.png';
$name = 'test.png';
$stmt->bindParam(1, $id);
$stmt->bindParam(2, $type);
$stmt->bindParam(3, $fp);
$stmt->bindParam(4, $name);
/* $id = $dbh->lastInsertId()); using ->lastInsertId() to get the last ID did not work for me. If it did this script would display the image you just added */
$id = 1; //show the first image
$query = $dbh->query("SELECT imagedata from images where id = $id");
header("Content-Type: image/png");
echo $query->fetchColumn();

Categories: experimental scripts