В процессе работы над Pastemark (пост-анонс) мне понадобилось, во-первых, написать довольно сложный букмарклет и, во-вторых, сделать динамическую генерацию букмарклетов с разными параметрами. Не возьмусь претендовать на новизну, а лишь просто поделюсь найденным мною подходом.

О букмарклетах

Для тех, кто с ними еще не сталкивался с букмарклетами, букмарклет — это разновидность закладки, но от обычной закладки он отличается тем, что вместо адреса страницы в ней записан скрипт, как правило не очень большой.

Спектр применений букмарклетов довольно широк: от простого изменения размера шрифта на текущей странице до анализа ее содержимого и передачи извлеченных данных какому-нибудь третьему сервису. В качестве примера можно привести букмарклет твиттера.

Кроме того, букмарклет — это практически единственный шанс для честного вебмастера выполнить свой код в контексте чужого сайта (-:

 Когда нужно писать букмарклет?

Собственно, ответ уже дан в предыдущем параграфе. Фактически, букмарклет занимает промежуточную роль между скриптами на сайте и расширением браузера: его функциональность все еще ограничена по сравнению с полноценным расширением, но он уже не привязан к какому-то одному сайту. Еще одна приятная сторона — один и тот же букмарклет может работать во всех браузерах сразу, включая те, которые не поддерживают расширения как таковые (реверанс в сторону мобильных браузеров).

Так как же его написать?

Основные концепции написания букмарклетов хорошо изложены в статье на javascript.ru. Я же не буду лишний раз повторяться и сразу перейду к своей методике.

Мы все привыкли писать нормальные JS-функции, пользуясь IDE или просто блокнотом, а букмарклеты требуют от нас вытягивать весь код в одну строчку да еще и экранировать, что довольно муторно. Поэтому логично переложить эту работу на программу, а еще лучше — позволить программе самой себя приводить в нужный вид.

И так, прежде всего, нам нужно написать функцию, из которой мы будем делать букмарклет. Здесь нам все близко и знакомо, лишь только вместо привычного синтаксиса

function my_bookmarklet() { /* ... */ }

Мы прибегнем к альтернативному варианту:

var my_bookmarklet = function(arg1, arg2) { /* ... */ }

Это связано с тем, что в букмарклете нам нужна не именованная функция, а анонимная, чтобы не засорять пространство имен и избежать конфликтов.

Генерация итогового букмарклета

После того, как мы написали функцию, нам нужно превратить ее в букмарклет. Краткости ради я сразу приведу фрагмент кода, выполняющий эту функцию:

// Ключевой момент: делаем из анонимной функции строку с ее исходниками.
var code = my_bookmarklet.toString();
// Вырезаем однострочные и многострочные комментарии.
code = code.replace(/\/\/.*/g, "");
code = code.replace(/\/\*[\s\S]*\*\//, "");
// Заменяем переносы строк пробелами
code = code.replace(/\n/g, " ");
// Вырезаем повторяющиеся пробелы.  Если у вас внутри строковых литералов
// есть повторяющиеся пробелы, то этого лучше не делать.
code = code.replace(/\s+/g, " ");
// Генерируем uri, при этом экранируем спецсимволы.
var link = encodeURI("javascript:void("+code+"(\""+value_for_arg1+"\", \""+value_for_arg2+"\"))");

Обратите внимание на переменные value_for_arg1 и value_for_arg2. Если вам нужно (как в моем случае) генерировать параметризованные букмарклеты, то вы можете это легко реализовать, передавая параметры вашей анонимной функции.

Далее с переменной link можно делать все, что хотите — генерировать и вставлять на страницу ссылку с этим значением href, отображать просто так или что вам еще в голову придет.

Грабли

Есть только одни грабли, на которые легко попасться в процессе написания букмарклета таким способом: ни в коем случае нельзя пользоваться какими-либо функциями или переменными, объявленными вне экспортируемой функции, ведь во время исполнения букмарклета (а это почти наверняка произойдет не на вашем сайте и в чужом окружении) все они доступны не будут. Я, кстати, на эти грабли тоже наступил, правда, довольно быстро это обнаружил и исправился.

Итог

В качестве итога еще раз перечислю все бонусы, которые мы получаем при разработке букмарклетов таким способом:

1. Правильно форматированный код.
2. Возможность спокойно писать код в вашей любимой IDE.
3. Простота тестирования - вы можете в считанные секунды сгенерировать тестовый букмарклет и запустить его, не тратя время на его переформатирование оформление.
4. Возможность динамически генерировать букмакрлеты с разным поведением, за счет использования параметров.

Вот и пришло время анонсировать мини-проект, над которым я работал последнее время.

Предыстория

Отправной точкой для мысли послужил тот факт, что в процессе модерирования на phpBB Guru мне довольно часто приходилось писать служебные посты и личные сообщения примерно одинакового содержания. В какой-то момент мне это окончательно надоело и я занялся поиском расширения для браузера, которое позволило бы хранить и быстро вставлять сниппеты с шаблонами этих сообщений. Каково же было мое удивление, когда я не нашел ничего вменяемого.

Следующим витком поиска стал поиск десктопной проги, но я быстро отказался от этой затеи, поскольку на десктопе и нетбуке у меня используются разные среды и не хочется ни терпеть белую ворону на одном из них, ни привыкать к двум разным прогам. Да и опять же, на нетбуке не так уж и много оперативки, чтобы вешать туда еще что-то.

Третий шаг был типичен для любого программиста — написать свою мини-тулзу. Расширение для FireFox мне писать не захотелось, я уже когда-то связывался с этим и мне совершенно не понравилось: муторно, документация разрозненная, неудобно отлаживать и долго тестировать. И тогда я вспомнил про букмарклеты.

Идея

Сделать набор букмарклетов, которые будут при активации на нужной станице искать поле по заданному критерию и вставлять туда заготовленный текст.

Для удобства использования я на коленке набросал простенький генератор «для себя». Он принимал id поля и текст, выдавал — ссылку-букмарклет. Потом пришли мысли о том, что не всегда можно найти поле по id и была добавлена поддержка атрибута name, а потом еще и выбор по клику. О генераторе, кстати, будет отдельный пост.

Чем дальше я совершенствовал инструмент, тем больше мне хотелось сделать из него что-то общеполезное, и в итоге я решил сделать из него микро-вебсервис и заодно поупражняться в свистелках и перделках верстке и JavaScript.

Pastemark.

Название сервиса было образовано из двух слов ­— «paste» и «bookmark» (и тут же было переведено моей девушкой на русский как «пастомарка» (-: ).

Вот что в итоге этот сервис умеет:

1. Автоматическая генерация букмарклета с заданным названием и вставляемым текстом.
2. Возможность выбора целевого поля по id, name или кликом мыши.
3. Простой инструмент для автонастройки генератора на нужное поле, тоже выполненный в виде букмарклета. (Бета-тестирование показало, что люди, далекие от веб-разработки совершенно теряются в том, как задать целевое поле).

Кроме того, поскольку я по привычке изначально сделал англоязычный интерфейс, сайт существует на двух языках: русском и английском.

За кулисами

Поскольку в своей работе я занимаюсь сервер-сайд программированием, этот проект стал для меня хорошим шансом разнообразить дела и поупражняться в верстке и клиентских финтифлюшках. Поэтому в итоге получилось, что основу сервиса я написал за два неполных вечера, а потом еще неделю оттачивал дизайн и лепил маленькие, но удобные плюшки. Например, сайт умеет подсказывать пользователю, что есть более удобная ему локализация, основываясь на содержимом заголовка Accept-Language. И таких мелочей получилось довольно много, что доставило мне массу удовольствия в процессе написания и тестирования :-)

Разместил я новый сервис, кстати на vps от eomy.net (и реферралка во имя вселенской жадности). Правда о vps я сказал не просто ради пиара, а чтобы поделиться своей находкой. Недавно я открыл для себя очень интересный веб-сервер cherokee, просто подкупившим меня своею легковесностью и изумительным веб-интерфейсом для его настройки. Уверен, будущее именно за таким софтом - свободным, быстрым и юзабельным.

Я не умер, не забил, не подался в отшельники :-)

Причина для молчания довольно банальна — в моей жизни наступил довольно интересный период, который поедает массу времени, почти не оставляя времени на блог. Беда в том, что есть масса тем, на которые я хотел бы написать, но они все довольно емкие и требуют времени, которого вечно нет.

Стыд и позор, но последняя запись в этом блоге датируется аж ноябрем и это надо исправлять, чем я и постараюсь заняться. Я даже немного приоткрою завесу тайны и скажу, что это будет цикл статей по внутреннему устройству phpBB с точки зрения модописателя. Естественно, будут посты и на другие темы.

Вступление

Сила мира open source — сообщество. Фокус силы — его ядро, те, кто поддерживают, развивают свой любимый продукт. И помогают другим полюбить его. Я пишу для тех, кто волей судьбы стал таким человеком, добровольно взвалив на себя тяжелый труд тех поддержки.

Мы — гики

Мы выбираем технологию, мы ее любим, холим и пытаемся развивать просто потому, что она нам нравится. Но таких, как мы, мало. Большая часть сообщества — простые пользователи, им не важна технология и ее внутренняя красота, а результат. То, что интересно нам, не интересует их. То, что нам очевидно, для них выглядит бессмыслицей.

Пользователь заслуживает уважения

Какие бы глупые вопросы он не задавал. Я готов поспорить, что любой из нас начал свое знакомство с IT с глупого вопроса. И на этот вопрос был дан понятный ответ. Прошедшие годы ничего не изменили, и новички по-прежнему имеют право на понятный ответ.

Практически

Уважай себя. Делай так, чтобы тебя уважали другие. «Боятся — значит уважают» — это не про нас. Да и вообще ни про кого, если уж на то пошло.

1. Будь корректен, ты пример для всех.
2. Эмоции — плохой помощник, они отвлекают от дела.
3. Знаешь ответ — ответь. Не знаешь — промолчи. Не уверен, скажи об этом прямо или запроси нужную дополнительную информацию.
4. Вопрос уже обсуждался — дай ссылку на то, где обсуждался, и закрой тему. Посылаешь в поиск — дай запрос, по которому искать. Придумывать правильные запросы легко, но только когда знаешь, что искать. Ты — знаешь, но пользователь — нет, иначе не спрашивал бы.
5. Если вопрос требует времени, потрать его. Ведь ты здесь в первую очередь для решения сложных проблем.
6. Если времени нет, просто молча пройди мимо. У кого-нибудь другого оно найдется и все будут довольны.
7. Если кто-то ответил неправильно, поправь и объясни, почему его ответ неправильный. Аргументы в духе «ты идиот и кругом неправ» не канают.
8. Иди на контакт. Не бойся общаться в личке, если это требуется для решения проблемы. Пользователю будет приятно, что тебе небезразлична его проблема, а тебе — что пользователь будет тебе благодарен.
9. Если тебе хамят, будь еще корректнее. Умение вежливо отвечать на грубость даст тебе лишь преимущество. Напрашивается на бан — забань, но вежливо и согласно правилам.
10. Наказывай всех. Если кто-то нарушил правила, то он должен получить наказание, независимо от репутации и стажа.
11. Будь снисходителен. Если ты видишь, что нарушение несущественно и сделано неумышленно, просто объясни пользователю в личке, в чем он нарушил правила и, что больше так не надо делать.
    Это очень важное правило! Я неоднократно убеждался, что пользователи после такого обращения начинают гораздо тщательнее придерживаться правил, чем после бана или ворнинга. Так же важно это обращение делать именно в личке, ибо всякому будет обидно, если его огрехи будут обсуждаться публично. Найти золотую середину между этим и предыдущим пунктом непросто, но очень важно.
12. Позволь пользователю исправиться и сними наказание. Для тех, кто нарушил правила не со зла это будет очень хорошим стимулом придерживаться правил.
13. Если пользователь не может исправить нарушение сам, сделай это за него. Права модератора тебе даны именно для этого, а не для нажатия кнопки «бан».
14. Другие будут уважать тебя тогда и только тогда, когда ты уважаешь других. Так устроен мир.

Если пользователи — дятлы

...то проблема скорее всего в тебе. Не спорю, очень достает отвечать на одни и те же вопросы, но такова твоя обязанность. Если сил больше нет — возьми тайм-аут, отдохни, пока не будешь готов снова и снова давать ссылки на фак. Возможно, этот тайм-аут окажется длинной на всю оставшуюся жизнь, но в этом нет ничего страшного, надо уметь вовремя уйти. Свои нервы дороже.

Признаюсь, я давно хотел написать этот пост. Уже недели три точно. Однако, учеба и работа успешно съедали все мое время и пост постоянно откладывался. И все же я наконец выкроил свободный вечер и хочу поделиться с вами своими мыслями по поводу облачных сервисов.

Несмотря на то, что термин "облачные вычисления" был затаскан маркетологами совершенно не милосердно, тенденция переносить данные в "облака" видна очень ясно. Почему это происходит? Я полагаю, все дело в том, что сейчас у каждого из нас есть пачка гаджетов различной степени умности и потребность синхронизировать данные между ними. Во всяком случае, это стало решающей причиной для меня: в разные моменты я использую нетбук, настольный компьютер, рабочий компьютер и телефон и, понятно, хочу иметь доступ к своей почте, файлам и контактам отовсюду.

Отправной точкой для меня стала почта. Исторически у меня было 7 разных почтовых ящиков, которые нужно было читать. Они все были забиты в настройки почтовика на моем настольном компе и на нем же был примерно четырехлетний архив переписки. В итоге, доступ к большей части почты у меня был только из дома, что создавало массу неудобств. В какой-то момент я принял волевое решение настроить сборку почты на моем основном ящике GMail'a и импортировать туда весь архив, заодно сменить kmail на более продвинутый Thundebird и архаичный POP3 на IMAP.

Потратив один выходной, я все это сделал и принялся наслаждаться результатами труда: дома я по-прежнему пользовался почтовиком, с остальных девайсов — веб-интерфейсом GMail. И через пару недель я начал осознавать, что IMAP не вполне корректно работает с ярлыками GMail'a, а основная польза от почтовика — счетчик писем в трее. В итоге, Thunderbird в одночасье оказался заменен на аддон для Firefox WebMail Notifier и веб-интерфейс почты. Так я полностью перенес поту в облако.

Параллельно с этим я стал пользоваться такими штуками, как DropBox (рефералка принесет мне и вам лишних 200 мб бесплатной квоты), с помощью которого я стал обмениваться файлами с коллегами и значительно уменьшил беготню с флешкой от компа к нетбуку и обратно. Read It Later стал перекидывать ссылки на почитать между компами и на телефон. Todoist заменил стикеры и выгодно отличается от них тем, что он не приклеен к одному монитору. Оказалось, что даже для телефона есть его клиент (глючноватый, но есть). Xmarks утащил в облако мои закладки (хотя тут с облачностью можно поспорить, но тем не менее). Жить стало чуточку легче.

Но всему есть цена, и облачность — не исключение. Платить приходится тремя вещами:

1. Конфиденциальность. Отправляя данные сервис-провайдеру мы должны доверять ему и надеяться, что никто посторонний наши данные не увидит.
2. Интернет. Облачность практически всегда требует постоянной связи с интернетом. Та же почта — чтобы прочесть старую переписку нам придется подключаться к интернету и потом уже смотреть. В классическом случае с почтовым клиентом весь архив почты у вас на жестком диске и доступен хоть в Антарктиде. Ситуацию смягчает растущая доступность мобильного интернета, но сотовый ведь ловит не везде.
3. Зависимость от третьих лиц. Решит ваш сервис закрыться или стать платным, и вам придется тратить силы на поиск альтернативы и привыкание к ней. Тот же Xmarks не так давно напугал всех пользователей тем, что он в скором времени собирается закрыться. К счастью, довольно скоро было объявлено, что апокалипсис отменяется, а у сервиса будет новый владелец.

Я довольно долго шел к тому ,чтобы принять эту цену, но в конце концов удобство окупило ее.

А что вы думаете об облаках? Чем пользуетесь или собираетесь использовать? А может у вас есть аргументы против? Мне интересно услышать ваше мнение!