.

Friday, June 30, 2006

How to build a tag cloud in less than an hour #

Several days ago, I noticed that I needed to create a simple tag cloud for the web2.0 project that I'm currently building.

If your database is structured properly your logic is dead simple:

Let us assume that you have a bunch of tags, and each tag has a rating (a double number) associated with it. If you know the maximum rating and the minimum rating, then writing a mapping function from ratings to percentages is a piece of cake:

public static int ToRatingPercentage(int currentRating,
int minRating, int maxRating)

{
double minBound = 70d;
double maxBound = 400d;

return Converter.ToInteger(
Math.Ceiling(((
(maxBound-minBound)/(double)(maxRating-minRating))
*currentRating) +
(minBound*maxRating-maxBound*minRating)
/(double)(maxRating-minRating)));
}
Actually deriving the formula took some time; I travelled back in time to my high-scool geometry classes :)
If you observe the method carefully you will see that it is nothing but the equation of a line with two fixed points given.

The method above maps current rating to a number between 70 and 400 (which we will use in the css to scale the tag).

We then use a simple repeater (or a similar structure depending on the web application of choice)

[div id="ListAllTag" runat="server"]
[asp:repeater id="TagList" runat="server"]
[itemtemplate]
[a href="/tag/[%#DataBinder.Eval(Container.DataItem,"lngTagID")%]" style="font-size:[%#DataBinder.Eval(Container.DataItem,
"intCalculatedPercentage")%]%;"][%#DataBinder.Eval(
Container.DataItem,"strTag")%][/a]
[/itemtemplate]
[/asp:repeater]
[/div]

That's it. You bind your query to the repeater; calculate intCalculatedPercentage using ToRatingPercentage method given above and you're done.

Here is how the final result looks like:


 bu yaziyi sevdin mi?  hemen una ekle!
 

Tuesday, June 27, 2006

simple IQ says that I'm a genius :D #

Really :)



You may want to check where you stand as well.

It was really a fun test which will take at most 20 minutes.

Now that I'm a genius, I'm gonna work on my newest invention.

Cheers.

 bu yaziyi sevdin mi?  hemen una ekle!
 

Wednesday, June 21, 2006

Have you tried Miranda? #

