A List Apart: Test-Driven Progressive Enhancement

Posted by FG on 09/23/2008

Topics:

In issue 268 of A List Apart, our own Scott Jehl discusses our process of Test-Driven Progressive Enhancement. The article introduces a fresh approach to our earlier research on the topic, and includes a full rewrite of the Javascript which is faster and more flexible for development. We will post details on the script API in the lab shortly.

Article link: Test-Driven Progressive Enhancement.

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site

Comments

I checked the site alistapart.com. Good site with lots of information. Thanks for sharing this here.

Comment by Esther on 11/11  at  10:09 AM

Of course best production and best part of information available. Progressive approach

Comment by finance budgeting articles on 11/23  at  12:29 AM

Fresh approach is the earlier research , i think that its a valuable thing .

Comment by Family vacation spots on 11/23  at  12:31 AM

No doubt the production power is very much fast within time

Comment by Konferensanläggning on 12/11  at  05:50 PM

it is a great work!

Comment by laser on 03/10  at  03:46 AM

it’s true that the production pwoer is really very fast within the time.

Comment by Alex Bony on 06/02  at  09:26 AM

Great Works, a lot of userful information here

Comment by Ethan Zhang on 07/29  at  05:06 PM

i think that its a valuable thing .

Comment by مسلسلات رمضان مسلسل شر النف on 08/12  at  01:45 AM

well done, guy! thank you very much for sharing such wonderful post.

Comment by astronomy lasers on 09/06  at  09:02 AM

Hi,

The flyout menu and its sub menu is running on IE 7 browser, but flyout sub-menu is not running on Safari/Mozilla. Here is the following code in JSP with JSTL:
<div id="detailLocTypeFilterOptionDiv" style="display: block;">

<span class="ui-icon ui-icon-triangle-1-s"></span> <div id="locationCodeAndIdMenuSelector" style="width: 180px; height: 100%;padding-right: 6px;” align="left"> LOC/TYPE <font style="color:#000000;font-family:Lucida Grande, Lucida Sans, Arial, sans-serif;font-size: 15px;padding:0;margin:0;">→</font>ALL  </div>
<div class="hidden" >
<ul>
<li> <a href="#" rel="nofollow" rel="nofollow" onClick="setLocationCodeAndId(’ALL’, ‘ALL’);">ALL</a></li>
<c:forEach items="${filterBarData.locationTypeAndCode}" var="codeAndId">
<li>${codeAndId.groupItem}</li>
<ul>
<c:forEach items="${codeAndId.itemList}" var="id">
<li><a href="#" rel="nofollow" rel="nofollow" onClick="setLocationCodeAndId(’${codeAndId.groupItem}’, ‘${id.value}’);">${id.value}</a></li>
</c:forEach>
</ul>
</c:forEach>
</ul>
</div>
</div>

Here is the following JS code:
$(function(){
$(’#locTypeValue’).menu({
content: $(’#locTypeValue’).next().html(),
width: 183,
maxHeight: 180,
backLink: false,
flyOut: true
});
});

Please let me know what I am doing wrong.
Please help me.

Comment by DM on 12/30  at  10:34 AM

ok.. interesting approach. still waiting for details on the script API.

Comment by bijuterii murano on 05/02  at  05:22 PM

Commenting is closed for this post.

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site