A List Apart: Test-Driven Progressive Enhancement

Posted by FG on 09/23/2008

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.

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  02:09 AM

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

Comment by finance budgeting articles on 11/22  at  04:29 PM

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

Comment by Family vacation spots on 11/22  at  04:31 PM

No doubt the production power is very much fast within time

Comment by Konferensanläggning on 12/11  at  09:50 AM

it is a great work!

Comment by laser on 03/09  at  07:46 PM

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

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

Great Works, a lot of userful information here

Comment by Ethan Zhang on 07/29  at  10:06 AM

i think that its a valuable thing .

Comment by مسلسلات رمضان مسلسل شر النف on 08/11  at  06:45 PM

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

Comment by astronomy lasers on 09/06  at  02: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  02:34 AM

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

Comment by bijuterii murano on 05/02  at  10:22 AM