Интервью: Марчин Вичери — создатель Google Pacman Logo, HTML5 Slide Deck и других интересных вещей

Автор: Анна Лысак Дата публикации: 12.10.2010
Последнее обновление: 11.10.2010

Поговорить и поспрашивать крутого или просто талантливого веб-разработчика всегда интересно. «Веб-ниндзя» Марчин Вичери (Marcin Wichary) отвечает на вопросы о своих проектах, новых технологиях и рассказывает, как научится создавать действительно стоящие вещи.

Мартин Вичери

Марчин Вичери - автор Google Pac-Man logo , создатель HTML5 fancy (shmancy) slide deck (сейчас это проект с открытым исходным кодом ), участвовал в разработке Google Instant (Живой поиск Google). Он также увлекается компьютерной историей - как художники изучают творчество мастеров, творивших до них, так и программисты должны знать свою историю.

Брэд Нойберг: Расскажите немного о себе: откуда Вы, чем интересуетесь, проекты над которыми Вы работали.

Марчин Вичери: Я вырос в Польше, по образованию — магистр в области компьютерных наук, докторская степень по вопросам взаимодействия человека и компьютера. Свой первый HTML-тег я создал в...в 1995? Наверное это был <p>, но я не уверен. Я горжусь проектом GUIdebook — это он-лайн галерея графических интерфейсов пользователя. К сожалению, у меня совершенно не хватает времени и проект не обновляется уже с 2006 года.

В компании Google, к которой я присоединился в 2005 году в качестве проектировщика пользовательских интерфейсов/специалиста по юзабилити, я помогал с разработкой различных внутренних инструментов и с многими вопросами, связанными с поисковыми инициативами, включая параметры поиска, поиск в реальном времени и последний проект — это Google Instant (Живой поиск Google).

Брэд Нойберг: Вы создали HTML5 Pac-Man Google Doodle. Что способствовало этому? Какие были технические моменты в процессе создания, которые смогли удивить Вас?

Марчин Вичери: У одного из иллюстраторов Google и моего хорошего друга Райана Джермика (Ryan Germick) была идея создать ко дню рождения Pac-Man подходящую для игры «болванку». И так как я в детстве был слегка «повернут» на аркадных играх, то он обратился ко мне. В ту же ночь я создал первый, очень сырой прототип игры.

Лого Google в виде Pac-Man

Самые большие сюрпризы ожидали меня тогда, когда я стал копаться в подробностях игры Pac-Man. На первый взгляд кажется, что это очень простая игра, но на самом деле там много нюансов, которые нужно учитывать. Я должен был воссоздать все это с нуля. Думаю, что продумывание всех этих деталей — это прекрасный, даже судьбоносный опыт. И очень вдохновляло то, что кто-то еще 30 лет назад подумал обо всем этом.

С технической стороны мне было невесело наблюдать, что HTML5 audio не вполне готов для использования в играх. На самом деле, в Doodle Pac-Man очень мало HTML5. Было неприятно из-за этой позорной ошибки кэширования в IE6, где никакие известные решения не работали. Пришлось предоставить отдельный путь выполнения кода, который не использует фоны CSS, а только регулярные изображения, обрезанные родительскими дивами.

Брэд Нойберг: Вы создали удивительный проект HTML5/CSS3 Slide Deck на API Rocks. Что побудило Вас к его созданию?

Марчин Вичери: коллега предложил мне поговорить с моей командой об HTML5. Я согласился, думая, что «я просто найду список всего, что есть HTML5 и проведу презентацию». Оказалось, что нет такого списка и поэтому я вынужден был копаться и создавать его с нуля. Это был, на самом деле, интересный процесс. Я бы назвал его «археологией будущего» — я смотрел на веб-технологии в промежутке с 2000 года по 2020 год и пытался понять, как они все совмещаются прямо сейчас, в 2010.

Можно сказать, что я делал свои слайды около десяти лет. До Keynote это был единственный способ наглядно представить то, что мне было нужно. Получается, что и в случае с HTML5-слайдами я чувствовал себя комфортно, пребывал в знакомой среде, но при этом использовал новые технологии.

Я вообще-то очень практичный, приземленный такой парень. Свой первый веб-сайт я создал в FrontPage, но с тех пор я кодировал все вручную. У меня также есть правило не повторять (в смысле не использовать простое копирование) постоянно то, что я уже когда-то делал. Одни и те же вещи я пишу снова и снова. И это позволяет мне все время учиться и адаптироваться к постоянно меняющимся технологиям.

первый сайт Мартина Вичери

Брэд Нойберг: Какой классный хак, прием или изящный «изворот» кода Вы обнаружили или придумали, работая с HTML, CSS, JavaScript и т.д. Чем Вы особенно гордитесь? Давайте нам технические детали :)

Марчин Вичери: Прозрачный цвет и тень с нулевым смещением для создания эффекта размытия.

h1 {
	font-size: 20px;
	text-shadow: 0 0 2px #000;
	color: transparent;
}

