Gravatar

Geoff Evason

Posts Tagged ‘tools’

Keeping Up With The Jones.com (Some online competitive analysis tools)

Monday, March 17th, 2008

It’s always good to know what your competition is up to, so naturally, if they have blogs, you should subscribe.

A few other useful tools:

Traffic Stats:

I’ve found 3 good tools that track traffic. None of theme seem to be overly accurate for small sites. Even for medium sites the numbers often don’t match the truth. (Comparing visitor stats from google analytics vs these tools shows a very significant underestimation for me). I know these stats sites track mostly US visits, but even taking into account that they seem to underestimate. I use them with the hop that they equally underestimate everyone.

Here are 3 sites that I use to check stats:

Alexa: (often said to be inaccurate by techcrunch)

http://www.alexa.com/search?q=www.momentville.com

Quantcast: (They do a good job of providing more info about the type of visits)

http://www.quantcast.com/momentville.com

Compete: (they have pretty graphs that let you compareup to 5 websites at a time)

http://siteanalytics.compete.com/momentville.com/

Tags: ,
Posted in startup, tech | View Comments

Simple Javascript to detect browser details

Monday, March 10th, 2008

Sometimes users of MomentVille will report a problem. It may be a javascript or css problem. Often, the first bit of info I need to find out is what browser they are using, and what their screen resolution is.

I thought it might be too tricky to get them to give me these details reliably, so I made a simple page that gives me the details I want. I just ask them to go to that page and copy and paste the text in an email. (Fortunately I don’t have to use it too often, but when I do it makes things easy).

The file looks as follows:


<html>
 <head>
  <title>Browser Check</title>
 </head>
 <body>
  <h3> Browser Info </h3>
  <br>
<script language="JavaScript" type="text/javascript">
<!--
document.write("navigator.appName " + navigator.appName + "<BR>");
document.write("navigator.userAgent " + navigator.userAgent + "<BR>");
document.write("navigator.appVersion " + navigator.appVersion + "<BR>");
//-->
</script>
  <h3> Resolution Info </h3>
<script language="JavaScript" type="text/javascript">
<!--
document.write("screen.width " + screen.width + "<BR>");
document.write("screen.height " + screen.height + "<BR>");
document.write("document.body.clientWidth" + document.body.clientWidth + "<BR>");
document.write("document.body.clientHeight" + document.body.clientHeight + "<BR>");
//-->
</script>
</body>
</html>

To see it in action check out: http://www.momentville.com/check_browser.html

Tags: , , ,
Posted in tech | View Comments

10 Best Tools For Testing, Debugging, & Optimizing Websites

Sunday, September 23rd, 2007

I’ve learned a lot about web apps in recent months, so I thought I summarize what I have found to be the most useful resources in terms of helping me do things well.

1. Firebug: http://www.getfirebug.com Firebug is a plugin for firefox that, well, lets you see any detail about a web page that you could conceivably what to see. I’ve only ever heard good things about, and the accolades are very well deserved. So far I’ve used it for:

  1. Analyzing the DOM
  2. Stepping through (and setting break points) in Javascript
  3. Viewing Javascript errors
  4. Viewing Styles

To be honest – I think I’ve only just scratched the surface.

2. Firefox Web Developer Toolbar https://addons.mozilla.org/en-US/firefox/addon/60 There may be some overlap between this and firebug, but I use both. I find this particularly good for debugging styling. ‘View Style Information’ is killer. It is also very useful for testing your site with javascript or cookies disabled.

3. YSlow http://developer.yahoo.com/yslow/ This is actually a plugin for firebug (yeah – a plugin for a plugin). It analyzes a page using 13 metrics (all with very details descriptions that are linked to), and gives a grade for each one, as well as an overall grade. I took my score from 33 to 60+ but my site is so much more responsive than it used to be. The biggest gain was simply by putting all the javascript at the end, so the page visually loads so much faster. I’m moving to a dedicated server at present, and will then be able to increase the grade even more.

