Is Firefox dying a slow death?

Google launched this morning a new beta version of Chrome 2.0. The best thing about this new beta is speed — it’s 25% faster on V8 benchmark and 35% faster on the Sunspider benchmark than the current stable channel version and almost twice as fast when compared to original beta version. Other enhancements include user script support (greasemonkey-like) and form auto-fill.

Wait a minute? Isn’t this article about Firefox dying a slow death … YES, it is and I am getting there.

Run Chrome and Firefox side-by-side, and Firefox is embarrassingly slow. It’s not even in the same league. It’s an old man on the running track trying to compete against a 20 year-old.

IE 8, Chrome and Firefox

The latest IE 8 absolutely smoke Firefox in performance and stability. What an absolute humiliation for the Firefox developers. They had years to get their there stuff together. But they sat on their asses and now they have been left in the technological dust by both Google and Microsoft.

In Firefox All tabs and Javascript run in one giant mess. One execution heavy tab drags down the performance of the entire browser No memory protection. Everything is in one gigantic soup of data. One tab crashes, down goes the whole browser Clunky and slow cross platform UI implementation

When I use to run Firefox a few months ago before switching to Chrome I could feel Firefox getting slower and slower and slower as the hours of use ticked by until finally getting annoyed enough to have to quit the app and restart it. Doesn’t seem like a big deal but I would end up restarting Firefox three to four times every day just to clear out whatever junk it seems to accumulate.

Sadly, Firefox developers shifted from “fast and simplified feature set” to “include lots of features to make the web fun and easy.” They’re working on Firefox 3.5 and 3.6 right now, both of which are feature-driven releases. Astonishingly, the one feature for Firefox 3.5 that makes the release competitive with Chrome and Safari—the new JavaScript engine, TraceMonkey—was almost cut from the release because it is/was too buggy to fit into their release schedule.

The Mozilla 2.0 [mozillazine.org] project, which is supposed to refactor a good deal of the Gecko code in order to make it leaner and easier to deal with, is not getting much attention at all while the feature-driven point releases consume everyone’s attention. Mozilla developers have lost any focus they once had on the fundamentals of browser innovation, and are now given over to the same level of feature bloat that killed the original Mozilla browser (now SeaMonkey). Extensions were supposed to be the solution for this: extra features could be implemented by users so that developers could focus on making the browser faster. Not anymore.

It will not surprise me if the hard core of geeks that abandoned Mozilla Suite for Firefox now abandon Firefox for Chrome and IE 8. The first one of those browsers to get an extensions/plugin framework allowing for ad-blocking and development tools will start sucking a lot of folks over.

Will JavaScript decide the future and ultimately the winner of modern browser wars?

The Internet is fast growing from a Web made of static pages into a Web that also includes applications that perform computational tasks and that people interact with. In other words, browsers of future have to process data as well as load pages at a much faster speed and in a more efficient manner.

Microsoft’s dominant browser share - 67 percent according to Net Applications figures reflects the current usage of IE but will Microsoft be able to maintain this market share in the future? That is the million dollar question and will depend on a number of different events that will unfold in future. Lets discuss some of the possibilities here -

Is performance the key area?

All the major browser players consider JavaScript performance as a major part of their competitive attack, even to the point of naming their JavaScript engines built into their browsers: Chrome’s V8, Firefox’s TraceMonkey, Opera’s Futhark and upcoming Carakan, and Safari’s newly branded Nitro, which is Apple’s version of WebKit’s Squirrelfish.

Though IE lags all these rivals in JavaScript performance, Microsoft does care about performance overall and JavaScript performance specifically. Even as Microsoft launched a brand-new browser version, Internet Explorer 8, on Thursday, however, it’s also clear the company has a big difference of opinion about the matter.

“We’re going to keep making the script engines faster (but) right now it’s not clear how many people are gated by script performance,” said IE general manager Dean Hachamovitch in an interview. “JavaScript comprises a small portion of how fast a Web page will render. It is a piece, but by no means the holy grail.”

Because it’s easy to measure, JavaScript performance has “become shorthand for browser performance,” Hachamovitch added. Microsoft has begun touting its new test of page-loading speeds in which IE 8 fared better overall than Firefox 3.0.5 and Chrome 1.0. A supporting slow-motion video (click “Case Study Videos, then Performance Testing) shows page-loading speeds down to the hundredth of a second.

