Сегодня JavaScript лежит в основе большинства современных веб-приложений. При этом за последние годы появилось большое количество JavaScript-библиотек и фреймворков для разработчиков Single Page Application (SPA), графики, анимации и даже серверных платформ. Для веб-разработки JavaScript используется повсеместно, и поэтому качество кода обретает всё большее значение.

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

AngularJS молод и горяч, когда дело доходит до современной веб разработки. Его уникальный подход к компиляции HTML и двусторонней привязки данных делает его эффективным инструментом для создания клиентских веб приложений. Когда я узнал что Quick Left (студия в которой работает автор. прим. пер.) будет использовать его для создания приложения для одного из наших клиентов, я был взволнован и постарался узнать о angular столько сколько мог. Я обошел весь интернет, каждый урок и руководство, которые смог найти в Google. Они были реально полезны в понимании работы директив, шаблонов, компиляции и цикла обработки событий (digest), но когда дело дошло до тестирования, я обнаружил что эта тема была просто упущена.

Я обучался подходу TDD (Разработка через тестирование) и я чувствую себя не в своей тарелке без подхода «Красный-Зеленый-Рефакторинг». Так как мы все еще разбирались что к чему в тестировании в Angular, команде иногда приходилось полагаться на подход «тестирование-после». Это начало нервировать меня, поэтому я решил сосредоточится на тестировании. Я потратил на это недели, и в скором времени покрытие тестами поднялось с 40% до 86% (Кстати, если вы еще этого не делали, можете попробовать Istabul для проверки покрытия кода в вашем JS приложении).

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

Поэтому нам приходится непрерывно обновлять интерфейс МоегоСклада. Хотим рассказать вам про общие принципы переработки UI — зачем, когда и как это делать.

Зачем улучшать UI?

Переработка UI — дорогостоящий процесс. За последнее время наши разработчики потратили на нее не меньше 30% времени, а могли бы вместо этого добавлять новые возможности. Значит, надо четко понимать, для чего мы меняем UI и какие выгоды это даст.

Для себя мы определили задачи, которые должен решать идеальный интерфейс:

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

Теперь о конкретных действиях.

Предыстория:

Имя большой опыт в разработке веб-сайтов (около 15 лет) и являясь программистом, я очень не люблю рутинную работу, стараюсь ее либо избегать, либо каким-то образом оптимизировать. Другими словами, если мне в какой-то момент необходимо заниматься наполнением контентом сайта (да, знаю, не царское дело программисту наполнять сайт, но случаи разные бывают), то я предпочту потратить пару часов на написание парсера входящих данных, чем часа 4 вколачивать эти данные вручную. И давно меня терзала проблема отсутствия удобного редактора для создания карт изображения. Конечно, можно нарисовать карту в Corel Draw или подобном, выгрузить в SVG и по быстрому переконвертировать в нужный формат, но меня давно интересовала возможность создания некоего редактора, который позволит, не загружая сторонние программы, прямо на сайте, по-быстрому загрузить изображение и выделить на нем нужную карту. Например, есть некое изображение здания, на котором необходимо выделить контур этажа и привязать к нему какие-то JavaScript-события или просто ссылку, вот как здесь:

Наверное, каждый, кто использовал JavaScript, когда-либо сталкивался (или столкнётся в будущем) с асинхронными вызовами. Может быть, это будет обращение к базе на стороне сервера. Может быть — работа с таймером для создания анимации на сайте.

Для того, чтобы «побороть» асинхронность, используются разные инструменты от промисов до смены языка программирования. Но иногда очень хочется бросить всё и написать на чистом JS линейный код:

timeout(1000);
console.log('Hello, world!');

Можно ли реализовать нечто подобное? Разумеется, можно.
В данной статье мы рассмотрим один опасный, но действенный способ.

Преамбула

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

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

Исповедь 1

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

Весь мой опыт программирования складывается из университетских работ и пары лет пребывания в различных компаниях. Критикующие меня люди неоднократно говорили мне, что в целом я разбираюсь в теме, так что я далеко не клинический случай, как можно было подумать. Однако, очевидно, я выработал совсем не те программистские привычки (как минимум, на взгляд работодателя) и мне нужно срочно изменить их. Везде, где бы я ни работал, мои решения, использующие иерархии мелких классов с делегированием поведения, признавались плохими. Говорят, будто так и надо писать, но это не так. Потому что всё это «как надо» может стоить мне работы.

Если вы любитель игры «Caesar III», то наверняка замечали то, с каким старанием и вниманием к мелочам сделаны карты кампании, да и свободного режима тоже. Природные пейзажи, на которых игрок возводит «новый Рим», выглядят вполне реалистично (в рамках игры): ручейки впадают в реки и озера, реки текут через всю карту, а в лесах бродят «бессмертные» овцы, иногда забредая на луга и мешая строить фермы, чайки кружат над местами скопления рыбы, а иногда по реке проплывает неудачливый моряк на останках корабля. Скальные массивы окружены деревьями, а земля покрыта ковром сочной зеленой травы. У всей этой чудной картинки есть недостаток, размер карты не превышает 160х160 тайлов, в статье я расскажу как сделал генерацию карт больших размеров.

