The interior defense dines under the sabotage.

Kind of a strange random sentence huh.

I’m trying to find the happy medium of design and development.  I am a designer by mind and by talent but I’ve really dug much deeper in development lately.  I sometimes feel as though I have to choose one or the other.  I think Ruby on Rails is simple enough that I’m still able to feel a bit more creative and still able to keep some of my designer edge.

I have plans to create a few of my own applications but it may be awhile until my ideas come together.  The more I research all the different applications out there, the more I realize how important the UI design is.  Wish me luck on my apps.

$(function(){
$('input[type="text"]').each(function(){
if(this.value==''){this.value='Enter Value'}
});
$('input[type="text"]').focus(function(){
if(this.value=='Enter Value'){this.value=''}
});
$('input[type="text"]').blur(function(){
if(this.value==''){this.value='Enter Value'}
});
});

The first part of the code identifies that if the value of the input field is empty add ‘Enter Value’. The second part of the code removes the value ‘Enter Value’ from input fields as it gains focus. The last part of the code adds ‘Enter Value’ to empty fields as they lose focus. This code may not work in every situation, but it can help in some situations. Let me know how it works and if you found other modifications of the code that work even better. This is a dependent on jQuery but I’m sure you may find a version that can adapt to other libraries or straight JavaScript.

pre {
white-space: pre-wrap; /* css-3 should we be so lucky... */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 ?? */
white-space: -o-pre-wrap; /* Opera 7 ?? */
word-wrap: break-word; /* Internet Explorer 5.5+ */
_white-space: pre; /* IE only hack to re-specify in addition to word-wrap */
}

