David Chan’s Blog

I could be the last person to find out about the ‘SYLK’ issue with loading CSVs in Excel, but the good thing about that is there are plenty of answers out there as to why it happens.

My current project has a “download database data to CSV” feature, and every database table starts with “ID” as the first column.  Generating CSV files with headers would give something like this:

"ID", ....
1, ....
2, ....

A quick search on Google gave me this page, with a very blunt answer as to why it happens:

Because the Excel programmers are sloppy. A valid SYLK file begins
with ‘ID;’ or ‘ID’ alone on a line.

Sometimes Excel incorrectly says ‘SYLK: file format is not valid.’.

When you try to open a text file that begins with, say, ‘ID’ and a tab,
it could not possibly be a valid SYLK file, but Excel claims it thought
it was, to no avail.

Simply rename ‘ID’ to ‘Ident’ or ‘Id’ or something similar.

Changing “ID” to “Id” fixed the problem, and my CSV files opened in Excel correctly.  Now hopefully no one else gets tricked by this Easter Egg Microsoft left for us.

I recently wrote some Javascript to create a rotating headlines section, complete with fading animation, for a client’s site. It was based off the Hot News Headlines section on the front page of Apple’s website, and with the help of MooTools (with Moo.Fx), it was a simple task. Here’s what the rotating headlines look like at Apple.com:

Lets start. My HTML section looked something like this:

1
2
3
4
5
6
7

<style>
div.Headline { display: none; }
</style>
<div id="divHeadlines">
    <div class="Headline"><a href="#">Link 1</a></div>
    <div class="Headline"><a href="#">Link 2</a></div>
</div>

And my Javascript took care of the rest. The basic idea is to show a headline, and then set a timeout to hide the current headline and show the next one, with all the transition animations handled by MooTools:

8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<script type="text/javascript">
var arrHeadlines = null; 	// array to hold headline objects
var intAniDuration = 1;		// duration of transition animation (seconds)
var intViewDuration = 5;	// time before rotation (seconds)
 
function Init()
{
    if ($('divHeadlines'))
    {
        // get all headlines
        arrHeadlines = $('divHeadlines').getElements('div[class=Headline]');	
        // convert time to milliseconds        
        intAniDuration = intAniDuration * 1000;
        intViewDuration = intViewDuration * 1000;
        if (arrHeadlines != null && arrHeadlines.length > 0)
        {
            // hide all
            for (var i = 0; i < arrHeadlines.length; i++)
            {
                var fx = new Fx.Styles(arrHeadlines[i], { duration:0, wait:false });
                fx.set({ 'opacity': 0 });
            }
            // show first link
            ShowHeadline(0);
        }
    }
}
 
function ShowHeadline(idx)
{
    var oTargetDiv = arrHeadlines[idx];
    oTargetDiv.style.display = "block";   // make div appear
    var fx = new Fx.Styles(oTargetDiv, { duration:intAniDuration, wait:false });
    fx.start({ 'opacity': 1 });     // set opacity to visible
    // in X seconds time, hide this headline's div
    setTimeout("HideHeadline(" + idx + ")", intViewDuration)
}
 
function HideHeadline(idx)
{
    // get index of next headline to show
    var newIdx = idx + 1;
    if (newIdx >= arrHeadlines.length)
        newIdx = 0;    // reset index
    var oTargetDiv = arrHeadlines[idx];
    var fx = new Fx.Styles(oTargetDiv, { duration:intAniDuration, wait:false,
        onComplete:function(){
            oTargetDiv.style.display = "none"; ShowHeadline(newIdx);
        }/*end onComplete*/ });
    fx.start({ 'opacity': 0 });     // set to fade out, on complete, show next headline
}
 
// call Init after everything loads
Init();
</script>

Make sure you place the JavaScript block at the bottom of your page (before the </body> tag). Comments and suggestions appreciated, especially if you know of a more elegant solution.

I started using Twitter Tools a few weeks ago to aggregate my tweets in a daily blog post.  Last weekend, I had an idea where I could also aggregate tweets in my friends timeline.  I thought that it would be cool to show the links that my friends are sharing with the Twitterverse.

I started with Twitter Tools as a base, and after reading and understanding the code, it was relatively straightforward to add a seperate call to the friends timeline.  Once I had the desired tweets, scraping, storing and posting the ones containing links were easy and routine.

Now that it’s all said and done, I’m enjoying sharing novel links from Twitter on my blog.  However, the daily digest posts are now very lengthy due to the amount of links my Twitter friends post.  It’s kind of good and bad at the same time.

Does anyone have any suggestions for the “Links” section of the Twitter digest?  How to make it more relevant or compact, or perhaps display it in a different way?

Twitter Tools by Alex King [alexking.org]

If you have ever been frustrated with impossible to click links on site navigation menus, email this 37signals blog post to the sitemaster.

Basically the technique of padding links has been around for a long time, but has been largely ignored when implementing the HTML.  Many designs encorporate large areas around links, yet there’s a grey-area as to whether these areas should be clickable as well.  I think that anything which makes it easy for the user should be done, and done well.

Padding link targets for better mousing [37signals]

While leaving Chicago from the BEA Participate conference last Thursday, I got an idea to aggregate tweets into a Basecamp message.

During the cab ride, @danmartell mentioned that there’s value in having a section during our team meetings for reviewing relevant links.  Our team uses Twitter quite often, and it made sense to send links via replies to our company Twitter account, and then we can review all the tweets during the meeting and pick out the links.  And that’s how I decided that it’d be a lot easier to get replies each week using the since option:

eg: http://twitter.com/statuses/replies.xml?since=Tue%2C+27+Mar+2007+22%3A55%3A48+GMT

Take any replies there which have a link in the tweet, and then wrap up the tweets in XML to send to Basecamp.

Pretty straight forward, and I got it working with PHP in about an hour.  The hardest part was actually formatting the request XML for the Basecamp message.

Since I wanted one link tweet per line, I needed to insert a linebreak in the XML.  Being new to PHP, I wasn’t sure if it was “\n” or “\r\n”.  In the end, I found the PHP_EOL variable, which I was able to append to the end of each line.

If anyone wants the code I can publish it, it’s really a hackjob more than anything.

There’s a first for everything, and today I launched my first Facebook application. It’s an interesting idea, and the premise is simple: Strendr takes the keywords from your status message and displays them in a cloud format (think tag clouds for blogs). The execution was on a “good-enough” level; the entire thing took about 60 hrs of work, including all the research. I wasn’t surprised by the wealth of documentation and information available for the developers - it explains why there are so many applications out there.

Next steps for my application include refactoring and cleanup. Working on the eve of Jesus’ birthday doesn’t promote good coding standards. I will also look into user experience and documentation. My UI has been made to be as friendly and uncluttered as possible, but I believe that the content could be worded better and with more consistency. Of course, there’s also a social-viral component of the app that must be nurtured. There is a “Trends” page that tracks the usage of keywords amongst all users of Strendr, and it will need to be presented in a way so that users will want to send app invites.

If you have time, check out my Facebook app, Strendr!

Recently I’ve been given a chance to do some work on formatting existing web content to display nicely on the iPhone. Normally, making webpages mobile-compatible consists of having simple layouts, large and readable (non-serifs) fonts, and little to no pictures/media. However, the iPhone has a fully capable browser which allows a web developer to throw existing mobile web pages out the window. That and the overall slickness of the device and its UI really discourages anyone from making mediocre Web1.0-looking pages.

The zooming on the iPhone’s web browser is pretty easy and intuitive, but I have never been a big fan of zooming. Even with the location specific zooming (via double-tapping on a text block or image) I still find it a bit cumbersome. Using the <viewport> meta tag, you can control the dimensions and scaling of your page. Here are the attributes that can be set, from the Apple iPhone web development website:

• width The default is 980. The range is [200, 10,000].
• height The default is calculated based on the width and aspect ratio. The range is [223, 10,000].
• initial-scale is the scale to render the page when it first loads. The default fits the page to the screen. The range is [minimum-scale, maximum-scale]. Keep in mind that the user can change the scale, either through the pinch gesture or by a double tap.
• user-scalable determines whether or not the user can scale the page. The default is yes.
• minimum-scale is the lower bound for scaling. The default is 0.25; the range is [>0, 10].
• maximum-scale is the upper bound for scaling. The default is 1.6; the range is [>0, 10].

However, setting a specific width for the webpage is difficult because of the iPhone’s tilting capability. The screen, or viewport, is 320 pixels when in portrait mode, and 480 pixels in landscape view. To make a page look the same in both modes, the folks at iPhoneWebDev have discovered the following meta tag:

With this meta tag, you can set your page elements to be 100% width, and your pages will fit in both viewing modes. Font sizes will be consistent too! This is a good starting point for any webpage designed for the iPhone.

Web development has been moving towards faster and quicker deployment. Popular frameworks such as .NET 2.0 and Prototype.js allow for quick AJAX and web services development, but are rarely used together. Web services made with ASP.NET are usually used along-side with ASP.NET AJAX on ASP pages. However, if your site does not use ASP but you would still like to consume your ASP.NET web services with just JavaScript, then read on.

First, create your ASP.NET web service. Once you are finished, visit the Web.Config file and enter the following under the <system.web> node:

<webservices>
    <protocols>
        <add name="HttpGet" />
        <add name="HttpPost" />
    </protocols>
</webservices>

After that’s done with, view your web service’s .asmx file in a web browser. Click the name of a web service operation and you’ll be taken to the operation’s Invoke page. Scroll to the bottom and you can clearly see how to structure your header for calling your web service method using POST or GET:

You can now use Prototype or another JavaScript method to call the web service. An example AJAX call using POST with Prototype.js could be:

new Ajax.Request('/myws.asmx/HelloWorld',
    {
        method: 'post',
        postBody: 'strName=David',
        onSuccess: function(transport){
          var response = transport.responseText || "no response text";
          alert("Success! nn" + response);
        },
        onFailure: function(){ alert('Something went wrong...') }
    }

In the DOM Level 2 specifications, the disabled property is defined for <LINK> and <STYLE> elements. Toggling this property using JavaScript allows for quick CSS style switching. It’s great for switching between themes!

To illustrate, I’ve written a simple JavaScript CSS theme toggling function. It supports both external CSS stylesheet references and local STYLE declarations.

Click here to see the demo (view the source code for more information).

There are a few ways to call a Javascript function from a link. If the function does not return a value, then you may use:

<a href="javascript:Function();">Click me</a>

However, if the function returns a value, then using the above link will cause the page to display the return value.

Another popular implementation uses “#” as the href attribute value, and puts the function call in the onclick attribute:

<a href="#" onclick="javascript:Function();">Click me</a>

This will not cause the page to display the return value, but it will have the affect of returning to the top of the page.

The solution is to use the void operator. The void operator discards the value of its operand and returns undefined. You may then put the call to a Javascript function in the href attribute and not worry about having the page to display the return value:

<a href="javascript:void Function();">Click me</a>

Here’s a test page to demonstrate.