Posts Tagged ‘chrome’

9 Apr

HTML Web Toolkits – Twitter Bootstrap

Posted by ssmusoke in chrome, css, html, opensource, responsive design, software development lifecycle, tips and tricks, twitter-bootstrap, web development. Tagged: , , , .

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 

20 May

My Take – Top 10 Reasons Why Firefox is still Better than Chrome for Web Development

Posted by ssmusoke in chrome, css, firefox, html, opensource, web development. Tagged: , , .

This my take on the topic started at http://tinyurl.com/3fhw7hb from personal experience.

My reasons are below:

1. Firebug – the defacto standard for web development troubleshooting, along with plugins like Google Page Speed, FirePHP, etc

2. Web Developer- another great extension, allows use of lines, clearing cache, disabling Javascript and cookies etc.

3. Other plugins –

4. Firefox 4 is almost at par with Chrome on speed and memory usage, so there is not much difference

5. Easier installation – I can control where I install Firefox not chrome, and I can also have different versions of Firefox, older versions as well as betas and bleeding edge nightlies

6. Profiles – one for development, a clean one for testing, a loaded one for day to day work, almost like virtualization

7. Brief – RSS feed reading extension, the best that there is

8. Configuration – almost the same as Chrome so no advantage here

9. Better memory usage in Firefox 4 which is almost at par with Chrome

10. Its been around longer so I have more experience with it

24 Jun

Safari 5 Goodies – Different Browsers for Each Tab

Posted by ssmusoke in web development. Tagged: , , , .

I spend most of my day looking through different browsers to ensure our solutions look and behave the same in each of them. Typically I read my RSS Feeds in Firefox using Brief, debug pages using Firebug and Web Developer. BTW the new Firefox 3.6.4 feels a bit snappier than the previous one, but I will give it a few more days to see what happens.

I am now in love with Chrome, especially since I could move the default settings out of the default roaming profile so I do not have to keep watching the cached pages etc.

IE 8, is not bad but I use it as the default browser since its used by 70% of most website users as its the default browser in Windows. Opera and Safari have not been anywhere in the mix, but Safari is now close to number 4 since its used on the imachines 🙂

This morning I got a popup on my desktop that an update for Safari was available, I had forgotten when I installed it, but well I said yet, but also made a decision to leave out Itunes and Quicktime. I use VLC for audio and video, hence I think that I am a geek

The update and installation on my broadband connection were smooth and happened in the background without interruption, and after about 20min, I had forgotten about it, then the install was done.

On opening the browser, I was pleasantly surprised, it looked and felt alot like Chrome, including the placement of the settings and options buttons, but well I don’t know who had it first, but imitation is the best form of flattery. As I looked through the options, I saw an impressive list of user agents, so I said to myself, well will check that out when I have to.

This evening on my way out, I had to check on mobile and desktop website updates, and I though why not try the user agents. I tried Iphone, first and well the updates were there. I thought to myself, why not check out the Ipad and main website, in different tabs. Being lazy, I decided to open a new tab for each, and try a different user agent in each tab.

Wham!!! Almost like Smeagal seeing his precious (Lord of the Rings), each tab had a different user-agent, the mobile sites looked as expected. Now APPL I am impressed, u may be dictatorial, but this is a win for web developers. As I clear my desk, I say to me, and today has been a good day.