Tony Thomas

Media Queries for High Pixel-density Devices

admin — Sun, 22 Apr 2012 23:46:12 +0000

Images continue to be a major challenge for mobile web development. I’ve written about a technique to evaluate screen dimensions and pixel-density using JavaScript. I recently came across some vendor-prefixed media queries to evaluate screen density right in your CSS. (Hat tip to Erik Runyon.)

The technique involves creating two sets of background images. One standard-sized version and a double-sized version (@2x) for high pixel-density screens like the Retina display or Droid phone display. For the purposes of this example, let’s say I have a default icon that’s 50px X 50px.

#link-id a { background-image:url(images/icon.png); }

The Motorola Droid has a pixel-density of 1.5 so I set that as my baseline.

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3/2),
	only screen and (min--moz-device-pixel-ratio: 1.5),
	only screen and (min-device-pixel-ratio: 1.5) {
		#link-id a {
			background-image:url(images/icon@2x.png);
		}
}

Notice the subtle difference in how the ratio is calculated for Opera. Also, Mozilla’s vendor prefix has a slightly different syntax. I’m following Erik Runyon’s advise here and using Apple’s style guidelines by naming the hi-res icon with the same name as my normal-resolution icon, but with @2x appended. In this case, the “@2x” version is 100px X 100px. The next thing you’ll have to do is scale the hi-res icon down.

background-size: 50px 50px;

That’s it. Now high pixel-density devices will render a suitably high-resolution image and normal-resolution devices will get a smaller image.Similar Posts:

Using Impress.js

admin — Fri, 09 Mar 2012 17:08:14 +0000

Update: There is at least one WYSIWYG impress.js editor available now.

I came across Impress.js a while back and I was, well, impressed. It makes sense to do presentations on the web, given the powerful animations and transitions available in modern browsers. Impress is sort of like Prezi improved. Improved because it takes advantage of 3d animation. It does require some technical skill however. You need to know a bit about HTML5 and you have to be able to code a web page and write styles.

Right now you can only learn how to use Impress.js by reading the comments and experimenting. I thought it might be good to go through each of the features here to give a sense of it’s capabilities. If you’re interested, there aren’t really any insights here that you can’t find in the source.

The first thing is that you have to have a story to tell. Impress.js does nothing for you if you don’t have a narrative. So plan out what you want to say. Personally, write out what I want to say in any presentation in prose first. Just words. That way I can get a cohesive narrative going with good verbal transitions. Then I think about the visual stuff.

Assuming you know what you want to say, let’s move on.

First you’ll need to download the JavaScript. Next set up an HTML document with the HTML5 doctype. (Impress.js takes advantage of HTML5′S data attribute, so HTML5 is necessary.)




    Impress.js Presentation

The slides need to go into an element with the id of “impress.” It’s a div above, but it can be anything. The comments in the source also suggest adding the class, “impress-not-supported” to the #impress div. This class will be added if the browser does not support impress, but it’s good to have it there for browsers without JavaScript enabled. impress-not-supported allows you to provide a fallback message.

Options

Now things get interesting. Each slide should be within #impress and have a class of “step.” Positioning information is stored in data attributes. First off are the x and y coordinates. It’s important to note that we’re defining the x and y coordinates of the center of the element in question.

Our first slide

You can give you slides ids so you can link to a particular slide. Id’s are not required, however. If you don’t add them, impress.js will add a #step-N id to each element and append the hash to the url. While a hash syntax of #/step-N will still work, it’s better to use a standard hash like #step-N so that links will still work without JavaScript.

The next dimension we can control is scale:

Slide content

Note the data-scale attribute above. In this case, the slide is scaled down by a factor of 4, then scaled up to full-scale during the transition.

We can also control rotation:

Slide Content

For this, use data-rotate. In the example above, the slide is rotated 90 degrees.

And now we go 3d:

Slide content.

The data-z attribute above places this slide 3000 pixels away along the z-index.

Finally, we can control rotation along axes:

Those are the options. I had a little fun creating a version of my résumé. It’s pretty fun. I can also see some storytelling potential with this. Go forth and impress!Similar Posts:

Fun With JQuery Tubular

admin — Sat, 03 Mar 2012 20:39:14 +0000

