Replace newline with <br/> in DB

To replace \n with html <br/> in DB (e.g. add WYSIWYG such as tinyMCE to web site that is already in production)

update tbl_name set tbl_field = REPLACE(tbl_field, '\n\r', '<br/>');
update tbl_name set tbl_field = REPLACE(tbl_field, '\n', '<br/>');
update tbl_name set tbl_field = REPLACE(tbl_field, '\r', '<br/>');

Signing Android apps

After reading android developer official guide Signing Your Applications I was a little bit confused what exactly I have to do for signing app.
Basically process of signing apps includes five steps:

1. Create your keystore;
2. Prepare app for signing (removing logs, increment version etc);
3. Export app as unsigned apk;
4. Sign apk;
5. Run zipalign tool.

There are three ways:

1. Do it manually from command line;
2. Use ANT script;
3. Do it with the help of wizard in Eclipse.

Eclipse wizard will do 3-5 steps automatically.

So the fastest way to sign apk is to:

1. Create your keystore;
2. Prepare app for signing (removing logs, increment version etc);
3. Export signed apk with Eclipse.

Create keystore

$ keytool -genkey -v -keystore APPNAME.key -alias APPNAME -keyalg RSA -keysize 2048 -validity 10000

Check if JAVA_HOME is set or find keytool executable file in bin folder of Java.


Show keystore info

$ keytool -list -v -keystore afit.key

Export signed apk with Eclipse

Right click on project > Android Tools > Export Signed Application Package... > and follow wizards instructions.

Пример важности этапа написания сценариев при проектировании UX

Небольшой пример о том как влияет UX на интерфейс и программирование (в мелочах).

Задача: Разработать прототип интернет магазина обуви (Угги).

Цель: Повысить уровень продаж, повысить популярность товара среди молодежи, собрать клиентскую базу.

Процесс:
 -- Где-то в середине проектирование UX (опущенно все, что не входит в данный пример). -- 
Персонажи:

• девушка, которая следит за модой; 
• девушка, которая по долгу службы носит спокойные цвета одежды; 
• молодая мама; 
• молодой человек, который покупает Угги девушке. 

В целом – аудитория продвинутая, присутствует в соц. сетях, легко и с удовольствием обменивается ссылками с друзьями. Но боится оплачивать через интернет. Для оплаты часто обращается к парню\мужу.

Что это значит:

На основании такого описания: "Пользователь боится оплачивать через интернет. Для оплаты часто обращается к парню\мужу" - следует довольно не очевидные требования к функциональности: при копировании ссылки на продукт, в ней должны учитываться выбранный цвет, размер и другие выбранные параметры. Это нужно на случай, если кто-то будет покупать товар онлайн вместо девушки-персонажа (например, не было денег на карточке, и пользователь попросила своего мужа купить сапожки), чтобы ему не нужно было ничего заново выбирать, а достаточно бы было просто нажать кнопку «Купить».

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

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

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

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

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

Mobile device keyboards. Google masterclass

Here is a great example of UX for mobile device - button to hide virtual keyboard.
Screenshot:

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.

Генерация (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 можно писать сценарии???).