Script Junkie | How to Debug Your jQuery Code

• Firebug—Although many developers have used Firebug, I don't think that many understand the true potential of its debugging capabilities. If you know your tools inside out, you can become a more productive and efficient programmer. Note: If you aren't using Firefox, the Firebug Lite bookmarklet can come in handy to provide many of the nice debugging features of its Firefox add-on counterpart. I tend to use this bookmarklet primarily with Google Chrome.
• FireQuery—This Firefox Firebug add-on provides some nice features to Firebug, such as letting you see which jQuery events are attached to what DOM elements, displaying any data elements that are attached to a DOM element, and providing the ability to inject jQuery into Web pages that don't have it already loaded.
• FireFinder—This Firefox Firebug add-on can help you find the selector you are looking for. You can test the selector you have, and it will highlight all those items on your Web page.

via msdn.microsoft.com

todo: checkout firequery, firefinder...

BugsVoice - turn bugs into opportunities

BugsVoice is ... serving friendly error pages and saving the exceptions and feedbacks on your account.

So if you get a trapped exception in your application (or in your web server), this will print out the script copied from your BugsVoice account, display the friendly error page to your customers, and collect their eventual feedback. All this will be saved in your account, and you can access any time to inspect the bug, feedback the customer etc. :-) .

BugsVoice - turn bugs into opportunities

Blogged with the Flock Browser

get ms ie to handle standards?

IE7 is a JavaScript library to make MSIE behave like a standards-compliant browser. It fixes many CSS issues

/IE7/

Blogged with the Flock Browser

prevent annoying non-secure warning in ms ie

"a protocol-independent absolute path:

img src="//domain.com/img/logo.png"

.... prevents that awful "This Page Contains Both Secure and Non-Secure Items" error message in IE"

"If the browser is viewing an page in SSL through HTTPS, then it'll request that asset with the https protocol, otherwise it'll request it with HTTP."

comment by Paul Irish @ Hidden Features of HTML - Stack Overflow

Blogged with the Flock Browser

CubicTest

CubicTest is a graphical Eclipse plug-in for writing Selenium and Watir tests. It makes tests faster and easier to write, and provides abstractions to make tests more robust and reusable.

CubicTest

Blogged with the Flock Browser

Vil avlive forhatt nettleser - digi.no : Personlig teknologi

Flere av Norges største nettsteder har innledet en kampanje mot Internet Explorer 6.

Vil avlive forhatt nettleser - digi.no : Personlig teknologi

hmm - kanskje me endeleg kan byrja med graceful degradation?

"Graceful Degradation is the principle that a web page should be
coded in such a way that if a browser cannot cope with something in it
the page can nonetheless be displayed in a simplified form." (Ben's web prog.)

"Graceful degradation has two basic rules:

1. Any browser must be able to view the content of the site.
   
2. Any browser must be able to navigate the site."

....
"The simplest way to avoid box model problems is to make sure they don't
matter much. If your box has a fixed width, a 5px padding and a 1px border,
Explorer will show it 12px smaller than the other browsers. If the design is
fluid enough to accommodate this difference you don't need to worry."

(fluid thinking, digital web mag.)

ev progressive enhancement...
poenget er vel at me kanskje har fått litt meir aksept for ulik oppleving i ulike weblesarar, ift ikkje-essensielle bells and whistles...

Blogged with the Flock Browser

Users Fix Parking Ticket Machine Interface Themselves - uselog.com | the product usability weblog

And once again it's a parking ticket machine that drives users nuts .... this time to the extent that they've taken their fate into their own hands and added some 'customized' labels to the device.

Users Fix Parking Ticket Machine Interface Themselves - uselog.com | the product usability weblog

Blogged with the Flock Browser

automatic testing - challenges

"practice of testing .... turned our art into engineering, introduced process-models, come up with best-practices, and developed tools ..."

Google Testing Blog: Automating tests vs. test-automation

downsides, problemer:

• "Scripting your manual tests this way takes far longer than just executing them manually.
• The UI is one of the least stable interfaces of any system, so we can start automating quite late in the development phase.
• Maintenance of the tests takes a significant amount of time.
• Execution is slow, and sometimes cumbersome.
• Tests become flaky.
• Tests break for the wrong reasons."

men: "advantages of automation still outweigh the cost. .... accept some of these problems as 'the price of automation'"

og der er workarounds:

• "It takes long to automate a test—Well, let's automate only tests that are important, and will be executed again and again in regression testing.
• Execution might be slow, but it is still faster than manual testing.
• Tests cannot break for the wrong reason—When they break we found a bug."

nokre poeng frå artikkelen (mi utheving):

"...a system exposes different interfaces to the environment—e.g., the user-interface, an interface between front-end and back-end, an interface to a data-store, and interfaces to other systems—it is obvious that we need to look at each and every interface and test it. ... also avoid testing the functionality in too many different places."

"...how this system looks inside.

• Is there a database? If so, the verification should probably not be performed against the UI but against the database.
• Do we need to interface with a supplier? If so, how should this interaction look?
• Is the same functionality available via an API? If so, it should be tested through the API, and the UI should just be checked to interact with the API correctly."

"Applying these simple questions will allow us to:

• write many more tests through the API, e.g., to cover many boundary conditions, ....
  