I came across Sean McCambridge’s JQuery Tubular plugin a while back and I thought it would be fun to experiment with it. So I set up a little demo and I thought I’d walk through it here.

I should say that it wasn’t until I came across Phil Plait’s amazing moon simulation that I was inspired to build the demo.

I should also say that my example is completely unnecessary given Sean’s documentation. It’s really as simple as this:

$('body').tubular('someYTid','video'); // where someYTid is the YouTube ID and wrapper is your containing DIV.

Once you have JQuery and JQuery Tubular linked in the head of your document and replace ‘someYTid’ with the id of your YouTube video, it will just work. The rest is styling. In the interest of explaining things all in one place, I’ll walk through what I did.

First, you need to set up the JQuery Tubular plugin and dependencies in your document:

I’ve loaded JQuery using Google’s CDN, HTML5 Shiv (because I’m using the HTML5 Doctype), SWFObject and the JQuery Tubular plugin linked above.

Next I set up a few styles. First I load some Google-hosted fonts:

Then I added a few styles of my own. (This is the “style to taste” portion.)

/* Use Stardos Stencil for headings */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Stardos Stencil', cursive;
	font-style: normal;
	font-weight: 400;
	font-size: 64px;
	text-transform: none;
	text-decoration: none;
	letter-spacing: 0em;
	word-spacing: 0em;
	line-height: 1.4;
}
/* links are white and bold */
a {
	color: #fff;
	font-weight: bold;
}
/* Give the body a black background and get rid of browser-default margins and padding */
body {
	background: #000;
	margin: 0;
	padding: 0;
}
/* Any text needs to use absolute positioning and have a high z-index to float above the background video */
h1 {
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	position: absolute;
	right: 20px;
	top: 20px;
	z-index: 1000;
}
/* Use Muli for paragraphs and set up absolute positioning and high z-index */
p {
	color: #fff;
	font-family: 'Muli', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 13px;
	left: 20px;
	line-height: 1.4;
	position: absolute;
	word-spacing: 0em;
	text-decoration: none;
	text-transform: none;
	width: 150px;
	z-index: 1000;
}
/* Position paragraphs */
p#first {
	top: 20px;
}
p#last {
	top: 50px;
}

Next I set up the JavaScript. I really didn’t need anything besides the one line of JavaScript at the top of this post, but I wanted to add a few other fancy animations and hover effects. (You could do a lot of this w/ CSS animations/transitions, but that’s a topic for another post.)

$().ready(function()
{
    // Instantiate the tubular plugin to load the awesome moon video
    $('body').tubular('woTCsNNfYEE','video'); // where someYTid is the YouTube ID and wrapper is your containing DIV.

    // Fade the overlaid text after 5 seconds
    $('.fade').delay(5000).animate({
        opacity: .5
    }, 1000);

    // Add a hover effect to those same element that are faded above
    $('.fade').hover(function()
    // mousein
    {
        $(this).animate({opacity:1});},
    // mouseout
    function()
    {
        $(this).animate({opacity:.5});
    });
});

That’s it. If you take a look at Sean’s example, there is more you an do to leverage SWFObject for controlling the video. Use cases for this plugin may be limited, but I can see lots of potential for neat page designs.Similar Posts:

One Site

admin — Wed, 29 Feb 2012 03:23:56 +0000

I just did a little adjusting to this WordPress theme so that the site should render well on all devices now. It looked pretty good before on smartphones before, but I was employing some mobile detection to load some different styles and only render the sidebar for desktop browsers.

The main problem with this was that it messed with my cache. If a mobile browser visited the site, the mobile version was cached and served until the cache expired.

With a little more experience under my belt, it was incredibly simple to handle layout changes with media queries instead. In fact, it’s much simpler than the method I used before.

Admittedly, my layout is fairly simple. There are only a few images to deal with. Almost everything is done w/ CSS. So, all I really wanted to do was get rid of my floats on small screens. First I took the “mobile first” approach and got rid of my floats by default. Then I decided it would render well enough on a tablet at 768 pixels wide, so I set that as my cut-off.

@media only screen and (min-width : 768px) {
   section#content {
       float: left;
       width: 73%;
   }
   aside {
       clear: none;
       float: left;
       width: 20%;
   }
}

The media query above displays the category navigation (which I have in an aside element) to the right. Anything smaller and the categories display underneath the list of blog posts.

