In case you haven't already, go checkout the awesome project (and organization) over at AngularUI!

In the vein of Paul Irish's "10 Things I Learned from jQuery Source" I decided to write this blog post. Lets just jump right into it.

Concerns about Bootstrap in AngularJS seem to come up a lot lately (especially on Google+) that I feel are causing problems.

We have 2 projects: the AngularUI Bootstrap project which is recreating everything in pure AngularJS code, and removes the Bootstrap.js dependency. Then we have the new Angular-Strap which simply wraps the existing Bootstrap.js creating additional dependencies and imposing a fairly opinionated templating scheme.

If you go with AngularUI's version, then you are using a project that won't break if Bootstrap's API changes, that doesn't have additional JS dependencies, and is tightly integrated into AngularJS (meaning triggering events from controllers, etc is more seamless). On the flip side, if you end up including the bootstrap.js regardless, you don't see any real benefits. All of the components may not work as perfectly / smoothly and you will have to wait (or contribute) until the project gets up to speed.

If you go with Angular-Strap, you are essentially getting a few directives that are not necessarily specific to bootstrap, and some bootstrap plugins wrapped in a AngularUI-Passthrough pattern with very specific configurations. This means you MUST have bootstrap.js, and if their API changes, the lib may break. In addition, any option that hasn't specifically been coded for is completely inaccessible. But this starts to run parallel to the AngularUI's version of waiting for the features to be developed. Overall, since the existing plugins are simply being wrapped, it becomes easy to push out new versions or components when he decides to add wrappers.

Personally, I have reservations about either approach. I believe it's better to provide the basic building blocks and have developers create their own DSL and internal directives/templates (instead of creating a template around a template around a template).

To prove how simple this is, I've put together this gist and plunker which demonstrates how easy it is to implement just about every bootstrap JS component without creating any new JS or custom directives. Unlike Angular-Strap, the code is 100% transparent and you have complete access to all options, 0 API breakage, and 0 template opinion. It's true that you lose the ability to call methods programmatically, but if we focusing on enhancing the pass-thru (or if you don't want to wait and decide to roll a proprietary directive) then this becomes irrelevant.

You should bookmark the original GIST as I will try to continue it as I flesh out more Bootstrap functionality and features over time.

Conclusions

If you want an Angular-Bootstrap project to streamline a few things for you, go with AngularUI's Bootstrap.

If you don't mind a tiny bit of elbow grease, just use Bootstrap.js natively and AngularUI's Passthrough to grease the wheels when you get stuck.

They FINALLY uploaded the video of my talk on AngularUI at Google SF! Sorry for the low resolution, but go check out the project!

I am single and currently living in San Francisco. One of the problems as a bachelor is that your food tends to go bad before you ever have a chance to cook it, much less eat it. Sometimes when you look through the fridge for something to eat, you don't exactly know if you can trust half of your food, and if you're OCD like myself, that means even MORE food gets thrown out just to avoid the risk.

Then I said to myself: "man, I wish I knew when my food was going to expire". BAM, instant idea. What if you had a phone app that reminded you when your food was about to expire? What if it notified you when it certain categories (such as meat or dairy, based on your settings and configuration of course) was passing it's half-life? What if the next time I go sorting through the fridge I could get a concrete list of when I bought everything and what items are still good to use?

This is the most concise list of things you must know in order to upgrade your app to AngularJs v1.0 (subject to change). Read this list and upgrading should be as painless and easy as possible. REMEMBER: You should still refer to the docs for new syntax changes.

SUPA SIMPO UPGRADE TUTORIAL:

• The accepted convention is now ng-whatever instead of ng:whatever
• Widgets have been dropped and folded into directives.
• Directives provide way more control and optional complexity if necessary.
  • You can now set an execution priority over other directives on the same element
  • You can now store a template inline or use a partial, both of which are automatically compiled
  • You can now extend an existing directive's "controller" (read the docs, I'm still figuring this one out)
  • ng-transpose lets you relocate and output the original element's innerHtml to a new location in the template which will continue compiling normally*
• ng:autobind has been dropped in favor of modules
• Your app must have a module now (read the docs)
  • Specify your module name in ng-app (usually goes on <html> tag).
  • Modules can include other modules.
  • Routes are done inside of modules
  • You can do app-wide crap from modules like .run(fn) which would hold init-code and .value() for globals or constants
  • Directives, services and filters are attached to modules now (read the docs)
  • Refer to angular-ui as a good example of how to structure your app (source code)
• There is no html filter, it's now a ng-bind-html-unsafe="{expression}" directive
• You probably want to output debugging variable through the {{myVar | json}} filter
• $watch callback is now fn(newVal, oldVal) instead of fn(scope, newVal, oldVal)
• this is no longer a reference to scope, it is now a $scope service that is passed instead.
• Scopes still inherit, controllers do not. Consider using your module + $rootScope for global stuff.
• ng-model now fires on blur, you're probably looking for ng-model-instant. Removed in RC5
• $xhr is now $http and the syntax is slightly different

The popular item today for designers are CSS pre-processors (a 'light-syntax' version of CSS allowing for functions, variables, nesting and other nifty features). The two big names are LESS and SASS, although there are quite a few others out there too.

At my latest company, I've learned (and wielded quite mightily) SASS. However when looking at new projects in NodeJs, a question of wether or not I should switch to LESS has come up. I have collected four key differences that I feel make the answer quite plain:

As my company brings in new frontend designers for me to work with (and occasionally train) I find that I tend to live by the mantra: "Less is More". Apparently it's possible developers to be minimalists too.

Minimalism

In most of the CSS-related bugs, the first attempt to fix a problem or behavior should NEVER be to simply compensate for the symptom. Instead, learn to understand how the rules work together and try to find the source of the problem. Then evaluate if this source is necessary, or if a better alternative can be found. I have come to find that roughly half of the CSS bugs I find in other people's code can be fixed by just using the delete key. Those are good days.

Learn to take a minimalist approach with your code. Don't simply add rules if you're unsure if they're necessary or if you don't EXACTLY know how they behave. In fact, try to remove rules you know to be unnecessary if you can. Such as left/top properties on elements that are positioned static. And one more thing: don't add redundant rules for defaults or inherited properties.

These tips were developed in AngularJs v0.10.5 v1.0.1. I'll keep updating this post, so check back often!

I've compared a LOT of different javascript frameworks for my company's rewrite, and finally settled on AngularJS because of how rapidly I'm 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 on the fence take a look at TodoMVC for an excellent unbaised comparison.

Most of these tips have been moved to AngularUI - Go check it out!

The companion suite to AngularJS, a collection of work by many AngularJS users with a plethora of useful utilities.

Table of Contents

• Serializing the form
• Useful $scope methods
• Unescape HTML
• Avoiding Flash Of Unstyled Content (FOUC)
• Terse Class Toggling
• Working with Templates
• Working with Directives
• Working with Resources
• Nuances of ngDisabled
• Easy Table Sorting
• Routing Tricks
• Efficient storing groups of checkboxes
• Forcefully Compile HTML Partials
• Set a $scope variable's value from a Directive
• Refreshing Paritals and <ng-include>
• jQuery Plugins not triggering ng-model updates?
• Form Builder Demo
• Form Validating & Validating Too Early?
• Animating the creation of new elements (10.6)
• Want a CSS sandbox (webkit)
• QUnit Testing Examples
• Debugging
• Useful Resources

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.

Using iTerm? Check out this blog post

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, \033f [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.