Launching a new site got me exploring some new code bases and I became disappointed with the disregard large social sites have for html validation of snippets they disburse to their user community.
Since I wanted my site plain and simple to start instead of writing a bunch of code to use common API’s I decided to first go with includes and badges from sites I commonly use. The three that I experienced while creating this site astonished me on their lack of attention to detail. At least they are trying to be compliant but unfortunately they are not fully committed yet.
Twitter HTML Badge
Twitter offers a nice super customizable HTML badge to include on a site. Which is great because it is a basic div, header and unsorted list and style is up to you. Placing the code they supply on your site makes it no longer validate. On their script tag they use an invalid parameter “text”. This looks like a typo and something simple to fix but where is the quality control? Shouldn’t someone test these types of things before they are rolled to production?
<div id="twitter_div">
<h2 class="twitter-title">Twitter Updates</h2>
<ul id="twitter_update_list"></ul></div>
<script type="text/javascript" src...
<script text="text/javascript" src...
Flickr Flash Badge
Flickr offers two types of badges the HTML one does surprisingly well except they do not escape the ampersands in the src of the script tag but that is something that can easily be done by the user.
<div id="flickr_badge_uber_wrapper">...
<script .. src="...?count=3&display=random&size=s&layout=x...
</div></div>
The flash version on the other hand includes an html page into an iframe but unfortunately the code in their html appears to have also been skipped by quality control. It has two main issues. Script and style sheets above the head of the document and non escaped characters in an html string that is outputted via document.write().
<!DOCTYPE ...
<html>
<script type="text/javascript" src="/javascript/fpi.js"></script>
<style type="text/css">
body {margin:0; padding:0; background-color:#fff}
</style>
<head>
<title>Untitled</title>
</head>
<body>
...
...
zg_html = '<OBJECT classid=.../getflashplayer"></EMBED></OBJECT>';
...
SimpleLog Archive Page
Rails applications have been known for their agility and standards. It takes more than just a script kiddie to get a rails application into production. So when I installed and started to customize SimpleLog 2.0.2 for my site something stuck out like a soar thumb, the archives page in the default theme did not validate. There are two options for the html, an unsorted list or definition list. Neither of them are nested correctly which makes it almost impossible to apply a consistent style across browsers.
Without re-writing the entire helper for my site I just put some extra li elements in the output and cut it down to just one missing li. I have not had time to checkout the SVN trunk and create a patch.
Final Thoughts
By far the number of pages that do not validate outweigh the ones that do on the web but it is a shame to see small agile companies acting like large corporations when it comes to quality control. One of the benefits of having a small group or an open source application is the amount to time and attention each piece can get before it is released for peer review. It was put best in Jason’s A collection of details post when he quotes Wil Shipley:
“This is all your app is: a collection of tiny details.”
Web standards need to be enforced by the community and it is our job as web professionals to validate our own code and when possible give some helpful hints to other developers or companies who are not taking the appropriate amount of time to validate. I put in a ticket with twitter about the “text” element and in the process of creating a patch for SimpleLog’s archive page. I encourage all developers to run with standards and not be afraid to send an email or two to promote the health of the web. Who knows you could send that one simple email that turns thousands of pages valid.
Dial Up North
Jul 24Dialup sucks, everyone knows it, but it is cheap, free in most cases. Recently MichNet cut all its subscribers off of their dial up internet service which Wayne State was part of so we were in the market for a dial up service to connect to the net upnorth. I decided on NetZero mainly because it was free. My review of the software is that it Sucks. I have used dialup for a while now upnorth but this service is the pits, the free one installs a toolbar on IE, for a while I could not get any other application to connect to the net besides IE which is a real bummer if you need to use SSH or an IM client. But eventually like magic applications began to come online, I cannot explain it but it made me happy.
It really put things into perspective for me again on how a lot of people still view the net. It was so slow at some times that I eventually disabled images and then things were flying quite well, but it really showed off which developers have the skill to accommodate this slow pace world. Some things I noticed that really helped were:- Using a background-color approximately the same color as an image background. This way if the image background does not load then the text on top still have a background color to contrast against.
- Combining images and use background positioning to put them in place. This dramatically reduces the number of images to load. Like I mentioned before images were the real killer of speed when using dial up. Better yet if you can use background colors instead of images it really speeds things up without loosing design points.
- Combining Javascript files and using a compressor. This is a no brainier it take almost no effort and helps with slow and fast connections. JS files can get large and they don’t have to be, I recommend using an automated compression tool called Minify. Really easy to use and
- AJAX. It is odd but it really kept me on sites with AJAX for a longer period of time because the site seemed snappier and I didn’t have to wait for the whole page to load over and over again.
- If you have image/flash ads on your site really sit back and think if slowing down the information on your site to a portion of internet users is really worth the few cents you may get from them clicking on the ads. Content is king, if a dial up user cannot get to your content because of a large flash or image ad on your site they will more than likely go someplace else that is dial up friendly.
IP Changed :-?
Jul 17So we have had cable internet for probably 12 years now, it first started out with Excite@Home and which got bought out by Comcast. Well in those 12 years I have only had two IP’s, one for Excite which was pretty much static 24..*. Those were the good old days when there were no limits and they did not try to control everything. And one for Comcast which is essentially dynamic but i have had to reset my router a few times and it has always come up with the same IP 68..*. Well all of a sudden yesterday of all days they decide to change my IP randomly, without me even renewing it from the router. They changed the whole IP even, doesn’t even start with the same A class 69..*.! Now it is more complicated and I have to change all my hosts files on my machines to match :-/ What a hassle, im done venting..