Posts Tagged ‘internet explorer’

HTML Web Toolkits – Twitter Bootstrap

Well it seems like I have been doing a rip and replace of most of the “homegrown” components that we are using in our environments as we gear up for the new year. The latest to fall to the axe is our HTML + CSS + widget collection that has been growing over the years which was a collection of code from different places:

  1. reset.css by Tantek Celik (http://www.cssreset.com/scripts/undohtml-css-tantek-celik/) – to provide a base for initial browser compatibility
  2. Multiple column layouts from the Dynamic Drive (http://www.dynamicdrive.com/style/layouts/category/C9/
  3. JQuery and JQuery UI widgets – here and there 
  4. Input Button and Link styles inspired by Particle Tree (http://particletree.com/features/rediscovering-the-button-element/)

Well like all web development shops, you pick your poison and stick with it, but with the troubles we have been having with different IE versions, I set out to find out whether we had to go through all the pain of tweaking each project, or whether we could re-use existing solutions. Well my search led me to Twitter Bootrap (http://twitter.github.com/bootstrap/index.html) which was at version 1.4 at the time, and 2.x was in beta and HTML5 Boilerplate (http://html5boilerplate.com/) both of which seemed to be great starting points.

However Bootstrap won out, in the end, because it provided a responsive UI for different screen sizes, pre-built basic elements which we use a lot, buttons, forms, tables, dialogs, message alerts which were easily setup. Okay JQuery UI has great widgets but they are a pain to setup configure and use, the code for a dialog is ~20 lines with CSS, etc, very powerful but no everybody needs a V-8 engine.

First on the agenda was to understand the grid layouts, okay I have heard about 960 and Blueprint grids, but I never understood how they worked, but wow!!! This is amazing, all I need to do is add a few pre-defined grid classes and you can get 2 column, 3 column layouts, our home grown frameworks would never do this … I liked it, coming from an engineering background and lots of database work I think rows, columns and relationships, and the grid well, had me at Hello World 🙂 

The built with bootstrap site (http://builtwithbootstrap.com/) provides a great starting point to see what is possible and available. We decided to use a free theme for a project we are starting and its working for us. 

As we walk this journey, the next challenge is how to handle the tables vs table-less designs for forms. Please drop me a line and let me know what your take either here or on my Stack Overflow question at http://stackoverflow.com/questions/10072991/responsive-html-page-design-pc-tablet-smartphone-with-table-or-table-less-fo 

Mozilla Firefox Updates – Now a Failed Experiment?

Okay now this is a ranting post … Mozilla decides that their development process for Firefox is too slow since Google Chrome and Microsoft Internet Explorer are eating their lunch …

So they made what I consider the dumbest experiment any software organization can do, copy a model and use it. I do not have a problem with the process just that:

  1. Increasing version numbers every 6 weeks – come on we had Firefox 3.6 at the beginning of the year and now we are at 9, at this rate we shall have FF 25 by the end of 2012. Remember with Chrome, the version numbers are not important at all
  2. Breaking extensions at each update. Firefox’s strength is with extensions, if they are unusable at each update WTF?
  3. Large update – 8MB for an upgrade from 8 to 9, what is in the update?

My advice for Mozilla is to use the approach followed by all other software development organizations, open source or not.

  1. Have a major release, maybe every year – this is where you introduce major features and can even break backwards compatibility
  2. Have minor releases every 6 weeks, this is okay, but make the update process seamless
  3. Simplify the update process – make it seamless so that we users are not expose to the vagaries of the browser versions …
  4. Ensure all our extensions work all the time, break them once a year but not once a week

I am still fighting to love Firefox, but Mozilla is making it hard and Google Chrome and Internet Explorer are improving fast ….

Internet Explorer – A Link is not a Link

Someone said that the browser wars are over, well I am not sure of that, they will only be over when Internet Explorer from the great and mighty Microsoft (M$FT) as its called by open source advocates starts following standards and its own rules all the time.

Having an HTML anchor tag () without an href attribute, means that certain behaviors like the hover effects are not recognized by IE 7, 8, whether in quirks mode (using the HTML 4 Transitional DOCTYPE) or standards compliant mode (HTML 4 Strict DOCTYPE).

The behavior between IE 6, 7, 8 and soon to be released 9 is a nightmare to deal with. M$FT why do u treat us so?