4. Total Validator https://addons.mozilla.org/en-US/firefox/addon/2318 This basically just redirects you to a online html validator, though the pro version does it locally I believe. As I understand, valid HTML is good for both SEO & cross browser compatability (well – except for IE).

5. Selenium http://www.openqa.org/selenium/ Selenium uses javascript to test drive your app. I wrote about it before. Backend testing is easy in rails, but there is no way to test the user interface, especially for javascript heavy sights. Selenium is the answer. With the IDE you can even record actions and run them as test later :-)

6. IE Developer Toolbar (ie toolbar download) This is basically a combination of firebug & the firefox web developer toolbar. It’s pretty good, and I’ve used it several times to track what was happening in IE. It only works with IE7 though – which is too bad since most of my problems are with IE6…

7. ScreenGrab http://www.screengrab.org/ This firefox plugin lets you render a page (visible portion or whole thing) to an image file. One note – it allows you to save with a .jpg extension, but really saves in .png format. This caused me problems when I was trying to do something with an image that needed to really be in .jpg format…

8. Quick Locale Switcher https://addons.mozilla.org/en-US/firefox/addon/1333 This is ideal for testing an app with localization. I’ve only played around with it quickly as I’m not doing localization yet, but it will come in very handy when I do.

9. Site Report Card http://www.sitereportcard.com This is an online tool that checks a number of things on your site, such as inclusion in search engines, html validity, spelling, links, etc.

10. Love Love Okay – so I really only have 9 tools – but 10 just seems like a better number for a title… Love is good though. Spread the love and all will be well…

So there’s my opinion of the top 10 tools for testing, debugging, and optimizing web apps. most of them are firefox add-ons, but I would recommend against getting too dependent on firefox. The <problem> with firefox is the lack of bugs… Rotate browsers when developing…

Tags: , , , ,
Posted in tech | View Comments

Cross Browser Testing & Tools

Sunday, September 9th, 2007

So, at least for the site I’ve been working on, cross browser verification has been troublesome. This is probably the worst case scenario since it is javascript heavy, has a complex Dom, and has themes (34 and growing)…

So – how have I been testing it? (if I’m missing anything – please let me know!!!)

Well first, I have 4 browsers installed on my machine:

  1. Firefox 2.0 : http://en.www.mozilla.com/en/firefox/
  2. Safari for windows : http://www.apple.com/safari/ (firefox is better for developing, but Safari just tends to look really good and work really well)
  3. IE7 : http://www.microsoft.com/windows/downloads/ie/getitnow.mspx
  4. IE6 standalone http://browsers.evolt.org/download.php?/ie/32bit/standalone/ie6eolas_nt.zip

Beyond that, there are 2 other things I found very useful, each corresponding to the 2 things that are needed for cross browser testing: Styles & Behaviour

1- BrowserCam : http://www.browsercam.com/ It takes screenshots of your webpage using a whole range of browsers on a whole range of platforms. If you’re stingy you can get a demo account, but it’s worth signing up for at least a month. This helps ensure cross browser compatibility for styles.

2 – Selenium : http://www.openqa.org/selenium/ Selenium test drives your apps using javascript. It’s really ingenuous. You write (or record using Selenium IDE) scripts to perform actions, like type data, click, drag and drop, etc. You can also create assertions on page titles, dom elements, page contents, etc. If you have a javascript heavy site, Selenium is a must!

You can write selenium scripts in a variety of languages, and run it from either the front end or the backend. That is, you can drive it from a local server and test any site on the web, or, using selenium on rails, http://www.openqa.org/selenium-on-rails/ write some tests, and then just run them by visiting (test.myapp.com/selenium). I actually recommend the former, after having tried both. I’ll write more about selenium sometime later, as there is lots to cover.

I’m putting together a list of the other tools I use (plugins, etc) and will post that shortly.

Tags: , ,
Posted in tech | View Comments