Хотела написать что-то умное, но потом решила схалявить, так что поговорим вот о чём — почему же у нас девушки не играют в компьютерные игры? Нет, некоторые, конечно, могут и сильному полу фору дать в какой-нибудь стрелялке. Но чаще всего это не так. Девушка самозабвено и с предвкушением выбирающая в магазине очередной шутер, или пусть даже РПГ, или вообще какую-то игру — редкое зрелище. Почему?
Мне вот как-то говорили даже, что был такой доклад на КРИ — почему девушки не играют. Сказали, доклад был странный, и какой-то феминистически настроенный, с главным месседжем — девушки не играют потому, что игры делают тупые мужики. Ну это со слов очевидцев, сама я не берусь утверждать, был ли доклад плох или хорош — не присутсвовала.
И всё же подумалось, а кстати, почему не играют? Так я стала раскладывать всё по полочкам, и вырисовалась такая картинка.

Привет, хабр! В этой статье я хочу поделиться собственным опытом разработки WebGL игры Digital Trip. Помимо WebGL, в игре использованы такие технологии, как WebAudio API, WebSockets, getUserMedia, Vibration API, DeviceOrientation, а также библиотеки three.js, hedtrackr.js, socket.io и пр. В статье будут описаны наиболее интересные детали реализации. Я расскажу о движке игры, управлении при помощи мобильного, управлении веб-камерой, скажу пару слов о back-end’e на node.js, работающем в связке с dogecoin демоном.
В конце статьи приведены ссылки на использованные библиотеки, исходный код на GitHub, описание игры и саму игру.
Всех, кому интересно, прошу под кат.

Продолжаем тему процесса создания игры Insomnia, начатую со статьи Как мы перестали бояться Огра и начали делать на нем игру

Об истуканах

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

О жизни

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

Тонкая душевная организация

Для начала общая схема:

В какой-то из весенних дней этого года я ехал в троллейбусе и листал комикс о Коше. В одном из выпусков была такая фраза «НО! Её можно понять, она же фракталами в горизонт перетекает, я бы тоже замешкался...». После этого я посмотрел в окно и понял, что если мы возьмём два подходящих дробно-линейных преобразования комплексной плоскости a(z) и b(z), и рассмотрим систему итерированных функций для a(z), b(z), a⁻¹(z), b⁻¹(z), взяв в качестве начального множества картинку с Кошем, то Кош будет перетекать фракталами в горизонт!

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

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

callidus77: Помница в нашей сетке монтажники подключали абонента. Пришли, воткнули сетевуху, а у него Фря и дров нету. Почесали головы и ушли. Чел через три недели наконец-то коннектится.
Грят: «Долго ж ты искал дрова.»
Он: «Я не искал. Я их сам написал.» Баш

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


Под катом мы разберемся с основными инструментами ресурса и потенциальной возможностью применения. Весь инструментарий доступен по адресу http://www.habr-analytics.com, исходный код (основные функции) на github. За примерами и деталями — добро пожаловать под кат!

Структура статьи

1. Пульс Хабра
2. Монитор статей
3. Анализ пользователей
4. Пересечение хабов — диаграммы Венна
5. Аудитория хабов
6. Исходный код и структура проекта
7. Заключение

*Осторожно трафик*

Не всё так просто

На первый взгляд, JavaScript может показаться достаточно простым языком. Возможно, это из-за достаточно гибкого синтаксиса. Или из-за схожести с другими известными языками, например, с Java. Ну или из-за достаточно малого количества типов данных, по сравнению с Java, Ruby, или .NET.

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

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

Привет, Хаброжители! Мне хотелось бы поделиться с вами своим опытом создания онлайн-игры и участия в Imagine Cup. Ещё в старших классах школы я загорелся мечтой сделать онлайн-игру по популярной в России детской серии книг «Коты Воители». Год за годом, шаг за шагом, я шёл к своей мечте. Сначала это был 2D файтинг: вся логика была в клиенте, написанном на AS2, а сервер (в виде PHP-скрипта) лишь сохранял данные. Файтинг заменила подделка на конструкторе Eclipse Origins, я русифицировал его и некоторые моды, исправил пару ошибок и добавил с десяток новых, но вскоре понял, что нужно писать самому… И вот я, студент первого курса: на VPS крутится JAVA сервер, он дружит с клиентами, написанными на ADOBE AIR, и в день капает ~3$ с контекстной рекламы, а Microsoft начинает публиковать агитационные комиксы. Путь Диких Котов Онлайн под катом…

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

В посте в повествовательной и не очень манере рассказывается о различных реализациях «точных» таймеров на JS. Материал рассчитан на новичков… Добро пожаловать под кат.

В статье приводится короткий пример, как встроить в своё приложение генератор и/или сканер QR кодов (или штрих-кодов), и тем самым облегчить себе задачу передачи с устройства на устройство коротких объемов информации.

QR-коды пришли на смену устаревшим штрих-кодам (далее вместо 'Bar code') и все плотнее входят в нашу жизнь, их используют в десятках различных решений от передачи ссылок на сайт, до сложных систем авторизаций и покупок.

В данной статье мы будем использовать ZXing (Zebra Crossing), чтобы расшифровать штрихкод в нашем Android приложении.

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

jQuery-плагин, который превращает вложенное (древовидное) меню в систему прокручивающихся меню.

Репозиторий: github.com/webasyst/waslidemenu
Попробовать: jsfiddle.net/7LnSY/
Пример: demo-ru.webasyst.com