/*
CSS Browser Selector v0.3.4 (Sep 29, 2009)
Rafael Lima (http://rafael.adm.br)

License: http://creativecommons.org/licenses/by/2.5/
Contributors: http://rafael.adm.br/css_browser_selector#contributors
*/
function css_browser_selector(u){var ua = u.toLowerCase(),is=function(t){return ua.indexOf(t)>-1;},g='gecko',w='webkit',s='safari',o='opera',h=document.getElementsByTagName('html')[0],b=[(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?('ie ie'+RegExp.$1):is('firefox/2')?g+' ff2':is('firefox/3.5')?g+' ff3 ff3_5':is('firefox/3')?g+' ff3':is('gecko/')?g:is('opera')?o+(/version\/(\d+)/.test(ua)?' '+o+RegExp.$1:(/opera(\s|\/)(\d+)/.test(ua)?' '+o+RegExp.$2:'')):is('konqueror')?'konqueror':is('chrome')?w+' chrome':is('iron')?w+' iron':is('applewebkit/')?w+' '+s+(/version\/(\d+)/.test(ua)?' '+s+RegExp.$1:''):is('mozilla/')?g:'',is('j2me')?'mobile':is('iphone')?'iphone':is('ipod')?'ipod':is('mac')?'mac':is('darwin')?'mac':is('webtv')?'webtv':is('win')?'win':is('freebsd')?'freebsd':(is('x11')||is('linux'))?'linux':'','js']; c = b.join(' '); h.className += ' '+c; return c;}; css_browser_selector(navigator.userAgent);

That code makes it so I can even validate my CSS and get rid of my attribute hacks. The code adds a bunch of different classes to your HTML tag. It adds the Operating System, the Browser, the Browser Version, and if Javascript is enabled or not. You can do a lot with that info. I was able to then create a Chrome specific style for my stylesheet. Love this code. It has been added to my regular arsenal of code.

Just include that code in your head or reference it as a separate file in your head. I prefer a separate file, but to each their own.

Select Problem with IE

Most of you probably ran into this article because you are half bald trying to figure out how to make your select box options show their full text in Internet Explorer when the select option has a static size set. Like the figure above illustrates, looks simple to fix but holy cow did it take a lot of research to figure out the best way to do it. After hours of research, I found out that I can’t do it with CSS alone. Many solutions I saw out there used Javascript and injected CSS in the Javascript. I’m not a big fan of CSS in Javascript. I’d rather have my CSS separate and change the way something looks in the stylesheet. For that reason I find myself using jQuery’s addClass, removeClass, toggleClass, and toggle quite often. That is what this code is going to do for you. I don’t think this is the best way for everyone, but it is the best way for me.

I’m not a programmer per say so I stick to the different code libraries. I am a jQuery man so my code requires jQuery. So Here is my code and I’ll explain after you see it.

    $(function() {
      $('select').focus(function(){
        $(this).addClass('ie_select');
      });
      $('select').blur(function(){
        $(this).removeClass('ie_select');
      });
    });

Place that code in the head of your document wrapped in a script tag or however you like to call your Javascript and create a specific CSS class called .ie_select in your stylesheet and style it according to what you need it to do. If you only want to apply the Javascript to specific browsers, you’ll need to add some conditional statements to your code.

It’s fairly straight forward code. This is what is going on:

1. When a select item has focus, add the CSS class of .ie_select to the select item.
2. When a select item loses focus or blurs, remove the CSS class of .ie_select from the select item.

I’ve found this code is much more readable to someone like myself who dabbles in jQuery when it comes to presentational use of it. That is exactly what the purpose of this code is, to fix presentation.

FYI

For what I was doing I had to add position: absolute to my CSS for .ie_select to get things to display the way I needed. A majority of the tutorials out there did nothing more than change from a fixed width on the select to a width: auto and that seemed to be all they needed. My layout was a bit more complicated and that didn’t work for me. This code will not style your select element for you, but it will enable you to be able to style it the way you need things styled.

Gmail

So I don’t really like using programs like Outlook, Entourage, Thunderbird, or Apple Mail to manage my mail.  I’m also a huge GMail fan.  I use nothing but Gmail now.  I hate setting up clients and I always use multiple computers to check my email.  Gmail offers tons of space for email so space has never been an issue for me. I thought I would do some searching for some different Gmail specific clients for my Mac that make using Gmail just a little bit easier.

I’m evaluating 3 different GMail clients I found when doing some Googling, so I’m hoping to get some comments with people’s feedback and opinions on the different clients.  I still haven’t decided what I like and prefer best so I’ll leave that up to you.

Fluid App

Fluid App

Fluid App isn’t really specifically for GMail, but what you can do is create a specific “Application” for GMail.  What that means is that you can launch Gmail like it’s a separate app in a separate window using Safari.  You can actually do this with any website using Fluid App.  I use this for a lot of different sites to keep them separate.  I definitely recommend checking out how Fluid App works and see if it can benefit your workflow in any way, specifically GMail.

http://fluidapp.com/

GeeMail

GeeMail

GeeMail is the most unique out of all of them.  It uses Adobe Air.  What that means is that it is available on all platforms.  You just need to install Adobe Air.  There are some advantages to this and some disadvantages.  One thing I’ve noticed about a lot of Adobe Air apps specifically on Macs is that they don’t respond well to dragging and dropping to different spaces, but that’s me being picky.  The styling and look and feel is great in GeeMail.  I have not tested it using Google Apps domains.  I know the previous app and the following app will work with Google Apps.  I think it’s a great option and may end up with my vote.

http://www.sourcebits.com/geemail/

MailPlane

MailPlane

MailPlane is the most like what I was looking for.  It is it’s own separate app and doesn’t use Adobe Air.  The look and feel is exactly as GMail looks and feels.  There is some different control on modifying text size and some great drag and drop functionality.  The attachments and media functionality is awesome.  I think my favorite thing though has to be the multiple GMail accounts.  If you are running some different GMail accounts you have to check all the accounts by logging out and relogging back in.  MailPlane allows you to select from different accounts and check them all separately without any need to logout and login.  The only bad thing is that MailPlane costs $24.95.  That’s just me being a FREE freak.  It’s worth the purchase for sure.  It’s a great app so far.  There is a 30 day Demo that you can download, that’s what I’m actually using at the moment.

http://mailplaneapp.com/

Your Two Cents

Let me know what you find using these different apps.  Let the readers see what app you recommend.  Do you know of any others that are not on my list?  Let me know.  I can revise this post if you find something worth listing.  Thanks for reading and for your participation.

• Safari
• Flock
• Firefox
• Seamonkey
• Chrome
• Internet Explorer 6
• Internet Explorer 7
• Internet Explorer 8
• Opera

I just threw Seamonkey in the testing for the heck of it.  I’m the least concerned about Opera.  It is crazy how inconsistent even Internet Explorer is.  Some of the sites I’ve been checking look different in IE6, IE7, and IE8 from each other.  All unique in themselves.  I of course have got to say “Internet Explorer Sucks!”  That phrase is an unspoken in most places I’ve worked.  Everyone knows everyone else hates IE so you don’t even have to say it.

It can be tricky cross browser checking all the different browsers, so I’ll let you know my setup.

• 24″ iMac – Leopard
  • Firefox
  • Flock
  • Opera
  • Safari
  • Seamonkey
  • VMWare Fusion – Windows XP
    • Chrome
    • Firefox
    • IE Tester
      • Internet Explorer 6
      • Internet Explorer 7
      • Internet Explorer 8

Hopefully this has helped someone.  Alternatives to VMWare Fusion are VirtualBox and Parallels Desktop.  You have to have a Windows install running to test Internet Explorer properly.

This setup is working great for me and I trust the tests I’m running also.  I’ve tried Multiple IE’s and always have issues with cookies and form testing.  I have found IE Tester works way better than anything I’ve ever used before.