Actionscript

The revision of Actionscript - Flash's native language - to version 3.0, comes as an escalating shock to most like me. Though commenting on something introduced in 2006 - 3 years back - is not trendy, this is just another 2 bits from another developer on this platform (after regular cycles of attempts to 'learn it all'). It's not meant to be comprehensive.

The first thing to get straight...AS3 functionality leaves AS2 behind a light year. All the things one can do is unmatched. People are going crazy with everything it offers.

AS3.0 is heavily Object-based. In my opinion it marks a shift in the userbase, exactly an inversion from the amateur crowd that it pulled initially. Now the bigger draw is professional studios and upstarts, not the lone wolf in the basement. The lone wolf is majorly left to the brilliant vector drawing features of Flash, but giving life to it through nifty coding requires a wide learning curve.

Unifying the event listening mechanism is very nice. No longer do we need to be aware of the several ways (and several locations one can implement that) to handle a button click - now it's all done through the combination of addEventListener and a listener function. This is possible because of some heavy inheritance - the most common classes that we know of all belong to 4th or 5th generation in the flash hierarchy.

AS3.0 means that the past is dead. The past gods are dead as well - all my earlier Flash documents downloaded from tutorial pages of some of the best websites (and best coders) are junk. Publishing them as AS2.0 does no harm, though, but modifying them to your own use is hopeless.
Then there's the support pages...they can kill your aspirations. They're badly indexed, badly linked, badly written. Tutorials spread all over the web are the best thing for an AS3 developer; that is unfortunate.

Maybe this review evolves as life goes on.

Vidoop Flyout Captcha - Making it work

Vidoop Captcha (see implementation here) is an awesome thing for normal validation.
And even more awesome is the flyout version of it, which doesn't strip away the visual appeal of your page.

Implementing the flyout version is a bit confusing, primarily because there is a single document for this, and that too gets repetitive but misses out on the major details. I thought I could do better.

Here is a step-by-step how-to to making Vidoop Flyout work with your website (and also the automatic changes it makes to your page)

#1: Find the normal Vidoop Secure Captcha code implementation on your page. It should resemble this (note that the image src, categories to look for, and captcha_id would be different for you)

<form method="get">
<img src="https://api.vidoop.com/vs/captchas/IT42FKE7FE/image" />
<p>Type in the 3 letters you see on pictures of <span class="category_name">money</span>, <span class="category_name">birds</span>, and <span class="category_name">computers</span>, in that order.</p>
<input type="input" name="code" value="" />
<input type="hidden" name="captcha_id" value="IT42FKE7FE" />
<input type="submit" name="submit" value="Submit" />
</form>

#2: Wrap the image code and instructions in a <noscript> tag. This would be the non-flyout version of captcha that shows up when JS is disabled. Let the remaining code untouched.

<noscript>
<img src="https://api.vidoop.com/vs/captchas/IT42FKE7FE/image" />
<p>Type in the 3 letters you see on pictures of <span class="category_name">money</span>, <span class="category_name">birds</span>, and <span class="category_name">computers</span>, in that order.</p> </noscript>

#3: Include the jQuery library in your HTML file (can be placed anywhere). jQuery will give you the slick effects.

<script type="text/javascript" src="http://com.vidoop.demo-static.s3.amazonaws.com/js/jquery-1.2.6.min.js"></script>

#4: Include the code to initialise the flyout Vidoop captcha (place this before the <noscript> tag for best effect). The 'flyout.js' is the script that does it, and inserts the necessary HTML and styling into the page. The inline script, where we declare the vidoop_secure variable is essential to working of the whole thing, as well as provides configuration parameters (rip open the flyout script in some text editor to learn about that).

<script type="text/javascript">
var vidoop_secure = {
instructions: 'Type in the 3 letters you see on pictures of <span class="category_name">money</span>, <span class="category_name">airplanes</span>, and <span class="category_name">houses</span>, in that order.',
};
</script>
<script type="text/javascript" src="js/flyout-0.9.12.js"></script>

#5: So now your main block of HTML looks like this

