<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
	<title type="text">CoffeeBreak</title>
	<subtitle type="text">CoffeeBreak:CoffeeBreak, the neverpanic.de blog</subtitle>
	<link rel="alternate" type="text/html" href="http://www.neverpanic.de/blog/" />
	<link rel="self" type="application/atom+xml" href="http://www.neverpanic.de/blog/atom/" />
	<updated>2010-07-30T23:14:02Z</updated>
	<rights>Creative Commons Attribution-NonCommercial-ShareAlike 2.0 Germany License</rights>
	<generator uri="http://expressionengine.com/" version="1.6.8">ExpressionEngine</generator>
	<id>tag:neverpanic.de,2010-07-30:/blog/</id>
	
	<entry>
		<title>GeSHify has moved</title>
		<link rel="alternate" type="text/html" href="http://www.neverpanic.de/blog/single/geshify&#45;has&#45;moved/" />
		<id>tag:neverpanic.de,2009-04-02:/blog/single/geshify-has-moved/#3.77</id>
		<published>2009-04-02T16:52:55Z</published>
		<updated>2009-04-02T16:58:56Z</updated>
		<author>
			<name>Clemens Lang</name>
			<email>neverpanic@gmail.com</email>
			<uri>http://www.neverpanic.de/about-me</uri>		</author>
		
			<category
				term="Web Development"
				scheme="/site/category/web-development/"
				label="Web Development" />
		
			<category
				term="PHP"
				scheme="/site/category/php/"
				label="PHP" />
		<content type="html">
			<![CDATA[
				<div style="text-align: center;">
<p style="clear: right; padding-top: .5em;">My syntax highlighting extension for ExpressionEngine has moved to a new home:</p>
<p style="font-size: 3em; margin-top: .5em;"><a href="http://geshify.com/">http://geshify.com/</a></p>
</div> 
			]]>
		</content>
	</entry>
	
	<entry>
		<title>GeSHify update</title>
		<link rel="alternate" type="text/html" href="http://www.neverpanic.de/blog/single/geshify&#45;update/" />
		<id>tag:neverpanic.de,2008-08-05:/blog/single/geshify-update/#3.65</id>
		<published>2008-08-05T16:05:47Z</published>
		<updated>2009-07-25T13:19:48Z</updated>
		<author>
			<name>Clemens Lang</name>
			<email>neverpanic@gmail.com</email>
			<uri>http://www.neverpanic.de/about-me</uri>		</author>
		
			<category
				term="Web Development"
				scheme="/site/category/web-development/"
				label="Web Development" />
		
			<category
				term="PHP"
				scheme="/site/category/php/"
				label="PHP" />
		<content type="html">
			<![CDATA[
				<div class="icon"><img src="/images/icons/w75/shield.png" alt="escutcheon" width="75" height="74" title="GeSHify update" /></div><p>I updated my <a href="http://www.neverpanic.de/blog/single/geshify-a-geshi-syntax-highlighting-extension-for-expression-engine/" title="ExpressionEngine extension GeSHify on neverpanic.de">ExpressionEngine extension GeSHify</a>. New features are a French translation (thanks to <a href="http://feub.net/">Fabien Amann</a>) and a German translation (which I did myself). Packaged with GeSHify 0.3.6.1 are GeSHi 1.0.7.22 and GeSHi 1.1.2alpha4dev (both checked out from the release branches of GeSHi&#8217;s SourceForge.net Subversion repository).<br />
Since I switched from getting the releases of GeSHi manually to using svn:externals definitions I no longer have to download the GeSHi releases manually — they will be pulled from the SourceForge Subversion servers on every update. Using this technique it is <em>technically</em> possible to automate building new GeSHify packages as soon as a new GeSHi version is released (and I will probably set this up soon).<br />
<a href="/blog/single/geshify-a-geshi-syntax-highlighting-extension-for-expression-engine/">Proceed to download</a>.
</p> 
			]]>
		</content>
	</entry>
	
	<entry>
		<title>A rant on limited password fields</title>
		<link rel="alternate" type="text/html" href="http://www.neverpanic.de/blog/single/a&#45;rant&#45;on&#45;limited&#45;password&#45;fields/" />
		<id>tag:neverpanic.de,2008-05-27:/blog/single/a-rant-on-limited-password-fields/#3.60</id>
		<published>2008-05-27T19:58:00Z</published>
		<updated>2008-08-07T20:06:40Z</updated>
		<author>
			<name>Clemens Lang</name>
			<email>neverpanic@gmail.com</email>
			<uri>http://www.neverpanic.de/about-me</uri>		</author>
		
			<category
				term="Web Development"
				scheme="/site/category/web-development/"
				label="Web Development" />
		
			<category
				term="PHP"
				scheme="/site/category/php/"
				label="PHP" />
		<content type="html">
			<![CDATA[
				<div class="icon"><img src="/images/icons/w75/shield.png" width="75" height="74" alt="" title="on security" /><img src="/images/icons/w75/document.png" width="75" height="82" alt="paper sheet" title="article" /></div><p>Whenever I see a password field that&#8217;s limited in it&#8217;s length I loose some trust in the organization providing the form. Why? Because the only valid reason I see to limit the length of a password is unencrypted or reversible encrypted storage. This requires some insight knowledge on how data is stored in databases: when defining a text field you usually have to choose it&#8217;s maximum length - obviously you could just choose whatever maximum length was possible, but that&#8217;s not the point of a well designed database. It would take me too long to explain that here, but there are some reasons why you certainly wouldn&#8217;t want to define fields longer than needed.
</p><h3>Password encryption methods</h3><p>
There are several different approaches to password encryption; the first and probably worst method is no encryption. It&#8217;s advantages are that you will be able to mail the password out to the user in case he forgets it and that it doesn&#8217;t require a lot of storage (estimating the average password length at about 10 chars from personal experience here). However it&#8217;s downsides are huge: in case you have some security flaw in your application all passwords will be leaked.</p>

<p>The second way is to use some encryption algorithm, e.g. AES or DES (those two might be a bit overkill, but there&#8217;s others). Strings encrypted with such an encryption algorithm generally tend to use up a lot more storage than the unencrypted string. You still have the advantage of being able to send the password to the user and if your database is leaked, the passwords will still not be decryptable (as long as the encryption key isn&#8217;t leaked).</p>

<p>However, there&#8217;s a better solution: <a href="http://en.wikipedia.org/wiki/Hash_function" title="Hash Function on Wikipedia">hashing</a> the password will give you a fixed-length string (which is great if you&#8217;re working with databases) from a variable-length string (=password) and it&#8217;s non-reversible. Theoretically you&#8217;d be able to calculate a so-called “collision”. Because a hash function is mapping an endless amount of strings to a finite amount of hash values there&#8217;s multiple strings with the same hash value. However given a certain minimum length of the password (which can be enforced by padding the string with random data you also store, the so-called “salt”) the effort to calculate such a collision is that large that it&#8217;s virtually impossible to hit one while your site is online (assuming you to re-setup the system once in 100 years here). Maybe you&#8217;d ask how to compare passwords on login if they&#8217;re stored using a non-reversible encryption? Actually you wouldn&#8217;t. You would instead hash the password the user entered with the salt stored for the user and compare it to the stored encrypted password. That way the unencrypted password is never in the server RAM and not in any log files either.<br />
And what if a user forgets his password? Well, instead of mailing him his password, you could just generate a new password, encrypt it, store it into the database and send the new password to the user.<br />
Also the hashing method allows you to enter virtually every character regardless of things like the encoding the database uses internally. Because hashing functions work with binary data and usually return a string using 0-9 and a-f (which are always the same in any encoding relying on ANSI) there won&#8217;t be any problems with the database encoding to deal with either.</p>

<p><strong>So, why is there still services not allowing long passwords and all characters in passwords?</strong>
</p> 
			]]>
		</content>
	</entry>
	
	<entry>
		<title>9&#45;slice scaling in HTML</title>
		<link rel="alternate" type="text/html" href="http://www.neverpanic.de/blog/single/9&#45;slice&#45;scaling&#45;in&#45;html/" />
		<id>tag:neverpanic.de,2008-05-15:/blog/single/9-slice-scaling-in-html/#3.59</id>
		<published>2008-05-15T14:59:57Z</published>
		<updated>2009-06-27T21:24:58Z</updated>
		<author>
			<name>Clemens Lang</name>
			<email>neverpanic@gmail.com</email>
			<uri>http://www.neverpanic.de/about-me</uri>		</author>
		
			<category
				term="Web Development"
				scheme="/site/category/web-development/"
				label="Web Development" />
		
			<category
				term="Design"
				scheme="/site/category/design/"
				label="Design" />
		
			<category
				term="PHP"
				scheme="/site/category/php/"
				label="PHP" />
		
			<category
				term="XHTML &amp; CSS"
				scheme="/site/category/xhtml-css/"
				label="XHTML &amp; CSS" />
		<content type="html">
			<![CDATA[
				<p>The Adobe Fireworks help has a good <a href="http://help.adobe.com/en_US/Fireworks/9.0/help.html?content=frw_styles_st_13.html" title="Using 9-slice scaling in Fireworks">article explaining 9-slice scaling</a>. Now imagine you&#8217;re designing a liquid width layout for a website - wouldn&#8217;t it just be great if it would scale as it was 9-sliced? Here&#8217;s how:</p>

<h3>Slicing</h3><p>
First you need one image for each of the outer areas in the 9-slice grid. That&#8217;s top left, top center, top right, left center, right center, bottom left, bottom center and bottom right. We don&#8217;t need an image for the center, since it&#8217;s filled with one solid color in this example and we can use CSS for that. Note that all top and all bottom slices must share the same height. The top center and bottom center slices should be 1 pixel wide, since we&#8217;re not going to scale them, but repeat them (which is the difference of this technique compared to the original 9-slice scaling). Left and right center slices only need to be 1 pixel high for the reasons just mentioned.<br />
After all, the slicing looks like this (forgive me the typo):<br />
<a href="http://www.neverpanic.de/images/uploads/slicing.png" title="click for a larger version"><img src="http://www.neverpanic.de/images/uploads/slicing_thumb.png" alt="image" width="400" height="95" /></a></p>

<h3>HTML code</h3><p>
Here&#8217;s the HTML you&#8217;ll need. Read the comments in the code for explanation.<br />
<pre class="html4strict" style="font-family:monospace;"><ol><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;content&quot;</span>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #808080; font-style: italic;">&lt;!-- this is the overall container --&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;content-top&quot;</span>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">		<span style="color: #808080; font-style: italic;">&lt;!-- this contains the top left, top right and top center slices --&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">		<span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;content-top-left&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">		<span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;content-top-right&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">		<span style="color: #808080; font-style: italic;">&lt;!-- notice the top center or top repeat slice needs to be at the end --&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">		<span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;content-top-repeat&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;content-repeat&quot;</span>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">		<span style="color: #808080; font-style: italic;">&lt;!-- this is just a container for the vertically scaling part - you could leave it out, but it seems cleaner to me --&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">		<span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;content-repeat-left&quot;</span>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">			<span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;content-repeat-right&quot;</span>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">				<span style="color: #808080; font-style: italic;">&lt;!-- in this case the left center and right center must be nested and must contain the actual content div, so they automatically scale with it --&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">				<span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;content-repeat-center&quot;</span>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">					<span style="color: #808080; font-style: italic;">&lt;!-- /** this is where you'd place the content **/ --&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">					<span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;content-repeat-clearfix&quot;</span>&gt;</span><span style="color: #808080; font-style: italic;">&lt;!-- this will prevent problems with floated stuff within the content --&gt;</span><span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">				<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">			<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">		<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;content-bottom&quot;</span>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">		<span style="color: #808080; font-style: italic;">&lt;!-- this contains the bottom left, bottom right and bottom center slices --&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">		<span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;content-bottom-left&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">		<span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;content-bottom-right&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">		<span style="color: #808080; font-style: italic;">&lt;!-- as above the bottom center div must be after the bottom left and right divs --&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">		<span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;content-bottom-repeat&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>&gt;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</div></li></ol></pre></p>

<p>
</p> <h3>CSS</h3><p>
And here&#8217;s where the magic comes in - this will actually combine the images and the HTML code and make it scale perfectly. Again, read the comments for explanation:<br />
<pre class="css" style="font-family:monospace;"><ol><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">.<span style="color: #000000; font-weight: bold;">content</span> .content-<span style="color: #000000; font-weight: bold;">top</span> <span style="color: #00AA00;">&#123;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #808080; font-style: italic;">/* No rules needed here, but for the sake of completeness */</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #00AA00;">&#125;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">.<span style="color: #000000; font-weight: bold;">content</span> .content-<span style="color: #000000; font-weight: bold;">top</span> .content-top-<span style="color: #000000; font-weight: bold;">left</span> <span style="color: #00AA00;">&#123;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #808080; font-style: italic;">/* float this one left and .content-top-right right so they flow over .content-top-repeat, which is the top center slice */</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #808080; font-style: italic;">/* width and height are defined by the image */</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">83px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">49px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000;">'images/content_top_left.png'</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #00AA00;">&#125;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">.<span style="color: #000000; font-weight: bold;">content</span> .content-<span style="color: #000000; font-weight: bold;">top</span> .content-top-<span style="color: #000000; font-weight: bold;">right</span> <span style="color: #00AA00;">&#123;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #808080; font-style: italic;">/* height needs to be the same across all top slices! */</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">49px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">99px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000;">'images/content_top_right.png'</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #00AA00;">&#125;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">.<span style="color: #000000; font-weight: bold;">content</span> .content-<span style="color: #000000; font-weight: bold;">top</span> .content-top-<span style="color: #993333;">repeat</span> <span style="color: #00AA00;">&#123;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">49px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #808080; font-style: italic;">/* the margins are the width of the top left and top right slices - this is not always neccessary, but in my case I was using alpha-transparent PNG8, which broke the layout in IE6 then */</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">margin-left</span><span style="color: #00AA00;">:</span> <span style="color: #933;">83px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">margin-right</span><span style="color: #00AA00;">:</span> <span style="color: #933;">99px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #808080; font-style: italic;">/* note that we repeat-x the image here */</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000;">'images/content_top_repeat.png'</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">repeat-x</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #00AA00;">&#125;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">.<span style="color: #000000; font-weight: bold;">content</span> .content-<span style="color: #993333;">repeat</span> <span style="color: #00AA00;">&#123;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #808080; font-style: italic;">/* No rules needed here, but for the sake of completeness */</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #00AA00;">&#125;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">.<span style="color: #000000; font-weight: bold;">content</span> .content-<span style="color: #993333;">repeat</span> .content-repeat-<span style="color: #000000; font-weight: bold;">left</span> <span style="color: #00AA00;">&#123;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #808080; font-style: italic;">/* repeat-y the image - this div will automatically resize with the content */</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000;">'images/content_repeat_left.png'</span><span style="color: #00AA00;">&#41;</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #993333;">repeat-y</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #00AA00;">&#125;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">.<span style="color: #000000; font-weight: bold;">content</span> .content-<span style="color: #993333;">repeat</span> .content-repeat-<span style="color: #000000; font-weight: bold;">left</span> .content-repeat-<span style="color: #000000; font-weight: bold;">right</span> <span style="color: #00AA00;">&#123;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #808080; font-style: italic;">/* same as center left slice */</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000;">'images/content_repeat_right.png'</span><span style="color: #00AA00;">&#41;</span> <span style="color: #000000; font-weight: bold;">right</span> <span style="color: #993333;">repeat-y</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #00AA00;">&#125;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">.<span style="color: #000000; font-weight: bold;">content</span> .content-<span style="color: #993333;">repeat</span> .content-repeat-<span style="color: #000000; font-weight: bold;">left</span> .content-repeat-<span style="color: #000000; font-weight: bold;">right</span> .content-repeat-<span style="color: #993333;">center</span> <span style="color: #00AA00;">&#123;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #808080; font-style: italic;">/* Put your text formatting here */</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #808080; font-style: italic;">/* again, margins are the widths of the left and right center slice */</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">margin-left</span><span style="color: #00AA00;">:</span> <span style="color: #933;">3px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">margin-right</span><span style="color: #00AA00;">:</span> <span style="color: #933;">14px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #808080; font-style: italic;">/* and this is the solid background color */</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#fffbf2</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #00AA00;">&#125;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">.<span style="color: #000000; font-weight: bold;">content</span> .content-<span style="color: #993333;">repeat</span> <span style="color: #6666ff;">.content-repeat-clearfix</span> <span style="color: #00AA00;">&#123;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #808080; font-style: italic;">/* you better have this if you have floated stuff in your content */</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">clear</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #00AA00;">&#125;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">.<span style="color: #000000; font-weight: bold;">content</span> .content-<span style="color: #000000; font-weight: bold;">bottom</span> <span style="color: #00AA00;">&#123;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #808080; font-style: italic;">/* No rules needed here, but for the sake of completeness */</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #00AA00;">&#125;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">.<span style="color: #000000; font-weight: bold;">content</span> .content-<span style="color: #000000; font-weight: bold;">bottom</span> .content-bottom-<span style="color: #000000; font-weight: bold;">left</span> <span style="color: #00AA00;">&#123;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #808080; font-style: italic;">/* same technique as above when stying the top part */</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #808080; font-style: italic;">/* again, image size defines the size of this div */</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">12px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">46px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000;">'images/content_bottom_left.png'</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #00AA00;">&#125;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">.<span style="color: #000000; font-weight: bold;">content</span> .content-<span style="color: #000000; font-weight: bold;">bottom</span> .content-bottom-<span style="color: #000000; font-weight: bold;">right</span> <span style="color: #00AA00;">&#123;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #808080; font-style: italic;">/* see above */</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">61px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #808080; font-style: italic;">/* note the height _must_ be euqal across all bottom slices */</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">46px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000;">'images/content_bottom_right.png'</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">no-repeat</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #00AA00;">&#125;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">.<span style="color: #000000; font-weight: bold;">content</span> .content-<span style="color: #000000; font-weight: bold;">bottom</span> .content-bottom-<span style="color: #993333;">repeat</span> <span style="color: #00AA00;">&#123;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #808080; font-style: italic;">/* margins again defined by the width of the bottom left and right slices */</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">margin-left</span><span style="color: #00AA00;">:</span> <span style="color: #933;">12px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">margin-right</span><span style="color: #00AA00;">:</span> <span style="color: #933;">46px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #808080; font-style: italic;">/* and height is the same across all bottom slices */</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">46px</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #808080; font-style: italic;">/* don't forget the repeat-x thingy */</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">	<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000;">'images/content_bottom_repeat.png'</span><span style="color: #00AA00;">&#41;</span> <span style="color: #993333;">repeat-x</span><span style="color: #00AA00;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #00AA00;">&#125;</span></div></li></ol></pre></p>

<h3>Summary</h3><p>
Now that was a massive amount of code, wasn&#8217;t it? A little demo would be nice, right? Check this one: <a href="http://www.mgv-oberhaid.de/">http://www.mgv-oberhaid.de/</a> - try changing your browser&#8217;s font size and watch the content div to see the effect.</p>

<p><strong>Update</strong>: Obviously all the IDs in HTML should have been classes - the CSS excerpt did style classes, which is a better idea if you want to use multiple 9-slice boxes on a page. The demo URL was outdated, too.
</p>
			]]>
		</content>
	</entry>
	
	<entry>
		<title>The smaller the error the bigger the bug</title>
		<link rel="alternate" type="text/html" href="http://www.neverpanic.de/blog/single/the&#45;smaller&#45;the&#45;error&#45;the&#45;bigger&#45;the&#45;bug/" />
		<id>tag:neverpanic.de,2008-04-26:/blog/single/the-smaller-the-error-the-bigger-the-bug/#3.57</id>
		<published>2008-04-26T10:05:00Z</published>
		<updated>2008-05-27T21:35:09Z</updated>
		<author>
			<name>Clemens Lang</name>
			<email>neverpanic@gmail.com</email>
			<uri>http://www.neverpanic.de/about-me</uri>		</author>
		
			<category
				term="Internal"
				scheme="/site/category/internal/"
				label="Internal" />
		
			<category
				term="Web Development"
				scheme="/site/category/web-development/"
				label="Web Development" />
		
			<category
				term="PHP"
				scheme="/site/category/php/"
				label="PHP" />
		<content type="html">
			<![CDATA[
				<p>So we had that navigation tree at work consisting out of two category levels, for simplicity let&#8217;s call them Level-1-Category and Level-2-Category. Level-1-Categories could contain other Level-1-Categories and Level-2-Categories, while Level-2-Categories could only contain Level-2-Categories. The navigation was built, caching was implemented, everything seemed fine from a logic viewpoint, however it behaved weird where it would sometimes display the Level-2-Categories in a particular Level-1-Category and sometimes not or in different order.<br />
When we finally found the bug (after hours of debugging) the scales fell off our eyes:<br />
<pre class="php" style="font-family:monospace;"><ol><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #000088;">$cacheID</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/md5"><span style="color: #990000;">md5</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$level1Cat</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">id</span><span style="color: #339933;">.</span><span style="color: #000088;">$level2Cat</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">id</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></div></li></ol></pre><br />
Now imagine what happened when you had a <var>$level1Cat</var> with ID 1 and a <var>$level2Cat</var> with ID 12, that would write it&#8217;s cache to <code>md5(&#8216;112&#8217;);</code> - and trying to open a <var>$level1Cat</var> with ID 11 and a <var>$level2Cat</var> with ID 2 it would read the cache <code>md5(&#8216;112&#8217;);</code>. Unfortunately these classes did have the same interface, so no errors were thrown.<br />
Changing the code to <pre class="php" style="font-family:monospace;"><ol><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #000088;">$cacheID</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/md5"><span style="color: #990000;">md5</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$level1Cat</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">id</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'-'</span><span style="color: #339933;">.</span><span style="color: #000088;">$level2Cat</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">id</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></div></li></ol></pre> resolved the bug and finally fired the closing time-event for us.
</p> 
			]]>
		</content>
	</entry>
	
	<entry>
		<title>GeSHify: a GeSHi syntax highlighting extension for Expression Engine</title>
		<link rel="alternate" type="text/html" href="http://www.neverpanic.de/blog/single/geshify&#45;a&#45;geshi&#45;syntax&#45;highlighting&#45;extension&#45;for&#45;expression&#45;engine/" />
		<id>tag:neverpanic.de,2008-01-30:/blog/single/geshify-a-geshi-syntax-highlighting-extension-for-expression-engine/#3.50</id>
		<published>2008-01-30T19:51:51Z</published>
		<updated>2009-05-19T18:53:52Z</updated>
		<author>
			<name>Clemens Lang</name>
			<email>neverpanic@gmail.com</email>
			<uri>http://www.neverpanic.de/about-me</uri>		</author>
		
			<category
				term="Internal"
				scheme="/site/category/internal/"
				label="Internal" />
		
			<category
				term="Web Development"
				scheme="/site/category/web-development/"
				label="Web Development" />
		
			<category
				term="PHP"
				scheme="/site/category/php/"
				label="PHP" />
		
			<category
				term="XHTML &amp; CSS"
				scheme="/site/category/xhtml-css/"
				label="XHTML &amp; CSS" />
		<content type="html">
			<![CDATA[
				<p><strong>Update: GeSHify has moved! Visit it's new home <a href="http://geshify.com/">http://geshify.com/</a>. This page is probably outdated!</strong></p><br />
<br />
<p>So I figured out it would end as it always does (notice how I exaggerate here to keep the pathos of the text) - I had to do it my way. And here it is: <a href="/blog/single/geshify-a-geshi-syntax-highlighting-extension-for-expression-engine" title="GeSHify: a GeSHi syntax highlighting extension for Expression Engine">GeSHify for Expression Engine</a>.<br />
GeSHify supports the following features:</p><br />
<ul><br />
<li>Customizable intelligent caching (this one is very important, since GeSHi is not the fastest code highlighter out there)</li><br />
<li>Supports GeSHi 1.0 and GeSHi 1.1 (currently alpha) - and you can even switch between both using some clicks in the control panel</li><br />
<li>Customizable tag (in case you want to keep the original functionality of [ code ] instead of overwriting it, which is the default setting)</li><br />
<li>HTML-argument-style settings: you can pass something like lang=actionscript to the code tag</li><br />
<li>Default settings manageable using the control panel, so you don't have to pass all arguments each time you're pasting code</li><br />
</ul><br />
<br />
Want to see an example? Sure, no problem:<br />
<pre class="php" style="font-family:monospace;"><ol><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #000000; font-weight: bold;">&lt;?php</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #000000; font-weight: bold;">function</span> activate_extension<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #009900;">&#123;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$DB</span><span style="color: #339933;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #000088;">$DB</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">query</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$DB</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">insert_string</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'exp_extensions'</span><span style="color: #339933;">,</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">  <a href="http://www.php.net/array"><span style="color: #990000;">array</span></a><span style="color: #009900;">&#40;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">   <span style="color: #0000ff;">'extension_id'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">,</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">   <span style="color: #0000ff;">'class'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'Geshify'</span><span style="color: #339933;">,</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">   <span style="color: #0000ff;">'method'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'pre_typography'</span><span style="color: #339933;">,</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">   <span style="color: #0000ff;">'hook'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'typography_parse_type_start'</span><span style="color: #339933;">,</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">   <span style="color: #0000ff;">'settings'</span> <span style="color: #339933;">=&gt;</span> <a href="http://www.php.net/serialize"><span style="color: #990000;">serialize</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">settings_default</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">   <span style="color: #0000ff;">'priority'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #cc66cc;">8</span><span style="color: #339933;">,</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">   <span style="color: #0000ff;">'version'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #000088;">$DB</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">escape_str</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">version</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">   <span style="color: #0000ff;">'enabled'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'y'</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">  <span style="color: #009900;">&#41;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #000088;">$DB</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">query</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$DB</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">insert_string</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'exp_extensions'</span><span style="color: #339933;">,</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">  <a href="http://www.php.net/array"><span style="color: #990000;">array</span></a><span style="color: #009900;">&#40;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">   <span style="color: #0000ff;">'extension_id'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">,</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">   <span style="color: #0000ff;">'class'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'Geshify'</span><span style="color: #339933;">,</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">   <span style="color: #0000ff;">'method'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'post_typography'</span><span style="color: #339933;">,</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">   <span style="color: #0000ff;">'hook'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'typography_parse_type_end'</span><span style="color: #339933;">,</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">   <span style="color: #0000ff;">'settings'</span> <span style="color: #339933;">=&gt;</span> <a href="http://www.php.net/serialize"><span style="color: #990000;">serialize</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">settings_default</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">   <span style="color: #0000ff;">'priority'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #cc66cc;">8</span><span style="color: #339933;">,</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">   <span style="color: #0000ff;">'version'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #000088;">$DB</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">escape_str</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">version</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">   <span style="color: #0000ff;">'enabled'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'y'</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">  <span style="color: #009900;">&#41;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #009900;">&#125;</span></div></li><li style="font-weight: normal; vertical-align:top;"><div style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #000000; font-weight: bold;">?&gt;</span></div></li></ol></pre><br />
If you know PHP and the Expression Engine API you might notice this is the place where the extension hooks into Expression Engine. If you don't you probably don't care either <img src="/images/smileys/wink.gif" width="19" height="19" alt="wink" style="border:0;" /><br />
<br />
<strong>Read on for Documentation and Download</strong><br />
<br />
 <h3>Documentation</h3>
<p>
 <em>Please give me some feedback, whether you want me to include the original GeSHi package in the download and release a new version of GeSHify whenever GeSHi is updated or if you want to download GeSHi yourself, generating less updates to GeSHify where no GeSHify code actually changed.</em>
</p>
<p>This documentation expects your GeSHify tag name setting to be “code” and your delimiters to be “[” and “]”, which is the default. If you feel a need to do so, you can change these settings in your control panel by going to Admin » Utilities » Extensions Manager » GeSHify, where you will be provided a fancy settings manager.</p>
<h4>code-tag syntax</h4>
<p>To parse code with GeSHify, you need to wrap it in <strong>&#91;code]</strong> and <strong>&#91;/code]</strong>. You can optionally pass the following arguments</p>
<ul>
 <li>
  <strong>lang</strong><br />
  lang=[identifier of the GeSHi language file you want to use for parsing this code block]<br />
  Default value can be changed in the control panel. Check the <a href="http://qbnz.com/highlighter/" title="GeSHi website">GeSHi website</a> for possible values - <em>note that these values might differ from GeSHi 1.0 to GeSHi 1.1 even for the same code-language</em><br />
  Example: &#91;code lang=php]&lt;?php // some php code ?&gt;&#91;/code]
 </li>
 <li>
  <strong>line</strong><br />
  line=[none|fancy99|normal]<br />
  type of line numbering to use. Possible values are “none” for no line numbers, “normal” for standard line numbers and “fancy” followed by a number where each number<sup>th</sup> line will be highlighted in a different color. The default value can be changed in the control panel.<br />
  Example: &#91;code line=none]&#91;/code] for no line numbers, &#91;code line=fancy5]&#91;/code] for each 5<sup>th</sup> line number in a different color and &#91;code line=normal]&#91;/code] for standard line numbers.
 </li>
 <li>
  <strong>start</strong><br />
  start=[number]<br />
  first line number to be used<br />
  Example: &#91;code start=5]&#91;/code] will start line numbering at 5; very useful, if you're trying to split a file in multiple parts, but still have consistent line numbers.
 </li>
 <li>
  <strong>strict</strong><br />
  strict=[true|false|1|0]<br />
  whether to use strict mode, where you'll have to include the start and end tag in interpreted languages like e.g. PHP. Defaults to false on GeSHi 1.0 and true on GeSHi 1.1.<br />
  Example: &#91;code strict=true]&#91;/code] or &#91;code strict=1]&#91;/code] for strict handling, &#91;code strict=false]&#91;/code] or &#91;code start=0]&#91;/code] for non-strict handling.
 </li>
 <li>
  <strong>keyword_links</strong><br />
  keyword_links=[true|false|1|0]<br />
  whether to link special keywords with online documentation for the language used (e.g. PHP keywords will be linked to php.net when this is enabled). Default value can be changed in the control panel.<br />
  Example: &#91;code keyword_links=true]&#91;/code] or &#91;code keyword_links=1]&#91;/code] for linked keywords, &#91;code keyword_links=0]</code> or &#91;code keyword_links=false]</code> to disable keyword links.
 </li>
 <li>
  <strong>overall_id</strong><br />
  overall_id=[id string to use in the id attribute of the code container]<br />
  ID attribute to assign to the HTML element containing the source code after hightlighting. You can use this to apply custom CSS or JavaScript.<br />
  Example: &#91;code overall_id=heapsort_in_php]&#91;/code]
 </li>
 <li>
  <strong>overall_class</strong><br />
  overall_class=[class name to add to the class attribute of the code container]<br />
  class name to add to the class list of the HTML element containing the source code after highlighting. You can use this to apply custom CSS or JavaScript.<br />
  Example: &#91;code overall_class=sorting_algorithms_in_php]&#91;/code]
 </li>
</ul>
<h4>Caching</h4>
<p>GeSHify will cache your highlighted source code until it is being modified or until there hasn't been any hit on the page containing it for 24h (you can change that value using the control panel). GeSHify will clear old cache files based on a 10% chance with each hit (random number generators ftw!). If you'd like to clear your cache manually delete the contents of your system/cache/geshify_cache directory (if you changed the cache directory setting in the GeSHify extension settings this directory will be located somewhere else)</p>

<h3>License</h3>
<p>GeSHify is released under the <a href="http://www.gnu.org/licenses/gpl-3.0.txt" title="GNU public license">GPL</a>.</p>
<h3>Bugs and known limitations</h3>
<p>Please report any bugs you encounter or and features you'd like to see by commenting on this post or by mailing to neverpanic@gmail.com</p>
<p><strong>GeSHi 1.1 is alpha software - many code libraries are missing and neither line numbering nor disabling strict mode work with GeSHi 1.1 yet.</strong></p>
<h3>Download &amp; Changelog</h3>
GeSHify has a new home at <a href="http://geshify.com/">geshify.com</a>. Please get it from there.
			]]>
		</content>
	</entry>
	
	<entry>
		<title>Experiences with ClipShare Pro 2.0</title>
		<link rel="alternate" type="text/html" href="http://www.neverpanic.de/blog/single/experiences&#45;with&#45;clipshare&#45;pro&#45;20/" />
		<id>tag:neverpanic.de,2007-10-14:/blog/single/experiences-with-clipshare-pro-20/#3.38</id>
		<published>2007-10-14T12:48:00Z</published>
		<updated>2008-02-03T13:42:02Z</updated>
		<author>
			<name>Clemens Lang</name>
			<email>neverpanic@gmail.com</email>
			<uri>http://www.neverpanic.de/about-me</uri>		</author>
		
			<category
				term="Linux"
				scheme="/site/category/linux/"
				label="Linux" />
		
			<category
				term="Web Development"
				scheme="/site/category/web-development/"
				label="Web Development" />
		
			<category
				term="PHP"
				scheme="/site/category/php/"
				label="PHP" />
		
			<category
				term="XHTML &amp; CSS"
				scheme="/site/category/xhtml-css/"
				label="XHTML &amp; CSS" />
		<content type="html">
			<![CDATA[
				<h3>Requirements</h3><p>
All of the scripts are based on PHP and MySQL - there might be other solutions out there, but since my clients all had the traditional LAMP setup I didn&#8217;t bother searching for alternatives.<br />
For encoding, all of the scripts named use the same combination of <a href="http://www.mplayerhq.hu/" title="MEncoder, the encoder packaged with MPlayer">MEncoder</a>, <a href="http://ffmpeg.mplayerhq.hu/" title="ffmpeg">ffmpeg</a> to support the Flash video format, the <a href="http://ffmpeg-$php$.sourceforge.net/" title="ffmpeg $PHP$ extension">ffmpeg PHP extension</a> and <a href="http://www.inlet-media.de/flvtool2" title="FLVTool2">FLVTool2</a>.<br />
Installing these software packages isn&#8217;t that hard unless you&#8217;re on something different than a .deb-based Linux system: The Debian multimedia repository provided me with the MEncoder and FFmpeg packages, I installed Ruby to run FLVTool2 (which is a Ruby script) and installed ffmpeg-php from <a href="http://deb.atomo64.puffinhost.com/" title="Atomo64's Debian Repository">Atomo64&#8217;s Debian Repository</a> (thanks to Raphaël for this one).<br />
If you&#8217;re on another system, you might end up with a lot of compiling, though.<br />
Once you got all these things in place and made sure your php.ini settings allow the <a href="http://de2.php.net/manual/de/function.exec.php" title="PHP exec() function">exec()</a>, <a href="http://de2.php.net/manual/de/function.shell-exec.php" title="PHP shell_exec() function">shell_exec()</a> and <a href="http://de2.php.net/manual/de/function.system.php" title="PHP system() function">system()</a> functions you can start doing the real installataion.
</p> <h3>Installing</h3><p>
<em>This article will just contain the review of ClipShare, PHPmotion will follow later, so stay tuned.</em><br />
To install ClipShare, you&#8217;ll have to import a SQL file into your database using phpMyAdmin, open some files and adjust some variables. Not easy, however not that difficult, either. Luckily they have an installation service for their customers, so you can get the software installed for you. These guys at the installation service will, however, compile the software on your server (why don&#8217;t they just use an .rpm or .deb package - what about updating that software?) and they don&#8217;t seem to be that smart either. They couldn&#8217;t fix some weird issue my client had and after some debugging I found safe_mode for PHP-CLI to be turned on. This is something I expect them to check for - they get paid for that!
</p><h3>Customizing</h3><p>
ClipShare comes with a template engine, so you can achieve any design you can imagine. However if you just want to adjust the design that came with ClipShare (speaking of version 2.0, there&#8217;s a table-free CSS design coming with version 2.5) this is where you undergo a web developer&#8217;s nightmare. table-deserts as far as your screen is big, mixed with some invalid attribute notation (e.g. width=450), &#8220;borders&#8221; are colored td-elements. Long story short, their HTML code is evil.<br />
Now you might say, that&#8217;s version 2.0, you said earlier they released 2.5 with a CSS-based template. Well, check it out at <a href="http://www.clipsharedemo.com/">http://www.clipsharedemo.com/</a> - it comes with a little 864 validation errors and 13 external JavaScripts plus some neat inline JavaScript. It&#8217;s clearly a step in the right direction, but it&#8217;s not better than the table-based design they had before.</p>

<p>ClipShare&#8217;s PHP code is completely editable, which is certainly a pro - however, you might end up adding some code yourself: My client wanted the user avatar to be displayed in the sidebar of a single-video page (like YouTube does it). ClipShare doesn&#8217;t come with this data per default or at least I couldn&#8217;t find it since there&#8217;s no documentation to check, so I had to get it from the database myself.</p>

<h3>Summary</h3><p>
Overall, ClipShare does it&#8217;s job, however there&#8217;s quite a lot of room for improvements at the installation service, the templates and the documentation.
</p>
			]]>
		</content>
	</entry>
	
</feed>