Likely not coincidentally, though, Google offered its own propaganda the day before the IE 8 launch. Google launched its Chrome Experiments site to tout what can be done with high-performance JavaScript and to promote its browser. While Chrome generally runs sites’ applications with aplomb, that isn’t the case for IE.

“The faster we make JavaScript, the more interesting and interactive the Web becomes,” said Mike Beltzner, Mozilla’s director of Firefox.

“JavaScript in Chrome almost reaches the speed of Flash,” said programmer Mr. Doob, who wrote Chrome Experiments called Ball Pool and Google Gravity, in a blog post about them this week.

What about the cross browser issues?

In an interview, Mr. Doob - a Flash programmer who learned JavaScript just for the Chrome Experiments and declined to give his real name said JavaScript is about three quarters Flash’s speed. There are weaknesses, though. For one thing, he found JavaScript developer tools to be primitive. For another, JavaScript varies from one browser to the next.

“The main benefit of ActionScript is that it will look exactly the same in any browser and in any version of the browser, even on IE6! With JavaScript it depends on which features the browser supports so you would spend more time making sure the project looks good in all the browsers than actually developing the project,” he said. To make his Chrome experiments work on other browsers, “I’ll have to introduce some hacks which will slow down performance and will dramatically affect the user experience.”

For now, performance is the top priority. At least until JavaScript gets fast enough that other problems move to the fore.

“All it took was a little competition to get other companies focusing on this problem,” said Darin Fisher, a Chrome engineer at Google. At some point, “Suddenly this problem won’t be a problem anymore and we can move on to the next issue.”

So what happens in future is a thing to wait and watch I guess.

Fantastic new Javascript debugging tool with IE 8 and its list of features hard to live without

I have heard web developers complaining about earlier versions of IE for being non compliant and also how hard it is to debug CSS and JavaScript in IE. Well the good news is Microsoft has listened and with Internet Explorer 8 Microsoft has launched Developer Tools (Developer Tools are available for a while now) and that sets a new era in JavaScript and CSS debugging.

Download IE 8 Beta Version here

You can open the Developer Tools by pressing F12 or by clicking the Developer Tools option in the Tools menu on the Windows Internet Explorer toolbar.

IE8 is a standard compliant browser and that means that some of the sites you may have developed prior to IE 8 may have to be reworked to be standards compliant. Don’t worry though … IE 8 has a much needed “Emulate IE7″ button that you will turn on for most of your browsing. And this button renders the site as if its rendering in IE7. Well, the real magic comes in when you launch the IE 8 Developer Tools and realize just how much power there is in using them on a site.

 

Here is a list of some of the awesome features of Developer Tools in IE8 -

JavaScript Debugging

The Script mode allows you to debug scripts on your Web page by allowing you to step through the code, insert breakpoints, and inspect variables. By providing a built-in lightweight debugger that lets you set breakpoints and step through client-side script, the Developer Tools enables you to debug your scripts without leaving Windows Internet Explorer. All the standard debugging features you expect in server side technologies but actually debugging client side JavaScript. This will end up being a life saver if you use JavaScript often.
Path : Open Developer Tools -> Click Script Tab -> Set Breakpoints and Refresh the associated web page

Color picker

It allows you to click the color picker then select any point on the web page and be told it’s Hex value. This is a tiny utility but is very powerful wehn it comes to web development and CSS designing.
Path : Open Developer Tools -> Click Tools -> Show Color Picker (Ctrl + K)

CSS Sandbox 

Every change you make to the HTML or CSS is immediately reflected in the browser. This makes it easy to take a page and edit the CSS or HTML on the fly. Once your happy with the changes you can just click to save the files.

JavaScript Code Profiling

You can view all of the JavaScript functions and the order they were run in during the profiling session. It details how long each function took, the line number of the code that was executed and if you click on it, it takes you to the source code that was being executed. You can use this mode to investigate your Web site’s execution time using information gathered by Profiler as the Windows Internet Explorer renders your Web site. This information is helpful to target optimizations if a piece of code is causing excessively long execution time, or a bottleneck.
Path : Open Developer Tools -> Click Profiler Tab