<form method="get">
<script type="text/javascript" src="http://com.vidoop.demo-static.s3.amazonaws.com/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
var vidoop_secure = {
instructions: 'Type in the 3 letters you see on pictures of <span class="category_name">money</span>, <span class="category_name">airplanes</span>, and <span class="category_name">houses</span>, in that order.',
};
</script>
<script type="text/javascript" src="js/flyout-0.9.12.js"></script>

<noscript>
<img src="https://api.vidoop.com/vs/captchas/IT42FKE7FE/image" />
<p>Type in the 3 letters you see on pictures of <span class="category_name">money</span>, <span class="category_name">birds</span>, and <span class="category_name">computers</span>, in that order.</p> </noscript>
<input type="input" name="code" value="" />
<input type="hidden" name="captcha_id" value="IT42FKE7FE" />
<input type="submit" name="submit" value="Submit" />
</form>

And now you have the Vidoop Secure flyout captcha working on your own site.

Resources to keep

Links a webmaster should have handy, in case there is an urgent need to create a website overnight
mod_rewrite specific
http://www.askapache.com/htaccess/mod_rewrite-variables-cheatsheet.html
http://httpd.apache.org/docs/2.2/rewrite/rewrite_guide.html
http://httpd.apache.org/docs/2.0/mod/core.html

Color palettes to evoke specific moods
http://www.efuse.com/Design/palettes.html

Good Practices
http://webdesignfromscratch.com/current-style.php
http://www.sitepoint.com/article/fundamentals-web-design/
http://www.sitepoint.com/article/fundamentals-web-design/3/
http://www.andyrutledge.com/bad-layout-conventions.php
http://www.sitepoint.com/article/top-15-meta-tag-tricks/
http://www.devx.com/projectcool

W3C Validator
http://validator.w3.org/

#1: choose a correct doctype e.g.


Note: "transitional" DOCTYPE I cite doesn't include the URL of a DTD, or document type declaration. This is because using URLs in a DOCTYPE element sends some browsers, including IE, into Strict mode, defeating the purpose of the "transitional" DOCTYPE.


UPDATE: the resources got the author of this blog a win in a web design event.

iGoogle Sandbox for OpenSocial gadgets

#1: Register for your testing grounds http://www.google.com/ig/sandbox/

#2: Install the Developer Tools gadget and set up your optimal environment
http://tinyurl.com/5vwwaz
http://code.google.com/apis/igoogle/docs/igoogledevguide.html#dev_env

#3: Add demo friends (real people who sign up for your sandbox), if your gadget goes into the social realm and requests friends lists through API.(*)

#4: Use GGE (Google Gadget Editor) to write your experimental gadgets. Saves the trouble of uploading files to your own server, decent interface.
http://code.google.com/apis/igoogle/docs/igoogledevguide.html#gge

#5: Upload/manage gadgets through the 'My Gadgets' gadget that becomes visible after you've configured developer env (see #2)
Tip: If you're modifying and testing continuously, TURN OFF CACHING for your gadget


*: Currently, the iGoogle sandbox friends gadget is not working. It's not sending out any invitations or showing me the list of friends I've invited. I don't know what the devs get by ignoring the bug at the very entry point.

Tag Clouds and Word Clouds

A tag cloud is something very new (considering the age of the technologies that it builds upon) but very catchy. It ought to be so, since it is simple enough to program and has great visual appeal.

Let's say you decide to display the 50 most popular tags for your pics or your articles or for what people search through your website right on your homepage.
You can do so using a long list.
You can do so using a more elaborate graph that plots the tags on their count.
You are, now, not far from being kicked by both who look for information as well as those who fall for aesthetics.

Nobody wants too much of facts. My day isn't gonna be any better looking through long lists and learning about occurence of each term and their spatial representation. Selfish me only wants to see them being of some use to myself. The tags should promote activity, not have people correlating their usage statistics to build their thesis. And that is where Tag Clouds drive home the point. They present the information in more novel ways; in ways that would catch your eye and become a navigational aid. One can find them on several websites and being used in many presentations where too much detail mean popping a sleep pill in your audience's glasses. Read the Wikipedia article for more.