Разве это не удивительно? (Правда, где это применить — ума не приложу).

Я не уверен, что все мои приемы умны и полезны. Сейчас я сконцентрирован на теге <marquee>. Меня захватывает открывать новые способы применения вещей, к которым, казалось бы, все уже привыкли.

Брэд Нойберг: Какие вопросы или проблемы Вы собираетесь побороть сегодня (о чем Вы, конечно, можете рассказать)?

Марчин Вичери: Моим главным проектом в течении последних нескольких месяцев был Живой Поиск Google и мы только запустили его и поэтому я только сейчас оглядываюсь вокруг и узнаю о новых вещах, проектах. В ближайшее время я буду создавать что-то вроде «внутренней защиты» HTML5, заниматься семинарами и обучением — мы надеемся, что часть всего этого появится на HTML5rocks.com.

Брэд Нойберг: Какой Вы видите ситуацию с HTML5, CSS3, SVG и т.д. в следующем году? А что будет через 3 года?

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

Я хотел бы, чтобы больше внимания уделили нюансам типографики. Компьютеры многое подмяли под себя и уверен, кое-что еще вернется, но немногое. И, Господи, пожалуйста, layout! Мы все использовали «костыли» JavaScript для его реализации так долго, что это уже даже не смешно — действительно, в большинстве моих проектов, первое что добавляю — "onresize".

В JavaScript также есть ряд возможностей для создания довольно таки дрянных интерфейсов. alert() и его собратья являются часто единственным способом надежно привлечь внимание пользователя. Только это похоже на то, как-будто подушка кричит в мегафон. :hover позволяет использовать только самые элементарные и неумолимые движения мышью. Мы нуждаемся в лучших значениях по умолчанию для всего в таком роде.

Брэд Нойберг: Какие профессиональные советы (или ресурсы посоветуйте) Вы бы дали людям, которые хотят также как и Вы создавать новые ультрасовременные вещи?

Марчин Вичери: Одна из самых популярных в 1977 году приставок для видеигр была VCS Atari 2600. Она была невероятно проста сточки зрения аппаратной части. У нее не было даже видеопамяти — буквально необходимо было строить пиксели всего за несколько мгновений до того, как они будут переданы электронной пушке. Она была разработана для очень специфических тривиальных игр: два игрока, несколько пуль и очень редкий фон. Все игры были похожи одна на другую.

Но в течении пяти лет компании поняли как создавать такие игры, как Pitfall, которые были намного, намного круче и намного сложнее. И вот парадокс, если взять эти игры, вернуться во времени и показать их создателям VCS, я уверен они сказали бы тебе: «Ха, это невозможно сделать. Аппаратная часть, которую мы все вместе создали никогда не будет в состоянии справится с этим.» Если бы вы взяли Google Maps или веб-приложения для iPhone, взяли бы Ваш deLorean и отправились бы в 1991 год к Тиму Бернерс-Ли (Tim Berners-Lee), он сказал бы как все «убирайтесь отсюда».

Что, собственно, я пытаюсь объяснить: представьте, что нет ничего невозможного. Ведь это самый легкий и правильный путь. Меня часто спрашивали, является ли какая-то вещь выполнимой в HTML и мой первый порыв был сказать «нет». Но я оглядываюсь вокруг, поспрашиваю тут и там и уже вижу, что всегда есть какой-то путь.

Есть еще один момент и чтобы усвоить его, мне понадобилось время: в веб-разработке, когда что-то действительно чего-то стоит, то это обязательно хак. Речь не только прототипах, но и о промышленном коде. Это будет трудно переварить, если ты привык к правильному, чистому, стерильному программированию. Я бы даже пошел дальше и сказал, что если ты работаешь над чем-то и никогда тебе не приходила в голову мысль, что «то что я сделал здесь — это ужасно, но я очень надеюсь что однажды появится лучший способ это сделать», то ты уже отстал.

И, в конце концов, запас хаков «в рукаве» позволил бы тебе стать лучшим профессионалом. У меня есть старая и измученная уже метафора про веб-разработку — про «кнопкодавство», (button mashing — термин из мира геймеров, означает манеру хаотично и безостановочно давить на кнопки, чтобы добиться хоть какого-то результата; как правило, к такой манере игры склонны новички в "файтингах" в приступах отчаяния и потере контроля над ситуацией) когда играешь в видео игры. Все ненавидят «кнопкодавство», но работая с передовыми веб-технологиями ты часто действуешь именно по принципу хаотичного нажимания кнопок, просто потому, что много времени проводишь вслепую — ты пробуешь все виды действий, даже те которые, кажется, не логично использовать здесь. Но, при этом, они как-то работают. Если ты привыкнешь к такому подходу и будешь помнить о хаках, тренировать свои инстинкты, то ты всегда будешь знать, когда пора «давить на кнопки» и, самое главное, ты откроешь для себя больше «кнопок».

И наконец, если ты спрашиваешь «что если?..» и оставляешь вопрос без ответа, то тебе должно быть стыдно.

Материалы