This is a very simple example, but it gives you an idea of how easy it can be to make your design responsive.

The other bit I added was this:

This essentially tells high pixel-density devices to render the content like their normal pixel-density counterparts. This meta declaration has been of some interest to me lately. It dates back to 2007 and the first iPhone. You see, Steve Jobs made a decision for you. Steve Jobs decided that the iPhone should deliver a rich web experience like any other computer. So when a page loads in Mobile Safari, it’s scaled down and rendered at a functional width of 980 pixels. That means your page looks tiny unless you instruct it to scale up with the meta content above.

The end result is that adding one meta tag and ten lines of CSS turned my design into a responsive one.
Similar Posts:

Responsive Images: Keep It Simple; Keep It Small

admin — Fri, 17 Feb 2012 01:58:03 +0000

There’s a lot of excitement about responsive design in the mobile web development world. One of the techniques used in responsive design is responsive or adaptive images. There are a handful of techniques out there including CSS fluid images, using overflow:hidden to crop images and using a combination of .htaccess settings and PHP to deliver device-specific images.

The first two solutions are fairly simple, but ignore one problem: serving a larger-than-necessary image over a potentially slow network to a user who may have limitations on the amount of data they can receive. Keeping website size down is also important now because Google is using site speed as a criterion for search rankings. So, while I find the first two solutions interesting, I don’t think they’re the best we can do.

The adaptive image technique of routing image requests with a cookie and some Apache settings in an .htaccess file is also interesting. It too has limitations. First, it’s not for the faint of heart. If you don’t know your way around Apache directives, it might not be for you. It also relies on a PHP file. If you’re not using PHP, you’re out of luck. I’m no Apache expert, but I have some experience redirecting requests using .htaccess. Setup for adaptive images proved difficult because:

I found it hard to incorporate the .htaccess settings alongside our other Apache directives that already exist.
I only needed responsive images for part of the site

I freely admit that those limitations are mine and not anything fundamentally wrong with the method. If I were better with regular expressions, I probably could have gotten it going.

There is one limitation that is not taken into account: screen pixel density. A handful of Android phones have high resolution displays that defy how we typically understand pixels. The true resolution of the screen is 480 X 854 in this instance. Same for the iPhone 4. It has a pixel resolution of 640 X 960. No problem, right? Things get complicated when we use this meta tag:

That meta tag is extremely useful because it forces those high density screens to render text much like their normal-density counterparts. In practical terms, if the above meta tag is in the head of your web page, an iPhone 4 will report a resolution of 320 X 480 and render text accordingly–making it more readable.

Life is great at this point because without that meta information, text will render much differently on a handful of high pixel-density phones.

We run into problems when we need to get accurate pixel counts of the device in question. Now that I’ve got consistently readable text on a wide variety of devices, I suddenly have wildly inaccurate information on pixels that are relevant to rendering images. Now when I call:

h = screen.height;

An iPhone 4 will tell me that the screen height is 480 pixels when, for the purpose of rendering images, it’s actually 960 pixels. No big deal, but if I’m using JavaScript to determine the screen size so I can load an appropriately sized image, it’s going to load one that’s designed for a 480 pixel-width screen and it’s going to look terrible if the user switches to landscape mode.

Worse yet, while the iPhone 4 has a pixel density of 2, the Motorola Droid has a pixel density of 1.5. We could do some user agent sniffing to accomodate this, but the mobile device market changes so rapidly it would be nearly impossible to keep up with. Web standards tell us to look for supported features, not specific devices. So no user agent sniffing.

Luckily WebKit offers an imperfect solution that just happens to work in all the high pixel-density devices I’m aware of as of now:

window.devicePixelRatio

Now we can get the true number of pixels like so:

// Set the default directory to 320
	"use strict";
	d = 320;

	// Get the screen height
	h = screen.height;

	// set the height for non webkit browsers
	height = h;

	// Get the pixel ratio
	r = window.devicePixelRatio;

	// if devicePixelRatio is supported, calculate the device height
	if (typeof r !== 'undefined')
	{
		// Calculate the true number of pixels on the screen
		height = h * r;
	}

My technique is to save images at several common device heights (because height becomes width in landscape mode) and write the image tag using JavaScript, so the device gets the smallest possible image that will still look good on the screen. The full script looks like so:

/****
 * Loads different header images based on the device height and pixel density (for webkit browsers)
 * Height is used because at any time, the device could potentially be turned to landscape mode
 */

/**
 * @var string
 * vars for directory (d), height (h), pixel ratio (r) and height
 */
var d, h, r, height;

/*
* Bind these to pagecreate so they work with JQuery Mobile's automagic AJAX page loads
*/
$('#page-id').live('pagecreate', function(event)
{
	// Set the default directory to 320
	"use strict";
	d = 320;

	// Get the screen height
	h = screen.height;

	// set the height for non webkit browsers
	height = h;

	// Get the pixel ratio
	r = window.devicePixelRatio;

	if (typeof r !== 'undefined')
	{
		// Calculate the true number of pixels on the screen
		height = h * r;
	}

	// Set the image directory accordingly
	if (height <= 320)
	{
		// load 320 header
		d = 320;
	}
	// Probably the most common height for current smartphones
	else if (height <= 480)
	{
		// load 480 header
		d = 480;
	}
	// Many Motorola & HTC devices have an 800-pixel height
	else if (height <= 800)
	{
		// load 800 header
		d = 800;
	}
	// iPhone 4 & Droid
	else if (height > 800)
	{
		// load 960 header
		d = 960;
	}

	$('a#header-home-link').html('');
});

When the page loads, #header-home-link is just a normal HTML link with no image tag at all, so no image is loaded until we’ve determined the device screen size and write in the image tag with JavaScript (JQuery).

This technique will only work on WebKit browsers since other browsers don’t support devicePixelRatio at this time. Fortunately, this falls firmly within progressive enhancement. It’s not ideal if another mobile browser loads a pixelated image, but it has no effect on how the page itself functions.

Aside: You may have noticed that this is all bound to a ‘pagecreate’ event instead of the normal ready() method in JQuery. That’s because I’m using JQuery Mobile in this instance.

So there you have it. Detecting screen dimensions in pixels is fairly easy, but you do need to account for pixel density. While this approach is not perfect, it works well in most devices and as of now, no standard way of serving responsive images has emerged. This is as good as anything I’ve found.Similar Posts:

Substratum: Tiny, Semantic CSS Framework for Creating Columns

admin — Wed, 26 Oct 2011 02:28:28 +0000

I wrote about this a while back, but I thought I’d make it official since I’ve used it on the last few projects I’ve worked on. I’ve named my mini CSS framework for creating columns and put it in a Mercurial repository. It’s very small (412 kb minified), semantic and aims to stay out of the way. It also needs some thorough browser testing. Have at it folks.Similar Posts:

New Theme

admin — Wed, 18 May 2011 02:51:42 +0000

I did a soft launch of my new WordPress theme last week. There are a few things I’d like to point out. First is the decision to go to HTML5. HTML5 (combined with the HTML5 Shiv) actually made writing the styles quite a bit simpler. It’s a bit of adjustment after writing XHTML for so long, but when it came time to write the styles the new tags meant fewer ids and classes. I found that very handy.

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:

CSS Scaffolding

admin — Tue, 19 Apr 2011 00:12:55 +0000

Last week I gave a talk at MinneWebCon along with Ken Loomis and Ethan Poole. My section of the talk dealt with the CSS we use at work. One of the main problems I’ve come to have with using CSS frameworks is that they put presentation back into the markup. Every CSS framework I’ve seen has classes like these:

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:

HTML5 Document Structure

admin — Sun, 17 Apr 2011 17:42:09 +0000

Since I’ve started working with HTML5 Â a bit, I’ve had to adjust my thinking about page structure. HTML 5 page structure differs from HTML 4 or XHTML significantly. (X)HTML document structure should look like this:

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:

Simple RSS Parsing and Caching Using PHP

admin — Sun, 13 Mar 2011 02:23:28 +0000

I feel like I should begin by stating that my college degree is in English Literature. In other words, I am not formally trained to be a programmer. Still I’ve spent many years working in PHP. It can be liberating to find out that something you thought would be complicated, is actually not that hard when broken down into discrete steps.

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:

 $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:

checkCache(array('blog' => 'http://yourdomain.com/feed/')); // load the RSS
?>

 $items)
{
    if ($key < 5): ?>

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: