FireShot – A Really Good Webpage Screen Capture Tool

Working in the web industry and having the opportunity to develop a wide variety of websites, I like to take a snap-shot of a few pages for my portfolio (working on that!). But I generally come into issues when taking a screen-shot of a very long webpage. In fact, I always experience issues when screen grabbing a scrolling page.

Luckily, I found a really useful add-on to Firefox called Fireshot. Fireshot makes it really easy to screenshot an entire page. Once you have made a screenshot, you can carry out the following tasks within the comfort of your browser:

  • Upload to Facebook, Picasa, Flickr.
  • Saved to disk as PDF/PNG/GIF/JPEG/BMP
  • Sent to clipboard
  • Print
  • E-Mail
  • Export

I was expecting this tool generate a screen grab really slowly. Even on long pages with a lot of content, images are generated quickly. Take a look at the screen-shot I made of "www.theverge.com" here.

Definitely try it out.

Speed Up Firebug

I noticed recently that Firebug was running very slow whilst inspecting elements or debugging client-side scripts. In the past when noticing performance issues in Firefox, a straight-forward opening and closing the browser normally resolved any issues.

What I found after investigating this problem online is that Firebug keeps a record of all breakpoints and sites where Firebug was used. As you can imagine, this will accumulate over time. To remove all history, go to your Firefox profile directory which can be found here:

C:\Users\<Windows User Account Name>\AppData\Roaming\Mozilla\Firefox\Profiles\<Firefox Profile ID>.default\firebug

You will find two files within Firebug folder directory:

  • annotations.json - contains a history of website browsing.
  • breakpoints.json - contains currently set breakpoints.

 

Close all running instances of Firefox and delete both files within the directory.

Judging by posts from other users online, there could be other contributing factors to Firebug's sluggishness at times. Hopefully, by carrying out the steps above you will notice a difference.

Cannot View SharePoint Intranet in Internet Explorer, Firefox is fine

I created a SharePoint 2007 installation on a Development Virtual Server. The installation and configuration of SharePoint was no problem. It actually went quite smoothly compared to my previous attempts. Lucky me! I thought to myself: “Man, things can’t get better than this”.

But I then encountered a small hitch. For some reason, I could not view my intranet through Internet Explorer. The login popup box kept of appearing even though my user credentials were correct. I had no problem accessing my Intranet in Firefox. As much as I love to use Firefox (because it is such an awesome browser), some SharePoint features are restricted when a non-IE browser is used.

The first thing I did was to add my SharePoint intranet URL to my Local Intranet trusted sites in Internet Explorer settings. From looking on the Internet, this has worked for some SharePoint developers. However, this did not fix my problem.

Add to trusted sites

This confirmed that Internet Explorer is not passing my login credentials to Active Directory causing problems when it came to authentication. I started snooping around Internet Information Services and viewed the Authentication Settings: Directory Security tab > Authentication and Access Control > Edit.

I changed my authentication in IIS for all my intranet web sites: Central Administration, Main Portal and My Site. By default, the IIS Authentication methods were set to Enable Anonymous Access and Integrated Windows Authentication. I removed these options and just selected: Basic Authentication.

Authentication Methods

After you have changed these settings just carry out an iisreset.

Embed Flash Movie 100% for Firefox and Internet Explorer

I needed a flash movie to displayed at 100% in my web page. I thought this will be a simple job. Just set the height and width attributes within my object tag to “100%”. This method worked fine for Internet Explorer but failed in Firefox. Firefox seemed to ignore my size settings that contained a percentage. After a lot of time wasting, I confirmed that Firefox does not like its height and width attributes measured in percentages and only likes measurements in pixels.

In order to fix this problem I needed to do the following:

  1. Write some JavaScript just for Firefox so that it will get the users screen resolution in pixels and add this into my object tag that contained my Flash movie.
    <script type="text/javascript" language="javascript">
            if (window.innerWidth)
            {
                // Get screen width and height minus scroll bars
                var width = window.innerWidth - 24;
                var height = window.innerHeight - 24;           
                    
                //Find Flash movie
                var FlashMovie = document.getElementById('FlashMovie');           
    
                //Only assign width and height if browswer is not Internet Explorer
                if (navigator.appName.indexOf('Internet Explorer') == -1)
                {
                    FlashMovie.height = height;
                    FlashMovie.width = width;        
                }
            }       
    </script>
  2. Keep the height=”100%” width=”100%” object attributes. This will be needed for Internet Explorer.
    <object id="FlashMovie" type="application/x-shockwave-flash" height="100%" width="100%" data="myflash.swf">
        <param name="movie" value="myflash.swf" />
        <param name="wmode" value="transparent" />
        <p>
            No flash message
        </p>
    </object>

 

If anyone has any better idea on how to solve this problem. Please comment. Thanks!