Привет %habraname%!

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

Мало кто сегодня может сказать что не знает о NodeJS, последнее время о нём много говорят и пишут.
Я свой путь ознакомления с NodeJS начал полгода назад, тогда для меня это была просто интересное и новое, я и подумать не мог что уже через полгода это станет моим основным инструментом для разработки.

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

Но сейчас я чувствую в себе силы чтобы уже написать полноценный обучающий и не унылый материал от новичка до реального работающего приложения. Это будет не просто приложение, а онлайн игра с использованием самых популярных инструментов Express и Socket.IO, да-да, мультиплеер, который сможет сделать любой средне-статистический js разработчик.

О том, что такое Express и Socket.IO уже писали много где, поэтому описывать ещё раз я не буду, уделив больше внимания процессу разработки.

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

И так, решено! Начинаю делать крестики-нолики.

До появления HTML5 единственное, что мы не могли контролировать и управлять (без перезагрузки контента или хаков с location.hash) — это история одного таба. С появлением HTML5 history API все изменилось — теперь мы можем гулять по истории (раньше тоже могли), добавлять элементы в историю, реагировать на переходы по истории и другие полезности. В этой статье мы рассмотрим HTML5 History API и напишем простой пример, иллюстрирующий его возможности.

Основные понятия и синтаксис

History API опирается на один DOM интерфейс — объект History. Каждый таб имеет уникальный объект History, который находится в window.history. History имеет несколько методов, событий и свойств, которыми мы можем управлять из JavaScript. Каждая страница таба(Document object) представляет собой объект коллекции History. Каждый элемент истории состоит из URL и/или объекта состояния (state object), может иметь заголовок (title), Document object, данные форм, позиция скролла и другую информацию, связанную со страницей.

Основные методы объекта History:

1. window.history.length: Количество записей в текущей сессии истории
2. window.history.state: Возвращает текущий объект истории
3. window.history.go(n): Метод, позволяющий гулять по истории. В качестве аргумента передается смещение, относительно текущей позиции. Если передан 0, то будет обновлена текущая страница. Если индекс выходит за пределы истории, то ничего не произойдет.
4. window.history.back(): Метод, идентичный вызову go(-1)
5. window.history.forward(): Метод, идентичный вызову go(1)
6. window.history.pushState(data, title [, url]): Добавляет элемент истории.
7. window.history.replaceState(data, title [, url]): Обновляет текущий элемент истории

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

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

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

При чем здесь Хабр? Надеюсь, этот вопрос отпадет после прочтения.

В чём проблема?

Бывали ли у вас случаи, когда во время долгого заполнения нудной формы или написания красноречивого и пылкого комментария *внезапно* крашился браузер? Или вы закрывали вкладку, в которой работаете, или отключалось электропитание (а ИБП, по известному закону, нет)? Если нет — то вам повезло, но страховки от подобных происшествий ни у кого нет.

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

Отличная подборка, как нарисовать различные геометрические фигуры одним элементом HTML.

Квадрат

#square {
	width: 100px;
	height: 100px;
	background: red;
}

Все кто занимается разработкой сайтов под windows, наверняка сталкивались с различными проблемами после запуска сайта на сервере. Проблемы эти появляются из-за того, что сервера обычно работают под ОС Linux. Кроме того, время от времени появляются очень интересные штуки на подобие NodeJS (портировали на win, но не сразу), которые очень хочется покрутить, но нельзя – на windows их нет. Однако, при всех этих недостатках с windows уходить не хочется, ведь здесь куча своих плюсов и привычно ведь в конце-то концов.

Но не стоит огорчаться, ведь есть виртуализация, которая спешит нам на помощь.

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

Осторожно, butthurt.

Тема почтовых рассылок на хабре поднималась буквально недавно, но там не освещался один важдый момент: как обеспечить редактируемость контента этой рассылки после красивой и аккуратной верстки.

Ведь если сверстано на таблицах, с пустыми gif'ами для отступов — результат «монолитный», но не дай бог такое редактировать контент-менеджеру. Моментально всё поедет, да и не умеют нормально визивиги работать с таким ужасом.

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

«Под Windows можно писать для iPhone?»
Анонимный разработчик

«Мы не планируем публиковаться в AppStore, это ведь возможно? И еще мы хотим версию под Android...»
Анонимный заказчик

Если вы решились разрабатывать приложения для iPhone/iPad, то, скорее всего, вас заинтересуют следующие вопросы:

• как можно заработать на приложениях?
• как зарегистрироваться в iOS Developer Program и что дает регистрация?
• обязательно ли нужен Mac?
• какие инструменты можно использовать для разработки?

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

Привет, дорогие друзья!

Доделал книженцию «Blender 2.5: горячие клавиши». Всем, кому интересно — качайте, распечатывайте.

За основу брал книгу Эндрю Прайса «Blender 2.5 cheat sheet».

У любого желающего писать программы для продукции фирмы Apple в жизни наступает такой момент, когда ему приходиться изучить новый язык программирования — Objective-C. Когда-то этот счастливый момент постиг и меня. А чтобы лучше запомнить основные особенности этого языка, решил законспектировать свои мысли во время осмысления его документации, которыми и делюсь с вами.

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

Две наиболее значимые ошибки в позиционировании относительно конкурентов — это делать вид, что их нет и уходить в оппозицию со словами, что все конкуренты — идиоты.

Эти ошибки влияют и на дальнейшее позиционирование на рынке и на предложения покупателю, то есть на стратегию стартапа.

Разберем распространенные ошибочные позиции стартапов.

1. Тут нет конкуренции. Приведем несколько фраз стартаперов и то, как их воспринимают инвесторы.

• «У меня нет конкурентов» — даже если у Вас нет прямых конкурентов, то есть косвенные от «сделаю сам» до других альтернативных вариантов. И если Вы их не рассмотрели, значит Вы не знаете потребителя.

Старая поговорка «Лучше один раз увидеть, чем сто раз услышать» очень точно описывает, что разработчикам может дать создание прототипа интерфейса: визуальное представление, значительно более наглядно описывающие вопросы дизайна проекта и разработки функционала. В итеративном подходе к дизайну пользовательского интерфейса используется быстрое проектирование в процессе создания набросков системы (будь то веб-сайт или приложение) и утверждение их у обширной группы представителей заказчика, заинтересованных сторон, разработчиков и дизайнеров. Если придерживаться этого подхода — можно получить обратную связь раньше (чаще всего прямо в процессе обсуждения), что значительно улучшает качество дизайна конечного продукта и уменьшает потребности во внесении изменений в процессе разработки.

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

Электрогитара без усилителя и процессора (ампа, примочки, педали) — немой инструмент. Самый простой и эффективный способ озвучить ее — подключить к вашему компьютеру. Итак, хочу поделится своим опытом в обработке звука от гитары на ПК.

Подключить электрогитару к ПК — дело двух минут — стоит лишь подсоединить гитарный шнур к линейному (или микрофонному) входу звуковой карты. Только вот звучать она будет обычно. Чтобы окрасить звук — необходимо его обработать в специальной программе. Но, обо всем по порядку.

Здравствуй, Хабр! Думаю, люди, которые следят за моим творчеством, заметили, что я очень увлекся рисованием на Canvas в JavaScript. Возможно это немного излишне, но ничего не могу с собой поделать, уж очень нравится эта технология. Так нравится, что я аж буду выступать на конференции с докладом о ней (Пономаренко Павел).

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

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

Все знания, которые мной были получены за это время, я «материализовал» в проекте компании, в которой собственно я работаю.

Изучая спецификацию OpenID и прочих его расширениях (SREG, AX) и надстройках, мне пришла идея разработать JavaScript виджет со своим API-прослойкой, в помощь другим разработчикам нежелающим «коротать» дни и ночи изучая спеки различных способов авторизации и их расширений.

Собственно об этом далее.

Перевод свеженького поста «Questions to ask clients before designing their website» Брайана Хоффа, автора блога «The Design Cubicle».

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

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

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