It's all about podcasting, baby!

It's all about podcasting, baby!

As a born multi-tasker, I never have the time to settle to any single thing at one time. Podcasts were totally made for me. There is so much out there for web devs to play with, and it is important to be informed about what is hot - and what is not.
I have been an avid listener to podcasts from the BBC and the NYTimes for a while now: and I love the brief overview that the front page of the NY Times gives me, the
in depth international views from the BBC documentaries: and everything in between.
The subject mattters vary, and I get a wide perspective on many aspects of life.
The only trouble is that there are so many, and they all look so darn good :)

The absolutely grooviest discovery that I have made of late in the podcast world is young Mr. Dan Carlin. My kinda guy. An off-the-cuff and real world look at what's happening - and what happened way back in history.
Dan Carlin, we think you de man

Big in the web geek world - I am finding these intriguing as an overview, and a Brit view on these things:
boagworld, and of course
the .net magazine podcast
- this guy talks a little funny: but I can relate :)

There's also Talk Crunch and
The Web 2.0 Show - crazy stuff. Looking forward to diving into these very much. So much to hear...

post-Web Directions North

Fabulous!

Talented line up: it is really incredible to me how many people are involved in working on mind-bending apps and tools on the web. It was fun to discuss where standards are headed with folks like Erik Saltwell, dev manager of Expression Web and other star-studded celebs.

Microformats, mashups and forward-looking site designs were all the rage - designing for standards-based browsers (bearing in mind that IE6 users will lose out on certain features), looking at different hardware for accessing the web/receiving feeds, incredible ways to build mashups, and on and on.

Links:


NGenworks


Flickr pics

More later....

Incredibly useful web tools

Mozilla extensions:

Web dev toolbar - enable & disable scripts, CSS, etc. Highlight elements, classes, etc.
ColorZilla - detect and identify hex colors
Firebug - identify elements & classes, view the node tree, debug scripts
YSlow - see page load times, and how to improve it


IE extension:
Dev toolbar - identify elements & classes, view the node tree


General tool:
Meazure - pixel tool, see the grid

Web Directions North

I will be at Web Directions North at the end of the month: and it will be an awesome opportunity to swat up on the latest developments in the web world. I am particularly excited about the JavaScript workshop with the fabulous Mr Adams - and I can't wait to transcend CSS with the venerable Mr. Clarke.

I am extremely passionate about creating a solid script library for Ascentium: and evangelizing best practice in the industry, so this stuff really lights my fire.

Creating buildings became more complex when government agencies and legal bodies got involved: it is now mandatory to include wheelchair access, fire escapes, air circulation, sprinklers, etc. When institutions become available to the public, the public develop expectations. The web is becoming an increasingly important tool on the world stage for: brand image, PR, advertising, community building, retail, and on and on. People feel possession of what they read online: they feel that the web must enable them. They expect search engines to show them realistic listings of relevant content. They want to be able to resize text, view pages on mobile devices, quickly download video, be able to check out sites with screen readers, and so on. Professional web developers are therefore finding that our page structures and content have to take into account new factors as the web matures. Semantic HTML, SEO-aware AJAX, accessible markup, separating content from markup and behavior - these are all admirable ways to achieve many of the new challenges.

On a personal note, it will be interesting to see how fellow web developers see their role. As the web expands and develops, the roles required to produce quality sites also develop. The front end developer's role has increased exponentially in the last year or two. it now requires an in depth understanding of: HTML, XHTML, XML, CSS, JavaScript, SEO, accessibility, Microformats, meta tags, mime types, favicons, behaviors, expressions, hacks, design concepts, pngs, PhotoShop - and various server-side languages.

A few years ago, it was as if the front end was a low-entry point for developing pages: and if you wanted to get serious, you had to go into programming, and you probably would never put too much effort into the front end again after that. Now that more and more sites are regularly over a thousand pages and need to be maintained over many years, there is an increasing need for web devs who can maintain searchable and maintainable sites with light and modular pages.

It will also be interesting to see if there is any discussion about a future front end certification. I am sure that this idea is germinating somewhere: and I am sure that unobtrusive JavaScript that degrades gracefully will be a big part of it.

Exciting times: more later....

=)

Excerpt from our JavaScript class, part of the front end group I co-run with my posse at Ascentium.

I am one of Ascentium's rock stars =)
Ascentium
I am a front end dev at Ascentium: working with peers to ensure the quality of our work by learning & teaching best practice in all aspects of front end code. We look at up-to-date methods in CSS, JavaScript and page structure: and teach how to make our sites perform well for SEO, accessibility, page load times, maintainability & the cross-browser experience. We are blessed to be in an organization where many folks from many job roles are fired up about these things.

My experience at Microsoft as a user tester at Expression Web is incredibly useful in this. The Expression team at Microsoft are passionately serious about web standards and ensuring that the web sites of the future will be standards-based, and therefore adhere to the standards brought to the table by the many interest groups that require this. They are an incredibly well-informed and intelligent group of people in the center of the team creating the future of web design.

This blog post is a taste of the type of information that we share in our JavaScript class at Ascentium.

Concepts from Jeremy Keith's fine DOM Scripting book

JavaScript’s History
Netscape enabled JavaScript for the first time in 1995 with Navigator 2.
Microsoft struggled to play catch up, enabling JScript in IE3.
Netscape & Sun worked with the ECMA (the European Computer Manufacturers Association) to standardize the language. The standardized version was called ECMAScript. By 1996, the standardized script was taken up in varying degrees by browser versions 3 and above: the script version is widely known as JavaScript 1.1. The current version of JavaScript is JavaScript 1.6. The W3C encourage browser coders to standardize JavaScript implementations.

