• Поиск пути в играх Tower Defense

    • Translation
    [Прим. пер.: в оригинале статьи есть интерактивные демо, которые я продублировал с помощью видео. Для большей наглядности рекомендую изучить примеры в оригинале.]

    В играх жанра Tower Defense (TD) множество врагов стремится добраться в одну точку. Во многих играх TD существует заранее заданный путь или несколько путей. В некоторых, в том числе в классической Desktop Tower Defense можно размещать башни в произвольных местах, и они становятся препятствиями, влияющими на пути врагов. Запустите демо и нажимайте на карту, чтобы возводить или убирать стены:


    Читать дальше →
    • +21
    • 15.5k
    • 3
  • Односторонний binding данных с ECMAScript-2015 Proxy



      Доброго времени суток, хабравчане. Сегодня мы будем создавать хранилище данных с функцией одностороннего связывания данных с использованием Proxy и некоторых других плюшек ECMAScript 2015.

      Что же такое Proxy?


      Проще говоря, прокси — это обертка объект, который позволяет перехватывать обращение к объекту, на основании которого он был создан. Для перехвата обращений прокси вооружен арсеналом ловушек имеет несколько функций перехватчиков. Полную информацию о списке перехватчиков и всех методах Proxy можно найти здесь.

      Что мы будем делать?


      Мы реализуем хранилище объектов с функционалом отслеживания изменений, используя прокси, т.е. некое подобие почившего O.o с некоторыми дополнительными плюшками.

      Итак, поехали…
      Читать дальше →
    • Игровая индустрия: полезные материалы для геймдевелопера от A до Z

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

        Друг наших образовательных программ Михаил Пименов,  CEO компании Wonder Games и Team Lead инди-проекта "Guard of Wonderland" сам не раз задававший себе эти вопросы, создал для себя выборку всевозможных материалов по индустрии геймдева. От полезных ресурсов, до сообществ, подкастов, книг и фильмов, которые призваны помочь понять, с чего начинается и чем заканчивается разработка игрового проекта. Объединив наши силы, мы с Мишей сделали эту статью с подборкой полезных материалов по игровой индустрии. Вы найдете подборку под катом.


        Читать дальше →
      • Нейронные сети на Javascript

          image
          Идея для написания этой статьи возникла прошлым летом, когда я слушал доклад на конференции BigData по нейронным сетям. Лектор «посыпал» слушателей непривычными словечками «нейрон», «обучающая выборка», «тренировать модель»… «Ничего не понял — пора в менеджеры», — подумал я. Но недавно тема нейронных сетей все же коснулась моей работы и я решил на простом примере показать, как использовать этот инструмент на языке JavaScript.

          Мы создадим нейронную сеть, с помощью которой будем распознавать ручное написание цифры от 0 до 9. Рабочий пример займет несколько строк. Код будет понятен даже тем программистам, которые не имели дело с нейронными сетями ранее. Как это все работает, можно будет посмотреть прямо в браузере.
          Читать дальше →
        • Продолжаем бороться с frontend-рутиной

            image

            Прошло полгода с последней новости о TARS на хабре.

            Напомню, что TARS — это сборщик html-верстки, основанный на gulp, в помощь любому frontend-разработчику (или даже целой команде), для создания проектов любой сложности. За последние шесть месяцев было закрыто 88 issue, выпущено 7 версий, появился CLI, так вышло, что с yeoman’ом отношения не сложились, поэтому появилась своя версия. TARS переехал в свой новый дом на github, обзавелся командой из 4 разработчиков + небольшой армией фанатов. Кстати, огромное вам спасибо за мгновенные фидбеки после релизов и не только. TARS был внедрен в нескольких вебстудиях России и за рубежом. Сборщик научил компонентному подходу не один десяток разработчиков, привлек в ряды frontend’еров тех, кто боялся всей рутины верстки. В общем, появилось много всего нового, и об этом хотелось бы рассказать.
            Подробности
          • Как научиться делать игры: полезные ресурсы

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

              image
              Читать дальше →
            • 50+ полезных ресурсов для самообучения

                learning

                На сегодняшний день, когда информация стала доступна как никогда и получить новые знания проще простого, у нас появилась другая проблема: как фокусироваться и структурировать новые знания, если отсутствуют внешние ограничения вроде экзамена или необходимости подготовки к уроку?
                И снова нас спасают разработчики и интернет, где появляется все больше открытых университетов, онлай-курсов, лекций и сервисов организации своего обучения.
                Я решила собрать в одном месте ссылки на ресурсы дистанционного обучения и другие полезные сервисы на английском и русском языках, большинство из которых бесплатны. Не было цели охватить все, но если вы считаете, что в список нужно что-то добавить –, пожалуйста, напишите в комментариях.
                Читать дальше →
              • 50+ лучших дополнений к Bootstrap



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

                  Для статьи я подобрал наиболее полезные дополнения «на все случаи жизни».
                  Читать дальше →
                • Web-разработка на node.js и express. Изучаем node.js на практике

                    Предисловие



                    Пришла мне в голову смелая мысль, взяться за написание туториала по разработке на node.js (что-то наподобие ruby.railstutorial.org). Так как я первый раз берусь за подобный труд то для для меня очень важен любой фидбэк. Нужно это — не нужно. Что стоит убрать а на чем остановиться подробнее, в общем любая конструктивная критика. Надеюсь что дело пойдет и вам понравится, в этом случае по мере написания буду выкладывать главы на хабр.

                    Вступление



                    Приветствую, перед вами небольшой учебник по практической разработке на node.js, с использованием фреймворка express. Я с большим энтузиазмом отношусь к node и сопутствующим технологиям. Node.js в первую очередь привлекает свежестью в подходах к разработке, смелостью и драйвом.

                    О том, что такое node.js вы можете прочитать на http://nodejs.org/, если коротко — то это серверная платформа, для выполнения javascript. Так же мы будем использовать express, web-фреймворк построеный на концепции middleware (о том, что это такое, поговорим поподробнее чуть позже)

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

                    Хочется отметить, что очень большое влияние на меня оказал railstutorial, это лучшее пособие по web-разработке, которое я встречал, и мне очень хотелось бы создать нечто подобное для node.js.
                    Читать дальше →
                  • N+4 полезных книг



                      Привет! В посте блиц-обзор книг, которые будут полезны IT-специалистам, бизнесменам и тем, кто просто любит читать интересные технические вещи. Рядом с каждой – пояснения, чем оно может быть нужно. Этот обзор, в отличие от других ежегодных, более технически-прикладной.

                      Начнём со «Справочника по инженерной психологии» Вудсона и Коновера.

                      «Справочник по инженерной психологии» — Вудсон, Коновер


                      Книга о том, какие бывают кнопки и рычаги, как на них нажимают люди. И как проектировать так, чтобы люди работали с системой эффективно. Радует тем, что рассматривает пользователя как базовую систему ввода-вывода, замеряя его среднюю скорость передачи информации (около 20 бит в секунду на кнопочные интерфейсы), скорости ввода и вывода.
                      Читать дальше →
                      • +52
                      • 79k
                      • 8
                    • Application Cache API — новые возможности и проблемы

                        Голая баба. ШуткаПостепенно концепция стандарта HTML5 становиться реальностью. Браузеры начинают поддерживать новые возможности, которых так не хватало. Но с новыми возможностями появляются и новые проблемы.
                        В данной статье рассматривается Application Cache API — совокупность функций, обеспечивающих продвинутое кэширование ресурсов web-приложения, и с помощью которых можно просматривать загруженные ранее сайты без подключения к сети Интернет. Особое внимание я уделил практическому использованию и проблемам Application Cache.
                        Читать дальше →
                      • Material Design: на Луну и обратно

                        • Tutorial
                        “Это унылое диалоговое окно действительно нужно?”



                        В этой статье я изложил главные принципы Material Design и дал советы по их воплощению. Текст написан по следам мастер-класса для разработчиков, который мы, Роботы, устраивали совместно с российским офисом Google (Think Mobile).


                        Когда-то все продукты Google выглядели по-разному плохо. Даже один продукт на разных платформах выглядел неконсистентно.

                        Все стало меняться в 2011 году, когда в Google начали усиленно работать над унификацией визуальной части экосистемы своих продуктов и назвали все это Project Kennedy.

                        При чем тут Кеннеди?
                        Легенда такова: президент Кеннеди инициировал программу полёта человека на Луну (если верить, что этот полёт когда-либо был). А большой начальник в Google Ларри Пейдж исповедует принцип, что продукты нет смысла улучшать на 10% — они должны быть в 10 раз лучше, чем у конкурентов. Если уж запускать продукт, то сразу на Луну. Вот и здесь было решено круто всё переделать.

                        Читать дальше →
                      • Ещё один пост о сборке front-end проекта

                        • Tutorial
                        Js app starter

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

                        Что умеет делать сборщик:
                        • Собирать front-end проект для development & production окружений.
                        • Собирать по несколько js/css бандлов на проект.
                        • Использовать стиль CommonJS модулей в браузере.
                        • Использовать ES6-синтаксис.
                        • Спрайты, картинки и многое другое.

                        Читать дальше →
                      • Список YouTube-каналов для обучения веб-разработке

                          image


                          Привет, хабражители!

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

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

                          Под катом — текущая версия списка.
                          Читать дальше →
                        • Impress Application Server простыми словами

                            Это не первая вводная статья про Impress на Хабре, но за последний год я получил много вопросов и приобрел некоторый опыт в объяснении архитектуры и философии этого сервера приложений и, надеюсь, стал лучше понимать проблемы и задачи разработчиков, начинающих его освоение. Да и в самом сервере произошло достаточно изменений, чтобы назрела актуальность совершенно новой вводной статьи.

                            Impress Application Server (IAS) — это сервер приложений для Node.js с альтернативной архитектурой и философией, не похожий на мэйнстрим разработки под нодой и призванный упростить и автоматизировать широкий круг повторяемых типовых задач, поднять уровень абстракции прикладного кода, задать рамки и структуру приложений, оптимизировать как производительность кода, так и производительность разработчиков. IAS покрывает сейчас только серверные задачи, но делает это комплексно, например, можно объединить на одном порту API, веб-сокеты, стриминг, статику, Server-Sent Events, проксирование и URL-реврайтинг, обслуживать несколько доменов и несколько приложений, как на одном сервере, так и на группе серверов, работающих в связке, как одно целое, как один сервер приложений.
                            Читать дальше →
                          • Несколько интересностей и полезностей для веб-разработчика #33

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

                              Walkway.js и Vivus.js




                              Вы видели этот великолепный лэндинг посвященный анонсу Sony PlayStation 4? Обратите внимание на анимацию SVG объектов состоящих из контуров. Они словно рисуются художником в режиме реального времени. Отныне этот эффект можно легко повторить с помощью Walkway и Vivus. Обе библиотеки максимально просты в использовании и применимы только для path элементов, поскольку принцип их работы основывается на взаимодействии с CSS свойством strokeDashoffset. Хоть и у Walkway значительно больше звезд на Гитхабе, зато Vivus предоставляет несколько вариантов отрисовки: Delayed, Async и OneByOne.

                              //Walkway
                              var svg = new Walkway('#test');
                              
                              svg.draw(function() {
                                console.log('Animation finished');
                              });
                              
                              //Vivus
                              new Vivus('my-svg-id', {type: 'delayed', duration: 200}, myCallback);
                              

                              Читать дальше →
                              • +38
                              • 52k
                              • 5
                            • Практическое применение FlexBox

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

                                Одним прекрасным вечером, не предвещающим ничего интересного, в наш чатик поступило предложение от автора публикации «Переводим в код 5 действительно полезных шаблонов адаптивной разметки», написанной им весной 2012 года, написать статью-ремейк, но с применением FlexBox и сопутствующим пояснением что и как работает. После некоторой доли сомнений, интерес глубже разобраться в спецификации все таки победил и я благополучно сел верстать те самые примеры. В ходе погружения в эту область стало выясняться множество нюансов, что переросло в нечто большее чем просто переверстать макетики. В общем в данной статье хочу рассказать о такой чудесной спецификации, под названием «CSS Flexible Box Layout Module» и показать некоторые ее интересные особенности и примеры применения. Всех кому интересно, любезно приглашаю под хабракат.
                                Читать дальше →
                              • Продвинутое использование объектов в JavaScript

                                • Translation
                                Этот пост выходит за рамки повседневного использования объектов в JavaScript. Основы работы с объектами по большей части так же просты, как использование JSON-нотации. Тем не менее, JavaScript дает возможность использовать тонкий инструментарий, с помощью которого можно создавать объекты некоторыми интересными и полезными способами и который теперь доступен в последних версиях современных браузеров.
                                Читать дальше →
                              • OAuth: описание протокола простым и понятным языком

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

                                  Пример кросс-авторизации


                                  Вернемся в 2005-й год и представим, что мы пишем социальную сеть. В ней имеется форма импорта контактов из адресной книги GMail. Что нужно для доступа к контактам GMail? Конечно, логин и пароль от ящика. Но если мы попросим ввести их на нашем сайте, пользователь заподозрит неладное. Где гарантия, что мы не сохраняем на сервере введенные пароли? Поэтому нам хочется, чтобы пароль вводился только на сайте GMail, и после этого доступ к контактам через API GMail предоставлялся нашей социальной сети (возможно, на время).
                                  Под катом - повествование с примерами
                                • FAQ по программированию под Android от новичка, и для новичков

                                  Предисловие к FAQ.

                                  Программирование является моим хобби уже давно (правда на других языках и платформах), но до андроида руки дотянулись совсем недавно. Прошло несколько этапов, прежде чем я добрался до написания программ.
                                  Сначала была пара месяцев посвященных Java, на сайте с «Сгибателем».
                                  После, долгие попытки подружится с Eclipse, закончившиеся побегом на Android Studio.
                                  На данный момент выпущено 7 программ и две находятся в разработке.
                                  Данная подборка возникла как попытка структурирования и оптимизации полученной в процессе информации.
                                  Заранее извиняюсь за возможно некорректную терминологию – так как практикую обучение через создание, и в теоретической части есть пробелы.

                                  Надеюсь, что приведенные примеры окажутся полезными.
                                  Читать дальше →