Эта статья основана на моей презентации с конференции BrazilJS в августе 2014 года. Она базируется на идеях, о которых я писал в блоге недавно, в основном, в связи с UX и производительностью.

Я хочу представить 7 действенных принципов для веб-сайтов, которые хотят применить JavaScript для управления UI. Эти принципы являются результатом моей работы как веб-дизайнера, но также как давнего пользователя WWW.

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

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

• Должен ли JavaScript использоваться как замена функциям браузера: история, навигация, рендеринг?
• Умирает ли бэкенд? Нужно ли вообще рендерить HTML?
• Правда ли, что будущее за приложениями на одной странице (Single Page Applications, SPA)?
• Должен ли JS генерировать страницы на веб-сайте и рендерить страницы в веб-приложениях?
• Нужно ли использовать техники вроде PJAX или TurboLinks?
• Каково точное отличие между веб-сайтом и веб-приложением? Должно ли остаться что-то одно?

Доброго new Date().getTimeOfDay();

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

Частые повторяющиеся задачи. Так и появляются фреймворки и библиотеки.

Впрочем, случай с Graphics2D.js немного другой: мне просто захотелось порисовать. С объектной моделью, анимацией и событиями. И — ничего лишнего.
Но максимально расширяемо: идей много, и всё можно вынести в плагины.

Это перевод публикации «Les Forges Pixel Art Course».

Часть 1: Правильные инструменты
Часть 2: Линии и кривые
Часть 3: Перспективы
Часть 4: Тень и свет
Часть 5: Палитры цветов
Часть 6: Сглаживание
Часть 7: Текстуры и размытие
Часть 8: Мир тайлов

Часть 3: Перспективы

Проблема перспективы в 2D играх, это вопрос который возникает часто, и это возможно то, почему так много любительских игр имеют множество противоречивостей в этой области. В частности эта часть адресуется к типичным перспективам в RPG, так что если вы ищете информацию о виде сбоку или от первого лица, вам следует поискать где-нибудь ещё. Это важно, помнить что перспектива — это «искусство представления трёхмерных объектов на плоской поверхности (в данном случае это ваш экран) как их увидел бы наблюдатель.»

Здравствуйте, меня зовут Александр Зеленин, я веб разработчик. Сегодня хочу рассказать, как могут работать сайты в условиях нестабильного подключения _{как и обещал}. Проще говоря, что делать если отключили интернет, а деньги зарабатывать надо.

Рассмотрим 3 примера: интернет-магазин, кинотеатр и онлайн-плеер. Для магазина и кинотеатра так же идет разделение на 2 части — что делать на стороне пользователя и на стороне оператора/продавца.

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



Присаживайся поудобнее, дорогой читатель. Этой публикацией открывается серия, посвящённая разработке под мобильные устройства, с историями о моих феерических провалах, поиску своего пути и преодолении себя. Если вы хотите сделать свою игру (или что угодно), но не умеете ни программировать, ни рисовать, то своим примером я хочу вдохновить вас на первые шаги и направить в нужное направление. Серия будет полезна и тем, кто что-то умеет и подумывает начать свой путь в геймдеве – ведь учиться на чужих ошибках гораздо приятнее, чем на своих. Многие вещи я делал недостаточно эффективно, на моём примере вы абсолютно точно узнаете, как делать не стоит. Некоторая информация будет полезна и в других областях (в частности, в области бизнеса с Китаем).

Вступление

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

Содержание

• Введение
• Величины, типы и операторы
• Структура программ
• Функции
• Структуры данных: объекты и массивы
• Функции высшего порядка
• Тайная жизнь объектов
• Проект: электронная жизнь
• Поиск и обработка ошибок
• Регулярные выражения
• Модули
• Проект: язык программирования
• JavaScript и браузер
• Document Object Model
• Обработка событий
• Проект: игра-платформер
• Рисование на холсте
• HTTP
• Формы и поля форм
• Проект: Paint
• Node.js
• Проект: веб-сайт по обмену опытом
• Песочница для кода

Вопрос о том, могут ли машины думать так же уместен, как вопрос о том, могут ли подводные лодки плавать.

Эдсгер Дейкстра, Угрозы вычислительной науке

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

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

Это перевод публикации «Les Forges Pixel Art Course».

Часть 1: Правильные инструменты
Часть 2: Линии и кривые
Часть 3: Перспективы
Часть 4: Тень и свет
Часть 5: Палитры цветов
Часть 6: Сглаживание
Часть 7: Текстуры и размытие
Часть 8: Мир тайлов

Часть 2: Линии и кривые

Если вы ещё не состоявшийся художник, лучший путь начать рисовать, делать это карандашом, после чего обводить чернилами, затем раскрашивать. То же самое применимо и к пиксель-арту: первый шаг в изображении, это обозначить контуры — этот шаг называется «штриховой рисунок» (Lineart). Штриховой рисунок — это очень важный шаг для достижения хорошего результата. Несколько пикселей вашего изображения, могут являться большей его частью (в противоположность рисованию, где масштаб позволяет больше допущений) так что ошибка в один или два пикселя, может сделать так, что ваш персонаж будет выглядеть искажённым. Для ясности, точность штрихового рисунка является Р-Е-Ш-А-Ю-Щ-Е-Й для успеха пиксель-арта.

Отступление

Приблизительно полтора года назад, просматривая очередной выпуск «Видеомании», я услышал о движке Unity3D. До этого никогда глубоко не интересовался подобными вещами и считал процесс разработки для меня сложным. В тоже время детская мечта создавать игры, как и любовь к ним, ещё не угасла. Я нажал на паузу и загуглил «unity3d»… Установив Unity и поняв основные принципы работы движка, я очень обрадовался сразу нескольким вещам: простота в освоении, мульти-платформенность, подробная и понятная документация и живой форум (с английским благо всё в порядке), наличие магазина дополнений и free лицензии. В дальнейшем я пробовал и другие движки, но предпочтение моё всё же не поменялось. Выбирая платформы, я остановился на мобильных и, в частности, на Android. Ничего яблочного у меня не было. К тому моменту лицензия для Android стоила 400 долларов. Но, пока я спешно проходил видео курс по основам ООП программирования и Java (небольшой опыт в php был), ребята из Unity решили дать возможность разработчикам делать игры для Android и iOS совершенно бесплатно, за что им большое спасибо.

Радости не было предела, когда я впервые запустил тестовый проект на своем телефоне. Всё великолепно работало! А процесс компиляции, отправки и запуска приложения на устройстве занимал несколько секунд. Хлопая в ладоши, с улыбкой на лице я стал думать о том, что же мне теперь со всем этим делать…

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

Далее рассказ продолжается в хронологическом порядке выхода игр и разбит на одноимённые главы, с приведением статистики, методах продвижения и прочего.

Любители Fallout уже не первый год создают разного рода версии Pip-Boy. У кого-то это просто бесполезный кусок пластика, замаскированный под работающее устройство, а кто-то и полноценный, функциональный прибор создает.

На днях в Сети появилась информация о Pip-Boy 3000, устройстве, которое может выполнять часть функций того самого девайса из игры.

Есть один курс, который я бы добавил в программу обучения по всякой инженерной специальности, и он не о компиляторах или сложности алгоритмов. Это “Введение в реальность индустрии”, ибо об этом не говорят и это приводит к никому не нужным обломам. Эта статья претендует стать README.txt для молодого инженера в деле построения карьеры. Ее цель — сделать вас счастливее, заполнив пробелы в образовании относительно того, как работает реальный мир. Я не призываю следовать написанному как подробному руководству, но я надеюсь, что эта информация окажется для вас более ценной, чем то ничто, что вам рассказали об этом в университете.

Здравствуйте, меня зовут Дмитрий Карловский и я… клиент-сайд разработчик. За плечами у меня 8 лет поддержки самых различных сайтов и веб-приложений: от никому не известных интернет-магазинов, до таких гигантов как Яндекс. И всё это время я не только фигачу в продакшн, но и точу топор, чтобы быть на самом острие технологий. А теперь, когда вы знаете, что я не просто хрен с горы, позвольте рассказать вам про один архитектурный приём, которым я пользуюсь последний год.

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

Осторожно: чтение может вызвать вывих мозга, приступ холивара, а также бессонные ночи рефакторинга.

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

(Для тех, кто хочет поиграть, но не хочет читать откровения, вот ссылка на игру.)

После прочтения Google's AngularJS Guidelines у меня создалось впечатление о его незавершённости, а ещё в нём часто намекали на профит от использования библиотеки Closure. Ещё они заявили, «Мы не думаем, что эти рекомендации одинаково хорошо применимы для всех проектов, использующих AngularJS. Мы будем рады видеть инициативу от сообщества за более общий стайлгайд, применимый как для небольших так и крупных проектов».

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

Привет, Хабр! В этот раз мы поговорим о стилизации инпутов без картинок и JS, особенностях вертикальных отступов, CSS счетчиках, необъятных возможностях в именовании классов, а также расскажем, как улучшить анимацию на слабых устройствах.

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



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

Прозрачность, контроль, ощущение прогресса, лёгкая и неформальная передача задач — это верные спутники гибких методологий. Мы много лет работали в софтверных компаниях и привыкли к тем преимуществам, которые дарит аджайл. Когда мы начали делать Кнопку, большая часть которой — это оффлайновая работа бухгалтеров, юристов и бизнес-ассистентов, первый вопрос, которым мы задались: «Будет ли аджайл работать в бухгалтерской компании?» Сейчас мы с уверенностью ответим утвердительно, но прежде нам пришлось приложить немало усилий. Про это сегодня и расскажем.

Создание игры процесс захватывающий и познавательный. Особенно это заметно, когда ремейк «классики» делаешь сам, руководствуясь идеями оригинала и десятками часов, потраченных на прохождение кампании. У меня не было сколь-нибудь значимого опыта разработки для Android'a, поэтому создание работающего «как надо» приложения для планшета поначалу выглядело довольно туманно, но от этого не менее притягательно. При наличии времени и возможностей, можно стряхнуть пыль со старых игр, подмазать и подклеить, добавив поддержку «больших» разрешений и окажется, что они выглядят не хуже современных продуктов, выложенных на маркете, даже с палитрой RGB565 без альфа-канала. Я предполагал, что будут подводные камни и заботливо спрятанные грабли, которые лежат тихонько во время разработки, но больно лупят по голове, стоит запустить игру на реальном железе. Чего сильно не хватало, так это отладчика, а возникающие проблемы лишь укрепили желание достичь поставленной цели. Под катом будет рассказ о том, как это все заработало.

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

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

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

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