<script type="text/javascript" src="https://raw.github.com/rthprog/fixie/master/fixie_min.js"></script>

<p class="fixie"></p>

It even handles lists, headers, etc…

http://fixiejs.com/

You’ve seen them before, the angled shots of books like the ones above. I always thought that someone photographed them. That is, until recently, when I helped a friend redo his author website. He showed me Box Shot 3D, a program that turns book covers into three-dimensional books. I wanted to see if we could replicate a 3D book cover with CSS only. Turns out you can, with pretty nice results. In fact, the screenshot above is an image of a CSS rendering for three of Patrick’s books. Here’s how it’s done:

First, you’ll need a image of a book cover:

1. Wrap the img in some HTML, like so:

<div class="books">
  <div class="book">
    <img src="book.jpg" />
  </div>
</div>

2. Include Modernizr, so that you can detect support for 3D transforms. Note: if you’re unsure how to use Modernizr, just include this code at the bottom of your HTML file, before the closing </body> tag.

3. Apply the following styles:

/* Fallback styles */
.book {
  display: inline-block;
  box-shadow: 5px 5px 20px #333;
  margin: 10px;
}

.book img { vertical-align: middle; }

/*
 *  In order for this to work, you must use Modernizer
 *  to detect 3D transform browser support. This will add
 *  a "csstransforms3d" class to the HTML element.
 *
 *  Visit http://modernizr.com/ for installation instructions
 */

.csstransforms3d  .books {
  -moz-perspective: 100px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.csstransforms3d  .book {
  position: relative;
  -moz-perspective: 100px;
  -moz-transform: rotateY(-3deg);
  -webkit-transform: perspective(100) rotateY(-3deg);
  outline: 1px solid transparent; /* Helps smooth jagged edges in Firefox */
  box-shadow: none;
  margin: 0;
}

.csstransforms3d  .book img {
  position: relative;
  max-width: 100%;
}

.csstransforms3d  .book:before,
.csstransforms3d  .book:after {
  position: absolute;
  top: 2%;
  height: 96%;
  content: ' ';
  z-index: -1;
}

.csstransforms3d  .book:before {
  width: 100%;
  left: 7.5%;
  background-color: #5a2d18;
  box-shadow: 5px 5px 20px #333;
}

.csstransforms3d  .book:after {
  width: 5%;
  left: 100%;
  background-color: #EFEFEF;
  box-shadow: inset 0px 0px 5px #aaa;
  -moz-transform: rotateY(20deg);
  -webkit-transform: perspective(100) rotateY(20deg);
}

What happens in browsers that don’t support 3D transforms, you ask? They degrade quite nicely:

Placing several books in a row is easy. Just replicate the book DIVs, and style the back covers accordingly.

<div class="books">
  <div id="book1" class="book">
    <img src="book.jpg" />
  </div>
  <div id="book2" class="book">
    <img src="book2.jpg" />
  </div>
  <div id="book3" class="book">
    <img src="book3.jpg" />
  </div>
</div>

.csstransforms3d  #book2:before { background-color: #333; }
.csstransforms3d  #book3:before { background-color: #254053; }

I’ll leave you with a live preview (for those viewing in modern versions of Chrome, Safari, or Firefox):

Update 5/22/2012: After several requests, I’ve modified this code to support Firefox in addition to Chrome and Safari. In order to do so, I needed to require the use of Modernizr, so that we could detect support for 3D transforms.

via swissmiss

I often setup aliases, and other bash configurations, in my .bash_profile to make life easier. Though, sometimes I’m not so careful; I’ll set something up on one computer, but forget to do it on the other.

Sharing configurations across two computers is easy thanks to Dropbox. Here’s how:

1. Create a file in your Dropbox. I called mine .bash_profile_shared, and stored it in the root Dropbox folder, for consistency’s sake, but you can call whatever you like, and store it anywhere on Dropbox.
2. Edit your local .bash_profile file, and add this as the first line of your script: source ~/Dropbox/.bash_profile_shared, or whatever you named your shared Dropbox file.
3. Reload your Terminal, or source ~/.bash_profile

And, that’s it. Anytime you’d like to share a config, just add it the .bash_profile_shared file in Dropbox (and wait for it to sync).

UnacceptableVersionError: django 1.1 was requested, but 1.2.1.final.0 is already in use


Me too. After mucking around a bit, I’ve figured out an acceptable workaround:

First, download Django 1.1.1 and place it somewhere on your hard drive (I put mine on Dropbox, so that I could use this fix across multiple computers).

Then, modify your main.py from this:

import os, sys,logging
os.environ['DJANGO_SETTINGS_MODULE'] = 'settings'
    
from google.appengine.dist import use_library
use_library('django', '1.1')

To look like this:

import os, sys,logging
os.environ['DJANGO_SETTINGS_MODULE'] = 'settings'

if os.environ.get('SERVER_SOFTWARE','').startswith('Devel'):
    sys.path.insert(0, "/your/local/path/to/Django-1.1.1/")
    
from google.appengine.dist import use_library
use_library('django', '1.1')

Essentially, you’re telling App Engine that, when it’s in the Development environment (running on your local computer), it should prepend Django 1.1.1 to the system path. Then, a few lines down, when the App Engine SDK looks for Django, it will see that version first.

On a related note, I wrote a memo on Weightshift that covers performance tips for client websites. It’s a primer into the type of things we do for our projects, and presented in a way that’s CMS-agnostic.

1. Will my product require use of the camera, microphone or other device-specific hardware?
2. Will it access the address book, media library or common user data?
3. Will I charge for my product, using an app store as the payment processor?
4. Will I send push notifications or need background processes?

If the answer to any of the above is ‘yes,’ then an iPhone/Android app may be right for you. If the answer is ‘no,’ you may want to consider building an HTML5 mobile website instead.

Mobile websites:

• Can access geolocation info.
• Provide offline caching and storage.
• Handle touch and gesture events.
• Are easily deployed (new versions and bug fixes)
• Are cross-platform (Android, iPhone, webOS, etc.)

Comments and discussion: #NotAnApp