html posts

Encode Any String to Only Alphanumeric Chars - Better Than URLEncode

Have you ever been faced with a situation where you need to encode a string with all sorts of problem characters into a URL-safe string, but, for whatever reason, urlencode() just won't do the job? 

What you need is a function that will give you nothing but numbers and letters-- no %'s or &'s, spaces, or any other non-alphanumeric character.

Well, look no further that PHP's bin2hex() function, and its pack() function.

It can convert this tricky string:

(!X>4Ob=h/&hN\'

Into this much nicer string, which can easily pass through a URL, MySQL query, XML tags, etc, since it is guaranteed to only ever be letters and numbers:

2821583e344f623d682f26684e5c27

And then decoding is a snap.  Here are the functions you need:

function hex_encode($input) {
  return bin2hex($input);
}

function hex_decode($input) {
  return pack("H*", $input);
}

Enoy!

Tips: Creating Web Sites for Mobile Phones

I've recently learned a few technical tips you should use when creating web sites for mobile devices (like the iPhone, Android, etc) and though I'd share them all in one place.

9658-bbcskyfirecopy.jpg#1: Size matters

This should be obvious, I guess, but you're dealing with a smaller screen.  Unfortunately, you really have no idea what the screen size is, so you have to low-ball it.  Various sources on the Internet agree that you shouldn't have images, tables, divs, etc. any wider than 240 pixelsMaybe 320, but you're pushing it, mister.  Of course, that could change as time goes on, but at the time of this writing, 240px seems to be the most widely accepted width that fits on the most screens.

Also, don't forget to place this at the top of your page:

<meta name='viewport' 
   content='initial-scale=1.0, user-scalable=no' />

This will cause the device to be zoomed-in on your content, and not let the user zoom out any more.  Just try it out and you'll see what I mean.

IE Can Only Handle 31 Stylesheets -- Thanks IE!

Yes, our old friend Internet Explorer is at it again to make our lives as web developers miserable.  Not many know this, but in IE, a single web page can only reference at most 31 <link>'d CSS stylesheets. For hand-coded pages, this probably isn't a problem.  But when you start using larger CMS systems and applications, like Drupal, you can very quickly run into the 31 stylesheet limit.  This happens in currently all versions of IE, including IE 8.

ie_sucks_sm-300x225.pngMost of the time this problem presents itself, the web developer believes he or she is going insane.  Your site looks beautiful in FireFox and Chrome, but in IE everything is off: some things are positioned weird, fonts are the wrong size, etc.  And IE doesn't warn you or let you know this is happening in any way, so you are left to go silently mad trying to figure out what the problem is.

There are a couple possible solutions:

  • Combine stylesheets into single, large files.  This may not always be practical or very organized, but hey, you've got to do what you've got to do.
  • Use @import instead of <link>
    • For example:
      <style>
      @import url('a.css');
      </style>
    • IE seems to be okay with this, and will allow more than 31.  However, @import isn't as great, performance-wise, as <link>.  Also, it may cause stylesheets to be loaded out of order, which can cause JavaScript problems.
  • If you are using Drupal, you can try the modules http://drupal.org/project/ie_css_optimizer or http://drupal.org/project/unlimited_css to get around the IE problem.

 Let's hope that the next version of IE lifts this bizzare restriction (but I'm not holding my breath).

Transparent iframe Background in IE

When setting background-color: transparent for an iframe in IE, it just doesn't work.  It shows up as white instead.  Of course, it works in every other browser, but not IE.  So what's the deal? How do you fix it?

This one may not come up very often for everyone, but it did for me, and took me an hour of googling to find the answer:

<iframe src='example.html' allowtransparency='true'></iframe>

You see what I did there?  allowtransparency='true'.  Apparently in IE you have to explicitly state it or it will just ignore the CSS attribute.  Thanks IE!

And while I'm on it, if you want to get rid of the border that IE places on iframes, you have do to this:

<iframe src='example.html' frameborder='0'>

That's right.  frameborder='0'.  I've said it before: IE is the best, most logical browser around.

Syndicate content