JavaScript *

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

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

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

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

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

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

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

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

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

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

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

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

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

Так уж сложилось, что испокон веков единственный кроссбраузерный способ показать анимацию в браузере без JS — анимированный gif. Был бы у него JPEG-based аналог — и интернет мог бы быть совсем другим… Современные альтернативы, например APNG — работает не везде и со столь же небольшим сжатием, а долгожданный тэг <video> страдает от патентов.

Хочу поделится результатами моего небольшого академического эксперимента по конвертированию видео в формат SVG (которое затем при везении можно просто показать через <img src="">).

Академического — потому что проблемы кросс-браузерной совместимости далеки от решения, и потому в нынешнем виде это едва-ли где-то применимо.

SVG — это не только векторная графика, но и 3 а то и 4 метра качественного видео...

История следующая — делаем веб-проект. Заказчик хочет чтобы было красиво как на флеше, но не на флеше, потому что на айпаде надо. Ок. Берем некоего Adobe Edge (тогда ещё 0.6 ) в качестве инструмента для создания сложной анимации на js\CSS3\HTML5. Всё получается. Вау. Пока мы идём к продакшену — Edge идёт к релизу, класс!

Прошло несколько времени и вот уже Edge зарелизился. 1.0.0.0, однако!!!
Дополировываем, кладём для release preview заказчику, а в ответ: «это что ещё за ...?»

Прим. переводчика: underscore.js — одна из самых известных и любимых javascript-библиотек. Но мало кто знает, что есть её более удачный клон. В одном из своих проектов мы без каких-либо проблем перешли на него и теперь решили познакомить с ним других читателей Хабрахабра.

Lo-Dash — это полноценная замена^* для Underscore.js. Lo-dash имеет более высокую производительность, избавлен от некоторых багов underscore и даёт некоторые новые возможности.

Уже какое то время использую/разрабатываю библиотеку MaskJS. Вначале использовал её только как движок для шаблонов, а со временем, она полностью заменила HTML. В статье расскажу какими преимуществами обладает компонентный подход в разработке приложений и данная реализация в частности. Если выделить по-пунктам, то мы получим приблизительно такой список:

• Скорость
• Обработчики тегов
• Пре- и Пост-процессоры
• IoC
• Изоляция/Декомпозиция
• Разметка — Модель — Код — Стили

Более подробно о самой библиотеке и примеры можете посмотреть здесь — libjs/Mask, a исходники тут — github/Mask

Вступление

Я безумно люблю различные эксперименты на JS. Они словно позволяют заглянуть нам в будущее, и посмотреть, каким захватывающим и футуристичным оно будет. Когда вы будете просматривать приведенную подборку, вы наверняка вспомните про еще недавнего короля — Adobe Flash, а затем осознаете, насколько быстро CSS и JavaScript лишили его трона. Современные браузеры позволяют нам использовать множество различных эффектов и анимаций без сильных тормозов. Однако слово «экспериментальный» подразумевает ряд ограничений, как например некорректное отображение в некоторых браузерах (IE), кроме того, подобные плагины будут, скорее, отличным концептуальным дополнением для персональных страниц, а не для использования в больших проектах.

Meny

Meny — трехмерное меню, которое помимо своей визуальной притягательности еще и экономит место на экране. При наведении (или свайпе на тачскрине, что важно), меню «выезжает» с отличным эффектом.

Спустя полтора года разработки вышел финальный релиз фреймворка Kango.
С помощью Kango можно создавать расширения сразу под 5 браузеров (Chrome, Firefox, Opera, Safari, Internet Explorer) используя общий JavaScript код.

Вышла ноль пятая версия mvc фреймворка Autodafe для node.js. Код стало писать удобнее, кода теперь писать нужно меньше, ещё меньше. Скоро код писать не надо будет совсем, достаточно будет лишь подумать о нём.

Пример действия контроллера, которое совершает два асинхронных запроса к базе данных, компанует вьюшку index.html и отправляет ее клиенту (при этом отлавливая и обрабатывая все ошибки):

Site.prototype.index = function( response, request ){
  response.send({
    topic : this.models.topic.With( 'author', 'comments.author' ).find_by_pk( request.params.topic_id ),
    news  : this.models.news.find_all()
  });
}

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

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