They are really IMPRESSIVE to see and EXCITING to implement!

An article titled "Building Tag Clouds" by Jim Bumgardner (O' Reilly) piqued my interest into this stuff (On a personal note, I'd had a rough day and anything connecting back to my geeky days and ways was only waiting to be consumed). So I decided to implement a Word Cloud - something that takes in text, and presents the words visually weighted by their frequencies (much akin to the occurence of a tag). The method of operation was simple: Throw in any text and the rest is logic.

You get a nice word cloud. Put in random text, and its fun. Put in your emotions and its introspection. Put in your old diary entries and its retrospection.

Now only if my website server weren't down will I upload the slick file.
See and use SAoS' Word Cloud Generator. It uses regular expressions to extract individual words. The frequencies were extrapolated to font sizes using a log function, which helps to balance the graph visually otherwise some entries would be HUGE while some very small. The log function was a revealation, and its just plain maths! Spread the link around.

When users submit incomplete links, quite unknowingly so

I myself didn't notice this earlier...
If one creates a link to a page 'x.php' (e.g. <a href="x.php">), then the resolved address points to that page on the same website. To link to another website, you provide the full address, (e.g. <a href="http://www.saos.org/x.php">).
But if you provide www.saos.org or saos.org (no www) for the href attribute, the browsers don't transform it into an external link, quite logically so. It will point to yoursite.com/www.saos.org

This was something I came across while fixing up commenting on {ego}trips. If one put a sitename without http:// it would show up as a link local to our website, which is NOT welcome. There is nobody to blame, though.
Fixing this was simple, though. I just appended a http:// to those which were missing it, using PHP's parse_url() function.
Note: haven't checked, or tried to append www to the links without it.

//here is a sample list of links of varying types.
$urls = array('www.google.com', 'http://www.yahoo.com', 'microsoft.com', 'www.saos.org/x.php');

//here is where we transform, then output them
foreach($urls as $url) {
$parsed = parse_url($url);
echo '<a href="';
if(empty($parsed['scheme']))
echo 'http://';
echo $url;
echo '">'.$url.'</a><br />';
} //end of foreach loop
?>

exg anew

Started with exg - the 'thing' that drives {ego}trips on my website - once again, after almost an year. I was skeptical about getting a hold of the code again, but that wasn't much of a problem. I can easily understand my retard coding practices anytime.

I wished to make some changes, which I started to pen down (and simultaneously work upon a solution).
Change #1 was to put a 'latest uploaded galleries' listing on the homepage. Quite simple, isn't it? But again, generating relative rankings was a bit of a problem. There didn't seem any way that SQL would work. Ideal way to tackle it would've been through complex queries, but I chose to put PHP to use to do so.

That led me to discover some serious flaws in my earlier scripts, which notably had to do with relative ranking of image galleries (with respect to trips) and the consequent changes on enabling/disabling them. Not only did it lead to some errors but also exposed private galleries.

Then I came to realise that there was some problem in the clan page as well. Private galleries were also visible through the generated links. Fixed that as well.

By the end, my sheet was littered with headings:
Task
-Problem
--Problem
---Bigger Problem
----Added Problem
-Another Problem
--Existing Problem
-Still a Problem

Ended up jumping between code for about 3 hours. Quite a sudden change in my daily routine of idleness. Here's a small query to pull some stuff from the database. BEAT THAT!

select * from
(select @rn := @rn + 1 as rank, ptjoin.*
FROM (SELECT pm.perspective_id, pm.trip_id, t.trip_title, pm.title,pm.member_id,pm.member_name
FROM (
SELECT p.perspective_id,p.trip_id,p.title,p.member_id,p.created,m.member_name
FROM perspective p
INNER JOIN members m
ON p.member_id=m.member_id
WHERE p.trip_id = XXXX
)as pm
INNER JOIN trip t
ON pm.trip_id=t.trip_id
ORDER BY pm.created
) as ptjoin
) as rankedptjoin
where rankedptjoin.rank = XXXX;

Now I'll start with building the feature to upload docs for the trips, anything that helps.