Layout View (Worth a million)

If you are not able to figure out the layout of a particular object. Click on the html code or select the element by clicking on it and then switch to Layout View to be given a graphical representation of the Layout.Layout provides info on margin, padding, spacing and border for the selected object.
Path : Open Developer Tools -> Click HTML Tab -> Select the HTML element -> Click on Layout button on the right hand side icon bar at top

Test web page on different browser resolutions with one click

Resize the browser window to either: 800×600, 1024×768, 1280×768, 1280×1024 or set up a custom size. This enables you to test web pages in different screen resolutions quickly and easily.
Path : Open Developer Tools -> Click Tools -> Resize

View Image related info

Click on Image > Show Image Sizes for all the image sizes to be shown onscreen, so you can easily see if any are larger than they need to be. Bug Alert: You will not be bale to see the size though if image area is lesser then the text display for size. There are other great options if you click on Images on tool bar like - View Alt text, File locations, Dimensions etc. 
Path : Open Developer Tools -> Click Images -> Show Image File Sizes

Page Element Highlighting (This feature kicks ass)

You can make IE Visually outline Tables, Divs, Table Cells ,Images or any element on the page.
Path : Open Developer Tools -> Click Outline

And remember Developer tools is a part of the browser and not an add-in. I am not going to compare Developer Tools with Firebug. But I must say that one thing about Firefox. It forces Microsoft to try to do better stuff, even if it means copying features and interface design in some way. Without Firefox, I bet notepad would still be the source viewer of IE.

I am a long-time user of Firefox and Firebug and can not imagine developing without it, but the fact is that I usually have to support IE and Developer Tools seems similar to Firebug in its capabilities and is a welcome addition to the IE offering. Plus, You should embrace all user agents as much as possible.

We as developers do welcome this fantastic upgrade by Microsoft.

How to create high quality (resolution) pie chart using ASP.NET and C#

Using ASP.NET’s Drawing namespace we can easily create high quality charts and graphs without using any 3rd party components.

To demonstrate and for the purpose of this article we will be working with Bitmap and Graphics class. You can think of Bitmap as the drawing board and Graphics as the toolbox to draw anything out of your imagination. Both these classes are available in ASP.NET under System.Image and System.Image.Drawing namespace and are used for creating and manipulating images on the fly.

Don’t forget to include these namespaces -

using System.Image

using System.Image.Drawing

To create the drawing board, we just need to instantiate an object of Bitmap class like following -

Bitmap objBitmap = new Bitmap(width, height);

You can change the width and height of the bitmap by passing in width and height as parameters.

Now we will create an Arraylist of colors that we will use to define different pieces of the pie chart. I am using the following for the purpose of this article but you can use a for loop to create random colors if you want.

System.Collections.ArrayList colors = new System.Collections.ArrayList();

colors.Add(new SolidBrush(Color.FromArgb(255, 235, 149)));

colors.Add(new SolidBrush(Color.FromArgb(232, 110, 52)));

colors.Add(new SolidBrush(Color.FromArgb(240, 179, 16)));

colors.Add(new SolidBrush(Color.FromArgb(186, 208, 236)));

Now that we have a canvas, we need to create an instance of the Graphics class, create the paintbrush, and specify a canvas to use. We can accomplish this using the static Graphics method FromImage, which takes an Image instance as a single parameter and returns a resulting Graphics instance. We can pass in the instance of the Bitmap class, since it is derived from the Image class.

Graphics objGraphics = Graphics.FromImage(objBitmap);

Now comes the most important part, this part of code will define the look of the pie chart. Here are a set of properties that we need to set to obtain a better resolution to get the resolution just like any other third party components.

objGraphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;

objGraphics.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;

objGraphics.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;

objGraphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.ClearTypeGridFit;

You can follow this link for more information on Graphics class and the properties used above - http://msdn.microsoft.com/en-us/library/system.drawing.graphics(VS.80).aspx

Now we will run our for loop to create the slices of the pie chart and slices will add up to create the full pie chart.

for (iLoop = 0; iLoop < ds.Tables[0].Rows.Count - 1; iLoop++)

