Linux, PHP, LAMP, The Web in a blog

http://geekswithblogs.net/TimH/archive/2006/03/20/72797.aspx

http://spritegen.website-performance.org/

You can’t include animated gifs in the sprite (otherwise they will be still).

You can’t include list bullets because if the list item is quiet long, the images under the bullet point icon in the sprite will be shown.

You can download YUICompressor from here:

http://yuilibrary.com/downloads/#yuicompressor

Extract the package

You need Java to execute it (on Ubuntu):

sudo apt-get install sun-java6-jre

To use it, you can execute this on the command line:

cat jquery-*.min.js library.js common.js lists.js tasks.js contexts-mgmt.js keys-mgmt.js | java -jar /home/dan/Desktop/yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar –type js -o all`date +%Y%m%d%I%M%S`.js

http://www.pinvoke.com/

http://www.famfamfam.com/lab/icons/silk/

http://www.buttonator.com/

li.filter ul li { margin-top: 5px; } /* any good browser */
* html li.filter ul li { margin-top: 5px; } /* hack for IE6 */
*:first-child+html li.filter ul li { margin-top: 5px; } /* hack for IE7 */

2 floated elements inside a container. The container doesn’t expand to contain the floats. There are a lot of solutions to this, such as sticking in an element to clear the floats (bleh) before closing the container, using the :after pseudo-class to inject something to clear the floats, or setting a fixed height for the container, using a min-height workaround - the list goes on. The simple, all-conquering method of getting around this problem? Float the container too. It will expand to fit the enclosed floats perfectly, whatever height they are.
Source:
http://www.yongfook.com/items/view/81/10-dirty-little-web-development-tricks

Creating a button with Gimp

• new image 80×20
• select the all image with ‘Select Rectangular Region’ tool
• Menu > Select > Rounded Rectangle
• Radius about 40/50
• Gradient tool
• Make a vercial gradient with two colors quite close
• Text Editor: Sans Bold, 11px, white
• Save as a gif

border-collapse: collapse

.floatingDiv:after {
       content: '.';
       height: 0;
       width: 0;
       clear: both;
       visibility: hidden;
}

With this trick, you don’t need to remember to use clear: both on the next div you don’t want it to float.