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 90381 times by 26868 viewers

Help us digg this and learn this guys a lesson .

This afternoon i get a call from Veljko, my friend and partner at DevPulse saying: "guess what someone ripped our site, please log on ICQ, you must see this."

Now that was a shocker

While i waited for icq to connect, i thought that someone probably has seen our site at cssmania.com or some other gallery, and modified our design in some way. But, boy I was wrong.

And there it was:
www.vibe-industries.nl/index.html

Upon first look i did not even see any major resemblance except that place where logo stands, but more that I looked more things i noticed.
-Structure is basically the same.
-Header and footer are same height as on original site.
-Header background is same as on original site.
-Footer colors are not changed at all.
etc...

Then i looked at the source code...

Now this was priceless, i mean should i even comment on this?

http://www.vibe-industries.nl/index.html

Or even this?

And we have a winner:

Here is what I'm talking about,take look by your self.

It was by far the worst and most amateur case of site rippoff that i ever seen in my life.
And it happened to us

Now what i want from you is to spread this link and/or digg this story.
They did not ask me when they ripped our site, so I'm not even gonna try to contact them, they will find out sooner or later.
Let this public humiliation be a lesson to them.

p.s.

to guys at vibe-industries.nl,
if someone else designed your site that does not take responsibility off you, you should always give important job like this to some professional and not to someone who did this.

Viewed 83844 times by 21849 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 64750 times by 17885 viewers

I've heard about slick speed test, but I did not try it until today. I was actually suprised to see prototype win on this one

here are my results

final time (less is better)

mootols 321ms
Prototype: 271ms
jQuery: 838

I'm really disapointed with jQery performance.So, (for now) prototype remains my weapon of choice

link: slick speed

Viewed 53019 times by 13519 viewers