There is a lot of buzz around Erlang these days, and there is a reason to it - Erlang has native solutions for most common problem of todays large web apps:

-Erlang is distributed
-Thus, Erlang is easy to scale
-Erlang comes with built in mnesia database, which can also be distributed
(and it even comes with transaction support)

Erlang is process based language, and programmers from the world of sequential languages must change they mind set rapidly in order to fully understand and take advantage of Erlang.

On the other hand, Erlang is fairly simple language with just a few built in functions an it could take you just a few days to get a grip on it.

and if you dont trust me, you should probably trust guys at Google. Here is one of the topics form this years Google's scalability conference in Seattle:

Scalable Wikipedia with Erlang by Thorsten Schuett, Zuse Institute Berlin

Abstract:

Global online services at Amazon, eBay, Myspace, YouTube, or Google serve millions of customers with tens of thousands of servers located throughout the world. At this scale, components fail continuously and it is difficult to maintain a consistent state while hiding failures from the application.

Peer-to-peer protocols provide availability by replicating services among peers, but they are mostly limited to write-once/read-many data sharing. To extend them beyond the typical file sharing, the support of fast transactions on distributed hash tables (DHTs) is an important yet missing feature.

We will present a distributed key/value store based on a DHT that supports consistent writes. Our system comprises three layers:

* a DHT layer for scalable, reliable access to replicated data,
* a transaction layer to ensure data consistency in the face of concurrent write operations,
* an application layer with an extremely high access rate.

For the application layer, we selected a distributed, scalable Wiki with full transaction support. We will show that our Wiki outperforms the public Wikipedia in terms of served page requests per second and we will discuss how the development of the distributed code benefited from the use of Erlang.

Also Apache built their new document based database called Couch DB on top of Erlang, and Facebook implemented their online chat system in Erlang, so if you think about it, there must be something good about that language.
So why not learn it?

Viewed 14181 times by 5590 viewers

I found one really interesting piece of code on ajaxian.

I really like this example, it shows true power of ajax in just few lines, an also it runs very smooth and fast.

here is the author page
http://devthought.com/textboxlist-meets-autocompletion/

and the demo
http://devthought.com/wp-content/articles/autocompletelist/test.html

Viewed 53148 times by 17081 viewers

Canvas gallery with thumb reflection. Based oin Prototype and reflection.js

Coding time (6-8 hours, done in two days)

Demo

For last two days I was playing with canvas (again ).
This time i decided to build Gallery, but i wanted to add reflection to images, and to make them scroll left and right, instead of usual scrolling.

First task was to extend Prototype and add 3 new functions: scrollLeft, scrollRight, and stopScroll.

This may not seams completley necessary but it makes code a lot cleaner. Take scroll buttons for example:

		//Add event listeners on scroll buttons
		$('md').observe('mouseover',function(event){
			$('img-holder').scrolRight();
		});
		$('md').observe('mouseout',function(event){
			$('img-holder').stopScroll();
		});

   // as simple as that :]

I really learned a lot from this project, mostly about prototype.
Prototype really have awesome possibilities, all that you need is good plan and some coding skills.
Even if you are not top-notch ajax programmer there is a lot of examples and resources on the Internet.

Future of this project and usage

This project is still in deep beta, and if someone wants to use this gallery i advise to take demo page and modify it to your needs.
Otherwise you risk to loose some css or javascript dependency.

I will try to make new version of this as soon as possible.

If you have any comments or ideas please let me know.

Viewed 90380 times by 26868 viewers

Tutorial on how to log all your search queries when you use Adsense for Search

First when you setup your adsense for search choose Open search results within my own site

After you successfully setup your adsense for search you should access your search result pages via this kind of URL:

(you should get one really long URL)

now all we must do is to get query string from request URL and store it into database.
In order to do so we first create table to hold query summary:

CREATE TABLE `keywords_stats` (
  `id` mediumint(8) unsigned NOT NULL auto_increment,
  `keyword` varchar(128) character set utf8 NOT NULL,
  `cnt` mediumint(8) unsigned NOT NULL default '1',
  PRIMARY KEY  (`id`),
  UNIQUE KEY `keyword` (`keyword`)
  ) ENGINE=MyISAM DEFAULT CHARSET=latin1

Now this is fine, we have place to put our queries but what if we want to make application that not only track queries, but also enables us to track queries on given date or in a time range? Second table to the rescue:

(this enables us to have query stats by date)

CREATE TABLE `keywords_stats_byday` (
  `id` mediumint(8) unsigned NOT NULL auto_increment,
  `keyword_id` mediumint(9) NOT NULL,
  `query_date` date NOT NULL,
  `cnt` mediumint(9) NOT NULL default '1',
  PRIMARY KEY  (`id`),
  UNIQUE KEY `keyword_id` (`keyword_id`,`date`)
  ) ENGINE=MyISAM AUTO_INCREMENT=2 DEFAULT CHARSET=latin1

Next, we create code that reads q parameter from URL and writes it int database

<?php

require_once('pathh/to/adodb.inc.php');
//CHANGE THIS TO YOUR DATABASE SETTINGS
$db_username='root';      //mySQL username
$db_password='pass';    		  //MySQL password
$db_name='test';       //MySQL database name
$db_host='127.0.0.1';     //MySQL host name or IP

$db = &ADONewConnection('mysql');
$db->Connect($db_host, $db_username, $db_password, $db_name);

$db->Execute("SET NAMES utf8");
$query_string=mysql_real_escape_string(str_replace('+',' ',$_GET['q']));

$db->Execute("insert into keywords_stats (`id`,`keyword`) values (NULL,'$query_string') ON DUPLICATE KEY UPDATE cnt=cnt+1;");
$keywordID=$db->getRow("select id from keywords_stats where keyword='$query_string'; ");
$db->Execute("insert into keywords_stats_byday (`id`,`keyword_id`,`query_date`) values (NULL,'$keywordID[id]',CURDATE()) ON DUPLICATE KEY UPDATE cnt=cnt+1;");

?>

now we sould save this php code as queries.php and include it somewhere on your search result page.

<?php
    require_once('queries.php');
?>

<div style="width:805px;margin:40px auto;">
<!-- Google Search Result Snippet Begins -->
<div id="googleSearchUnitIframe"></div>
<script type="text/javascript">
.
.
.
//(rest of search results code)

you can test your script by pointing your browser to:

somestring should appear in your tables.

now all that is left is to build application that show query stats.

SQL query to get all time top 20 keywords

SELECT keyword, cnt
FROM `keywords_stats`
ORDER BY cnt DESC
LIMIT 0 , 20

SQL query to get top 20 keywords today:

SELECT keywords_stats.keyword, sum( keywords_stats_byday.cnt ) AS wordcount
FROM keywords_stats
LEFT JOIN keywords_stats_byday ON keywords_stats.id = keywords_stats_byday.keyword_id
WHERE query_date = CURDATE( )
GROUP BY keywords_stats_byday.query_date, keyword_id
ORDER BY wordcount DESC
LIMIT 0 , 20

You may also get query keyword percentage, queries in some data range (good for export to excel, or to draw graphs).

Resources:

• Adsene for search
• ADOdb manual

Viewed 64749 times by 17885 viewers

So, what is this? i hear you wonder...

This is Canvas 3DGraph, special type of bar graph used to plot X-Y-Z values.

As you may know, <canvas> tag is not supported in IE, so I was forced to use excanvas.js in order to draw graph in IE. As the result of that, you may experience some freezes when you try to plot large amount of data in IE.
Firefox and safari works just fine (aprox 10x faster than emulated canvas in IE).

This is initial release, i plan to add many more features, so stay stay tuned for updates.
And if you have any comments or ideas please feel free to leave a comment.

• Project page
• Download

Viewed 104292 times by 28142 viewers

CSS Menu with slider using Prototype.js

This little example shows how to make really simple and yet very nice CSS Menu with slider.

Example

Part 1 - HTML

<div id="menu">
	<div id="m-top">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">F.A.Q.</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
	<div id="m-slider">
		<div id="slider"></div>
	</div>
</div>	

Part 2 - Javascript

Now we add Javascript event that listen for mousemove on div that holds menu.

window.onload=function(){

	var offsetLeft=$('menu').offsetLeft;

	Event.observe('menu', 'mousemove', function(event){

		coordinateX=Event.pointerX(event)-offsetLeft;
		$('slider').style.marginLeft=coordinateX-20+'px';

	});

}

Part 3 - CSS

Here you can see the CSS file that is used for this example.

Download

slider.html
slider.css
helper.js
prototype.js (1.5.1)

Viewed 190581 times by 54813 viewers