JavaScript *

Как часто говорят: «Лень — двигатель прогресса». Вот так однажды, мне стало лень читать все комментарии к статьям, скроллить десятки, а порой и сотни комментариев. Я решил как-то упростить этот процесс — создал userscript (вот тут неплохая статья, которая помогла понять как делать этот самый скрипт), который отфильтрует комментарии по рейтингу.

Здравствуйте. Получил такое задание, в принципе все ясно из названия темы.
О том как я этого достиг, шаг за шагом, будет следующий пост.
Если что не так — критика приветствуется, это было так сказать исследовательское задание, и перед началом работы над ним у меня не было понятия о данном инструменте, зачем он и так д…
В процессе исследования многие вопросы прояснились.

При разработке сайта была поставлена не совсем стандартная задача — копировать по клику на текстовое поле его содержимое. Поиск подсказал что кроссбраузерно и с наименьшими потерями времени копирование в буфер обмена при помощи javascript возможен с применением плагинов jQuery использующих flash. Может это и не самое правильное решение, но остановились на нем. Я хочу рассказать об опыте использования плагина zClip, его настройке, попавшимися и решенными проблемами.

О этом плагине уже была статья на Хабре — Копируем в буфер обмена в FireFox 3.5 и IE8, но она местами устарела. Опытные разработчики не найдут здесь чего-то нового и очень уж интересного, остальных прошу под кат.

Прошло уже почти два месяца как Yandex порадовал некоторых пользователей новым продуктом — Yandex Браузером. Несмотря на невероятную динамику развития продуктов в этой области (Chrome и Firefox), Яндексу удалось привнести в свой браузер ряд новых идей.

Из всех особенностей этого браузера больше всего меня зацепило их дизайнерское решение относительно изображений сайтов в «быстрых закладках» (Speed dial). Люди любят глазами и поэтому приятно видеть у себя в новом табе не пустую белую страницу, а красочные картинки. Беда только в том, что лично я, чаще всего, смотрю на подпись под этой картинкой или же на favicon, так как по скриншоту сайта бывает очень сложно его узнать. Эту проблему дизайнеры яндекса, на мой взгляд, решили очень элегантно. В данном посте мы посмотрим, как реализовать эту идею на клиентской стороне.

Здравствуйте, уважаемые Хаброюзеры! В своём дебютном посте, я хотел бы рассказать о такой замечательной и интересной штуке, как HTML5 Canvas, а точнее о функциях контекста, которые по моему мнению, освещены меньше всего — transform и rotate.
Когда я начинал свои эксперименты и копания в области новомодного канваса, в рунете была всего одна статья внятно объясняющая, как нужно вертеть рисунки на холсте. Более-менее понять смысл загадочного Java Script'a я смог только «полопатив» исходники Tululoo HTML5 Game Maker.

На сайте tympanus.net представлен новый экспериментальный jQuery плагин для создания галереи, который можно использовать для решения разных задач, например, простой показ изображении, сгруппированных определенным образом или отображение целых альбомов пользователей с фотографиями без перезагрузки страницы. Разумеется, галерея адаптивная, что позволяет удобно использовать ее как на компьютерах с большим экраном так и на мобильных устройствах.

В один прекрасный момент передо мной встала задача создать API для работы с файлами на клиенте и их загрузки на сервер.

Я работаю в Почте Mail.Ru, и моей прямой обязанностью является работа с JavaScript во всех его проявлениях. Прикрепление файлов к письму — одна из основных функций любой почты. Мы тут не исключение: у нас уже был Flash-загрузчик, который вполне исправно работал и долгое время нас устраивал. Однако у него был ряд недостатков. Вся верстка, графика, бизнес-логика, и даже локализация были зашиты в нем, в результате чего решение было громоздким, а внести правки мог только Flash-разработчик. В какой-то момент мы поняли, что нам необходим новый механизм. О том, как его создать, пойдет речь в этой статье.

Мне очень нравится JavaScript и я считаю его мощным и удобным. Но для большинства начинающих JS-программистов, много проблем создаёт недопонимание аспектов языка. Часто конструкции языка ведут себя «нелогично». В данной статье я хочу привести примеры «граблей», на которые я наступил; объяснить поведение языка и дать пару советов.

SteelToe — небольшой javascript сниппет, призванный решить проблему доступа к неопределенным свойствам объекта. Это особенно важно при обращении ко вложенным свойствам. В нем также реализована возможность автовивификации, что порядком упрощает создание нужных свойств. В общем — довольно полезный сахар в OOP.

Я уже писал заметку на эту тему, с того времени стала доступна еще одна JavaScript SIP библиотека. В первой статье я упоминал её, но на тот момент вся информация о библиотеке включала: описание авторов и видео демонстрирующее работу. Сейчас исходный код открыт под MIT лицензией, имеются документация и форум.

Примечательно, что данную библиотеку разрабатывают авторы того самого стандарта, который и описывает особенности SIP протокола при работе поверх WebSocket. Помимо этого разработчики указывают следующие достоинства:

• легковесна, ~140КB
• простой и мощный API
• совместима с популярными SIP серверами
• аудио-видео вызовы; мгновенные сообщения
• статус пользователей (эта функция уникальна, пока отсутствует в других библиотеках)

От себя к преимуществам добавлю: компетентность и отзывчивость авторов, багрепорты закрывают очень быстро.

Под катом длинное подробное видео с пошаговой инструкцией в первой половине для тех кто захочет попробовать самостоятельно, и демонстрацией работы во второй половине (c 3:10). Кстати, в свежих версиях Chrome, WebRTC — протокол для обмена аудио-видео данными, доступен и включен по умолчанию.

 

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

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

Доступные инструменты:
Content Scripts, Background Pages, Message Passing

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

Эта статья призвана дать представление об основных правилах, подходах, дающих наилучшие результаты, и распространённых ошибках, на которые стоит обратить внимание при разработке плагинов для jQuery.

Многие сервисы и приложения (особенно веб-сервисы) принимают древовидные данные. Например, такую форму имеют данные, поступающие через JSON-PRC, JSON-REST, PHP-GET/POST. Естественно, появляется задача валидировать их структуру. Существует много вариантов решения этой задачи, начиная от нагромождения if-ов в контроллерах и заканчивая классами, реализующими валидацию по разнообразным конфигурациям. Чаще всего для решения этой задачи требуется рекурсивный валидатор, работающий со схемами данных, описанными по определённому стандарту. Одним из таких стандартов является JSON-Schema, рассмотрим его поближе.

У разработчиков веб-приложений на Caché и Ensemble часто возникает задача «file upload» — загрузки файлов с браузера. Недавно на форуме по Caché на SQL.ru снова возникло несколько вопросов о том, как сделать фоновую загрузку файлов. Решил описать как это можно сделать с использованием технологий CSP и ZEN.

В продолжение первой части отчета, я поделюсь своими заметками о втором дне лучшей конференции по клиентской разработке в Европе — Fronteers.

Плюс пару слов о Jam Session, который проходил за день до конференции.

Видео записи всех докладов уже доступны на Vimeo.

Открытый блокнот второго дня конференции.

(осторожно, под катом присутствует тяжелая графика)

Buildy — многопользовательская онлайн-игра, в которой можно строить всё, что угодно, без всякой определённой цели, просто так. Это трехмерный мир в изометрической проекции, в котором можно использовать готовые объекты из библиотеки (их больше четырёх с половиной тысяч!) или рисовать свои в редакторе. В игре есть чат, с помощью которого можно согласовывать свои действия с другими игроками. Кроме общего для всех мира Goon World III, в который по-умолчанию попадают все новые игроки, можно создавать свои закрытые площадки, доступ к которым возможен только по инвайтам.

Дабы не было двусмысленностей, обозначу суть. При приёме на новую работу мне дали тестовое задание, которое кратко можно описать так: «Написать аналог Glow для геовизуализации событий входа пользователей в кастомерку интернет-магазина». Проще говоря, необходимо мониторить лог системы на предмет возникновения определенных событий и в случае оных выполнять (в данном случае) отображение точки на карте, которая будет определяться IP-адресом пользователя. Цель реализации: создать приятную на вид «игрушку» для презентационных целей, способную погрузить смотрящего в нирвану гармонии и эстетического наслаждения. Основным условием было использование в процессе разработки стека Java-технологий, чем обусловлено принятие многих решений. Кроме этого, было решено реализовать это в виде одностраничного сайта. А поскольку с Java и web я был знаком крайне поверхностно (писал в основном на C/C++), пришлось многому научиться. Что ж, будем разбираться вместе.

Статья рассчитана на интересующихся и начинающих, однако не «разжевывает» простые вещи, с которыми можно ознакомиться с помощью документации или специализированных статей. Наиболее полезные ресурсы, ссылка на исходники (распространяются по лицензии BSD) и ссылка на рабочую версию приведены в конце статьи.

Если вам нужно валидировать загружаемые пользователем файлы не только на сервере, но и на клиенте, или вы хотите позволить пользователю выбрать сразу несколько файлов для загрузки (multiple=”multiple”) то, скорее всего, вы столкнетесь с некоторыми трудностями при использовании Ext.form.field.File.

Суть проблемы

Проверить расширение загружаемого файла, если пользователь выбрал только один файл, не составит труда — просто объявляем vtype и смотрим value input-а:

Ext.apply(Ext.form.field.VTypes, {
    file: function(val, field) {
        var types = ['rtf', 'pdf', 'doc'],
            ext = val.substring(val.lastIndexOf('.') + 1);
        if(Ext.Array.indexOf(types, ext) === -1) {
            return false;
        }
        return true;
    }
    ,fileText: 'Invalid file'
});

Хочу поделится с вами очень интересным приемом оптимизации в Javascript.