Насколько сложно собрать все 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.

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

Всем привет. Я по долгу службы занимаюсь разработкой для Samsung SmartTV. В силу того, что на хабре мало статей на эту тему, я решил это исправить. Кому интересна пошаговая инструкция как сделать свой пинг-понг на «умный телик» с распознованием жестов — милости прошу под кат.

Введение

Связка HTML+CSS+JavaScript на сегодняшний день зарекомендовала себя как универсальный способ построения пользовательских интерфейсов. Причем не только в веб приложениях, но также в десктоп и мобильных приложениях. Примерами тому являются metro-приложения в Windows 8, фреймворк PhoneGap для создания мобильных приложений.

Реализация интерфейса с помощью HTML, CSS и JavaScript прежде всего подразумевает, что интерфейс будет отображаться в некотором браузере. Если мы рассматриваем десктоп или мобильное приложение, то, очевидно, браузер должен быть встраиваемым.

В данной статье мы рассмотрим использование WebKit .NET в десктоп приложении на C# под Windows.

Предисловие

Дэниел Клиффорд сделал на Google I/O прекрасный доклад, посвященный особенностям оптимизации кода JavaSсript для движка V8. Дэниел призвал нас стремиться к большей скорости, тщательно анализировать отличия между С++ и JavaScript, и писать код, помня о том, как работает интерпретатор. Я собрал в этой статье резюме самых главных моментов выступления Дэниела, и буду обновлять её по мере того, как движок будет меняться.

За последние два с половиной года команда jQuery UI проделала огромную работу. Было выпущено более десятка релизов, исправлено больше 500 багов. Но основная задача была сделать jQuery UI как можно стабильнее, и гибче. В прошлом году мы замахнулись на серьезную цель:

Мы хотим полностью обновить весь проект к версии 2.0. Мы упростим API, улучшим стабильность, документацию, и обеспечим полное тестирование каждого плагина.

И вот сегодня мы рады представить вам первый важный шаг в достижении этой цели — новая версия jQuery UI 1.9.0. Она содержит сотни исправлений, лучшее покрытие тестами, и обновленным API. В добавок, мы развернули новую версию сайта, с улучшенной документацией.

Дело было вечером, делать было нечего, но дурная голова уркам покоя не давала… Данный пост создан как результат чисто-академического интереса. А началось все с того, что при разработке небольшого клиентского приложения для своих нужд, реализованного на Javascript, появилась необходимость взаимодействовать с уже существующей базой, где хранятся искомые данные. База — MySQL. Один из простых способов — реализация серверного скрипта (на PHP или еще каком языке), который по входящим параметрам делает нужный запрос и возвращает результат в JSON виде.

Другой вариант — это DBSlayer-прокси для MySQL. Кто про него не слышал, рассказываю в крадце: был создан в недрах New York Times как средство абстракции и балансирования нагрузки на БД. Подробнее можно почитать на сайте code.nytimes.com/projects/dbslayer/wiki/WhyUseIt. DBSlayer предоставляет API на основе JSON, известен в кругу NodeJS разработчиков.

Но это тоже не наш метод. Под катом приведено простое решение данной задачи на BASH.

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

Проблема

Раньше всю аудиторию Яндекс.Почты мы разделяли на пользователей с флешем и без.

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

А вот с пользователями без флеша (8-10% от дневной аудитории) было сложнее. Мы предлагали им загружать файлы через обычную форму с />. Файлы из неё отправлялись через iframe вместе с содержимым самого письма, и это занимало много времени. Нажав кнопку «Отправить», пользователь долго ждал, пока загрузятся файлы.

Краткое содержание:

Возьмем немного функций высшего порядка, добавим частичное применение функций, приправим fold с map-ом и получим Javascript DSL для работы с DOM.

Человеческим языком:
Простое и понятное введение в функциональное программирование на чистом и понятном Javascript.

В отличие от «Через тернии к Haskell» все разжевано (возможно даже слишком) и разложено по полочкам.

Прочтение статьи развоплотит миф о неприменимости ФП в реальной жизни. Вы сможете смотреть на решение одной и той же задачи с разных точек зрения. Прямо как на картинке.

Здравствуйте, друзья!

Предлагаю вам небольшой урок на тему анимации спрайтов с альфаканалом на канве HTML5.

Преамбула.

Для начала нарисуем нечто


Почему круглое и желтое? Потому что у Дугласа Адамса в «Автостопом по галактике» есть такой Слартибартфаст — очень трогательный дядя, имеет приз за береговые линии при строительстве Земли. Поэтому на всякий случай будем анимировать желтую звезду.

После некоторого, опыта решил написать небольшую статью-шпаргалку о загрузке файлов с использованием возможностей HTML5, а именно File API.

Читайте далее:

1. Поддержка браузерами.
2. Загрузка через Form Data.
3. Загрузка через File Reader.

Есть такая библиотека knockout.js. Она отличается от прочих хорошим туториалом для начинающих и кучей понятных рабочих примеров. Еще там стройная MVVM модель, декларативные связи и так далее.

Короче, если вы, как и я, поиграли с этой библиотекой, понаписали красивых формочек, и вам это понравилось, то все это дело захотелось применить на реальном проекте. И тут проблема — в реальном проекте формочек больше чем одна. А раз такие инструменты, то хочется single web page application и никак иначе. А делать один контроллер и все темплейты заверстывать на одну страницу тоже тупо и тормозно.

