Show and Tell

Since I've been looking for things to write about, thought I'd share some recent dev. If you pick up on any code smell, please fork me and send a pull request. That would probably make my day.

pageShow

Firstly, here's pageShow. It's a cross between an infinite carousel and a slideshow presentation. The slides in this case are web pages that follow a particular markup pattern. It's still a work-in-progress and I'd like to add a few more features such as page history handling. It currently only updates the browser history, but doesn't handle browser back/forward navigation.

It works by utilising jQuery's load method; the previous & next slides are requested via ajax and inserted into containers off screen. After pageShow has moved to the next or previous slide, the ajax loading occurs again. This time, a single page will be loaded off screen, replacing either the previous or next slide depending on the direction of navigation.

The basic markup pattern:

<div id="slides-wrapper">


  <div class="slide" id="prev-slide">
    <!-- Previous slide loaded here -->
  </div>

  <div class="slide" id="actv-slide">

<span class="c">&lt;!-- Content goes here --&gt;</span>
<span class="nt">&lt;p&gt;</span>Hello World.<span class="nt">&lt;/p&gt;</span>

<span class="c">&lt;!-- Previous &amp; next slide urls. --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"link-meta"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"index.html"</span> <span class="na">class=</span><span class="s">"prev"</span><span class="nt">&gt;</span>Previous<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"usage.html"</span> <span class="na">class=</span><span class="s">"next"</span><span class="nt">&gt;</span>Next<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>


  </div>

  <div class="slide" id="next-slide">
    <!-- Next slide loaded here -->
  </div>

</div>

The previous/next slides to be preloaded are defined by the active slide. This avoids having to keep a JavaScript object of all the slides and their order. Of course, that approach is not necessarily a bad one. It just wasn't feasible when I initially built pageShow.

  <!-- Links, these can be hidden -->
  <div class="link-meta">
    <a href="index.html" class="prev">Previous</a>
    <a href="usage.html" class="next">Next</a>
  </div>

It's worth having a play around with the demo or checking out the code on GitHub to fully grasp what's going on behind the scenes.

A Simple Carousel

Checkout the demo

It's not a plugin, it's not really even configurable, but I'm using it more and more. Check out the source.

Cookie Monster

I built a WordPress plugin! The WordPress plugin is probably something like a right of passage. Look, Paul Irish has one. I've been building web sites half my life and I've finally got my own one. What does it do? It displays a fixed cookie information bar at the bottom of a WP site. Style it as you please.

No demo, but more info on GitHub.

Gzip your JavaScript on IIS 7

Just recently I've been optimising a site that's running on IIS. It's not as bad as it sounds, honest. Well I was using the server configs from H5BP but dev tools was still reporting that the js was uncompressed. Here's the fix for the web.config:

  <?xml version="1.0" encoding="UTF-8"?>
  <configuration>
    <system.webServer>
      <staticContent>
        <remove fileExtension=".js" />
        <mimeMap fileExtension=".js" mimeType="text/javascript" />
      </staticContent>
    </system.webServer>
  </configuration>

CakePhp Expires Behaviour

Don't want to display records that are past their sell by date? No problem. I rely on Cake to always execute this behaviour on finds. You probably shouldn't. Good bye.