27 дек. 2011 г.

Необычные мелочи в интерфейсах


[Список дополняется]

  • Гениальное оформление заглавий-ссылок. Вместо подробнее и т.д выделяется часть заголовка для перехода. Заметил что мне это нравится после 5 лет ежедневного просмотра сайта
  • Как пользователю легче всего понять что он зашел на интернет магазин? - увидеть товары с ценником и возможностью купить;
  • В списке или плитке каких-либо элеметов можно подсвечивать однотипные элементы при наведении на один из них:

  • При нажатии на кнопку "Сделать что-то" ("Дать совет") которая перегружает страницу и показывает форму можно выводить подсказку "Начните делать что-то". Здесь не будет ошибки - т.к. пользователь хотел сделать именно это;
  • Артикулы в списке отлично смотрятся. Создается впечатление бумажного каталога, к которому пользователи привыкли и доверяют:            

8 окт. 2011 г.

JS: debug object with alertObject

Great function to debug js.
function alertObject(obj,comment) {
  var str = (comment)? comment+"\n":'{';
  for(var el in obj) {
    var value = obj[el];
    if ( typeof value == "function" ) {
      value = "[<function>]";
    }
    str += el + " : "+ value +" , ";
  }
  str +=" }"
  alert(str);
}
P.S. Was great few years ago. Now using console.log is much better. But great for a debuggin' in old browsers.

1 июл. 2011 г.

Генерация (batch generation) однотипных картинок с помощью HTML5

Задача:
Генерация однотипных картинок.

Пример задачи:
  • Разноцветные иконки автобусов в зависимости от маршрута (у маршрута свой цветом);
  • Кнопки с различными названиями динамической длинны (в 3х состояниях, не стандартным для web'a шрифтом).

Справка:
  • В html5 появилась возможность рисовать на canvas в 2d. 
  • Кроме того у canvas можно взять image data в base64, примерно так это выглядит:  data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt...

Решение:
Пишем на javascript функцию которая рисует на canvas необходимое изображение в зависимости от параметров, берем у canvas image data и отправляем ajax'ом на сервер, где сохраняем как файл.

P.S.
Все. Batch processing картинок который хотелось сделать в photoshop каждому программисту - готов (кстати, а в photoshop можно писать сценарии???).

12 июн. 2011 г.

SyntaxHighlighter 3: fix scroll height in chrome and install to blogger

I desided to add SyntaxHighliter to my blog. All how-tos I found in Internet was about depricated 1.7 version (2007) but current version is 3.*.

There are 2 ways to install - if you have your own fileshosting you should upload js and css files from developers site to your server. Another way - is to use cloudhosting (Amazon) which author gives us.

Here we are implementing the second approach. All we need to do is to include css and js files. Open edit html template and before closing tag body add following code:
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript">
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript">
</script>
<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.autoloader(
   'xml http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js',
   'sql http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js',
   'php http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js',
   'js http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js',
   'java http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js',
   'groovy http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js',
   'css http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js'
);
 
SyntaxHighlighter.all();

</script>

Read more about autoloader and configuration on developers site.
And at the top of head tag include css resources:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
Now try too look how it works.

SyntaxHighlighter Chrome vertical scroll bug 

And now take a look your page in Chrome browser. If you see an vertical scrollbar - you found a known bug. To fix it just add in css under including shCore.css (thats why we move thouse files on top of the head) next line:
.syntaxhighlighter {overflow-y: hidden !important;}
You can add it manually the same way as we include js and css or use template designer -> advanced -> add css.

4 июн. 2011 г.

JS: prepare data to send form via ajax

How to join all inputs.
var inputs = [];
$('select, input[type=radio][checked=checked], input[type=text], input[type=hidden]', $("form")).each(function(){
inputs[$(this).attr('name')] = $(this).val();
});
alert(inputs.join('&'));

Mysql: get next\prev id with exact ordering

Task is to show previous and next link to smth. For example next\previous product in category.
It is hard to create this links because ids are not in a sequance (some entries were deleted or there is an order).

And, naturally, we dont  want to select all ids and search in loop :)

Ноwto do it in one sql-query

Lets have in our table `main_table` fields `id` and `name`. Last one in order to sort.
CREATE TABLE `main_table`(
  `id` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(50) NULL,
  PRIMARY KEY (`id`)
) COLLATE='utf8_general_ci' ENGINE=InnoDB ROW_FORMAT=DEFAULT;

REPLACE INTO 
  main_table (id, name) 
VALUES 
  (1, '1st entry'), 
  (2, '2nd entry'), 
  (3, '3rd entry'), 
  (5, '4th entry, but id is 5');


Getting prev ID.
SELECT 
  t1.id, t1.name, t1.prev as prev_id
FROM 
(SELECT mt.id, mt.name, @prev_id as prev, @prev_id := id 
FROM `main_table` mt, (SELECT @prev_id:=0) ni 
ORDER BY name ASC) as t1;
Here is hack to declare variable @prev_id variable which contains:
(SELECT @prev_id:=0) pi
And:
@prev_id as prev, @prev_id := id
Mysql place @prev_id to column 'prev' of result set, and than set @prev_id to current id, which on the next iteration will be previous. For the first entry @prev_id will be 0.

Getting next ID.
Basically, to get next ID we need just change ordering. In our example from ASC to DESC
SELECT 
  t1.id, t1.name, t1.next as next_id
FROM 
(SELECT mt.id, mt.name, @next_id as next, @next_id := id 
FROM `main_table` mt, (SELECT @next_id:=0) ni 
ORDER BY name DESC) as t1;
And finally:
SELECT 
  t1.next as next_id
FROM 
(SELECT mt.id, mt.name, @next_id as next, @next_id := id 
FROM `main_table` mt, (SELECT @next_id:=0) ni 
ORDER BY name DESC) as t1
WHERE t1.id = 3;