Под катом приведу основу своего сложного приложения. Само оно совсем не сложное, но модульное и допускает расширения, а темплейты и модели подгружаются динамически. Идея была подсмотрена в этой презентации — http://www.knockmeout.net/2012/08/thatconference-2012-session.html, код презентации выложен на github — https://github.com/rniemeyer/SamplePresentation — на базе этого кода будем писать свой.

В 2009 я написал первую версию эмулятора Радио-86РК на JavaScript. Тогда мне очень хотелось проверить саму идею подобного эмулятора, поэтому непосредственно реализация вышла несколько сумбурной, хотя и работала в итоге. Тогда я тестировал эмуляцию процессора Intel 8080 в основном визуально, на играх. Поэтому какой-либо рефакторинг кода был мучителен, так как было элементарно что-то сломать.

Недавно я запустил эмулятор РК на микрокомпьютере Maximite. В процессе работы эмуляция ядра Intel 8080 выделилась в отдельный проект i8080-core, в котором также появилась система тестирования. Тесты, особенно, 8080 CPU Execercier, позволяют весьма тщательно проверить качество эмуляции, особенно на предмет недокументированного поведения.

И тут пришла идея вернуться к эмулятору на JavaScript и перетестировать его. В итоге я фактически переписал эмулятор с нуля, разделив его на ядро процессора i8080-js, и, собственно, эмулятор РК.

— Прототипное наследование — это прекрасно
JavaScript — это объектно-ориентированный (ОО) язык, уходящий корнями в язык Self, несмотря на то, что внешне он выглядит как Java. Это обстоятельство делает язык действительно мощным благодаря некоторым приятным особенностям.

Одна из таких особенностей — это реализация прототипного наследования. Этот простой концепт является гибким и мощным. Он позволяет сделать наследование и поведение сущностями первого класса, также как и функции являются объектами первого класса в функциональных языках (включая JavaScript).

К счастью, в ECMAScript 5 появилось множество вещей, которые позволили поставить язык на правильный путь (некоторые из них раскрыты в этой статье). Также будет рассказано о недостатках дизайна JavaScript и будет произведено небольшое сравнение с классической моделью прототипного ОО (включая его достоинства и недостатки).

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

Раньше создавать такие карты было удобно в Adobe ImageReady, но начиная с версии CS3 эта программа больше не поставляется с Фотошопом. На сегодняшний день подобный функционал есть в Adobe Fireworks, но устанавливать эту программу только из-за редактора карт (для работы мне нужен только Фотошоп) — не очень хорошая идея. Существуют и онлайн-редакторы, которые написаны, в основном, с использованием canvas. В них отсутствует возможность редактировать созданные области на карте. Если ошиблись — придется все переделывать. Да и создавать эти области не слишком удобно. Еще одно неудобство заключается в том, что картинку приходится загружать на сервер. В общем, надо писать что-то свое.

Итак, задача:
— написать на javascript редактор, который позволит создавать карты изображений — загружаем картинку, рисуем области, получаем html-код. Если ошиблись — должна быть возможность отредактировать карту. Редактор должен работать в оффлайн-режиме. Обеспечить поддержку только современных браузеров, в том числе Internet Explorer 9.

Что такое SugarJS?

SugarJS — это open source (лицензия — MIT) библиотека Javascript, который расширяет нативные объекты полезными методами. Она разработана, чтобы быть интуитивным, ненавязчивым инструментом, повышающим выразительность кода, который позволял бы делать больше с меньшим количеством кода и меньше задумываясь над рутиной.

На самом деле у них очень информативный и простой сайт — где все уже хорошо написано.
Я просто постараюсь обозначить основные моменты.

Кратко...

• Расширяет нативные элементы Javascript полезными, интуитивными методами.
• Прост для понимания и в использовании.
• Метод SugarJS не используется при наличии метода в родной реализации браузера.
• Имеет систему тестирования, имеющую огромный набор тестов.
• Расширяет возможности работы с датой и временем, обеспечивает их форматирование на нескольких языках (русский есть).
• Отлично ладит с другими фреймворками и сторонним кодом.
• Модульность, вы можете включать только нужные пакеты.
• Полностью совместимый ECMAScript.
• Заявлена поддержка всех основных браузеров, включая мобильные.
• Поддерживает Node.js.
• Имеет хорошую и удобную документацию.

Заинтересовало? Добро пожаловать под кат.

В процессе развития нашей игры на HTML5, мы столкнулись с дилеммой: рисовать для каждого элемента эффект разрушения или попробовать сделать это программно на JavaScript (canvas). Если с первым способом всё понятно (проверенно работает, но много работы художнику), то со вторым у нас были сомнения относительно скорости рендера, ведь это 60FPS x 64 x 4 байта ~ 1 МБ/сек. на один элемент, а если их 40 на одном экране?

Здравствуй, Хабр!

Несколько лет назад в прикладных целях я реализовал обычный Force-based визуализатор графов.

На меня произвело впечатление, как простые итеративные преобразования могут производить субъективно сложные и интересные вычисления, формируя нетривиальные визуально-кинетические модели.

Со временем возникло несколько идей, что интересного можно смоделировать.

Вот что получилось с одной из них (в кадре мелкие объекты, смотреть в HD):