Pajama Sloth

because sloths can wear them too

June 18, 2012 at 11:55am

2 notes

jQuery Picture →

An excellent way for serving up different images based on media queries. This is an approach that may one day become a standard but for now this jQuery plugin will serve to ease the transition.

May 17, 2012 at 5:43pm

0 notes

Build your own super simple jQuery slideshow →

Too many times have I needed a really barebones slideshow for a project. I finally decided just to build a really basic one that I could use as a starting point from now on. Obviously you might just download a slideshow plugin (or something) if you want some more functionality but for some this may be an elegant solution so I thought I’d share.

April 24, 2012 at 9:45am

0 notes

A Closer Look at Font Rendering →

The font rendering differences between browsers and operating systems.

April 17, 2012 at 1:48pm

0 notes

CSS for iPhone full-screen mode

To enable full screen mode compatibility with your website simply include the following line in the head.

<meta name=”apple-mobile-web-app-capable” content=”yes” />

With this line of code added, users will see a full screen version of your website (sans browser chrome) if they add the site to their homescreen and launch it from there.

A problem one may run into with the availability of the full screen version is, because of the extra space, one may want to edit their CSS to accomodate users viewing in full-screen mode.

To do this, just check if a user is in full-screen mode and then add a new stylesheet to the head of your site. Feel free to use the following code:

//check if in full-screen
if(window.navigator.standalone){
var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "assets/css/fullscreen.css";
document.getElementsByTagName("head")[0].appendChild(ss);
}

Now simply  edit fullscreen.css to make modifications to the appearance of your site in the iPhone’s full-screen mode.

April 10, 2012 at 4:35pm

0 notes

Unicode Non-Breaking Hyphen

Want to ensure that your words don’t break because of hyphens?

Try this: &#8209;

EDIT:

It turns out that some older browsers might have a problem with this unicode. If that’s the case you can always wrap your hyphenated word with <span style=”white-space:nowrap”>e-mail</span>

April 9, 2012 at 4:52pm

1 note

Photoshop/Browser Font Rendering

So I did a little research on a constant problem in regard to fonts rendering heavier on the web than they do in Photoshop. Everything I read basically said what we all already know: Browsers/Operating Systems will render fonts differently so its not really possible to get them to ever match Photoshop exactly. That being said, after doing a little testing of my own I have come across a couple of photoshop and CSS techniques that should ensure that fonts in Photoshop will render a bit closer to how they render on the web.

  1. Make sure your fonts in photoshop are set to pixels (not points). This can be done in Photoshop preferences. 
  2. Set the anti-aliasing method from “Smooth” to “Strong” in Photoshop. Fonts will be heavier on the web so we might as well make them a little heavier in PS. 
  3. Use the CSS property called text-rendering: optimize-legibility. This will ensure that the correct kerning and ligatures are used (in favor of slightly faster font loading).

Doing these three things as well as making visual tweaks with the help of comp overlay apps for browsers will ensure that the final product looks as close to the comp as possible.

Here’s an example of Lucida Grande in Photoshop compared to the HTML version. Look closely. The color red you see outlining the font ever so slightly is the HTML version. The black, semi-opaque, overlay is an image generated from Photoshop. Pretty close!

March 19, 2012 at 11:51am

0 notes

PlaceKitten →

Easily generate the most adorable placeholder images ever!

March 15, 2012 at 3:51pm

0 notes

StarterKit →

StarterKit is simply a collection of useful files that can be used as a starting point for creating a website. Only the essentials have been left in and the code has been optimized to ensure quick loading.

December 9, 2011 at 11:00am

10 notes

Preventing iOS Scaling on Orientation Change

Just recently removed a thorn from my side. The thorn? My web application kept scaling oddly whenever I went from one orientation to another. The tweezers (or whatever people use to remove side thorns)? Simply set the max and min scale on the viewport meta information in your HTML. Like so:

<meta name=”viewport” content=”width=device-width, initial-scale=1, user-scalable=no, maximum-scale = 1, minimum-scale = 1">

This prevents iOS Safari from scaling your content up or down in anyway on orientation change. Also note that I set the intial-scale to 1 as well. This may not be necessary but it ensures that you’re starting from the normal zoom level.

December 8, 2011 at 8:50am

9 notes

Commenting in Coda

I really love Coda but there are a couple of things about this editor that have always bugged me. One thing, the topic of this post, was commenting. I always wished that my comments would show up in the Code Navigator. Well today I finally discovered that they can! I don’t know if this has been a feature all along or if this is something that was recently released, either way, I’m happy!

Enough with the intro! To add comments to the code navigator in Coda simply add an exclamation mark:

CSS/JavaScript: /* !comment here */
HTML: <!—!comment here—>

Note that the spacing in these comments is really important. You’ll find that adding or removing spaces will probably cause your comment not to appear in the navigator.

Anyway, hopefully you’re super excited now. Enjoy!