• Substratum: Tiny, Semantic CSS Framework for Creating Columns
• CSS Scaffolding
• When Using a Grid Layout CSS Framework, Do the Math
• Blueprint: Taking a Close Look at grid.css
• Blueprint CSS Tutorial File

Also I’m using less JavaScript than I was before. Instead the hover effects are accomplished using CSS3 transitions.

For instance, here is the CSS for the hover effect on the sidebar nav:

-webkit-transition-property: background, margin-left;
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-timing-function: linear, ease-in;
-moz-transition-property: background margin-left;
-moz-transition-duration: 0.5s, 0.5s;
-moz-transition-timing-function: linear, ease-in;
-o-transition-property: background margin-left;
-o-transition-duration: 0.5s, 0.5s;
-o-transition-timing-function: linear, ease-in;
transition-property: background margin-left;
transition-duration: 0.5s, 0.5s;
transition-timing-function: linear, ease-in;

Then I simply redefine the background, right and left margins for the hover state:

background: #0D7B15;
margin-left: -1em;

The browser then just takes 0.5 seconds to transition from the default state to the hover state.

I also added some other transitions as well. For instance, you can delay when the transition starts. See if you can spot this one:

-webkit-transition-property: top, left;
-webkit-transition-duration: 5s, 5s;
-webkit-transition-timing-function: linear, linear;
-webkit-transition-delay: 32s, 32s;
-moz-transition-property: top, left;
-moz-transition-delay: 32s, 32s;
-moz-transition-duration: 5s, 5s;
-moz-transition-timing-function: linear, linear;transition-property: top, left;
transition-duration: 5s, 5s;
transition-delay: 32s, 32s;
transition-timing-function: linear, ease-in-out;

This effect is attached to an ‘animate’ class that is triggered by JQuery when the page loads. There’s a 32 second delay and then the transition between states begins. It’s pretty fun stuff.

Caveat: Transitions are only supported in Firefox 4+, but they’ve been supported in WebKit browsers for a long time. Internet Explorer will not support them until version 10.Similar Posts:

• New Theme
• No Flash Required
• Blueprint: Taking a Close Look at grid.css
• When to Use CSS content Property
• Why Use Blueprint and the 960 Grid System in the Baseline Theme?

• ez-50 (ez-css)
• container_12 (960GS)
• grid_1 (960GS)
• span-4 (Blueprint)

After years of adopting standards that keep presentation separate from the markup, frameworks like these (and others) put it right back into the code. Not only is that a bad practice, but it removes one of the chief benefits of CSS: the ability to change your presentation without touching the markup.

The most common problem these frameworks solve is laying out columns. So I came up with a handful of CSS classes that solve the same problem, but do so in a way that will allow you to alter the appearance of the pages without altering the markup.

These classes are applicable in a general way (i.e., within the content), so it’s useful to keep them named as they are for that purpose. You can also copy these same styles to your ids to get the desired widths and column layout. I encourage you to write these styles into page ids whenever possible as that will make your page markup more semantic. You should think of these classes more like scaffolding than a framework. You can get started quickly, then modify them to meet your needs. The minified file is only 412 bytes.

/* anthonygthomas.com/
   v1.0 | 20110417
   License: none (public domain)
*/

/******

 # Table of Contents #

## Define columns
### Last column
## Narrow column
### Last narrow column
## Wide column
## First column
## Column clearfix

 *******/

/* Define columns */
/* apply this to any block element */
.column {
    display: inline-block;
    float:left;
    margin-right: 2%;
    width: 48%;
}
    /* Last column */
    /* apply this to the last column */
    .column.last {
	margin-left: 2%;
	margin-right: 0;
	width: 48%;
    }

/* Narrow column */
.column.narrow {
    margin-right: 5%;
    width: 30%;
}
    /* Last narrow column */
    .column.narrow.last {
	margin-left: 0;
	margin-right: 0;
    }

/* Wide column */
.column.wide {
    margin-right: 4%;
    width: 66%;
}

/* First column */
.first {
    clear:left;
}

/* Column clearfix */
/* perishablepress.com/press/2009/12/06/new-clearfix-hack/ */
.column:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .column             { zoom: 1; } /* IE6 */
*:first-child+html .column { zoom: 1; } /* IE7 */

Here is a demo page.

The Classes

The column Class

/* apply this to any block element */
.column {
    display: inline-block;
    float:left;
    margin-right: 2%;
    width: 48%;
}

This creates a 50% column for any block element. By default columns float left, so the next consecutive element with the same class will end up on the right side of the preceding element. To get rid of the 2% margin in the right column and add a 2% gutter to the left of the second column (for a total of a 4% gutter) use the .last class:

/* apply this to the last column */
    .column.last {
	margin-left: 2%;
	margin-right: 0;
	width: 48%;
    }

The narrow Class (three columns)

This creates a 30% width column with a 5% right margin. To make the third column work correctly, you need to add a last class.

/* Narrow column */
.column.narrow {
    margin-right: 5%;
    width: 30%;
}
    /* Last narrow column */
    .column.narrow.last {
	margin-left: 0;
	margin-right: 0;
    }

The wide Class

/* Wide column */
.column.wide {
    margin-right: 4%;
    width: 66%;
}

The first Class

/* First column */
.first {
    clear:left;
}

Apply this to the first column to force the element to wrap below it’s preceding element.

The clearfix

This is a common “clearfix” method. You can find variations on this all over the web. This one is from Perisable Press. Rather than selectively apply the class, I wrote into a class that I knew needed clearing.

/* Column clearfix */
/* perishablepress.com/press/2009/12/06/new-clearfix-hack/ */
.column:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .column             { zoom: 1; } /* IE6 */
*:first-child+html .column { zoom: 1; } /* IE7 */

This is not a completely tested framework. I make no guarantees that it will work in all old browsers.

The thing I encourage you to take away is that CSS frameworks–if used as-is–are not semantic. It’s not hard to come up with your own, more semantic framework. Instead of thinking of these as grid systems, you should think of them as scaffolding. This is a good place to start. Take it from here and modify it to fit your own needs.Similar Posts:

• CSS Scaffolding
• Blueprint: Taking a Close Look at grid.css
• When Using a Grid Layout CSS Framework, Do the Math
• Blueprint CSS Tutorial File
• New Theme

Proper document structure in HTML 4 and XHTML. (http://cssglobe.com/post/1213/how-to-use-headings-in-html)

This has changed in HTML5. HTML5 has “outlining elements” that essentially reset the page hierarchy. This is a little tough to get your head around if you’ve spent as many years as I have using the page structure in the figure above. A diagram of an HTML5 document might look like this:

A demonstration of HTML5 "sectioning" elements.

Notice the difference? It’s fairly subtle, but most recognizable in the section element. In (X)HTML, the headings in the article section would be subject to the same hierarchy as the rest of the document so article headings would have to start with h3 or maybe even h4. In HTML5, nav, section, article and aside are “sectioning” elements, so they can have their own hierarchy of headings. Notice that the header HTML5 tag is not a sectioning element, so it’s h1 still rules the page.

Note: No browsers support this outlining algorithm. (I know.) It’s coming, so I think it’s important to get our heads around it now.Similar Posts:

• HTML5 Document Structure
• Baseline Theme Version 1.1
• Why Use Blueprint and the 960 Grid System in the Baseline Theme?
• Blueprint CSS Tutorial File
• CSS Scaffolding

This whole adventure started for me when I went looking for a way to parse an RSS feed. Contrary to those who proclaim that RSS is dead, at it’s heart, RSS is XML. As such it’s a useful method to access content. In my case, I wanted to parse my blog RSS feed as well as my most recent Tweets. That was revelation number one.

RSS is XML > XML has a structure that can be put into objects in PHP

To many of my friends and colleagues, this may seem incredibly simple. To me it was a revelation that opened up a new door. I’ve never tried to create an RSS parser before. Suddenly it was less daunting. (Aside: For me, simple truths often come as revelations. To know me is to know this.)

Parsing the RSS Feed

It turns out that PHP 5 has some really handy tools for dealing with HTML and XML in the DOMDocument class.

First, we create an array to store the XML. Next instantiate DOMDocument and call the load function:

$doc = new DOMDocument();
$doc->load($url);

Then it’s as simple as looping through the XML nodes and storing what you want in the $xml array. For this use getElementsByTagName:

foreach ($doc->getElementsByTagName('item') as $node)
{
    //do stuff
}

In my case I knew the most I wanted was a simple list with title, description, link and date. Thus:

foreach ($doc->getElementsByTagName('item') as $node)
{
    $rss = array (
        'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
        'description' => $node->getElementsByTagName('description')->item(0)->nodeValue,
        'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
        'date' => $node->getElementsByTagName('pubDate')->item(0)->nodeValue
        );
    }
}

Now each loop loads the information I want into an array called $rss. Next just push that into the $xml array:

foreach ($doc->getElementsByTagName('item') as $node)
{
    $rss = array (
        'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
        'description' => $node->getElementsByTagName('description')->item(0)->nodeValue,
        'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
        'date' => $node->getElementsByTagName('pubDate')->item(0)->nodeValue
        );
      array_push($xml, $rss);
    }
}

Finally I serialized the data to store it in a cache file. So we end up with:

protected function getFeed($url)
{
    $xml = array();
    $doc = new DOMDocument();
    $doc->load($url);
    foreach ($doc->getElementsByTagName('item') as $node)
    {
      $rss = array (
        'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
        'description' => $node->getElementsByTagName('description')->item(0)->nodeValue,
        'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
        'date' => $node->getElementsByTagName('pubDate')->item(0)->nodeValue
        );
      array_push($xml, $rss);
    } //endforeach element ids
    return serialize($xml);
  }
}

So now we can deal with the RSS information. Next we just have to create a way to cache it so the feed isn’t unnecessarily pulled in over and over. This is when another liberating revelation came my way. I began to look for methods of caching and I saw the following advice on a forum:

Get the feed. Write it to a text file. For each new request, check the mod time of the text file. It enough time has passed, update the file.

There are probably more complex caching algorithms than this, but it seemed like a good place to start. So I wrote a caching function. It takes an array with two parameters. The name of the service as the array key and the url of the RSS feed. First we check to see if a cache file exists, and if it does, we check to see whether or not it has expired. I chose an arbitrary span of 60 seconds for my cache file:

public function checkCache($data=array())
{
    foreach ($data as $service => $feed)
    {
      $path = '/tmp/' . $service . '.cache';
      if ((!file_exists($path) || time() - filemtime($path) > 60) && $cache = fopen($path, 'w+'))
      {
           // do stuff
      }
    }
}

So if there is no file, or the requisite time has expired and the file can be opened we call the aforementioned getFeed function to get the feed data, write it to the file and send it to the webpage:

$rss_contents = $this->getFeed($feed);
fwrite($cache, $rss_contents);
fclose($cache);
return unserialize($rss_contents);

If the cache doesn’t need to be updated, we simply read it and send the data that way:

$cache = fopen($path, 'r');
return unserialize(file_get_contents($path)); // remember to unserialize since we serialized it initially
fclose($cache);

The whole function looks like this:

public function checkCache($data=array())
{
  foreach ($data as $service => $feed)
  {
    $path = '/tmp/' . $service . '.cache';
    if ((!file_exists($path) || time() - filemtime($path) > 60) && $cache = fopen($path, 'w+'))
    {
      $rss_contents = $this->getFeed($feed);
      fwrite($cache, $rss_contents);
      fclose($cache);
      return unserialize($rss_contents);
    }
    else
    {
      $cache = fopen($path, 'r');
      return unserialize(file_get_contents($path));
      fclose($cache);
    }
  }
}

The entire class together looks like this:

<?php
class RssParser
{
  public function checkCache($data=array())
  {
    foreach ($data as $service => $feed)
    {
      $path = '/tmp/' . $service . '.cache';
      if ((!file_exists($path) || time() - filemtime($path) > 60) && $cache = fopen($path, 'w+'))
      {
        $rss_contents = $this->getFeed($feed);
        fwrite($cache, $rss_contents);
        fclose($cache);
        return unserialize($rss_contents);
      }
      else
      {
        $cache = fopen($path, 'r');
        return unserialize(file_get_contents($path));
        fclose($cache);
      }
    }
  }

  protected function getFeed($url)
  {
    $xml = array();
    $doc = new DOMDocument();
    $doc->load($url);
    foreach ($doc->getElementsByTagName('item') as $node)
    {
      $rss = array (
        'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
        'description' => $node->getElementsByTagName('description')->item(0)->nodeValue,
        'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
        'date' => $node->getElementsByTagName('pubDate')->item(0)->nodeValue
        );
      array_push($xml, $rss);
    } //endforeach element ids
    return serialize($xml);
  }
}

Finally, we instantiate it in the page where we’re going to use it and loop through it:

<?

include_once('/path/to/rss_parser.class.php'); // include the php file with the class

$parser = new RssParser(); // instantiate the class
$blog_feed = $parser->checkCache(array('blog' => 'http://yourdomain.com/feed/')); // load the RSS
?>
<ul>
<?
foreach ($blog_feed as $key => $items)
{
    if ($key < 5): ?>
	<li><a href="<?= $items['link'] ?>"><?= $items['title'] ?></a></li>
    <?php
    endif;
} //endforeach
?>
</ul>

Done!

Caveats

Depending on your server configuration, you may need to put the class in your public directory. If you need to do that, make sure you put it in a directory with ’750′ permissions.

Also, your PHP configuration may not allow you to open urls with fopen. In that case, I suggest you use the cURL library.

This is a very simple RSS parsing and caching engine, but it works and it’s a good start to working with PHP and XML.Similar Posts:

• Simple RSS Parsing and Caching Using PHP
• CakePHP Console ACL Help File
• Getting Blueprint CSS & JavaScript Libraries Into Your CakePHP Layout
• An Unexpected Problem with CakePHP and Email Elements
• No Flash Required

content: 'Add this.';

The code above will append “Add this.” to the element, id or class of our CSS declaration. The problem with this is that we’re putting content into our presentation code. Also, this content is not accessible by screen readers or search engine crawlers. A good rule of thumb is to use this property as a means of progressive enhancement. Generally speaking, I like to use it for presentation that enhances the site, but contributes nothing semantically.

Here’s an example:

Let’s say we want to use this icon to denote links that are external to our site:

Use the content property:

a.external:after {
    content: url(path/to/external.png);
}

The image itself provides no semantic value to the document. It’s merely an enhancement and would be ignored by screen readers anyway. We can safely use content in this case. Another good use is this tutorial for creating CSS-only arrows.Similar Posts:

• When to Use CSS content Property
• HuffPost Applies AB Testing to Headlines via (@bigboxcar via @mjkeliher)
• Blueprint CSS Readme File
• Anger Content Management
• Baseline Theme Version 1.1

1. jQuery UI is now loaded using wp_enqueue_script("jquery-ui"); instead of linking to Google’s hosted copy.
2. The code for loading Superfish uses this syntax:

   jQuery(document).ready(function() {
           jQuery('ul.sf-menu').superfish();
       });

3. Lists will now obey margins of neighboring floating elements by default because I declared this in style.css:

   div#content ul, div#content ol {
   	list-style-position: inside;
   }

Later versions of WordPress don’t support the ‘$’ syntax normally used with jQuery. Wherever you would normally use ‘$’ (such as $(document).ready ();), you have to use ‘jQuery’ instead (jQuery.document.ready();). There were a couple of other housekeeping items like reformatting style.css and creating a table of contents for it. Baseline should be all set to work with the latest versions of WordPress again. Download it here.Similar Posts:

• Baseline Theme Version 1.1
• Introducing the Baseline Development WordPress Theme
• Baseline WordPress Theme Version 1.0.2
• Why Use Blueprint and the 960 Grid System in the Baseline Theme?
• Incorporating Blueprint CSS Into Your New WordPress Theme

For one more week I’m working in a research clinic. One of the things we need to keep track of is who is late in getting us a sample. We need to check for blood and throat samples (which come from swishing some saline around in the mouth). This can be done by hand, but soon the study will grow and the number of participants will make that hard to manage. So I just want to check to see who is late and send out an email to staff to let them know.

This function exists in my Patient controller:

function cron_delinquency() {

	if (!defined('CRON_DISPATCHER')) // make sure the request comes through the cron dispatcher
	{
		$this->redirect('/'); exit('Invalid Request');
	}
	/* this looks up active patients who do not have an patient_id ending in "D". "D" indicates they are a donor and we only need one specimen from them. */
	$active = $this->Patient->find('list', array(
		'conditions' => array(
			'Patient.id LIKE \'T%\' AND Patient.id NOT LIKE \'%D\'',
			'Patient.withdrawn != \'y\'',
			'Patient.active="1"'),
		));
	$in = '\''; /* the patient_id's start with a "T" meaning all the patient_id's need to be enclosed in quotes */

	$in .= implode('\', \'', $active); // implode the list of patient_id's

	$in = $in . '\''; // end it all with a quote

	$blds = $this->Patient->Specimen->find('list', array( // find the blood specimens for this group of patients
		'conditions' => array(
			'Specimen.patient_id IN (' . $in .')',
			'Specimen.type' => array('BLD')
			),
		'fields' => array('patient_id', 'draw_date'),
		'order' => array('patient_id' => 'ASC', 'draw_date' => 'ASC')

		));

	$thrs = $this->Patient->Specimen->find('list', array( // find the throat samples for this group of patients
		'conditions' => array(
			'Specimen.patient_id IN (' . $in .')',
			'Specimen.type' => array('THR')
			),
		'fields' => array('patient_id', 'draw_date'),
		'order' => array('patient_id' => 'ASC', 'draw_date' => 'ASC')

		));

/* My Patient model has a function to filter arrays and return only those that are older than the proved Unix timestamp. */
	$delinquentBlood = $this->Patient->find_delinquent($blds, 2419200); // 2419200 = 4 weeks; 3628800 = 6 weeks
	$delinquentThroat = $this->Patient->find_delinquent($thrs, 3628800);

	if(count($delinquentBlood) > 0 || count($delinquentThroat) > 0) // if we find any who are delinquent
	{

		asort($delinquentBlood); // sort them
		asort($delinquentThroat);

		$data['delinquentBlood'] = $delinquentBlood;
		$data['delinquentThroat'] = $delinquentThroat;
		$data['bloodCounter'] = count($delinquentBlood);
		$data['throatCounter'] = count($delinquentThroat);

		$this->set('data', $data);

		$this->Email->to 	  = $to;
		$this->Email->from		= 'LCIS <xxxxxxx@umn.edu>';
		$this->Email->subject	= 'PPG Delinquency Report: ' . $bloodCounter ." Subjects With Blood Specimens Due; " . $throatCounter . " With Throat Specimens Due.";
		$this->Email->sendAs	= 'html';
		$this->Email->template	= 'viptm_delinquency';
		$this->Email->send();
	}
}