• start earlier with testing the system, as we can test each interface when it becomes 'quasi-stable',
• makes maintenance of tests and debugging easier, as the tests break closer to the source of the problem, ...."

"To summarize, I figured out that a successful automation project needs:

• to take the internal details and exposed interface of the system under test into account,
• to have many fast tests for each interface (including the UI),
• to verify the functionality at the lowest possible level,
  
• to have a set of end-to-end tests,
• to start at the same time as development,
• to overcome traditional boundaries between development and testing (spatial, organizational and process boundaries), and
  
• to use the same tools as the development team."

Enkle screenshots i firefox

https://addons.mozilla.org/en-US/firefox/addon/5648

Ser temmelig pen ut. Mye mindre smertefullt å illustrere bugs.

(Inge via epost)

ms ie 6, headache for developers

6 Reasons Why IE6 Must Die

[my italic]
Internet Explorer 6, released on August 27, 2001, was a package of problems right from the start. Within a year of release, Microsoft silently declared that IE6 would not make enough money for them to support as closely as a browser should supported. The result has been numerous security problems, unfixed browser bugs, and a daily migraine for developers.
....
Lack of PNG Transparency Support
....
CSS Float + Margin / Padding Issues
....
Lack of CSS Pseudo-Class & Pseudo-Element Support
....
No Min-Height CSS Support
....
CSS Anchor Background Image Flicker
....
Crashing With Code

ms ie 6 duplicate characters bug

moglege fiksar (av eigen erfaring):

• setja layout på div m/zoom:1
• placeholder-div etter problematisk div

IE Duplicate Characters Bug - CSS fixes and workarounds

Internet Explorer 6 has a puzzling bug involving multiple floated elements; text characters from the last of the floated elements are sometimes duplicated below the last float. This bug is a real headbanger because there seems to be nothing triggering it. However, by now everyone should know that IE needs no excuse to misbehave.
....
any elements .... that don't actually display for some reason [will induce the bug]. Apparently the act of hiding a source element is the critical trigger for this bug.
....

Fixes and Workarounds

One easy fix is to put a -3px right margin on the last left float. The
opposite can be done for layouts with right floats.
....
Another fix is to give the container element 3px of extra width, so that it is 3px
larger than the last float.
....
conditional comments may be used in place of normal HTML comments
....

Special Info

The murky veil surrounding the need for a box dimension to prevent so many IE bugs has been partially lifted, due to the discovery of a heretofore
obscure page in the massive Microsoft website. There is no real explaination of this
"hasLayout" property, but now there is at least some structure to the madness that has been inflicted on us by Microsoft, for what it's worth. Apparently a box needs "Layout" or all heck can break loose, bug-wise. MS does not state that specifically, but their browser behaviors leave no doubt whatsoever.

hasLayout, ms ie-bugs

On having layout — the concept of hasLayout in IE/Win

A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element “layout.”
....
“dimensional bugs” ... can often be solved by applying a width or height.
....

The hasLayout problem affects designers (and coders) at
all experience levels. Layout has unusual and hard to predict effects
on the display of boxes, as well as implications for their descendant
elements.

Consequences of an element having, or not having “layout” can include:

• Many common IE float bugs.
• Boxes themselves treating basic properties differently.
• Margin collapsing between a container and its descendants.
• Various problems with the construction of lists.
• Differences in the positioning of background images.
• Differences between browsers when using scripting.

dynamisk resize av tekstfelt?

la dei brukarane som vil ha større plass ordna det sjølv i gui?...

JSAN - Form.Element.Resize 0.03

Unobtrusive javascript class for make a standard form field resizable with the mouse
....
This nice class implement some methods for add a mouse-driven resize
feature on form fields such as text inputs, textareas and select
controls. Clicking and dragging the borders or the corners of the form
element will resize it while double clicking inside the element will
restore its original dimensions

banner blindness

jf hjelpetekstane våre...

Banner Blindness in Ballot Design (Case Study Sarasota, FL, 2006)

People have a tendency to never look at a slim rectangular area that's above the page's main headline. Banner blindness has been documented since 1997 and has been confirmed in recent eyetracking studies.

B2B Usability

(min utheving)
B2B Usability (Jakob Nielsen's Alertbox)

One of the biggest differences between B2B and B2C might be that most B2B companies don't seem to see themselves as engaged in e-commerce.
....
However, the lack of an Add to cart button doesn't mean that B2B vendors should ignore their websites. The site should still support the many other stages of the buying process -- including the post-sales stages, which are crucial to customers' long-term brand loyalty.
....
Most important, B2B sites can be great lead generators. Prospects use websites during their initial research and stick with the helpful sites during subsequent research.

The website represents the company to prospects. In today's world, people don't always save brochures and advertisements, because they assume they can find equivalent information on the Web when the need strikes. Most of our users also said that when they were thinking of doing business with a company, one of their first actions was to check out its website.
....
[among user-hostile design:]
The most user-hostile element of most B2B sites is a complete lack of pricing information. And yet, when we asked users to prioritize which of twenty-eight types of B2B site information mattered most to them, prices scored the highest by far (29% higher than product availability, which ranked second).

Sites have many excuses for not wanting to display prices, but they are just that: excuses. Users expect to get a basic understanding of products and services during their initial research, and they can't do that without some idea of what it's going to cost. Even if your company can't list exact prices, there are several ways to indicate price level, which is really all people need initially.