CSS Reset: Gold For Code Monkeys

Michael Deering April 29th, 2008

There you are doing the right thing semantically marking-up your new site with div tags, CSS classes and ids. Your presentation is nicely separated from your content. Your feeling pretty good about yourself and your new application. Then ‘it’ happens, you open your site in another browser and suddenly you find yourself a victim of the browsers wars and cross-browser compatibility.

Firefox Eating IE

The CSS Reset technique is something that I tried recently on a clean-slate project with great success. Below is SASS version of the CSS file from the above link.


// public/stylesheets/sass/application.sass
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
  :margin 0
  :padding 0
  :border 0
  :outline 0
  :font-weight inherit
  :font-style inherit
  :font-size 100%
  :font-family inherit
  :vertical-align baseline

\:focus
  :outline 0

body
  :line-height 1
  :color black
  :background white

ol, ul
  :list-styles none

table
  :border-collapse separate
  :border-spacing 0

caption, th, td
  :text-align left
  :font-weight normal

blockquote:before, blockquote:after, q:before, q:after
  :content "" 

blockquote, q
  quotes: "" "" 

The basic idea behind the technique is to normalize all of the tags you are going to use. The technique does have its critics for being over semantic, but for a guy like me who would rather concentrate on APIs and core functionality then learning and hacking around with all of the browsers differences this reset technique is exactly what I was looking for.

I’m not looking for a pixel perfect layout/design, I’m looking to mark-up my layouts and views and move on.

Tags

Parallels: Using Your iSight Camera In Windows

Michael Deering April 28th, 2008

After a post praising Parallels running Windows on my Mac I have had quite a few pings on my statement that the built in iSight camera on my MacBook Pro works in my Windows VM.

Configuring iSight Camera with MSN Messenger

There is no catch you just need to know where to look on your leopard DVD to find the iSight driver install program.

  1. Install the iSight drivers
    • Find AppleiSightInstaller.exe by exploring your Leopard DVD from within your Windows VM.

      Location of the iSight drivers from within Windows

    • Run AppleiSightInstaller.exe from inside your Windows VM
  2. Connect your iSight Camera to your the VM

Enabeling you iSight Camera in your Windows VM

Your done!

Tags

Textmate: Taming TODOs and FIXMEs

Michael Deering April 22nd, 2008

I was using the new Rails Source Code Annotations when I first started construction on this blog, but it quickly started falling short with comments in javascript files and also in HAML views.


// application.js
function someFunction() {
 // FIXME: This will not show with rake notes
 ...
}

// someview.html.haml
// TODO: Same style of comments does not show here either
%h1 ...
  ...

I was about to start diving into tracking down and modifying the rake task to account for these exceptions when I recalled hitting control-shift-T (find annotations in current project) when I was meaning to hit command-shift-T (jump to method in current file) in Textmate and seeing a TODO list start to generate.

Textmate annotations when no filtering is done

The issue though was that the annotations list would take far to long to generate, and would be so full of irrelevant TODOs, FIXMEs, and CHANGES from the vendor/plugins directory (I include this but not vendor/rails in my Textmate alias).

Show The Package Contents on the Textmate Application

Turns out there is a TM_TODO_IGNORE environment variable in the TODO bundle script that you can use to filter out files and directories that it searches.


# todo.rb inside of Contents/SharedSupport/Bundles
# ...
ignores = ENV['TM_TODO_IGNORE']
# ...
TextMate.each_text_file do |file|
  next if (ignores != nil and file =~ /#{ignores}/) or File.symlink?(file)
#  ...
end
# ...

File, Preferences, Advanced, Shell Variables


(vendor\/plugins|vendor\/rails|log\/development\.log|vendor\/gems|doc\/coverage)

The result of setting this environment variable is manageable project annotations along with the benefit of clickable annotations that bring you to that exact spot in the source file.

Textmate annotations when filtering is done

Yes, I run the Halloween theme all the time :)

Tags

ActiveResource: Issues With Using Email For Usernames

Michael Deering April 18th, 2008

I first ran up against this issue of using email addresses rather then the standard usernames with ActiveResource when I was doing the Lighthouse integration for the administrative interface on Lypp. Now with Lypp running our Mashup Contest against the APIs over at 37Signals I’m seeing a lot of Rails developers getting stuck on this same issue.

A fix has made it into Rails a while ago: Rails Trac Ticket #11112

Here are some of the error snippets for search indexing purposes.


URI::InvalidURIError: bad URI(is not URI?): https://username@example.com:password@dev1.lypp.com/users/9999

...

URI::InvalidComponentError: bad component(expected userinfo component or user component): username@example.com

We all wish we could run on edge rails all the time across all our projects but reality is we don’t always have that luxury.

Real simple test class to test basic calls with.

Add this file to a blank rails project.

# apps/models/conference.rb
class Conference < ActiveResource::Base
  self.site = 'https://lypp.com/users/9999'
  self.site.user = 'username@example.com'
  self.site.password = 'password'
end

Jump to the console.


./script/console 
Loading development environment (Rails 2.0.2)
>> Conference.find(:all)

If you get any of the above errors. Here is a code snippet to put in one of your project’s initializers to get pass this issue if you are stuck at an incompatible ActiveResource version.


# config/initializers/url_fix.rb
module URI
  class Generic
    def check_user_with_escaped_username(user)
      check_user_without_escaped_username(escape_userpass(user))
    end
    alias_method_chain :check_user, :escaped_username
  end
end

Enjoy!

I hope you found this post before you got to frustrated or discouraged…

Here are some great resources to move you along a little further once you get past this.

Railscast Episode #94: ActiveResource Basics

Railscast Episode #95: More on ActiveResource

I really need to make the time contribute my 5 tips for the Railscast 100th episode contest. The iPod would be nice but really just want to give a little back to what I think is hands down the best FREE resource for getting going with Rails.

Tags

Parallels Desktop: Mac Web Development Must Have

Michael Deering April 17th, 2008

There is kind of a catch-22 here… You can’t do honest web development on Windows without hearing it from the Mac fanboys (I might even label myself a bit of a mac fanboy), but you also cannot forget that despite the fact your uber cool with your Powerbook_Firefox_Firebug_fu the majority of the world still visits your sites with IE on Windows.

IE: Blue, Firefox: Green, Safari: Orange

Above is the browser brake down for Lypp in March. Firefox is higher then you would see on other sites because we target Powerbook_Firefox_Firebug_fu developers with our Lypp API and Rails Plugin.

Virtual Machines are nothing new, I honestly think I have tried the majority of them at some point. Parallels itself I have been using for several months to mimic and experiment with Linux deployment environments.

So what makes me want to blog about it?

Besides the obvious IE browser testing, I have had to buckled down in Microsoft Outlook 2000 in preparation for the release of Lypp’s Outlook Plugin.

Take a look at the above screen-capture… Here are the highlights:
  • Run Windows programs like native Mac applications
  • Windows windows work with Apple Expose’ and transparent windows support
  • Desktop and file sharing
  • iSight Webcam Support! (I can use my webcam with MSN again!)
  • Cut-and-paste and Drag-and-drop support between OSs

Making the switch from Linux to Mac I think I said the phrase “It just works!” ten times a day for the first month. Same goes here with Parallels and my experiences with other VMs. I have been able to squeeze features out of other VMs before but with Parallels “I just works!” and fits into my work flows seamlessly.

Tags

« Previous 1