<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	>

<channel>
	<title>httpremix.com</title>
	<atom:link href="http://httpremix.com/feed" rel="self" type="application/rss+xml" />
	<link>http://httpremix.com</link>
	<description>Dedicated to the craft of professional web development</description>
	<pubDate>Fri, 03 Apr 2009 22:17:02 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.5</generator>
	<language>en</language>
			<item>
		<title>MySQL Subqueries and INNER JOINs</title>
		<link>http://httpremix.com/mysql-subqueries-and-inner-joins</link>
		<comments>http://httpremix.com/mysql-subqueries-and-inner-joins#comments</comments>
		<pubDate>Fri, 03 Apr 2009 22:09:01 +0000</pubDate>
		<dc:creator>jonah ellison</dc:creator>
		
		<category><![CDATA[mysql]]></category>

		<guid isPermaLink="false">http://httpremix.com/?p=17</guid>
		<description><![CDATA[Two advanced MySQL tips today:

Never use a subquery inside a WHERE field IN(...) list
How-to: Update values in a table from a calculation that uses the table's own values, in a single query
Let's begin!

Never use a subquery inside a WHERE field IN(...) list
BAD/SLOW:
SQL copy to clipboard





SELECT * FORM table1 WHERE datefield IN 


&#160; &#40;SELECT datefield FROM [...]]]></description>
			<content:encoded><![CDATA[<p>Two advanced MySQL tips today:
<ol>
<li>Never use a subquery inside a WHERE field IN(...) list</p>
<li>How-to: Update values in a table from a calculation that uses the table's own values, in a single query</ol>
<p><span id="more-17"></span>Let's begin!</p>
<ol>
<li><strong>Never use a subquery inside a WHERE field IN(...) list</strong></p>
<p><b>BAD/SLOW:</b></p>
<div class="langName">SQL <small><a href="#" onclick="javascript:copy(this,'copy-sql-4');return false;">copy to clipboard</a><span></span></small></div>
<div class="syntax_hilite">
<div id="sql-4"  class="inner">
<div class="sql">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #993333; font-weight: bold;">SELECT</span> * FORM table1 <span style="color: #993333; font-weight: bold;">WHERE</span> datefield <span style="color: #993333; font-weight: bold;">IN</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #993333; font-weight: bold;">SELECT</span> datefield <span style="color: #993333; font-weight: bold;">FROM</span> table2 <span style="color: #993333; font-weight: bold;">GROUP</span> <span style="color: #993333; font-weight: bold;">BY</span> datetype<span style="color:#006600; font-weight:bold;">&#41;</span> </div>
</li>
</ol>
</div>
<div class="bottom"><br/></div>
</div>
</div>
<p>
<pre class="hidden"><textarea id="copy-sql-4">
SELECT * FORM table1 WHERE datefield IN
  (SELECT datefield FROM table2 GROUP BY datetype)
</textarea></pre>
<p>It's tempting to use a subquery inside an IN(...) list, but your query speed will slow exponentially as more rows are added.  Don't be tricked by query caching either, since every new INSERT will erase the cache.  The solution is to use an INNER JOIN and subquery instead.</p>
<p><b>GOOD/OPTIMIZED:</b></p>
<div class="langName">SQL <small><a href="#" onclick="javascript:copy(this,'copy-sql-5');return false;">copy to clipboard</a><span></span></small></div>
<div class="syntax_hilite">
<div id="sql-5"  class="inner">
<div class="sql">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #993333; font-weight: bold;">SELECT</span> *</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #993333; font-weight: bold;">FROM</span> table1 <span style="color: #993333; font-weight: bold;">AS</span> t1</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #993333; font-weight: bold;">INNER</span> <span style="color: #993333; font-weight: bold;">JOIN</span> <span style="color:#006600; font-weight:bold;">&#40;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #993333; font-weight: bold;">SELECT</span> datefield <span style="color: #993333; font-weight: bold;">FROM</span> table2 <span style="color: #993333; font-weight: bold;">GROUP</span> <span style="color: #993333; font-weight: bold;">BY</span> datetype</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color: #993333; font-weight: bold;">AS</span> t2 <span style="color: #993333; font-weight: bold;">ON</span> t1.datefield=t2.datefield; </div>
</li>
</ol>
</div>
<div class="bottom"><br/></div>
</div>
</div>
<p>
<pre class="hidden"><textarea id="copy-sql-5">
SELECT *
FROM table1 AS t1
INNER JOIN (
  SELECT datefield FROM table2 GROUP BY datetype
) AS t2 ON t1.datefield=t2.datefield;
</textarea></pre>
<p>&nbsp;</p>
<li><strong>How-to: Update values within a table using the table's own fields</strong>
<p>The UPDATE command allows you to join other tables.  We can use a subquery on the same table to calculate new field values, then join this subquery as a "table."</p>
<p>For this example, a table contains a date field with values two weeks apart, but we want to change them to one week apart.  (A user-defined variable <code>@row</code> is needed to keep track of the row number in order to calculate the new date.)</p>
<div class="langName">SQL <small><a href="#" onclick="javascript:copy(this,'copy-sql-6');return false;">copy to clipboard</a><span></span></small></div>
<div class="syntax_hilite">
<div id="sql-6"  class="inner">
<div class="sql">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;"># Change dates from bi-monthly to weekly</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #993333; font-weight: bold;">SET</span> @row = -<span style="color: #cc66cc;color:#800000;">1</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #993333; font-weight: bold;">UPDATE</span> u_tabledates <span style="color: #993333; font-weight: bold;">AS</span> t1</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #993333; font-weight: bold;">INNER</span> <span style="color: #993333; font-weight: bold;">JOIN</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color:#006600; font-weight:bold;">&#40;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #993333; font-weight: bold;">SELECT</span> *, DATE_SUB<span style="color:#006600; font-weight:bold;">&#40;</span>u_date, INTERVAL <span style="color:#006600; font-weight:bold;">&#40;</span>@row := @row + <span style="color: #cc66cc;color:#800000;">1</span><span style="color:#006600; font-weight:bold;">&#41;</span> week<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color: #993333; font-weight: bold;">AS</span> new_date</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #993333; font-weight: bold;">FROM</span> u_tabledates <span style="color: #993333; font-weight: bold;">ORDER</span> <span style="color: #993333; font-weight: bold;">BY</span> u_date <span style="color: #993333; font-weight: bold;">ASC</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color: #993333; font-weight: bold;">AS</span> t2 <span style="color: #993333; font-weight: bold;">ON</span> <span style="color:#006600; font-weight:bold;">&#40;</span>t2.u_id=t1.u_id<span style="color:#006600; font-weight:bold;">&#41;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #993333; font-weight: bold;">SET</span> t1.u_date = t2.new_date </div>
</li>
</ol>
</div>
<div class="bottom"><br/></div>
</div>
</div>
<p>
<pre class="hidden"><textarea id="copy-sql-6">
# Change dates from bi-monthly to weekly
SET @row = -1;
UPDATE u_tabledates AS t1
INNER JOIN
  (
  SELECT *, DATE_SUB(u_date, INTERVAL (@row := @row + 1) week) AS new_date
  FROM u_tabledates ORDER BY u_date ASC
  ) AS t2 ON (t2.u_id=t1.u_id)
SET t1.u_date = t2.new_date
</textarea></pre>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://httpremix.com/mysql-subqueries-and-inner-joins/feed</wfw:commentRss>
		</item>
		<item>
		<title>Page Caching for Logged-in Users: Loading Dynamic Content with Ajax</title>
		<link>http://httpremix.com/page-caching-for-logged-in-users-loading-dynamic-content-with-ajax</link>
		<comments>http://httpremix.com/page-caching-for-logged-in-users-loading-dynamic-content-with-ajax#comments</comments>
		<pubDate>Sat, 14 Mar 2009 20:45:14 +0000</pubDate>
		<dc:creator>jonah ellison</dc:creator>
		
		<category><![CDATA[caching]]></category>

		<category><![CDATA[optimization]]></category>

		<guid isPermaLink="false">http://httpremix.com/?p=16</guid>
		<description><![CDATA[How fast do your dynamic PHP/MySQL pages load?  Answer: probably not fast enough.  A truly optimized website should serve pages instantaneously to its visitors.  There should be no lag time, even 200 milliseconds of server-side script execution time should be considered a burden worth removing.
The keyword for performance is "caching."  By [...]]]></description>
			<content:encoded><![CDATA[<p>How fast do your dynamic PHP/MySQL pages load?  Answer: probably not fast enough.  A truly optimized website should serve pages instantaneously to its visitors.  There should be no lag time, even 200 milliseconds of server-side script execution time should be considered a burden worth removing.</p>
<p>The keyword for performance is "caching."  By taking the load off the processor and database, a website can easily handle hundreds of thousands of visitors.  Many frameworks offers some sort of caching method that stores the final rendered HTML.  This is easy to implement for anonymous users, but what about logged-in users?</p>
<p>I recently released an open-source Drupal module called <a href="http://drupal.org/project/authcache">Authenticated User Page Caching (Authcache)</a> (and a <a href="http://authcache.httpremix.com">demo site</a>) for logged-in users. <a href="http://drupal.org">Drupal</a> is a great PHP/MySQL CMS/framework for building community-based websites, though it suffers from a "one-more-query" syndrome--a single page request can have hundreds of SQL queries! The reason why authenticated caching is difficult is because most of the time, when you're logged into a website, the content changes according to your account (like a "You're logged in as [username]" link), so it's pointless to save the final HTML to the server's cache. Instead the entire page has to be rendered by PHP on each request, requiring precious CPU cycles &#038; database hits. Ajax/JavaScript can be used for customizing the cached HTML, however. Of course, this technique can't be used with every website--some sites are just too dynamic--but it can work if the content of pages is similar across users. </p>
<p><a href="http://drupal.org/node/394840" target="_blank"><img src="http://drupal.org/files/images/authcache.thumbnail.png"></a><br />
<small>Caching Flowchart</small></p>
<p><span id="more-16"></span>Every millisecond counts when it comes to performing page requests--not only are cached pages served faster to the user, but it frees up services/memory faster on the server, giving more bang for your buck.  This is important not only on high-volume websites, but when you're on a hosting plan that doesn't give you gig upon gigs of memory or high-performance CPU processing power.</p>
<p>The modular nature of Drupal and its excellent API makes it rather straightforward to implement this type of caching.  Other frameworks may prove more difficult.  The Authcache module can use a number of different caching engines, such as APC, memcached, or even static files.  I've found that APC offers the fastest retrieval times, allowing pages to be served in under 1 millisecond!</p>
<p><strong>Implementing Page Caching</strong><br />
The tricky part with page caching is knowing when to retrieve from the cache and when to delete outdated cache.  If there is a POST request, such as when a comment is made, then Drupal/PHP will execute the page code normally and invalidate the cache.  When we are logged in as an admin, we don't display or save cache pages (because we want our admin links and don't want users to see them).  We may also expire our cache after a certain amount of time to always display the most up-to-date content, which is useful on a front page and search result page. Yes, these little details can be a hassle, but the end result is well worth it if your goal is a faster site.</p>
<p><strong>What About Dynamic Content?</strong><br />
This is where the beauty of Ajax/JavaScript comes in.  We don't need to re-render an entire page, just perform a separate confined action.  For example, instead of having PHP render "Hello, [username]" text for each page for logged in users along with everything, store the username in a cookie and have JavaScript render the username.  Then create a separate cache for pages for logged in users and one for anonymous users.  If certain pages absolutely must be dynamic, then they can be excluded from the cache.  Another example: I like to keep a view tally on my articles in this Wordpress blog.  All my pages are cached, however, so to update the count my pages ping a small PHP script after loading, which checks the user's cookie to see if the article has been viewed, and if not, then it quickly connects to the database, sends an update query, then exits, all independently of the what matters the most: <b>serving the page to the user.</b></p>
<p><strong>Caching Tricks</strong><br />
There are also several browser caching techniques that can be used when cached HTML:</p>
<ul>
<li><b>Sending "HTTP 304 Not Modified" headers</b> &ndash; Save a timestamp of when the cached page was last modified and send it with a "Last Modified" header.  Then we can examine the user's "If-Modified-Since" request headers and send a 304 response to any pages that the browser has already saved in their cache.  (<code>header("HTTP/1.1 304 Not Modified");</code> A 304 response does not send any HTML.) This saves on bandwidth and allows the browser to display the page directly from memory without having to redownload and parse the HTML again.</p>
<li><b>Using "max-age" headers</b> &ndash; The "max-age" response header informs browsers not to download the URL again for "max-age" seconds (<code>header("Cache-Control: max-age=3600, must-revalidate");</code>).  We can this header to cache Ajax responses.  This is useful for blocks of user-specific content.  For example, if a user votes on a poll, we would want to display the poll results and not the poll vote form.  But we don't want to retrieve the poll results on each page view, so we can tell the browser to just cache the block for 10 minutes.  A cookie with a timestamp can be used for cache invalidation (e.g., if a user changes their vote, a "vote" cookie containing the unix timestamp is saved, then the Ajax request uses this cookie value when generating the request URL).</ul>
]]></content:encoded>
			<wfw:commentRss>http://httpremix.com/page-caching-for-logged-in-users-loading-dynamic-content-with-ajax/feed</wfw:commentRss>
		</item>
		<item>
		<title>Automating Server Backups Using &#8220;rsync/ssh/cron&#8221; on a Windows or Linux Machine</title>
		<link>http://httpremix.com/automating-server-backups-using-rsync-ssh-cron-on-a-windows-machine</link>
		<comments>http://httpremix.com/automating-server-backups-using-rsync-ssh-cron-on-a-windows-machine#comments</comments>
		<pubDate>Thu, 09 Oct 2008 22:41:33 +0000</pubDate>
		<dc:creator>jonah ellison</dc:creator>
		
		<category><![CDATA[backups]]></category>

		<guid isPermaLink="false">http://httpremix.com/?p=15</guid>
		<description><![CDATA[Everyone knows backups are important, not just for restoring from a system failure, but also for fixing user/admin/developer mistakes.  Here's an efficient way to automatically backup files on your Linux/CentOS server using a spare Windows or Linux machine. You should already have a basic grasp of the Linux shell prompt for this guide.

Installing Cygwin
(You [...]]]></description>
			<content:encoded><![CDATA[<p>Everyone knows backups are important, not just for restoring from a system failure, but also for fixing user/admin/developer mistakes.  Here's an efficient way to automatically backup files on your Linux/CentOS server using a spare Windows or Linux machine. You should already have a basic grasp of the Linux shell prompt for this guide.</p>
<p><span id="more-15"></span></p>
<p><strong>Installing Cygwin</strong><br />
<small><b>(You can skip this if you're backing up on a Linux machine.)</b></small><br />
The first task is installing <a href="http://www.cygwin.com">Cygwin</a> on your Windows box, which provides a Linux-like environment for running our backup tools (rsync+ssh and cron).  When running <code>setup.exe</code>, you should select as many packages as you feel comfortable installing by clicking <img src="http://static.httpremix.com/img/cygwin_install.gif" alt="install arrows">. Be sure to install all of "Admin," "Base," "Devel," and "Net." You can always run setup.exe later to update your existing Cygwin installation.</p>
<p><strong>Creating SSH Public/Private Keys</strong><br />
Since we want to copy our files securely over SSH without being prompted for a password each time we login, we need to generate a public key for our backup machine.  At the shell prompt, enter:</p>
<div class="langName">SHELL <small><a href="#" onclick="javascript:copy(this,'copy-shell-16');return false;">copy to clipboard</a><span></span></small></div>
<div class="syntax_hilite">
<div id="shell-16"  class="inner">
<div class="shell">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">ssh-keygen -t dsa </div>
</li>
</ol>
</div>
<div class="bottom"><br/></div>
</div>
</div>
<p>
<pre class="hidden"><textarea id="copy-shell-16">
ssh-keygen -t dsa
</textarea></pre>
<p>Ignore the questions by pressing "Enter" at any prompts, such as the file location or passphrase.  Now open  <code>~/.ssh/id_dsa.pub</code> (e.g., c:/cgwin/home/(Windows Username)/.ssh/id_dsa.pub) file and copy the contents.  Log in to your remote/Linux machine and paste this info into the file <code>~/.ssh/authorized_keys</code>.  If the file doesn't exist, just create a new one.  You must also modify your SSH daemon to use allow Pubkey authentications.  Edit <code>/etc/ssh/sshd_config</code> and uncomment:</p>
<ul><tt>RSAAuthentication yes<br />
PubkeyAuthentication yes</tt></ul>
<p>On your backup machine, test your pubkey by typing (replacing username and remotehost):</p>
<div class="langName">SHELL <small><a href="#" onclick="javascript:copy(this,'copy-shell-17');return false;">copy to clipboard</a><span></span></small></div>
<div class="syntax_hilite">
<div id="shell-17"  class="inner">
<div class="shell">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">ssh username@remotehost </div>
</li>
</ol>
</div>
<div class="bottom"><br/></div>
</div>
</div>
<p>
<pre class="hidden"><textarea id="copy-shell-17">
ssh username@remotehost
</textarea></pre>
<p>You should now be able to login into your Linux server without typing in a password!</p>
<p><strong>The rsync Backup Script</strong></p>
<div class="sample">"rsync is a software application for Unix systems which synchronizes files and directories from one location to another while minimizing data transfer using delta encoding when appropriate. rsync can copy or display directory contents and copy files, optionally using compression and recursion."  &ndash;<a href="http://en.wikipedia.org/wiki/Rsync">rsync on Wikipedia</a></div>
<p>In other words, rsync is one of the best backup tools available.</p>
<p>Create your backup directory:</p>
<div class="langName">SHELL <small><a href="#" onclick="javascript:copy(this,'copy-shell-18');return false;">copy to clipboard</a><span></span></small></div>
<div class="syntax_hilite">
<div id="shell-18"  class="inner">
<div class="shell">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">mkdir /rsync </div>
</li>
</ol>
</div>
<div class="bottom"><br/></div>
</div>
</div>
<p>
<pre class="hidden"><textarea id="copy-shell-18">
mkdir /rsync
</textarea></pre>
<p>And create your backup script inside it, named <code>backup.sh</code>, making sure to replace username@localhost:</p>
<div class="langName">SHELL <small><a href="#" onclick="javascript:copy(this,'copy-shell-19');return false;">copy to clipboard</a><span></span></small></div>
<div class="syntax_hilite">
<div id="shell-19"  class="inner">
<div class="shell">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">#!/bin/bash</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">rsync -avz -e ssh username@remote:/var/www/ /rsync/www/ --log-file=/rsync/rsync.<span style="">log</span> </div>
</li>
</ol>
</div>
<div class="bottom"><br/></div>
</div>
</div>
<p>
<pre class="hidden"><textarea id="copy-shell-19">
#!/bin/bash
rsync -avz -e ssh username@remote:/var/www/ /rsync/www/ --log-file=/rsync/rsync.log
</textarea></pre>
<p><code>/var/www/</code> is the full path on the remote machine.  <code>/rsync/www/</code> is where to save on your backup machine.  If you use a non-standard SSH port, you can use <code>"ssh -p <em>portNum</em>"</code> in quotes.</p>
<p>You can also backup your MySQL database files, log files, code repositories, or whatever else you desire.  If you don't have access to the MySQL files directory, you can setup a <a href="http://dev.mysql.com/doc/refman/5.0/en/mysqldump.html">mysqldump</a> script on the remote machine to save to a file.</p>
<p>You may also want to create "snapshots" of your backups, so these files don't get overwritten by unwanted changes.  Here's a snapshot script (<code>snapshot.sh</code>) that gzips MySQL database files:</p>
<div class="langName">SHELL <small><a href="#" onclick="javascript:copy(this,'copy-shell-20');return false;">copy to clipboard</a><span></span></small></div>
<div class="syntax_hilite">
<div id="shell-20"  class="inner">
<div class="shell">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">#!/bin/bash</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">archivedate=$<span style="color:#006600; font-weight:bold;">&#40;</span>date +%Y-%m-%d<span style="color:#006600; font-weight:bold;">&#41;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">tar cvf - /rsync/mysql | gzip &gt; /rsync/archive/mysql_$archivedate.<span style="">tar</span>.<span style="">gz</span> </div>
</li>
</ol>
</div>
<div class="bottom"><br/></div>
</div>
</div>
<p>
<pre class="hidden"><textarea id="copy-shell-20">
#!/bin/bash
archivedate=$(date +%Y-%m-%d)
tar cvf - /rsync/mysql | gzip > /rsync/archive/mysql_$archivedate.tar.gz
</textarea></pre>
<p><strong>Cygwin: Installing the "cron" service</strong><br />
Crontabs are used for automating our backup scripts.  On Cygwin, cron must be setup as a Windows service in order to run in the background:</p>
<div class="langName">SHELL <small><a href="#" onclick="javascript:copy(this,'copy-shell-21');return false;">copy to clipboard</a><span></span></small></div>
<div class="syntax_hilite">
<div id="shell-21"  class="inner">
<div class="shell">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">chmod +x /bin/cygwin1.<span style="">dll</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">mkdir /etc/cron.<span style="">d</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">cygrunsrv --install cron -p /usr/sbin/cron -a -D</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">cygrunsrv --start cron </div>
</li>
</ol>
</div>
<div class="bottom"><br/></div>
</div>
</div>
<p>
<pre class="hidden"><textarea id="copy-shell-21">
chmod +x /bin/cygwin1.dll
mkdir /etc/cron.d
cygrunsrv --install cron -p /usr/sbin/cron -a -D
cygrunsrv --start cron
</textarea></pre>
<p>To see if the cron service is running, type:</p>
<div class="langName">SHELL <small><a href="#" onclick="javascript:copy(this,'copy-shell-22');return false;">copy to clipboard</a><span></span></small></div>
<div class="syntax_hilite">
<div id="shell-22"  class="inner">
<div class="shell">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">ps -a | grep cron </div>
</li>
</ol>
</div>
<div class="bottom"><br/></div>
</div>
</div>
<p>
<pre class="hidden"><textarea id="copy-shell-22">
ps -a | grep cron
</textarea></pre>
<p><strong>Adding the Crontab:</strong><br />
On your backup server, type:</p>
<div class="langName">SHELL <small><a href="#" onclick="javascript:copy(this,'copy-shell-23');return false;">copy to clipboard</a><span></span></small></div>
<div class="syntax_hilite">
<div id="shell-23"  class="inner">
<div class="shell">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">crontab -e </div>
</li>
</ol>
</div>
<div class="bottom"><br/></div>
</div>
</div>
<p>
<pre class="hidden"><textarea id="copy-shell-23">
crontab -e
</textarea></pre>
<p>Press "i" and add:</p>
<div class="langName">SHELL <small><a href="#" onclick="javascript:copy(this,'copy-shell-24');return false;">copy to clipboard</a><span></span></small></div>
<div class="syntax_hilite">
<div id="shell-24"  class="inner">
<div class="shell">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#800000;color:#800000;">0</span> <span style="color:#800000;color:#800000;">0</span> * * * /rsync/backup.<span style="">sh</span> </div>
</li>
</ol>
</div>
<div class="bottom"><br/></div>
</div>
</div>
<p>
<pre class="hidden"><textarea id="copy-shell-24">
0 0 * * * /rsync/backup.sh
</textarea></pre>
<p>Press "ESC" then "w" and enter to save.</p>
<p>This will run the backup script at midnight every day.  You can also add a line for <code>the snapshot.sh script</code>... replace the first "0" with "30" to run the script 30 minutes later.</p>
<p>That's it!  Now just make sure your backup server has your hard drives in a <a href="http://en.wikipedia.org/wiki/Standard_RAID_levels#RAID_1">RAID 1</a> (mirroring) or better configuration for additional data redundancy!</p>
]]></content:encoded>
			<wfw:commentRss>http://httpremix.com/automating-server-backups-using-rsync-ssh-cron-on-a-windows-machine/feed</wfw:commentRss>
		</item>
		<item>
		<title>6 Tips for Sending Bulk Email Newsletters</title>
		<link>http://httpremix.com/6-tips-for-sending-bulk-email-newsletters</link>
		<comments>http://httpremix.com/6-tips-for-sending-bulk-email-newsletters#comments</comments>
		<pubDate>Sat, 16 Aug 2008 17:28:22 +0000</pubDate>
		<dc:creator>jonah ellison</dc:creator>
		
		<category><![CDATA[email]]></category>

		<guid isPermaLink="false">http://httpremix.com/?p=14</guid>
		<description><![CDATA[
Write HTML like it's 1999 &#8211; Email clients and web clients such as Gmail love to strip out CSS within &#60;style> tags.  For this reason, use inline CSS.  Also, using tables to build your newsletters is a safe idea as well, since the float property isn't always supported.  Outlook 2007 is extremely [...]]]></description>
			<content:encoded><![CDATA[<ol class="niceList">
<li><strong>Write HTML like it's 1999</strong> &ndash; Email clients and web clients such as Gmail love to strip out CSS within <code>&lt;style></code> tags.  For this reason, use inline CSS.  Also, using tables to build your newsletters is a safe idea as well, since the <code>float</code> property isn't always supported.  Outlook 2007 is <a href="http://www.sitepoint.com/blogs/2007/01/10/microsoft-breaks-html-email-rendering-in-outlook/">extremely limited</a> when rendering HTML--no background CSS images, no forms, no custom bullet images.</p>
<li><strong>Don't use PHP's <code>mail()</code> function</strong> &ndash; This function opens and closes a connection to your mail server every time, which is extremely inefficient.  It is possible to write your own bulk email sender in PHP, however!  Use an <a href="http://static.httpremix.com/src/php-smtp-class.zip">SMTP class</a> for more control and speed.
<li><strong>In the "To" field, always have the user's email address</strong> &ndash; The easiest way to have your email eaten by a spam filter is to not use the user's actual email in the "To" field.  Some like to send out more emails by placing multiple email addresses within the BCC header, but this will add spam points to the email.
<li><strong>Set up an <a href="http://en.wikipedia.org/wiki/Sender_Policy_Framework">SPF TXT</a> record for your domain name</strong> &ndash; This is another anti-spam filter technique to make sure your emails get through.  If you look at the source headers of an email, you may see an entry that says <code>Received-SPF: neutral</code> or <code> Received-SPF: fail</code>.  It should only take 5 minutes to set this up and make it say "pass."  For example, my domain register allows me to add DNS TXT records, so for the host field I would type "<code>httpremix.com.</code>" and for the address field I would add <code>"v=spf1 a mx -all"</code> (quotes included for the TXT).
<p><span id="more-14"></span>
<li><strong>Offer an "Unsubscribe" link</strong> &ndash; This may goes against trying to reach/retain as many customers as possible, but there's nothing more frustrating than not being able to easily unsubscribe from a newsletter.  It's almost unethical not to include this.  Just a small link at the bottom is needed.  Ideally, the link would be have query parameters containing the user's email address and an auth code, so all they have to do is click "confirm" on the webpage to unsubscribe instead of typing in their email address or logging in.</p>
<li><strong>Tell your users how often they will receive your newsletter</strong> &ndash; Monthly?  Quarterly?  Hopefully not weekly, unless it's a pretty damn good newsletter.  I'd recommend spacing it out to help reduce unsubscribes.</p>
]]></content:encoded>
			<wfw:commentRss>http://httpremix.com/6-tips-for-sending-bulk-email-newsletters/feed</wfw:commentRss>
		</item>
		<item>
		<title>MySQL Tips &#038; Tricks: Using ORDER BY FIELD and GROUP_CONCAT()</title>
		<link>http://httpremix.com/mysql-order-by-field-group_concat</link>
		<comments>http://httpremix.com/mysql-order-by-field-group_concat#comments</comments>
		<pubDate>Thu, 12 Jun 2008 23:28:07 +0000</pubDate>
		<dc:creator>jonah ellison</dc:creator>
		
		<category><![CDATA[mysql]]></category>

		<guid isPermaLink="false">http://httpremix.com/?p=13</guid>
		<description><![CDATA[I love databases because I always feel there is a way for retrieving my data in any shape or form I desire.  Trying to find the correct syntax can sometimes be frustrating, however.  Here are two tricks that have helped me during those special times:

Custom "ORDER BY"
It's easy to order by ASC or [...]]]></description>
			<content:encoded><![CDATA[<p>I love databases because I always feel there is a way for retrieving my data in any shape or form I desire.  Trying to find the correct syntax can sometimes be frustrating, however.  Here are two tricks that have helped me during those special times:</p>
<ol class="niceList">
<li><strong>Custom "ORDER BY"</strong><br />
It's easy to order by ASC or DESC, but what if we want a custom order returned?  This is when the <code><a href="http://dev.mysql.com/doc/refman/5.0/en/string-functions.html#function_field">FIELD()</a></code> function comes in handy.</p>
<div class="langName">SQL <small><a href="#" onclick="javascript:copy(this,'copy-sql-27');return false;">copy to clipboard</a><span></span></small></div>
<div class="syntax_hilite">
<div id="sql-27"  class="inner">
<div class="sql">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #993333; font-weight: bold;">SELECT</span> * <span style="color: #993333; font-weight: bold;">FROM</span> table_name <span style="color: #993333; font-weight: bold;">ORDER</span> <span style="color: #993333; font-weight: bold;">BY</span> <span style="color: #993333; font-weight: bold;">FIELD</span><span style="color:#006600; font-weight:bold;">&#40;</span>field_name, <span style="color: #ff0000;">'Small'</span>,<span style="color: #ff0000;">'Medium'</span>,<span style="color: #ff0000;">'Large'</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
</ol>
</div>
<div class="bottom"><br/></div>
</div>
</div>
<p>
<pre class="hidden"><textarea id="copy-sql-27">
SELECT * FROM table_name ORDER BY FIELD(field_name, 'Small','Medium','Large');
</textarea></pre>
<p>The disadvantage is that this will slow down your query.  For maximum performance, store the field as an ENUM with the values defined in the correct order.</p>
<li><strong>Retrieving values from multiple rows as a single comma-delimited field</strong>
<p>Scenario: We have multiple values spread out across rows a table, but need to retrieve them together in a single field without performing multiple queries.  I'm doing this for my archive page--I want to retrieve a list of topic tags for each article, but I want to do it with the same query that selects all my articles.  <code><a href="http://dev.mysql.com/doc/refman/5.0/en/group-by-functions.html#function_group-concat">GROUP_CONCAT()</a></code> is the answer for string concatenation.</p>
<div class="langName">SQL <small><a href="#" onclick="javascript:copy(this,'copy-sql-28');return false;">copy to clipboard</a><span></span></small></div>
<div class="syntax_hilite">
<div id="sql-28"  class="inner">
<div class="sql">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #993333; font-weight: bold;">SELECT</span> GROUP_CONCAT<span style="color:#006600; font-weight:bold;">&#40;</span>wp_terms.slug<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color: #993333; font-weight: bold;">AS</span> topic, p.post_date, p.post_title, p.post_count, p.post_name, p.comment_count</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #993333; font-weight: bold;">FROM</span> wp_posts p</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #993333; font-weight: bold;">LEFT</span> <span style="color: #993333; font-weight: bold;">JOIN</span> wp_term_relationships r <span style="color: #993333; font-weight: bold;">ON</span> <span style="color:#006600; font-weight:bold;">&#40;</span>r.object_id = p.ID<span style="color:#006600; font-weight:bold;">&#41;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #993333; font-weight: bold;">LEFT</span> <span style="color: #993333; font-weight: bold;">JOIN</span> wp_term_taxonomy t <span style="color: #993333; font-weight: bold;">ON</span> <span style="color:#006600; font-weight:bold;">&#40;</span>r.term_taxonomy_id = t.term_id<span style="color:#006600; font-weight:bold;">&#41;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #993333; font-weight: bold;">LEFT</span> <span style="color: #993333; font-weight: bold;">JOIN</span> wp_terms <span style="color: #993333; font-weight: bold;">ON</span> <span style="color:#006600; font-weight:bold;">&#40;</span>wp_terms.term_id = t.term_id<span style="color:#006600; font-weight:bold;">&#41;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #993333; font-weight: bold;">WHERE</span> t.count&gt; <span style="color: #cc66cc;color:#800000;">0</span> <span style="color: #993333; font-weight: bold;">AND</span> t.taxonomy = <span style="color: #ff0000;">'category'</span> <span style="color: #993333; font-weight: bold;">AND</span> p.post_status = <span style="color: #ff0000;">'publish'</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #993333; font-weight: bold;">GROUP</span> <span style="color: #993333; font-weight: bold;">BY</span> p.ID</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #993333; font-weight: bold;">ORDER</span> <span style="color: #993333; font-weight: bold;">BY</span> post_date <span style="color: #993333; font-weight: bold;">DESC</span> </div>
</li>
</ol>
</div>
<div class="bottom"><br/></div>
</div>
</div>
<p>
<pre class="hidden"><textarea id="copy-sql-28">
SELECT GROUP_CONCAT(wp_terms.slug) AS topic, p.post_date, p.post_title, p.post_count, p.post_name, p.comment_count
FROM wp_posts p
LEFT JOIN wp_term_relationships r ON (r.object_id = p.ID)
LEFT JOIN wp_term_taxonomy t ON (r.term_taxonomy_id = t.term_id)
LEFT JOIN wp_terms ON (wp_terms.term_id = t.term_id)
WHERE t.count> 0 AND t.taxonomy = 'category' AND p.post_status = 'publish'
GROUP BY p.ID
ORDER BY post_date DESC
</textarea></pre>
<p>The "topic" column could then return values such as "php,mysql,css".</ol>
]]></content:encoded>
			<wfw:commentRss>http://httpremix.com/mysql-order-by-field-group_concat/feed</wfw:commentRss>
		</item>
		<item>
		<title>PHP: Parsing a string from text</title>
		<link>http://httpremix.com/php-parsing-string-from-text</link>
		<comments>http://httpremix.com/php-parsing-string-from-text#comments</comments>
		<pubDate>Tue, 10 Jun 2008 19:05:56 +0000</pubDate>
		<dc:creator>jonah ellison</dc:creator>
		
		<category><![CDATA[php]]></category>

		<guid isPermaLink="false">http://httpremix.com/?p=12</guid>
		<description><![CDATA[What if you need to grab a string from text, such as the name of the department below:

Position #: 08-26
Position: Lab Assistant II
Department: Black Mesa Research Facility
Status: Full-time

Here's a quick way to pick out that string:
PHP copy to clipboard





$match = preg_match_all&#40;"/Department:(.*)/", strip_tags&#40;$body&#41;, $matches, PREG_SET_ORDER&#41;;


$deptName = trim&#40;$matches&#91;0&#93;&#91;1&#93;&#41;; 








$match = preg_match_all("/Department:(.*)/", strip_tags($body), $matches, PREG_SET_ORDER);
$deptName = trim($matches[0][1]);

]]></description>
			<content:encoded><![CDATA[<p>What if you need to grab a string from text, such as the name of the department below:</p>
<div class="sample">
Position #: 08-26<br />
Position: Lab Assistant II<br />
Department: Black Mesa Research Facility<br />
Status: Full-time
</div>
<p>Here's a quick way to pick out that string:</p>
<div class="langName">PHP <small><a href="#" onclick="javascript:copy(this,'copy-php-30');return false;">copy to clipboard</a><span></span></small></div>
<div class="syntax_hilite">
<div id="php-30"  class="inner">
<div class="php">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#0000FF;">$match</span> = <a href="http://www.php.net/preg_match_all"><span style="color:#000066;">preg_match_all</span></a><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#FF0000;">"/Department:(.*)/"</span>, <a href="http://www.php.net/strip_tags"><span style="color:#000066;">strip_tags</span></a><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#0000FF;">$body</span><span style="color:#006600; font-weight:bold;">&#41;</span>, <span style="color:#0000FF;">$matches</span>, PREG_SET_ORDER<span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#0000FF;">$deptName</span> = <a href="http://www.php.net/trim"><span style="color:#000066;">trim</span></a><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#0000FF;">$matches</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#CC66CC;color:#800000;">0</span><span style="color:#006600; font-weight:bold;">&#93;</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#CC66CC;color:#800000;">1</span><span style="color:#006600; font-weight:bold;">&#93;</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
</ol>
</div>
<div class="bottom"><br/></div>
</div>
</div>
<p>
<pre class="hidden"><textarea id="copy-php-30">
$match = preg_match_all("/Department:(.*)/", strip_tags($body), $matches, PREG_SET_ORDER);
$deptName = trim($matches[0][1]);
</textarea></pre>
]]></content:encoded>
			<wfw:commentRss>http://httpremix.com/php-parsing-string-from-text/feed</wfw:commentRss>
		</item>
		<item>
		<title>Create &#8220;Printer-Friendly&#8221; Pages with CSS and the @media Type</title>
		<link>http://httpremix.com/printer-friendly-pages-with-css</link>
		<comments>http://httpremix.com/printer-friendly-pages-with-css#comments</comments>
		<pubDate>Wed, 07 May 2008 23:50:07 +0000</pubDate>
		<dc:creator>jonah ellison</dc:creator>
		
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://httpremix.com/?p=11</guid>
		<description><![CDATA[There may be a time when a visitor wants to print a page from your website.  It's worth spending five minutes to create "printer-friendly" pages using CSS.  (Tip: navigate to "Print Preview" on your browser to see how this page looks when printed out.)  Some of you may already know about the [...]]]></description>
			<content:encoded><![CDATA[<p>There may be a time when a visitor wants to print a page from your website.  It's worth spending five minutes to create "printer-friendly" pages using CSS.  (Tip: navigate to "Print Preview" on your browser to see how this page looks when printed out.)  Some of you may already know about the <code>&lt;link rel="stylesheet" type="text/css" href="print.css" media="print" /></code> directive, however, it's better to place your print CSS within your main CSS file.  Instead of having a separate CSS file for printing (which can <a href="http://developer.yahoo.com/performance/rules.html#num_http">increase the initial load time</a> since the browser must make an additional HTTP request to the server before rendering the page), place <code>@media print {... }</code> at the bottom of your CSS file.  It must be at the bottom to override your previous declarations.</p>
<p><span id="more-11"></span>
<div class="langName">CSS <small><a href="#" onclick="javascript:copy(this,'copy-css-32');return false;">copy to clipboard</a><span></span></small></div>
<div class="syntax_hilite">
<div id="css-32"  class="inner">
<div class="css">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #6666ff;">.printContent </span><span style="color: #66cc66;">&#123;</span> <span style="color: #000000; font-weight: bold;">visibility</span>:<span style="color: #993333;">hidden</span>; <span style="color: #000000; font-weight: bold;">position</span>:<span style="color: #993333;">absolute</span>; <span style="color: #66cc66;">&#125;</span> <span style="color: #808080; font-style: italic;">/* print only content */</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #a1a100;">@media print {</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;<span style="color: #808080; font-style: italic;">/* Page content */</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;#page, <span style="color: #cc00cc;">#colContent <span style="color: #66cc66;">&#123;</span></span> <span style="color: #000000; font-weight: bold;">margin</span>:0px; <span style="color: #000000; font-weight: bold;">padding</span>:0px; <span style="color: #000000; font-weight: bold;">width</span>:<span style="color: #993333;">inherit</span>; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;<span style="color: #cc00cc;">#page <span style="color: #66cc66;">&#123;</span></span> <span style="color: #000000; font-weight: bold;">padding</span>:<span style="color: #cc66cc;color:#800000;">0</span>% <span style="color: #cc66cc;color:#800000;">5</span>%; <span style="color: #66cc66;">&#125;</span> <span style="color: #808080; font-style: italic;">/* Firefox fix for margin cut-off */</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;<span style="color: #808080; font-style: italic;">/* Hide these elements */</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;#header, #colTopic, #colAbout, #navFooter, <span style="color: #6666ff;">.noPrint</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"></span>&nbsp; &nbsp; &nbsp;<span style="color: #66cc66;">&#123;</span> <span style="color: #000000; font-weight: bold;">display</span>:<span style="color: #993333;">none</span>; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;<span style="color: #6666ff;">.pageBreak </span><span style="color: #66cc66;">&#123;</span> <span style="color: #000000; font-weight: bold;">page-break-before</span>:<span style="color: #993333;">always</span>; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;<span style="color: #6666ff;">.printContent </span><span style="color: #66cc66;">&#123;</span> <span style="color: #000000; font-weight: bold;">visibility</span>:<span style="color: #993333;">visible</span>; <span style="color: #000000; font-weight: bold;">position</span>:<span style="color: #993333;">relative</span>; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;h1 <span style="color: #66cc66;">&#123;</span> <span style="color: #000000; font-weight: bold;">color</span>:#000; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
<div class="bottom"><br/></div>
</div>
</div>
<p>
<pre class="hidden"><textarea id="copy-css-32">
.printContent { visibility:hidden; position:absolute; } /* print only content */

@media print {
     /* Page content */
     #page, #colContent { margin:0px; padding:0px; width:inherit; }
     #page { padding:0% 5%; } /* Firefox fix for margin cut-off */

     /* Hide these elements */
     #header, #colTopic, #colAbout, #navFooter, .noPrint
     { display:none; }

     .pageBreak { page-break-before:always; }
     .printContent { visibility:visible; position:relative; }
     h1 { color:#000; }
}
</textarea></pre>
]]></content:encoded>
			<wfw:commentRss>http://httpremix.com/printer-friendly-pages-with-css/feed</wfw:commentRss>
		</item>
		<item>
		<title>A Different Approach to Writing CSS</title>
		<link>http://httpremix.com/different-approach-writing-css</link>
		<comments>http://httpremix.com/different-approach-writing-css#comments</comments>
		<pubDate>Sat, 03 May 2008 15:59:22 +0000</pubDate>
		<dc:creator>jonah ellison</dc:creator>
		
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://127.0.0.1/httpremix/?p=9</guid>
		<description><![CDATA[How do you write your HTML/CSS?  Do you use unordered lists for links?  Lots of whitespace in your CSS file?  Don't know when to use an id selector or a class selector?  Learn how and why to change your coding style.
First, let's take a look at a design element that every [...]]]></description>
			<content:encoded><![CDATA[<p>How do you write your HTML/CSS?  Do you use unordered lists for links?  Lots of whitespace in your CSS file?  Don't know when to use an id selector or a class selector?  Learn how and why to change your coding style.</p>
<p><span id="more-9"></span>First, let's take a look at a design element that every website has: the navigation menu.</p>
<pre>
<style>
<!--

ul.navMain {
    list-style: none;
    margin: 0;
    padding: 10px 5px;
    padding-top:5px;
    font-weight: bold;
    }

ul.navMain li {
    display: inline;
    padding: 0 8px;
    }

ul.navMain a {
    text-decoration: none;
    padding-bottom:3px;
    border-bottom: 4px solid #ffffff;
    color: #999999;
    }

ul.navMain a.active {
    border-color: #F60;
    color:#06F;
    }

ul.navMain a:hover {
    border-color: #F60;
    color: #666666;
}

//--></style>
</pre>
<div class="sample white">
<ul class="navMain">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="langName">HTML <small><a href="#" onclick="javascript:copy(this,'copy-html-37');return false;">copy to clipboard</a><span></span></small></div>
<div class="syntax_hilite">
<div id="html-37"  class="inner">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;ul</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"navMain"</span><span style="color: #000000; font-weight: bold;">&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"#"</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"active"</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>Home<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"#"</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>Products<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"#"</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>FAQ<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"#"</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>About Us<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;li&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"#"</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>Contact Us<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/li&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/ul&gt;</span></span> </div>
</li>
</ol>
</div>
<div class="bottom"><br/></div>
</div>
</div>
<p>
<pre class="hidden"><textarea id="copy-html-37">
<ul class="navMain">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

</textarea></pre>
<p>And the ugly CSS:</p>
<div class="langName">CSS <small><a href="#" onclick="javascript:copy(this,'copy-css-38');return false;">copy to clipboard</a><span></span></small></div>
<div class="syntax_hilite">
<div id="css-38"  class="inner">
<div class="css">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">ul<span style="color: #6666ff;">.navMain </span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">list-style</span>: <span style="color: #993333;">none</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin</span>: <span style="color: #cc66cc;color:#800000;">0</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding</span>: 10px 5px;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding-top</span>:5px;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-weight</span>: <span style="color: #993333;">bold</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">ul<span style="color: #6666ff;">.navMain </span>li <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">display</span>: <span style="color: #993333;">inline</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding</span>: <span style="color: #cc66cc;color:#800000;">0</span> 8px</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">ul<span style="color: #6666ff;">.navMain </span>a <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">text-decoration</span>: <span style="color: #993333;">none</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding</span>: <span style="color: #cc66cc;color:#800000;">0</span> <span style="color: #cc66cc;color:#800000;">0</span> 3px;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">border-bottom</span>: 4px <span style="color: #993333;">solid</span> #ffffff;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">color</span>: #999999;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">ul<span style="color: #6666ff;">.navMain </span>a<span style="color: #6666ff;">.active </span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">border-color</span>: #F60;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">color</span>:#06F</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">ul<span style="color: #6666ff;">.navMain </span>a<span style="color: #3333ff;">:hover </span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">border-color</span>: #F60;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">color</span>: #666666;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
<div class="bottom"><br/></div>
</div>
</div>
<p>
<pre class="hidden"><textarea id="copy-css-38">
ul.navMain {
    list-style: none;
    margin: 0;
    padding: 10px 5px;
    padding-top:5px;
    font-weight: bold;
    }

ul.navMain li {
    display: inline;
    padding: 0 8px
    }

ul.navMain a {
    text-decoration: none;
    padding: 0 0 3px;
    border-bottom: 4px solid #ffffff;
    color: #999999;
    }

ul.navMain a.active {
    border-color: #F60;
    color:#06F
    }

ul.navMain a:hover {
    border-color: #F60;
    color: #666666;
    }
</textarea></pre>
<p>There are several things that bug me about the above code:</p>
<ol class="niceList">
<li><strong>Overuse of HTML tags (<code>&lt;ul&gt;&lt;li&gt;</code>)</strong><br />
The point of CSS is to use less HTML tags, not more.  Why use unordered lists and then completely change the functionality of how they display when we can do without them?  And what happens when we need to override how the core <code>&lt;ul&gt;</code> and <code>&lt;li&gt;</code> elements display (e.g.: <a href="http://httpremix.com/style-perfect-html-lists-ul-li-ol-li">How to Style Perfect HTML Lists</a>) but didn't "reset" the list in our CSS?  (Did you catch how  <code>ul.navMain li { ... }</code> is missing <code>margin: 0</code>?)  Less code is always better!</li>
<li><strong>id selector vs class selector</strong><br />
The id selector (<code>id="idName"</code>) and class selector (<code>class="className"</code>) have almost the exact same functionality.  The general rule of thumb is that if your element/style only appears once on your page, use an id selector.  Otherwise, use a class.  Multiple classes may also be used within a single element (<code>class="className1 className2 className3"</code>), while id selectors cannot because they're designed to only be used once as a way to identify an unique element.</li>
<li><strong>Ugly Formatting</strong><br />
Welcome to the great debate of single-line vs multi-line!  My god, look at all that hideous whitespace!  Now, whitespace is great for learning, but we're not newbies anymore, right?  If you don't understand the CSS you're writing (or copy-pasting) or it's rather convoluted, then I don't blame you for wanting to see every little property on the screen.  But otherwise, single-line is great if you want to hack out CSS quickly.</p>
<p>The advantage is that a shorter document is created: less scrolling is involved making it much easier to pick out elements.  Quicker changes = more efficiency = time saved.  And it's not like single-line CSS looks horribly messy--it's incredibly easy to know what's going on with a single glance.  We can look at any random line in a CSS file and know exactly where we are within the document, and that's beauty.</p>
<p>Does less vertical scrolling equal more horizontal scrolling?  Not necessarily. When making updates, there are certain properties we're just not going to change, like <code>display</code> or <code>float</code> or even <code>width</code>.  We put these at the very end of the line.  <code>color</code> and <code>font</code> properties are nice to have up front (as clients love to play with these).  We can also group similar attributes together, which we should be doing anyway, or use shorthand CSS (e.g., <code>background:#000 url(../img/scan_lines.gif) repeat-y; margin:10px 20px;</code> etc.).  And with widescreen monitors becoming more prevalent, this leaves developers with more horizontal real estate that should be put to use.</p>
<p>Now there are several arguments against that I can understand: you use/need a special third-party tool to help you write CSS; you have word-wrapped turned on; you like to validate your CSS and want an exact line; or you are working with single-line haters.  Otherwise, it's not "personal preference" when there is an obvious benefit to writing CSS using single lines.  It took me a couple years before I switched over, but once I did I've never looked back.</li>
</ol>
<p>The above CSS, rewritten:</p>
<div class="langName">HTML <small><a href="#" onclick="javascript:copy(this,'copy-html-39');return false;">copy to clipboard</a><span></span></small></div>
<div class="syntax_hilite">
<div id="html-39"  class="inner">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"navMain"</span><span style="color: #000000; font-weight: bold;">&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"#"</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"active"</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>Home<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"#"</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>Products<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"#"</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>FAQ<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"#"</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>About Us<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;a</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"#"</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>Contact Us<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span> </div>
</li>
</ol>
</div>
<div class="bottom"><br/></div>
</div>
</div>
<p>
<pre class="hidden"><textarea id="copy-html-39">
<div id="navMain">
    <a href="#" class="active">Home</a>
    <a href="#">Products</a>
    <a href="#">FAQ</a>
    <a href="#">About Us</a>
    <a href="#">Contact Us</a>
</div>

</textarea></pre>
<div class="langName">CSS <small><a href="#" onclick="javascript:copy(this,'copy-css-40');return false;">copy to clipboard</a><span></span></small></div>
<div class="syntax_hilite">
<div id="css-40"  class="inner">
<div class="css">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #cc00cc;">#navMain <span style="color: #66cc66;">&#123;</span></span> <span style="color: #000000; font-weight: bold;">font-weight</span>:<span style="color: #993333;">bold</span>; padding<span style="color: #3333ff;">:10px </span>5px; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">#navMain a <span style="color: #66cc66;">&#123;</span> <span style="color: #000000; font-weight: bold;">color</span>:#999; <span style="color: #000000; font-weight: bold;">padding-bottom</span>:3px; <span style="color: #000000; font-weight: bold;">margin-right</span>:1em; border-bottom<span style="color: #3333ff;">:4px </span>solid #fff; <span style="color: #000000; font-weight: bold;">text-decoration</span>:<span style="color: #993333;">none</span>; <span style="color: #000000; font-weight: bold;">float</span>:<span style="color: #000000; font-weight: bold;">left</span>; <span style="color: #000000; font-weight: bold;">display</span>:<span style="color: #993333;">block</span>; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">#navMain a<span style="color: #6666ff;">.active </span><span style="color: #66cc66;">&#123;</span> <span style="color: #000000; font-weight: bold;">border-color</span>:#f60; <span style="color: #000000; font-weight: bold;">color</span>:#06f <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">#navMain a<span style="color: #3333ff;">:hover </span><span style="color: #66cc66;">&#123;</span> <span style="color: #000000; font-weight: bold;">color</span>:#666; <span style="color: #000000; font-weight: bold;">border-color</span>:#f60;<span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
<div class="bottom"><br/></div>
</div>
</div>
<p>
<pre class="hidden"><textarea id="copy-css-40">
#navMain { font-weight:bold; padding:10px 5px; }
#navMain a { color:#999; padding-bottom:3px; margin-right:1em; border-bottom:4px solid #fff; text-decoration:none; float:left; display:block; }
#navMain a.active { border-color:#f60; color:#06f }
#navMain a:hover { color:#666; border-color:#f60;}
</textarea></pre>
<p>I'd rather look at 4 lines of CSS than 29 lines any day of the week.</p>
]]></content:encoded>
			<wfw:commentRss>http://httpremix.com/different-approach-writing-css/feed</wfw:commentRss>
		</item>
		<item>
		<title>CSS: How to Style Perfect HTML Lists (&#60;ul&gt;&#60;li&gt;, &#60;ol&gt;&#60;li&gt;&#8230;)</title>
		<link>http://httpremix.com/style-perfect-html-lists-ul-li-ol-li</link>
		<comments>http://httpremix.com/style-perfect-html-lists-ul-li-ol-li#comments</comments>
		<pubDate>Wed, 30 Apr 2008 21:21:09 +0000</pubDate>
		<dc:creator>jonah ellison</dc:creator>
		
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://127.0.0.1/26interactive/wordpress/test</guid>
		<description><![CDATA[
Here is an example of a default HTML list with no CSS styling:

This is what I consider an ugly HTML list.
Almost every website incorporates lists.  We love to make lists because it chunks data into separate, easy-to-read pieces.
There are several problems with the default style of HTML lists: they have bad spacing and browsers [...]]]></description>
			<content:encoded><![CDATA[<div class="sample">
Here is an example of a default HTML list with no CSS styling:
<ul class="default">
<li>This is what I consider an <b>ugly</b> HTML list.</li>
<li>Almost every website incorporates lists.  We love to make lists because it chunks data into separate, easy-to-read pieces.</li>
<li>There are several problems with the default style of HTML lists: they have bad spacing and browsers do not play nice with custom bullet images.</li>
<ul>
<li>Spacing Issues:
<ol>
<li>There is no distinct spacing between list items, which is annoying when reading list items that contain multiple lines.</li>
<li>The initial left indent.  Do we really need all that white space in the left margin, breaking up the list from its parent text?  No.</li>
</ol>
</li>
<li>Custom bullet images: Incorrect alignment across browsers.</li>
</ul>
<li>Let's fix this.
</ul>
</div>
<div class="sample">
Here is an example of a styled HTML list:
<ul class="niceList default">
<li>This is what I consider a <b>beautiful</b> HTML list.</li>
<li>Almost every website incorporates lists.  We love to make lists because it chunks data into separate, easy-to-read pieces.</li>
<li>There are several problems with the default style of HTML lists: they have bad spacing and browsers do not play nice with custom bullet images.</li>
<ul>
<li>Spacing Issues:
<ol>
<li>There is no distinct spacing between list items, which is annoying when reading list items that contain multiple lines.</li>
<li>The initial left indent.  Do we really need all that white space in the left margin, breaking up the list from its parent text?  No.</li>
</ol>
</li>
<li>Custom bullet images: Incorrect alignment across browsers.</li>
</ul>
<li><a href="http://httpremix.com/style-perfect-html-lists-ul-li-ol-li">Let's look at the code</a>, shall we?</li>
</ul>
</div>
<p><span id="more-7"></span></p>
<div class="langName">CSS <small><a href="#" onclick="javascript:copy(this,'copy-css-43');return false;">copy to clipboard</a><span></span></small></div>
<div class="syntax_hilite">
<div id="css-43"  class="inner">
<div class="css">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">ul<span style="color: #6666ff;">.niceList </span><span style="color: #66cc66;">&#123;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">margin-left</span>:0em; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">padding-left</span>:<span style="color: #cc66cc;color:#800000;">0</span>.2em; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">margin-bottom</span>:1em; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">ul<span style="color: #6666ff;">.niceList </span>li <span style="color: #66cc66;">&#123;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">background</span>:<span style="color: #993333;">url</span><span style="color: #66cc66;">&#40;</span>images/bullet.gif<span style="color: #66cc66;">&#41;</span> 0em <span style="color: #cc66cc;color:#800000;">0</span><span style="color: #6666ff;">.5em </span>no-<span style="color: #993333;">repeat</span>; <span style="color: #808080; font-style: italic;">/* change background em accordingly */</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">padding-left</span>: <span style="color: #cc66cc;color:#800000;">0</span>.8em; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">list-style</span>: <span style="color: #993333;">none</span>; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #6666ff;">.niceList </span>ul li <span style="color: #66cc66;">&#123;</span> <span style="color: #000000; font-weight: bold;">background-image</span>:<span style="color: #993333;">url</span><span style="color: #66cc66;">&#40;</span>images/bullet_child.gif<span style="color: #66cc66;">&#41;</span>; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">ol<span style="color: #6666ff;">.niceList </span>li, ul<span style="color: #6666ff;">.niceList </span>li <span style="color: #66cc66;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin-bottom</span>:<span style="color: #cc66cc;color:#800000;">0</span>.5em; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">ol<span style="color: #6666ff;">.niceList </span><span style="color: #66cc66;">&#123;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">margin-left</span>:<span style="color: #cc66cc;color:#800000;">1</span>.5em; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">padding-left</span>:0px; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #6666ff;">.niceList </span>ol li <span style="color: #66cc66;">&#123;</span> </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">list-style</span>:<span style="color: #993333;">decimal</span>; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">background-image</span>:<span style="color: #993333;">none</span>; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000000; font-weight: bold;">padding-left</span>:0em; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
<div class="bottom"><br/></div>
</div>
</div>
<p>
<pre class="hidden"><textarea id="copy-css-43">
ul.niceList {
  margin-left:0em;
  padding-left:0.2em;
  margin-bottom:1em;
}
ul.niceList li {
  background:url(images/bullet.gif) 0em 0.5em no-repeat; /* change background em accordingly */
  padding-left: 0.8em;
  list-style: none;
}
.niceList ul li { background-image:url(images/bullet_child.gif); }

ol.niceList li, ul.niceList li { margin-bottom:0.5em; }

ol.niceList {
  margin-left:1.5em;
  padding-left:0px;
}
.niceList ol li {
  list-style:decimal;
  background-image:none;
  padding-left:0em;
}
</textarea></pre>
<p>Do not use <code>list-style-image</code>!  This property is not cross-browser friendly and has alignment issues.  Take a look below:</p>
<p><img src="http://static.httpremix.com/img/list-style-image.png" alt="list-style-image.png" class="border"></p>
<p>Firefox aligns the bullets too south, while IE7 aligns them too north, and neither is centered.  WTF?!!  The alternative is "<code>background</code>," which gives us more control and predictability.</p>
<p>If you just want to remove the left margin and add padding between list items instead using a customized bullet image, less code is needed:</p>
<div class="langName">CSS <small><a href="#" onclick="javascript:copy(this,'copy-css-44');return false;">copy to clipboard</a><span></span></small></div>
<div class="syntax_hilite">
<div id="css-44"  class="inner">
<div class="css">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">ul, ol <span style="color: #66cc66;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin-left</span>:<span style="color: #cc66cc;color:#800000;">1</span>.5em; <span style="color: #000000; font-weight: bold;">padding-left</span>:0px; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">li <span style="color: #66cc66;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin-bottom</span>:<span style="color: #cc66cc;color:#800000;">0</span>.5em; <span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
<div class="bottom"><br/></div>
</div>
</div>
<p>
<pre class="hidden"><textarea id="copy-css-44">
ul, ol { margin-left:1.5em; padding-left:0px; }
li { margin-bottom:0.5em; }
</textarea></pre>
<p><a href="http://static.httpremix.com/src/perfect-html-lists.zip" class="download">Download Example &#038; Source</a></p>
]]></content:encoded>
			<wfw:commentRss>http://httpremix.com/style-perfect-html-lists-ul-li-ol-li/feed</wfw:commentRss>
		</item>
		<item>
		<title>About Virtual Private Servers</title>
		<link>http://httpremix.com/virtual-private-servers</link>
		<comments>http://httpremix.com/virtual-private-servers#comments</comments>
		<pubDate>Wed, 30 Apr 2008 16:25:29 +0000</pubDate>
		<dc:creator>jonah ellison</dc:creator>
		
		<category><![CDATA[optimization]]></category>

		<guid isPermaLink="false">http://127.0.0.1/26interactive/wordpress/virtual-private-hosting</guid>
		<description><![CDATA[A Virtual Private Server is the best hosting solution for any serious website or web developer, next to a dedicated machine. By partitioning a physical server, a hosting provider can offer an inexpensive environment with full root access. This means developers can install whatever custom software their heart desires, as well as reboot it at [...]]]></description>
			<content:encoded><![CDATA[<p><!-- google_ad_section_start -->A Virtual Private Server is the best hosting solution for any serious website or web developer, next to a dedicated machine. By partitioning a physical server, a hosting provider can offer an inexpensive environment with full root access. This means developers can install whatever custom software their heart desires, as well as reboot it at will. Unlike shared hosting, a VPS has its own RAM and CPU blocks, giving stable, reliable performance, starting around $15-$20/month.<!-- google_ad_section_end --></p>
<p><span id="more-6"></span><script type="text/javascript"><!--
google_ad_client = "pub-1789663679765301";
/* 336x280 for Pages, created 4/30/08 */
google_ad_slot = "7448067277";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script><script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
]]></content:encoded>
			<wfw:commentRss>http://httpremix.com/virtual-private-servers/feed</wfw:commentRss>
		</item>
	</channel>
</rss>