Are you one of those whose
  • client A prefers yahoo,
  • client B prefers MSN messenger,
  • open-source lover geek colleagues use nothing but jabber
  • technology-lagging friends still use ICQ
  • some buddies use google talk

  • are you one of those who is most of the time connected to IRC geek channels (#rubyonrails for instance) to get instant support and feedback.
Unfortunately, I am one of them.

And on an average day my Yahoo, MSN, ICQ, IRC, jabber clients were open all the time.

This is really confusing first of all. And secondly you cannot imagine how much resource (in terms of ram and CPU cycles) those little chat clients consume (it's because they are overloaded, they are bloated, they have dozens of unnecessary add ons other than the core function (which is instant messaging))

However my needs and wants from a chat client are simple:
  • I need instant communication

  • I need to securely transfer files

  • I want nothing else!
Yes nothing else!
  • I don't need to view my horoscope,
  • I don't want to look at the recent stock changes,
  • I don't want a weather report,
  • I don't want to send SMS messages from my IM client.

I will open up my browser and go visit a proper site for sure if I need to view my horoscope. I don't want unnecessary builtin functionality, which marketers think, that makes the product attractive, cute, pretty and appealing.

I think all those addons just make the product useless, over-complicated and boring.

Your mileage may vary of course. But I simply don't like bloated applications.

I just want instant text-based communication. That's it.
...

And then, all of a sudden, I met Miranda:




It was all I wanted!
It's a miracle!

I felt just like I have found a water fountain in a desert.
Gosh, why haven't I tried it before?

Miranda is simple, Miranda is to the point, and Miranda consumes almost no memory at all (around 3000K).

You can download the recent release from here.

And there are a gazillion addons and plugins you can install on it to enhance its functionality.

Configuring MSN, Yahoo, IRC, jabber is trivial.

Only configuring gtalk needs some attention:
  1. First of all you need to install OpenSSL.

  2. And it will be good if you download the recent gmail jabber protocol. (installation is simple, just read the readme file in the package. Do not forget to rename jabber.dll in the package to something like jabber_gmail.dll if you want to use the original jabber.dll for some other jabber server than google's --such as the default jabber server jabber.org--). And then copy the renamed dll to Miranda's plugins directory. And restart miranda.

  3. The gtalk configuration is as follows:


That all you need for google talk integration.
Just restart Miranda and enjoy!

 bu yaziyi sevdin mi?  hemen una ekle!
 

Friday, June 16, 2006

Productivity Tip - Track your goals with Joe's Goals #

Joes Goals is a free service you can use to evaluate your daily achievements over time.

It's simple, easy to use. So easy that the user interface is self explanatory; you won't need any help, learning curve whatsoever.

Here is how it looks like:



Moreover, you can share any number of your goals with your friends.

Forget all complicated gannt charts, slack analysis, your good old excel table which you track your project progess (they don't work anyway, it they have you would not have missed your deadlines); just use Joe's goals. It is faster, easier, human friendly, obvious and understandable.
What else can you expect?

After using it for a few days I loved it.

 bu yaziyi sevdin mi?  hemen una ekle!
 

Tuesday, June 13, 2006

Are you stuck with a technical problem ? Then ask it to a qunu expert for free #

Do you sometimes stuck on a technical issue and wish there was a live expert nearby.

If so, then ask your question at qunu and instantly get in touch with an expert you like.

Qunu is a social collaboration service at its alpa phase, connecting hundreds of experts
(me included) with the information seekers who are stuck with that God damn issue for hours.

Though one should not abuse the service because it's free.
  1. Google is your friend. Refer to google before asking dumb questions.

  2. Don't get it personal if the expert declines to chat with you. It's their personal time, and they are giving that time for free.

  3. Note that it is not a paid consulting service, therefore at least say a warm "thank you" at the end of conversation even if the issue has not been fully sorted out.
Hope that helps.

 bu yaziyi sevdin mi?  hemen una ekle!
 

Friday, June 09, 2006

window.onload is soooo '90s! #

Highly insipred from Brothercake's domfunction.

I am working on a client-heavy ajax application and the more responsive I manage to make it; the better. Making the application load as fast as possible is a must-have goal for me.

As you know, when DOM content loads and becomes readily available you can execute additional initialization scripts to lazy-initialize and organize the page.

In 90's this was mainly done by attaching an onload eventhandler to the window. Like

window.onload=function()
{
//initialization logic comes here.
}

This, however, means that our function will not only wait the DOM content to load, but it also will wait the entire body to fully load (including images, flash objects, vendor-specific custom components, HTC components, applets... and the like)

If you have a lot of such content, your web application will seem to load really really sloooooow.

Using window.onload is so '90s!

Let us write a quickLoad method, which executes as soon as the DOM is ready, without requiring a truckload of additional objects to load. This way, our web application will load and respond much faster.

First prerequisites:
var DomLoadController=
{
index:0,
sanityLimit:50,
interval:-1,
retryMilli:256
}

function executeWhenReady(fnDelegate)
{
DomLoadController.index++;

if(typeof document.getElementsByTagName != 'undefined' &&
(document.getElementsByTagName('body')[0] != null ||
document.body != null))
{
fnDelegate();
clearInterval(DomLoadController.interval);
}

if(DomLoadController.index >= DomLoadController.sanityLimit)
{
clearInterval(DomLoadController.interval);

//if you exceed the sanity limit, try to load the
//function using traditional mehtods,
//attaching an EventHandler to window load.

//Note that _.chain is a utility method of sardalya
_.chain(window,"load",fnDelegate);

}
}

function quickLoad(fnDelegate)
{
DomLoadController.interval = setInterval(
function()
{
executeWhenReady(fnDelegate);
}
,DomLoadController.retryMilli);
}
And then all you need to do is call
function init()
{
//Initialization operations to be done when DOM loads
}

quickLoad(init);
Or use it like below (ruby/prototype-style), if it better suits your taste:
quickLoad(
function()
{
//initialization code goes here

}
);
Happy coding!

 bu yaziyi sevdin mi?  hemen una ekle!
 

A Paradigm shift in MVC #

In this post I will try to explain how the good old MVC paradigm applies to AJAX-based web applications.

I have always been fond of visualizing things because, imho, illustrations help better organize ideas and that in turn helps understand the concept better.

Let me introduce our artists first, the model, the view, and the controller.


Anyone who has been developing GUI applications for sometime have heard of the model-view-controller paradigm. Here we will try to describe how this paradigm works in a typical web application.

Let us define the model, view and controller in more detail:

view:
That's fairly easy. In a web application the view is what user sees and does not see but available to the client none the less. To extend it view consists of the rendered HTML, links, buttons (the visible part), hidden form fields (invisible parts to hold state data) and global javascript variances which as well hold the state data of the client

model:
Model can be defined as the DB back end. Which is, the database itself and any wrapper and helper classes that are used to communicate with the db. The database will be typically a DBMS like MySQL, Oracle, Sybase etc; but it is quite possible for the data to be stored in XML files or even in text files, it does not matter.

controller:
Well, controller is hard to define because no matter how much you try to separate, parts of it leak into model and view. Controller can be thougth as a class that can directly communicate to the model and the view. That is, the controller decouples model from the view. It changes the data persisting on the model and updates the view based on the fresh data.

Controller and model are implemented on the server side, whereas the view is the client side.
...

In a traditional (say desktop) application that applies MVC paradigm. The model implements an observer design pattern. That is, whenever the model changes; it notifies the view and the controller. In a Java desktop application this can be achieved with event handlers and even listeners. Whereas in a C# application this can be done via delegaes (which are somewhat different, in implementation, than Java event hanlders).

...

However, web applications are mostly disconnected (I will eloborate on the "mostly" part in a second), therefore it is not possible, or at least it is impractical, to implement an observer relation.

Will come to this later, but now let us observe how the controller interacts with the model and the view in a typical MVC Web application.



The controller updates the model and changes the view as well. After the model changes, it notifies the view and the controller.

The view and model is disconnected (client side and server side), and thus it is not possible for the model to notify the view. Therefore it is the controller's duty to update the view and hold model and the view in sync.

So in a web application, model indirectly notifies the controller sending status information (updated failed / operation succeeded etc.) gets the up to date data from the model and re-creates the view.

A typical scenario will be as follows:
The user will fill the data in the form, posting it to the server (say to the action servlet or the controller web application). Where the controller will update the db and then it will refresh the view by redirecting the server response to the view page where the user will retrive the updated data from the DB (the model).

This is how things work in a disconnected web application.

Now let us spill some AJAX around to glue the server and the client and generate a more connected environment.

Look ma! No Browser refresh!

In an AJAX application we will have additional layer between the view and the controller.



Those are the js/ajax delegates. To put it simpler, they are the js functions which trigger when the user interacts with the view, such as clicking a link, dragging a DHTML layer etc.

When user interacts with the view, the view notifies the controller through these delegates.

Please note that view is the client side, model and controller are the server side and the js/ajax part reside on the client acting as a glue between the view and the controller.

The view tells the controller to update the model (change the data) via js/ajax delegates.



Then the controller tells the model to update, and return a status report (success, failure and/or some other state data)



The model returns the state data.



And after that, the controller returns a response (as a responseText or responseXML) to the ajax stubs (through oncomplete or onerror event handlers)



And after receiving the state data in the responseText, the js/AJAX stubs update the view using this data (either using the data embedded in this response, or sending another AJAX request to the server to query the model and get fresh data).

That's it.

Have a lovely AJAX experience.

 bu yaziyi sevdin mi?  hemen una ekle!
 

Saturday, June 03, 2006

Friends of your friend are (most probably) your friend #

The idea is simple.

It applies to online social networks (6 degrees of seperation principle).

So I thought why not apply it to links?

Since I generally like my friends' friends, similarly, my second order links will be most probably the links that I like.

After the lightbulb flashing inside my head today, I decide to investigate my second-order links.

But how do I define a second-order link:
  • If I like a particular site, then it is a first order link for me.
  • And if that particular site (or site owner) likes other sites then those links are second-order links.
Therefore the best way to grep my second order links is to collect all relevant links from
  • The sites I like and follow
  • The sites that give direct links to me
And of course I needed an application to automate this process.

After harvesting for an hour, the outcome was really interesting. I found
  • Good sites that I was already aware
  • Good sites that I had heard of but could not find time to browse
  • Good sites that I have'nt heard of before but I'm interested none the less
  • And some irrelevant sites from black-hat search engine optimizers.
After skimming the fat, here is my top 25 second order links:
(Note that those links are random picks, they are not in any particular order)
  1. QForms - http://pengoworks.com/qforms/docs/
    the easiest way to program HTML forms!

  2. AJAX Toolbox - http://www.ajaxtoolbox.com/request/
    Yet another XmlHttpRequest wrapper

  3. test ajax caller - http://ajaxify.com/run/testAjaxCaller/
    ajax pattern's sandbox.

  4. XScript - http://www.cross-browser.com/toys/
    An excellent cross-browser DHTML library.

  5. http://kourge.net/
    A blog on PHP, JavaScript, HTML, CSS, and a little SQL (mostly MySQL)

  6. libxmlrequest - http://www.imnmotion.com/reference/2005/09/09/libXmlRequest.html An AJAX library.

  7. XOAD - http://wiki.xoad.org/?title=Examples
    XOAD is a PHP based AJAX object oriented framework that allows you to create richer web applications.

  8. Ashley's remote scripting resources - http://www.ashleyit.com/rs/
    Getting information from the server without refreshing the page.

  9. vischeck - http://www.vischeck.com/
    Visualization check for websites.

  10. color vision - http://www.iamcal.com/toys/colors/
    Another color tool.

  11. Tech gurus blog - http://blog.thetechgurus.net
    Smart words, interesting ideas.

  12. Google Gulp - http://www.google.com/googlegulp/

  13. Fahrner Image Replacement - http://www.quirksmode.org/dom/fir.html
    Although PPK likes the concept, he dislikes the countless CSS variants that have popped up, because they are inherently unsafe and hacky.

  14. Sam's blog - http://codebetter.com/blogs/sam.gentile
    Agile .NET/WinFX and Software Development from an experienced perspective.

  15. Texpad - http://www.textpad.com/
    An excellent text editor.

  16. Joel On Software - http://www.joelonsoftware.com
    Joel On Software

  17. http://jarkolicious.com/
    Jarko is a skilled graphics artist, and and artful blogger as well.

  18. http://brian.kingsonline.net/talk/
    Brian's blog - Tidbits from Brian King’s life.

  19. http://del.icio.us/joshua
    Joshua collects good links on art, computers and usability. Morever his use of metatags (tag bundles) is one of the best I've seen.

  20. http://www.w3csites.com/members.asp
    3,134 Sites (and increasing), 1,705 Designers (and increasing), 67 Countries, 1 Goal.

  21. http://www.musingsfrommars.org/2006/03/ajax-dhtml-library-scorecard.html
    AJAX Libraries Compatibility Scorecard.

  22. http://www.modernmethod.com/sajax/
    Simple Ajax Toolkit

  23. http://xkr.us/code/javascript/XHConn/
    A simple, unbloated XMLHttpRequest Library. If the only thing you want is a good XHR wrapper then XHCon is a good option.

  24. http://taconite.sourceforge.net/examples.html
    Taconite is a framework that simplifies the creation of Ajax enabled Web applications.

  25. http://www.mad4milk.net/
    If all that you want is super lighweight effect, then give moofx a try.
That's it.
Hope the links were useful.

 bu yaziyi sevdin mi?  hemen una ekle!
 



Recent Posts

RSS

RSS register icon

Other Blogs

Archive

Various

Sponsor

Profile Information

Browser I Suggest

Sponsor

Dikkatimi Çekenler