Twitter Bootstrap Omnigraffle Stencil

I often use the Twitter Bootstrap CSS ToolKit for my web applications.  While this toolkit helps to make things quickly look great, I wanted to be able to use it in OmniGraffle.  I found a few Photoshop files that had the elements, but none for OmniGraffle, so I decided to try creating one.  This is my first OmniGraffle stencil, but I'm pretty proud of how well it came out.  Thanks to the OmniGroup for such a great product.

You can grab the stencil now from my GitHub repo.

I've submitted the stencil to Graffletopia, but still waiting for their review and approval.

Changing Fonts in Sublime Text 2

I’ve been using the Sublime Text 2 app for this past week and really like it. One of the things I wanted to change though was the font used in the editor. A font I’ve liked in the past was Consolas but I couldn’t find that. I did find one named Inconsolata, which is almost identical from what I can tell, on Google Web Fonts. Here’s how I set everything up on my Mac

Get the font(s)

• Head over to Google Web Fonts and search for “Inconsolata”, or any other font that you like (other suggestions are Ubuntu Mono or Varela Round)
• Click the “Add to Collection” button to the far right of the font name
• Click the “Download your Collection” link on the top-right.
• Click the “Download the font families in your Collection as a zip-file” link on the pop-up dialog
• Open the zip-file that’s downloaded
• Double-click on each .ttf file
• Select to “Install Font”

Configure Sublime Text 2

• Open Sublime Text 2
• Click on the “Sublime Text 2” application menu
• Select “Preferences”
• Select “File Settings - User”
• In the file that opens, add the following line along with the name of the font you installed:

  "font_face": "Varela Round"

  Be sure to include a comma “,” if you’re adding this to a line already within the file, like a color scheme selection.

You can also change the font size using the following:

"font_size": 16

Notice that the number for the font size isn’t in quotes. Once you save the file you should see the results immediately as the configuration file you’re working in is redrawn using your selections.

Here’s my current complete configuration file

{
    "color_scheme": "Packages/Color Scheme - Default/Indy Merbivore Soft.tmTheme",
    "font_face": "Varela Round",
    "font_size": 16
}

Using Sublime Text 2 as ColdFusion Editor

I’ve tried a lot of different editors for writing my ColdFusion code, but never found one that really worked well for me until now. Now I think I’ve found the one that works best for me, Sublime Text 2.

In the past I’ve tried:

• Coda by Panic = does a really good job with handling the auto-completion of quotes and parenthesis. Has tabs for multiple file editing and does CSS, has a web preview and a Terminal tab. It’s a Panic app, which has a tradition of working really well. However I started to run into these I’d really like, like code folding, easier code colouring and speed seemed to decrease with each release. Coda 2 is “in the works”, but no one really knows when it’ll show up.
• CFEclipse = I like how extensible the Eclipse platform is, it’s much more of a Integrated Developer Environment (IDE) then Coda. With extensions like Subclipse (Subversion), eGit (GIT) and Mylyn, it can be a pretty sweet tool. However like any Eclipse based environment that I’ve used it suffers two serious problems that over-time frustrate me. It seems to get slower and slower, and the way that it auto-completes of quotes and parenthesis easliy gets confused.
• ColdFusion Builder 2 = same as CFEclipse, except it costs money to run slow, and if I’m correct in what I’ve found, only runs in 32-bit mode and not 64-bit mode in Mac OS X.
• TextMate = from what I’ve read this application is pretty “long in the tooth”, but it seems to have a good sized and very faithful following. There is a ColdFusion bundle available. It’s very fast, you can define projects to see all of the code in your directories and has tabs. It works very well with the auto-completes of quotes and parenthesis. TextMate charges for a license, which I paid, but I just had a hard time getting into how to use it and didn’t find much in the way of documentation or screencasts that explained it well to me.

Sublime Text 2

I’ve been using a beta copy of the Sublime Text 2 editor for the Mac and really like it so far. Some of the key things I like about it after a week are:

• It’s fast
• Auto-completes the use of quotes and parenthesis correctly.
• Good code syntax colouring, that can be modified, although I’m using the “Merbivore Soft” theme by Indynagpal.
• Can open a folder so I can see multiple files at once
• For file contents that are taller then the screen, a “code overview” of sorts displays on the right to quickly jump to another locatio in the file.
• Code-folding
• Tabbed interface for files, and interestingly when you click on a file it will show the contents but not open it as a tab unless you start to edit the file or double-click on it, great for a “quick peek” of the contents!

As I work with Sublime Text 2 more, and as it evolves from it’s beta form, I’ll post more on how I’m using it and what I find benefical.

Force Internet Explorer 8 Not To use “Quirks” Mode

I’ve been using the excellent BluePrint CSS framework for a new web application I’m developing. It does a great job and making the site look very good, and consistent, on almost all browsers except Internet Explorer (I know, huge surprise).

In my particular case I have users that are forced to use Internet Explorer 8.0 as their browser. With the configuration that’s set by default for them, Compatibility View is enabled because the University Enterprise Business software doesn’t display correclty on modern browsers or recent versions, meaning anything newer then Firefox 3.6 or Internet Explorer 6.0.

To compound the annoyance, Internet Explorer Compatibility View can’t be set for one particular site only, it assumes that all pages under the domain also need it and forces this as well with no option to only use or exclude a subdomain.

When Internet Explorer 8.0 uses Compatiblity View, it renders the webpage as Internet Explorer 7.0 and earlier would, also called “quirks” mode, which doesn’t display correctly with BluePrint CSS or other web-standard layouts. I found that I can add HTML code to force Internet Explorer not to use Compatibility View on my web application. Not using Compatibility View uses the newer rendering engine that does a slightly better job with the newer HTML standards.

To do this, add the following to your HTML header:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">