Best-practice JavaScript
Degrade gracefully means that the page appears acceptable and behaves in an acceptable manner in older browsers/browsers with incomplete support for the JavaScript functions, or no JavaScript functionality at all. For instance, navigation must not depend on JavaScript.

Backwards compatibility means compatible with older browsers, or browsers with limited or no JavaScript functionality.

Another aspect of best-practice JavaScript scripting is enabling pages to load as quickly as possible. This comes from: externalizing scripts, so that they download once for the entire site (and then are cached by the browser and reused by the pages of the site); and limiting the size of the script by thinking carefully about its syntax.

Jeremy Keith's book

Server Side XML Transformation

Let's do it!

To transform an XML node
try something like this (the related XML is below):
<asp:xmldatasource id="MySource" datafile="~/xml/articles.xml" xpath="articles/article" runat="server">

<asp:datalist id="MyDataList" datasourceid="MySource" runat="server">
<itemtemplate>
<ul class="linklist2">
<li><a href="<%# XPath">"><%# XPath("title") %></a></li>
</ul>
</itemtemplate>
</asp:DataList>

Explanation:
XmlDataSource – defines data source
- Its XPath attribute defines the part of the doc it will draw from.
DataList – data instance drawing from the data, referring to it by id. There can be more than one.
ItemTemplate – looping template, writing data into the html where indicated by XPath controls.

The XML:
<?xml version="1.0" encoding="utf-8" ?>
<articles>
<article>
<id>1</id>
<title>1 Title Name</title>
<author>1 AuthorFirst AuthorLast</author>
<pubdate>1 Published Date</pubdate> <content>article1.html</content>
</article>
<article>
<id>2</id>
<title>2 Title Name</title>
<author>2 AuthorFirst AuthorLast</author>
<pubdate>2 Published Date</pubdate> <content>article2.html</content>
</article>
</articles>



To transform according to/using attributes
try something like this (the XML follows below):
<asp:xmldatasource id="MySource" datafile="Default.xml" xpath="Bookstore/genre/book" runat="server">

<asp:datalist id="MyDataList" datasourceid="MySource" runat="server">
<itemtemplate>

<table>
<tr>
<td>
<img alt="Cover Image" src='<%# "images/" + XPath("@ISBN") + ".gif" %>' >
</td>
<td>
<h4><%# XPath("@Title") %></h4>
<b>ISBN:</b> <%# XPath("@ISBN") %><br />
<b>Price:</b> <%# XPath("@Price") %>

</u>
<br />
<%# XPath(".") %>
</itemtemplate>
</asp:DataList>

</itemtemplate>
</asp:DataList>


The related XML:
<?xml version="1.0" encoding="utf-8" ?>
<bookstore>
<genre name="Business">
<book isbn="BU1032" title="The Busy Executive's Database Guide" price="19.99">
<chapter num="1" name="Introduction">
Abstract...
</chapter>
<chapter num="2" name="Body">
Abstract...
</chapter>
<chapter num="3" name="Conclusion">
Abstract...
</chapter>
</book>
<book isbn="BU2075" title="You Can Combat Computer Stress!" price="2.99">
<chapter num="1" name="Introduction">
Abstract...
</chapter>
<chapter num="2" name="Body">Abstract...
</chapter>
<chapter num="3" name="Conclusion">
Abstract...
</chapter>
</book>
<book isbn="BU7832" title="Straight Talk About Computers" price="19.99">
<chapter num="1" name="Introduction">
Abstract...
</chapter>
<chapter num="2" name="Body">
Abstract...
</chapter>
<chapter num="3" name="Conclusion">
Abstract...
</chapter>
</book>
</genre>
</bookstore>
- Yeah, baby
=)



========================================================================
another way - for repeating controls, using the XML control:
========================================================================

The asp.net control:

<asp:Xml ID="xmlArticle" runat="server" DocumentSource="~/xml/articles.xml" TransformSource="~/xsl/articles.xsl"></asp:Xml>

the XML:
<?xml version="1.0" encoding="utf-8" ?>
<articles>  
<article>    
<id>1</id>
<title>1 Title Name</title>
<author>1 AuthorFirst AuthorLast</author>
<pubdate>1 Published Date</pubdate>    <content>article1.html</content>
</article>  
<article>    
<id>2</id>    
<title>2 Title Name</title>    
<author>2 AuthorFirst AuthorLast</author>    
<pubdate>2 Published Date</pubdate>    <content>article2.html</content>  
</article></articles>

The XSL:
<?xml version="1.0" encoding="utf-8"?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform%22&gt; 
<xsl:output method="xml"></xsl:output>
<xsl:template match="/articles">  
<xsl:for-each select="./article">    
<div>      
<xsl:attribute name="id">article-<xsl:value-of select="id">
</xsl:value-of>      
</xsl:attribute>      
<h2>        
<xsl:value-of select="title"/>      
</h2>      
<h3>        
<xsl:value-of select="pubdate"/>      
</h3>      
<p>        
<xsl:value-of select="content"/>      
</p>    
</div>  
</xsl:for-each>
</xsl:template>
</xsl:stylesheet> 

General great info & sites

Another busy month, but here's a few gems:

Found a great site for browser stats:
http://marketshare.hitslink.com/report.aspx?qprid=6

SiFR:
http://www.mikeindustries.com/blog/archive/2004/08/sifr

Check out widgipedia:
http://widgipedia.com/widgets/gallery/

Design inspiration:
http://www.styletheweb.com/

Great PNG solution:
http://www.satzansatz.de/cssd/tmp/alphatransparency.html


JS to find element's properties:
for (p in seeEmbedded.style) { alert(p+": "+seeEmbedded.style[p]) };