Current support

JS

JS developers have used a workaround consisting in using JSONP (JSON with Padding). Since the same domain restriction don’t apply to dynamically loaded Javascript code, JSONP solves the crossdoamin issue by wrapping the JSON response in a JS function call. This approach assumes the server is ready to deliver JSONP data. JSONP is quite common and jQuery supports it natively.

Flash

This crossdomain policy behavior is well known in Flash as well and developers have been getting around this restricction (also imposed in the Flash player) with the –now famous– crossdomain.xml policy file.

All these approaches require the foreign server to implement a solution on their end (host the crossdomain file or implement JSONP).

HTML5

One of html5 new features allows for a different workaround to crossdomain restrictions that doesn’t involve changing the format of the response but rather the header of it. This means that we can get away without JSONP and utilize JSON or any other format prefered by our app.

CORS

This new feature is called CORS (Cross Origin Resource Sharing) and its intended to prevent crossdomain scripting attacks while still enabling sites to load content from external servers.

It works in two simple steps:

STEP 1: HTTP Request

Besides setting who the host of our request is (http://api.foo.com) we also set who the requester is:

Origin: http://api.origin.com

This Origin header is set by the browser and can’t be controlled by the user, and it’s send along with the full HTTP Request header:

GET /cors HTTP/1.1
Origin: http://api.origin.com
Host: api.foo.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: ...

STEP 2: HTTP Response

If the server accepts crossdomain requests its response will include (besides the requested content) who the response is intended for (http://api.origin.com). All the new HTML5 headers for CORS are prefixed with “Access-Control-”.

Access-Control-Allow-Origin: http://api.origin.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

SUPPORT

CORS is an HTML5 feature and, therefore, it’s not yet fully implemented across all browsers. Particularly, it’s not supported yet on Opera (desktop or mobile) and supported only partially in IE8 and 9 (using the XDomainRequest object but with some crazy restrictions).

The good news is that jQuery already implements CORS requests (jQuery.support.cors) natively for all browsers that can support it. Additionally there are some plugins in development for IE8 and IE9.

You can check the full support for CORS for more details.

CONCLUSION

Leaving Opera aside and old versions of IE (6 and 7), CORS are pretty well supported and can be reliably used. If you own the infrastructure you can more easily get over the biggest hurdle which is implementing Access-Control headers on the external server (although this will become more and more common, it still isn’t).

Because CORS eliminates the need for JSONP, code can be simpliffied and different response formats can be used again: plain HTML, XML, JSON, etc.

RESOURCES

You can read the w3c definition of CORS or the more readable tutorial at HTML5Rocks.

Git

The first reason that made Git so attractive was managing more than one paralel paths of development at once (eg. feature development that needs to happen in paralel with the deployment of hotfixes). With SVN all work not related to the hotfix would have to wait to be committed to the server, or very careful measures would have to be taken to avoid code rollovers. The concept of branches is integral to the way Git works and makes it extremely simple to switch development paths and manage complicated deployments. Also, unlike SVN, Git is fast.

Experimenting

Git branches allow to really quickly archive the current state of the project, change context and start experimenting. If the experiment goes awry it’s a breeze to get back to the original state, if it’s a success it can become the new development branch. Great for big refactoring efforts, experimental features, etc.

Branches also facilitate colaboration among many developers and some successful branching models have been set up to assist big groups to cooperate successfully. We follow this model (or slight variations of it) in many of our projects.

Server-less commits

Cloning a Git repo actually clones the whole project not just the files of the current state of the app, which means that you have a perfect copy and are free of using the server repo. Git is great for offline development since developers can commit files locally, repeatedly, without a server and finally push their work to the repo once online (with the full history of commits).

Github

Github is the perfect companion to Git. Since I have more and more adopted the cloud paradigm. One big advantage of Github is not having to physically clone a repo in order to be able to review code, check the history of a branch, review pull requests, etc. Finally Github is free for Open Source projects which makes it really attractive as a starting point for many.

Link to code

Something I really enjoy about Github is being able to link to sections of code. As simple as this might seem there never has been an easy way to do this.

Pull requests

Instead of blindly merging new code into the repository, developers can submit a pull request, a request to merge their code into the main branch (or trunk, or master) that can be reviewed, commented on and approved. Github can display the pull requests, conversations and resolutions. Pull requests are technically a Git feature, but the way Github handles them makes it pretty awesome to use.

Git Blame

Last feature that I really enjoy is blaming. Blaming allows anyone to determine the author of each line of code in a file. This is another feature that belongs to Git (also to SVN), that is greatly enhanced thanks to Github’s UI.

Resources

The Git Community Book: Freely available online and maintained by the community.

Book. This book has been built by dozens of people in the Git community, and is meant to help you learn how to use Git as quickly and easily as possible.

Pro Git: Published by Apress, the book is free online.

Here you can find the full content of the book, a blog with tips and updates about Git and the book and open source projects related to Git or referenced in the book.

If you want to write a codebase once and not update it, ship it on custom hardware that does not include networking capability and call it a day.

If you want to write software that works on the Internet, commit to a certain amount of ongoing maintenance.

CoffeeScript and Progress | Peter Lyons

Here’s the criteria I followed for selection:

License

• Free distribution: Fonts created with the Open Source philosophy
• Derivative works: Fonts that allow for free redistribution of derivative work

Design

• Monospace: Fixed width font
• Sans: Might be a personal preference but I find mono-serif fonts tiring to look at for long periods of time when writing code
• Readability: Above all the font must be readable at different sizes across different devices/screens
• Whitespace: Because negative space deserves some love
• Distinguishable characters:
  • ‘l’ and ‘i’ should be easily distinguished
  • ’0′ and ‘O’ should be easily distinguished
• Non-bitmap fonts: We are moving into the retina-era, we can’t depend on bitmap fonts for much longer
• Beautiful: Because we spend lots of time looking at our code

Character set

• Extended characterset: Most of the times good old ASCII is all we need, but a extended character set is favored since coding is an international art

Anonymous Pro

Anonymous has 624 glyphs and bold, oblique and oblique bold variations. The family looks beautiful and it’s one of the most rounded and serifed fonts in this list. I feel, thought, that it needs more space between the lines for better readability.

Anonymous Pro

[...] a family of four fixed-width fonts designed especially with coding in mind. Characters that could be mistaken for one another (O, 0, I, l, 1, etc.) have distinct shapes to make them easier to tell apart in the context of source code.

Anonymous has both vector and bitmap characters (for instances when antialiasing is not available). Bitmap glyphs might prove problematic for derivative work.

While Anonymous Pro looks great on Macs, Windows and Linux PCs with antialiasing enabled, it also includes embedded bitmaps for specific pixel sizes (“ppems” in font nerd speak) for both the regular and bold weight.

This font family is distributed under the Open Font License.

Anonymous Pro can be found at Font Squirrel

Inconsolata

Inconsolata has 359 glyphs. It is a beautiful font and very aesthetically pleasing. It lacks bold or oblique variations. A font with potential if it had a more extensive character set and wasn’t specifically geared to print and other high-resolution reproduction.

Inconsolata has been released under the Open Font License.

Inconsolata:

It is a monospace font, designed for code listings and the like, in print. There are a great many “programmer fonts,” designed primarily for use on the screen, but in most cases do not have the attention to detail for high resolution rendering.

Download at FontSquirrel

Liberation Mono

Liberation has 666 glyphs (including cyrillic and greek) it also has bold, oblique and oblique bold. It has been released as open source under the GNU General Public License version 2 (with exceptions).

Liberation Fonts

[Liberation Mono] aims at metric compatibility with Arial, Times New Roman, and Courier New. It is sponsored by Red Hat [...]

Download at Font Squirrel

Droid Sans Mono

The Droid font was created by the same font designer of Liberation, it has 900 glyphs (greek and cyrillic), and no bold or oblique variations. Its original goal seems to be rendering text rather than writing code. The zero is not slashed or ‘dotted’, the one is not serifed, etc. This font is licensed under Apache License.

Droid font

created [...] for use by the Open Handset Alliance platform Android. [...] The fonts are intended for use on the small screens of mobile handsets

Droid Sans Mono and other variable width variations can be found in the GitHub mirror of the Android repository and Font Squirrel

Ubuntu

A beautifully crafted font it includes a total of 1296 glyphs (extended latin, cyrillic, greek, basic symbols) plus bold, oblique and oblique bold variations. I would say that’s slightly overly designed (see “i” and “l”), it’s one of the fonts with most personality. I also have some readability issues with the “m” but it’s one of the best looking fonts both with and without antialiasing.

This font is “distributed under an open licence and you are expressly encouraged to “experiment, modify, share and improve.”

Ubuntu Font:

The Ubuntu typeface has been specially created to complement the Ubuntu tone of voice. It has a contemporary style and contains characteristics unique to the Ubuntu brand that convey a precise, reliable and free attitude.

Both the final font Truetype/OpenType files and the design files used to produce the font family are distributed under an open licence and you are expressly encouraged to experiment, modify, share and improve. The typeface is sans-serif, uses OpenType features and is manually hinted for clarity on desktop and mobile computing screens.

Ubuntu Mono at Font Squirrel

Bitstream Vera Sans Mono

Bitstream Vera has a small character set of 269 glyphs and includes bold, oblique and oblique bold variations. I would say it’s one of the most clean and readable fonts in this list.

From Wikipedia

It is a TrueType font with full hinting instructions, which improve its rendering quality on low-resolution devices such as computer monitors

Bitstream Vera was created as an open font to build upon (see DejaVu below). Here’s an extract from its license:

“The fonts have a generous copyright, allowing derivative works [...], and full redistribution [...]. They can be be bundled, redistributed and sold with any software.”

Download directly from Gnome or Font Squirrel

DejaVu Sans Mono

DejaVu, an derivation of Bitstream Vera, has 3289 glyphs covering latin, cyrillic, greek & arabic. It is one of the most extensive typefaces. It comes with bold, oblique and oblique bold variations. Besides the additional characters it looks exactly like Vera.

DejaVu Fonts

“DejaVu Sans Mono is based on the Bitstream Vera Sans Mono font, and has a wider range of characters than Bitstream Vera.” “Its purpose is to provide a wider range of characters while maintaining the original look and feel through the process of collaborative development (see authors), under a Free license.”

You can download DejaVu Sans at Font Squirrel

Side-by-side Comparison

Anonymous 14pt

Inconsolata 14 pt

Liberation Mono 12 pt

Droid Sans Mono 12 pt

Ubuntu 14 pt

BitStream Vera Sans Mono 12 pt

DejaVu Sans Mono 12 pt

In Closing

BitStream Vera/DejaVu are my top choices (for now). They are very readable, have great hinting and have been created with the spirit of the Open Source community. I’ll be test running this typeface for a while. Like everything in this world it’s a matter of personal choice and you probably can’t go wrong with any of the fonts above.

Reference

• 42 of the Best Monospaced Programming Fonts at CodeProject
• Revisiting Programming Fonts at Coding Horror
• Monospaced Fonts at Font Squirrel

Homebrew

Homebrew is said to be the easiest and most flexible way to install UNIX tools and the perfect replacement for MacPort. I can’t personally endorse homebrew versus other options (since I haven’t tried them) but I can say that homebrew makes installing packages really easy.

Homebrew will do one of two things when trying to install a new package, it will either install the binaries if available or compile from source code so you have a fresh, custom setup (therefore the word homebrew).

About packages

Package is a term that refers to software that’s distributed as an assembly of files and other meta-information (such as sw version, dependencies, etc). When installing a package Homebrew will not only install the software in question but also all it’s dependencies. #win

But, do I need it?

For easiness and comfort you do. It is also the recommended way to install many tools that I’m sure you need (or will need):

• git
• wget
• rsync
• markdown
• mysql & sqlite
• node.js

Usage

After setup, homebrew is a one liner for all your installs

brew install foo

What about updates

A nice side benefit of homebrew is that it will keep track of all the packages that it has intalled for you and allow for super-easy updtes:

brew update

That’s it. Done.

This is an open source book and you can fork it on github:

- The Little Book on CoffeeScript

Quote:

Middleman is a static site generator based on Sinatra. Providing dozens of templating languages (Haml, Sass, Compass, Slim, CoffeeScript, and more). Makes minification, compression, cache busting, Yaml data (and more) an easy part of your development cycle.

- MiddlemanApp.com

Middleman can be as simple or advance as needed since developers can utilize one or more of all the technologies that it supports. It extremely simplifies the process of testing some of these technologies since it installs all of its tools and compilers at once.

HTML Support
Perfect for getting into templating languages without a full Rails app to support it (ERB, Haml,…). It also incorporates an HTML5 boilerplate to get started.

CSS Support
Auto-generates your CSS from SASS or SCSS files and supports Compass.

JS Support
Supports CoffeScript as well as plain old JS

In my 25 years in IT I always stuck to one rule – give your customers an honest technical opinion, but if they decide to overrule it for whatever reason, do what they want. This strategy allows me sleep well at night knowing that I didn’t lie. I also know that I would have won more project bids if I wouldn’t stick to this rule.

Will HTML Force You to Lie? « Yakov Fain’s Blog

____

Update: It looks like Facebook has put a fix in place that will enable Adding an APP to any page from the APP itself

Follow this link for the best solution to this issue: https://developers.facebook.com/blog/post/2012/03/14/platform-updates–operation-developer-love/

____

The Bookmarklet

> Add APP to PAGE <

This bookmarklet will remove the need to do any further custom development on your app/tab.

How to use
Drag the link above to your toolbar (duh!) and visit your APP page (Eg: https://developers.facebook.com/apps/YOUR_APP_ID/). The bookmarklet will generate a dialog box to add the App to any of your PAGES:

How does it work
Behind the scenes all the bookmarklet does is redirect your browser to a url like the one below:

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

Note: Facebook’s official workaround to add your own app to your own page in a tab is anything but simple. There is along discussion here explaining the process in great detail: Facebook Removing App Profile Pages on Feb 1, 2012

Questions?
Reach out to me in twitter @omarrr