So I've been comparing a LOT of different javascript frameworks for my company's rewrite, and finally settled on AngularJs because of how rapidly I'd be able to produce prototypes. In my opinion, although it's very alpha and fairly lacking on the graphical side, it's excellent for CRUD applications (meaning forms, tables and reports). I'm still trying to lean towards emphasizing reusable widgets and directives instead of just custom-coding everything for your own app. If you are still trying to decide on a framework, take a look at TodoMVC, an excellent unbaised comparison.

I'll keep updating this post, so check back often!

Here's a collection of nifty shortcuts and tricks you can do when you're working with Photoshop and the web. I picked up at work while working with our designer, who's exceptionally skilled at graphic design. He's putting together some of the most amazing looking skins our products will ever get to bare. If you want some examples of his work just take a look at some of the screenshots from the Jobvite Share project.

Since working at Jobvite on our new facebook platform, I've been dealing a LOT with client-side apps. Unfortunately we weren't smart enough to start using something like Sproutcore or Backbone, but I'm working to amend that at the moment.

One of the things I've developed for the team is a special Factory class geared specifically to handling our unique structure. In our app there are quite a few components that must load before certain bodies of code can execute, and this creates a long load time:

• Dom Ready (obviously) when the html page is finished loading
• $.load() - We actually use this for client-side includes, and there are a LOT of em
• Facebook App API
• Facebook App Authentication (and installation)
• Internal Role Permissions

So I was rooting around the apple website trying to figure out how to fix the bluetooth choppyness on my laptop my company bought for me for my headphones. I had tried using it on my personal laptop which has OSX Lion and it plays beautifully, so I figured maybe I should upgrade this one as well. While clicking around the Apple.com website I came across their up-to-date program.

The program claims to only be available to people who purchased laptops later than July. Lucky me, I started working in August and I know that my company buys laptops practically the day before someone new comes in. This may or may not work for everyone, but it doesn't hurt to try.

So I just finished spending quite a few hours trying to debug an iPad specific bug for FB code. why when building a FB app (in iFrame) if you use the FB.ui() function to create a message dialog, you get a gray overlay and no content. I mean come on. So I created a blank test page and confirmed that it wasn't any code in our app. Tried disabling auto-polling of the canvas, explicitly setting its dimensions, yadda yadda yadda.

Surprisingly, it was my designer who found the solution. I thought that the entire generated content is inside an iFrame, therefore I would not have been able to control the CSS, but I was wrong.

To fix this problem, simply provide the following CSS:

#fb_dialog_ipad_overlay {
    width: 600px !important;
}

TADA! All centered and shiny. You are free to tweak the CSS to your own discretion.

Here is the bug ticket I opened at facebook.

I'm a mac user and one of the most annoying things for me in terminal is trying to move the cursor from the beginning, end or anywhere in the middle. I did a bit of googling and found a helpful stack overflow article giving some useful information. While I was implementing a hack suggested by one of the comments, I ended up adding my own tweaks.

First, open Preferences > Settings > Keyboard in terminal.

Second, I recommend checking off the "Use option as meta key" if you never use weird characters.

Now go ahead and add the following commands:

• Cursor Left, Option, \033b [press ESC+b]: Move left word at a time
• Cursor Right, Option, \033b [press ESC+f]: Move right word at a time (I use option because CTRL+Arrows changes spaces for me)
• Cursor Left, Shift, \001 [press ctrl+a]: Move to beginning of line (I use shift because highlighting doesn't work)
• Cursor Right, Shift, \005 [press ctrl+e]: Move to end of line

Also, you should try hitting CTRL+R and start typing characters of a previous command you set. I think you hit TAB to confirm the selection. Good way to move to the middle of a command.

Long title, but you should recognize the motto. I was working on adding features to BakingPlate when I realized something. I've always worried when I would actually be able to start contributing to the core of OpenSource projects like CakePHP when it dawned on me. All of this could go into Cake2.

After a brief discussion on IRC about the new IOS5 features I decided to compile a concrete list of the Android-equivalent to every IOS5 feature. And just to rub it in, I figure I'll list a few things I doubt IOS will ever be capable of doing, heh.

There is one point that I will concede to Apple and that is that applications for android are UGLY. This is of course because of all the third-party development, but it would be nice if this could be a bit more streamlined.

I think the best way to do this would be to allow users to hack and/or tweak their applications since they're all Java based anyway.

I've been getting pretty annoyed at some of the fairly repetitive formatting I do while editing html for my CakePHP projects. So I decided to try making my own snippet/command that does exactly what I want. Normally I use Ctrl+Shift+W to wrap a selection in a set of tags, but I'll always end up adding a few newline characters and indenting the wrapped content for block-level tags. Here is a command that does it for you instead, either to the highlighted lines (use full-line selections) or the current line of the cursor.

During one of my web crawls I'm prone to do reading other developers work, I came across an interesting demo on CSS-Tricks (not that I can see what the demo does).

I really liked the look of the form, specifically the inset of the form legend. What was kind of silly is it appeared the entire form sits on top of a large image, a jpg in fact (appalling, I know).

So I started to wonder how plausible it would be to recreate the entire form (or mainly the inset legend and shadows) with pure css. Of course the plausibility for cross-browser compatibility may be less realistic but I still thought it would be an interesting demo.

Here's the result of what I was able to come up with (with a toggle to an alternative style if you want to toy with the drop shadow).

Although I have no longer been working on this plugin since I left ISV, however I was recently contacted on github by someone who may be interested in picking up this project.

Update: It seems I have not heard back from the guy so he may have moved on to other projects.