JavaScript *

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

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

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

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

Не прошло и полгода как я наконец добрался до написания второй главы учебника. Первую главу я тоже немного переработал с учетом пожеланий хабражителей, так что можете снова ее просмотреть — Web-разработка на node.js и express. Изучаем node.js на практике

Глава 2. Демонстрационное приложение и первые тесты

В этой главе мы приступим к разработке нашего приложения, которое мы будем использовать в качестве примера на протяжении всего учебника, и начнем с самого простого, а именно со статических страниц. Так же мы познакомимся с тестированием приложений на node.js и с инструментами, которые используются для этого.

История следующая — делаем веб-проект. Заказчик хочет чтобы было красиво как на флеше, но не на флеше, потому что на айпаде надо. Ок. Берем некоего 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

ObjectScript — новый встраиваемый и очень легкий объектно-ориентированный язык программирования с открытым исходным кодом. ObjectScript расширяет возможности таких языков, как JavaScript, Lua, Ruby и PHP. Вы можете ознакомится с первоначальным синтаксисом языка в этой статье.

ObjectScript 0.99-vm3 — новая быстрая виртуальная машина и новые возможности.

Убраны некоторые операторы, например, clone, numberof и др. заменены функциями. Последнее значение в функции возвращается автоматически. Добавлена короткая запись для доступа к членам объекта — @varname, новый короткий синтаксис для объявления функций и мн. др.

Я много пишу на JavaScript, и если вам при работе с шаблонами, как и мне, надоело экранировать окончание строк, следить за именами шаблонов и собирать их перед каждым билдом, это решение для вас, jsttojs — утилита для прекомпиляции клиентских шаблонов в JavaScript.

Вступление

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

Meny

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

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

Steve Sanderson сообщает о релизе следующей версии knockoutjs.

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

О новых возможностях под катом

Вышла ноль пятая версия 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. С помощью нашего сайта ежедневно бронируют отели тысячи человек, поэтому для нас очень важно, чтобы качество нашего продукта было на высоте. А для этого нужно не отвлекаться на разного рода мелочи и уметь эффективно решать поставленные задачи.

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

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

Дата — крайне неудобная штука для работы с ней в плане создания UI.

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

Мой (второй) вариант решения проблемы(апдейт)


Для самых нетерпеливых — да, есть функционирующее демо — jsfiddle.net/Meettya/aDAsa/embedded/result

Насколько сложно собрать все 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 был представлен как язык функционального программирования. Причина заключается в том, что функции в JS не просто разделяют логику на операционные блоки, функции являются объектами первого класса, способными создавать другие объекты. Подобная зависимость от функций одновременно является как сильной стороной, так и настоящим проклятием этого языка. Сильная сторона заключается в том, что язык, обладая подобными особенностями, становится легковесным и быстрым (каким JavaScript изначально и видели его создатели). Однако если вы не знаете что делаете — однозначно ждите беды.

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

Итак, существует четыре пути вызова функций:

• Вызов метода — Method Invocation
• Вызов функции — Function Invocation
• Вызов конструктора — Constructor Invocation
• Вызов apply и call — Apply And Call Invocation

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

Если вы еще не слышали про meteor, значит вы вообще не следите за миром JavaScript, не интересуетесь вебом и непонятно каким образом сюда попали.
Пусть так.