What is Firefox ESR? How can you get Firefox Extended Support Release?

Firefox ESR is basically designed to prevent rapid upgrade cycles in browser breaking your software, since you cannot be constantly testing the latest version that comes out (pretty quickly nowadays).

The way they do this is that they simply update the user browser only once a year. With a 12 week overlap between two version so you can test if anything is broken. However, security updates continue throughout the year.

Source: http://www.mozilla.org/en-US/firefox/organizations/faq/

There is no additional difference from the standard desktop browser. Quote : “Firefox ESR is functionally identical to Firefox for desktop,”

So if it works in Firefox. It works in ESR.

The support gets no special treatment from Mozilla. It is via a mailing list: https://mail.mozilla.org/listinfo/enterprise Which is just a group of IT guys like us. The only difference is that everyone is using the same version of browser so if something is broken for one guy due to some browser issue, others can easily test it. You don’t need to ask “which version of Firefox are you using?”

Download is available here : http://www.mozilla.org/en-US/firefox/organizations/all.html .

Warning it overwrites the Firefox you currently have installed, since it is exactly the same. My settings and addons e.g. firebug were carried over without issues. Current ESR version (April 2013) is equivalent to Firefox 17 (which was the latest standard version Nov 2012). After you install this all it effectively does is change your update channel to esr:

Enjoy!

Html.DropDownListFor ASP.net MVC usage

Basically this is how I like to use DropDownListFor and SelectList in MVC

However  I have a simple class containing the items and the selection in one place:

Where I have these two pretty simple classes.
One class for each item:

And one class for the complete encapsulation:

This also allows me to keep my select list models independent of system.web 

Conditional Web Fonts for IE

Internet Explorer has supported eot fonts since version 8 : http://caniuse.com/#search=font-face

Here is how I like to do conditional fonts for IE :

@@font-face {

            font-family: "digitalIE";

            src: url("/img/fonts/digital.eot");

        }

        @@font-face {

            font-family: "digitalNonIE";

            src: url("/img/fonts/digital.ttf") format('truetype');

        }

        #displays {

            font-family: digitalIE,digitalNonIE;

            font-size: 12px;

        }

It avoids the ttf error :

@font-face failed OpenType embedding permission check. Permission must be Installable.

from preventing the eot font from being used. And browsers like chrome/firefox/safari/opera can happily use the true type fonts.

Also you can convert ttf fonts to eot online over here so you can support IE-8 as well :

convert : otf -> ttf : http://onlinefontconverter.com/
convert: ttf -> eot : http://www.kirsle.net/wizards/ttf2eot.cgi

KnockoutJS tip : when to use brackets?

I simply love the knockout.JS framework. It makes the migration from silverlight to javascript / html so much more comfortable.

One point of confusion in knockout JS you might feel is when do you have to use brackets in front of observable and when can you ignore them? 

e.g. in the knockout intro tutorial : http://learn.knockoutjs.com/#/?tutorial=intro 

This: 

will work just as well as: 

Then whats the difference?  is actually a function since ko.observable returns a function : 

My solution:
In code ALWAYS use ().You have to, otherwise you will remove the ko.observable function on assignment which is bad. And on reading you would get the function not the value you wanted. 

In simple data-bind attributes NEVER use (). Because it will not work to two way data binding, i.e If I had bound value: firstName() to the input it would not have worked.  

In calculated data-bind attributes e.g. value: firstName() + lastName() , use brackets since you want one way binding and basically running arbitrary javascript :) 

Enjoy! 

Using pycharm as an HTML/CSS editor

Pycharm is truly a complete IDE.

While going through CSS the missing manual I am using pycharm as my primary editor and it a joy to work with.

Here is one feature I especially like ... I start with a file like this (notice the terrible wordwrap):

I press Ctrl+Alt+L or the menu  Code -- Reformat Code
And pycharm will even fix the wordwrap for me (along with the obvious fixing the tabs in the head section):

Also ... pycharm has a dictionary checker () as well ... which isn't present even in VS2010 without an extension ... and I haven't found a VS extension that is as painless + on the fly.

Look at the colors in the sidebar
Another neat feature is that pycharm shows the color in CSS in the editors sidebar as shown:

Write CSS Faster:
Pycharm comes with snippets for all the css properties you could even want. E.g. to quickly add margin-bottom simply type mb as shown:

Press tab and you get a region where you can type the value you want:

Press Enter and it takes you to the end of that particular declaration so that you can start work on the next one i.e. note the position of the cursor in this picture:

Final words:
With pycharm I see python / django / GoogleAppEngine penetration really skyrocketing.



Enjoy!

Fun fact I didn't know about HTML : Headings

Only 6 levels of headings are supported by html! I never ran into such deep nesting (fortunately)
Read more about headings here : http://www.w3schools.com/html/html_headings.asp

And here is an image to show how h7 / h8 .... are not supported :