It’s that highlighted bit that was really giving me trouble. Previously I had been setting those variables like so:

$this->set(compact('delinquentBlood', 'delinquentThroat', 'bloodCounter', 'throatCounter'));

Ordinarily this would work with any other view, but the email element I have set up for this function was acting as if they variables weren’t set at all. It wasn’t until I put them in an array called $data, that I could use them in my email element. It was puzzling and it took me about an hour to figure that out, but once I did my email reports came with beautiful data.Similar Posts:

• An Unexpected Problem with CakePHP and Email Elements
• CakePHP: Containable Behavior is Your Friend
• Simple RSS Parsing and Caching Using PHP
• Roll Your Own CakePHP Components
• Use Functions from Other Controllers While Maintaining MVC Architecture in CakePHP

I used the Baseline theme as a launching pad for this website. At least for me, it serves as a good starting point when you begin developing a brand new theme.

If you find this useful, you might be interested in checking out Jeff Star’s functions.php template.Similar Posts:

• Baseline WordPress Theme Version 1.0.2
• Baseline Theme Version 1.0.1
• Baseline Theme Version 1.1
• Introducing the Baseline Development WordPress Theme
• Access to Free Music and Emotional Connections

I just updated the theme of this site so:

1. It uses even less JavaScript (all animations and transformations are done w/ CSS3 tranforms)
2. It’s HTML5

More on both those points in a post soon. The upshot is that this post refers to a past theme and may be confusing.

I just added a pretty sweet bit of eye candy to my nav menu using strictly CSS & JQuery. The method is here. The code is here.

You do need to have a either a webKit or Mozilla browser for it to work properly. The point is that there are fewer and fewer things that Flash can do that can’t be done with HTML, JavaScript and CSS. In fact, just about every single bit of animation I’ve had done in Flash over the last couple of years could be recreated with JQuery & CSS3.

UPDATE

Since I couldn’t get the z-index to function properly in Internet Explorer, I used JQuery’s .browser property so the function only runs in supported browsers–namely, Mozilla or WebKit. The function actually degraded fairly well, except for Internet Explorer’s buggy handling of z-index. For reference, I’ve included my version of the plug-in because it has this and other subtle variations.

(function($) {
	if ($.browser.webkit || $.browser.mozilla) {

		$.fn.spasticNav = function(options) {

			options = $.extend({
				overlap : 2,
				speed : 500,
				reset : 1500,
				color : '#BDD2FF',
				easing : 'easeOutExpo'
			}, options);

			return this.each(function() {

			 	var nav = $(this),
			 		currentPageItem = $('.current_page_item', nav),
			 		blob,
			 		reset;

			 	$('<li id="blob"></li>').css({
			 		width : currentPageItem.outerWidth(),
			 		height : currentPageItem.outerHeight() + options.overlap,
			 		left : currentPageItem.position().left,
			 		top : currentPageItem.position().top - options.overlap / 2,
			 		backgroundColor : options.color
			 	}).appendTo(this);

				$('.current_page_item a').css('z-index', 1000);

			 	blob = $('#blob', nav);

				$('li:not(#blob)', nav).hover(function() {
					// mouse over
					clearTimeout(reset);
					blob.animate(
						{
							left : $(this).position().left,
							width : $(this).width()
						},
						{
							duration : options.speed,
							easing : options.easing,
							queue : false
						}
					);
				}, function() {
					// mouse out
					reset = setTimeout(function() {
						blob.animate({
							width : currentPageItem.outerWidth(),
							left : currentPageItem.position().left
						}, options.speed)
					}, options.reset);

				});

			}); // end each

		};

	}

})(jQuery);

Similar Posts:

• No Flash Required
• New Theme
• Baseline Theme Version 1.1
• Blueprint: Taking a Close Look at grid.css
• Display Form Fields Based on Selection Using JQuery