Алексей Михайлович Бахирев - Сюрреализм на JavaScript

. . . . . . . . 140

Теги и костыли, о которых забывают
СЕО-теги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Теги в head . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Теги полей ввода, ссылки, таблицы . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Хаки для IE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Верстка писем . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
5

Содержание

XSS, CSRF и т. п.
XSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Обфускация . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
CSRF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
DDOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Сlickjacking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Клавиатурные шпионы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Какие уязвимости стоит искать . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180

Пре-продакшн
Логика локализации приложения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Плохая логика локализации . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Классическая сборка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Заморозка и инкрементальные обновления . . . . . . . . . . . . . . . . . . 190
Генерация ресурсов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Автотесты через API фреймворка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193

Offtop
Сертификация JavaScript-разработчиков . . . . . . . . . . . . . . . . . . . . . . 198
Собеседование JS-программистов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Задача на выделение N комментариев . . . . . . . . . . . . . . . . . . . . . . . . 201
Задача на быстрый поиск . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Использованные источники . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Рекомендуемые материалы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Заключение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

Приложение
Формулы расчета столкновений . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Вопросы на собеседовании . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Ответы на вопросы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Таблица кодов кнопок клавиатуры . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Таблицы соответствия размеров в EM и PX . . . . . . . . . . . . . . . . . . . 225
6

Введение

Введение
Эта книга рассчитана, в основном, на опытных
веб-разработчиков, которые делают сайты не один год.
В книге встречается множество отсылок к авторам различных
публикаций и экспертам фронтенд-разработки. Многие темы
описаны с расчетом на запас опыта и знаний у читателя.
Если вы читаете эту книгу в электронном виде на
мобильном устройстве с маленьким дисплеем, возможно, многие
иллюстрации и скриншоты будут в ненадлежащем качестве.
В таком случае вам следует приобрести печатный экземпляр
или найти электронную версию для просмотра на более широком
экране.
Если вы собрали эту книгу из исходного JSON-файла —
поздравляю! Если вы не знали, что книга есть в формате JSON
и захотели её собрать — ссылку на файл можно найти в конце.
В любом проекте есть баги, а в любой книге — опечатки
и ошибочные суждения. Помните об этом, т. к. и эта книга
не является исключением из правил.
P.S.: Дизайн действительно «подозрительно похож» на журнал
«Frontender Magazine» (http://frontender.info/).

9

Архитектура игровых движков

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

JS Flanker

Архитектура
игровых движков

Рис. 1. Скриншоты игры JS Flanker.

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

История
В 1999 году веб только набирал обороты. С одной стороны,
к этому времени уже окончилась «война браузеров» 1996–
1998 годов, с другой — вакансия JavaScript разработчика выглядела
довольно неперспективной. Но даже в то время было несколько
фанатов JS, которые пробовали писать на нем игры. Их звали
Masahiko Nitanda и Kazuhiro Moriyama. Эти два парня жили в Японии
и делали просто восхитительные вещи на JavaScript´е. Они не только
пытались копировать игры с Денди, но даже пытались --">