• Живое демо блога
• Статья описывающая работу блога
• Код блога на github

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

Привет, меня зовут Игорь (iamo0), я старший фронт-энд разработчик в Островке. Я занимаюсь нашим основным продуктом: сайтом Ostrovok.ru. С помощью нашего сайта ежедневно бронируют отели тысячи человек, поэтому для нас очень важно, чтобы качество нашего продукта было на высоте. А для этого нужно не отвлекаться на разного рода мелочи и уметь эффективно решать поставленные задачи.

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

Не претендую на то, что мой рассказ сорвет покровы или станет настоящим откровением. Хочу поделиться с вами опытом работы с большими приложениями, накопленным разработчиками Островка.

Насколько сложно собрать все Javascript библиотеки в одном месте? Задача, конечно, непростая, у веб-разработчика из солнечной Финляндии Juho Vepsäläinen ушло на это около семи месяцев. Его проект JSWiki содержит более 30 категорий, в которых перечислены самые разнообразные проекты для frontend разработки. Сколько библиотек и утилит там упомянуто посчитать очень трудно. Прежде всего, потому что каталог слабо структурирован и не содержит практически ничего кроме ссылок.

Тем не менее, JSWiki послужила нам отличной базой для нового проекта JSter. Вместе с Juho Vepsäläinen мы разработали самый полный открытый Javascript каталог. В нем уже почти 700 библиотек (в основном open-source) и любой пользователь может дополнить список.

Привет, Хабр!

Долго не мог решить, как это оформить – как вопрос в QA или как пост, в итоге, 4-ый пункт правил оформления вопроса меня насторожил — «содержит в себе действительно вопрос, но не повод для дискуссии.», и я решил это сделать постом.

До сегодняшнего вечера, я считал, что немного разбираюсь в JavaScript, и даже знаю какие-то фишки клиентской оптимизации:
— к примеру, минимизировать и обфусцировать скрипты, склеить их в один файл и позволить закэшировать его браузеру;
— так же я свято верю в то, что нельзя засорять window большим количеством глобальных объектов, это так же может сказаться на производительности и «качестве» (собственно об этом и пойдёт речь)

Не помню, что именно меня натолкнуло на мысль открыть консоль в chrome development tools, находясь на vk.com (куда я к слову очень редко захожу), но назад дороги уже нет…

Сначала я удивился отсутствию jquery. Символ доллара, конечно занят, но совсем не под jQuery, а вот под такую штуку:

function () { var curArgs = Array.prototype.slice.call(arguments); return func.apply(obj, args.concat(curArgs)); }


Попытка достучаться через jQuery тоже ни к чему не привела. Ну ладно, подумал я, они, наверное, как yahoo, написали свой мега крутой framework с блэк-джеком и без jquery. Но я решил убедиться, что в объекте window нет какого-нибудь странного свойства, в которое затисался jQuery (ну может он скрывался бы в window.jqry).

Я написал в консоль window, нажал enter, развернул «дерево», чтобы увидеть список свойств объекта и…

Использование возможностей параллелизма в настоящее время стало уже обычной практикой в программировании. Однако все языки можно разделить на два типа: те, в которых параллельность применяется вовсю и активно (например, С), и те, которые не вкусили еще в полной мере радостей многопоточности. К последним, в частности, относится JavaScript. Чтобы восполнить этот досадный пробел и пополнить копилку прогрессивного опыта, предлагаем вашему вниманию перевод сообщения из блога Ника Матсакиса, программиста Mozilla Foundation, в котором он делится первыми личными впечатлениями от использования Rivertrail — инструмента параллелизации в JavaScript, созданным Intel.

В этом году мне посчастливилось впервые посетить ежегодную (5-ю по счету), конференцию Fronteers #fronteers12, в Амстердаме.

Самая громкая клиент-сайд конференция в Европе, длилась 2 дня, 4-5 октября в стенах необычного кинотеатра Pathé Tuschinski.

Все доклады были на английском языке, в постоянном сопровождении Кристиана Хейлманна. Под катом ссылки на слайды и основные тезисы презентаций первого дня конференции.