{

//create the slice with values coming from the database and total is the aggregate of total amount of data or total slices of pie

objGraphics.FillPie((SolidBrush)colors[iLoop], pieRect, currentDegree,

Convert.ToSingle(ds.Tables[0].Rows[iLoop][dataColumnName]) / total * 360);

//here datacolumnname is the value of a single slice of pie coming from the database

// increment the currentDegree

currentDegree +=

Convert.ToSingle(ds.Tables[0].Rows[iLoop][dataColumnName]) / total * 360;

}

NOTE: You can refer to these articles for Advanced Shading Effects using ASP.NET and C#.

http://www.codeproject.com/KB/cs/ColorShading.aspx

http://www.codeproject.com/KB/GDI-plus/drawing3dgdi.aspx

Now the only other thing that we need to do is to save the image as the highest quality. Also, you can copy the following code to your aspx page that will return the image as a page

response stream. e.g. if you named this page as return_image.aspx then you can use this image anywhere using this line of HTML code -

<img src=”return_image.aspx” alt=”" border=”0″ />

and your image will be rendered here.

Following is the code for generating highest quality pie chart image and return as a response stream to the browser.

using (System.Drawing.Image img = LoadImage()) //LoadImage() will return the image that we

have created in the steps above.

{

ImageCodecInfo myImageCodecInfo;

Encoder myEncoder;

EncoderParameter myEncoderParameter;

EncoderParameters myEncoderParameters;

myImageCodecInfo = GetEncoderInfo(”image/jpeg”);

myEncoder = Encoder.Quality;

myEncoderParameters = new EncoderParameters(1);

myEncoderParameter = new EncoderParameter(myEncoder, 100L); //You can use 100L to increase or decrease the quality of the image.

myEncoderParameters.Param[0] = myEncoderParameter;

Response.ContentType = “image/gif”;

img.Save(Response.OutputStream, myImageCodecInfo, myEncoderParameters);

}

private static ImageCodecInfo GetEncoderInfo(String mimeType)

{

int j;

ImageCodecInfo[] encoders;

encoders = ImageCodecInfo.GetImageEncoders();

for (j = 0; j < encoders.Length; ++j)

{

if (encoders[j].MimeType == mimeType)

return encoders[j];

}

return null;

}

Top navigation Horizontal Menu appears below the content when using Nice Menus with Zen layout - Drupal

While working with a client hosting a VOIP based solutions web site on Drupal. The top navigation menu was hiding underneath the content DIV. We were using the Nice Menus along with the Zen layout.

BUG - The top navigation menu was moving underneath the content DIV.

And this was happening only for IE7 and IE6, Firefox was working fine. So I used bit of a CSS hack for IE browsers and made following changes to colmask class in layout.css. This made the menus show up fine.

/* column container */
.colmask {
    position:relative;        /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
    clear:both;
    float:left;
    width:100%;                /* width of whole page */
    overflow:hidden;    /*      This chops off any overhanging divs */
    *z-index:-1;     /* Adding this is the key   */
}

Also on another note Nice Menus will not render the hover effect in IE6. IE6 only works with hover for anchor tags and since Nice Menus is using lists, hover on lists will not work in IE6.

To fix this issue you can use csshover.htc, you just need to add this to behavior of the body like following in the CSS file and you will be good to go.

body    {     behavior:url("csshover.htc");    }

Remember -  csshover.htc needs to be copied to the document root of your web application AND not to relative root of CSS.

What is .htc extension?

Its a Jscript file (csshover.htc) and is added to the page via a Microsoft proprietary "behavior" rule in the CSS file. Another way of adding this to the page is

<head>
…title element, meta tags, etc…
<style type="text/css">
/* some ordinary CSS rules… */
</style>
<!– The line below starts the conditional comment –>
<!–[if IE]>
  <style type="text/css">
body {behavior: url(csshover.htc);}
  </style>
<![endif]–> <!– This ends the conditional comment –>
</head>

We don’t want our CSS to fail validation, so a conditional comment is created to contain a separate style sheet to hold our behavior rule.

csshover.htc file can be downloaded from here - http://www.xs4all.nl/~peterned/csshover.html

« Previous Page — Next Page »