Веб-разработка

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

Работаю админом в одном маленьком офисе с большими амбициями. Как полагается для такой конторы, тут у нас холдинг и куча ООО-ЗАО-ИП (10 организаций, если быть точным) и практически для каждой есть свой сайт, а для некоторых даже не один. Когда я пришёл к ним, большая часть сайтов была уже сделана и благополучно забыта, но парочку всё-таки пришлось рисовать мне. За «спасибо» и символическую премию. Я не против, это для меня было что-то новое и интересное. Собрали один такой сайт-информационку на джумле из пиратских модулей (с порно-ссылками, которые потом долго выслеживали и вычищали), нарисовали всё красиво (то есть руководитель сказал «ок»), а всё, что было некрасиво — скрыли.

В один прекрасный день ко мне подошла наша сотрудница, которая помимо торговли с Китаем добровольно-принудительно работала контентщицей на этом сайте, и ткнула меня носом в одну статью, где куча ботов наспамила комментов. Особо не разбираясь, поле комментов и их ввода мы просто скрыли через visibility: hidden (так как они там вообще не нужны), и всё снова стало красиво.

Прошло полгода. Месяц назад от хостера мне посыпались письма с угрозами: «Место на хостинге кончается, купите больше хостинга или мы вас закроем». Добавил сотню метров. Через пару недель опять то же самое. Добавил ещё сотню. На третьей сотне мне уже стало любопытно — что же так раздувает наш хостинг? Не новый ли сайт на OC Store с интеграцией в 1С и ежедневной выгрузкой номенклатуры? Полез через PhpMyAdmin смотреть размеры таблиц. И тут-то я и увидел то, что на весь остаток дня заставило меня улыбаться. Так как спираченный шаблон на джумлу победить до конца не удалось, недостающий функционал заменили на К2 и локализовали вручную (сам переводил, да). И таблица %prefix%_k2_comments была раздута до 1,5 Гб с содержимым в > 2 млн. строк. Судя по содержимому, боты, однажды зацепившись за пару статей, продолжали спамить туда свои китайские ссылки на протяжении всех этих долгих месяцев.

DELETE FROM %prefix%_k2_comments WHERE id > 1

И сразу размер базы уменьшился до 6 Мб. И стыдно, и смешно.

Мораль сей басни такова: если накрыть кучку тряпочкой — это вовсе не значит, что она не будет вонять.

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

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

Добрый день!

Прошу вас остановить работу по сайту. После вчерашней шутки в общем доступе на сайте (подпись и печать «Рога и копыта») я хочу прекратить наши деловые отношения.

Естественно, мы принесли заказчику извинения:

Здравствуйте, ООО ***.

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

Мораль сей басни очевидна: нужно быть внимательнее при выборе демо-материалов, чтобы не травмировать чувствительную психику клиента. Ибо для нас, разработчиков, это просто сайт с демо-контентом, а для владелеца — дело всей жизни, и он вполне может принять за личное оскорбление безобидные картинки.

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

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

Сначала они хотели «3D глобус, чтобы вращался мышкой, а на нём выбираешь на страну — и тебя перекидывает на страницу с информацией о ней и фоточками». Узнав цену на это дело, заказчик передумал. Захотел всего лишь сине-желтую гамму (чистые цвета, как попугай ара). Потом добавили кучу виджетов авиалиний, поездов, погоды и прочего. Потом — фоновую песню «Nosa, nosa». Я не признаюсь, что это моих рук дело, даже под пытками.

Затем был один из городских ресторанов. Но они отказались фотографировать блюда отдельно — настаивали исключительно на шакальном скане меню. И чтобы на каждой странице шторочки раздвигались. Ладно хоть без музыки.

Была местная консалтинговая контора. Их устраивал онли дизайн «web 1.0», если вы понимаете, о чём я.

Сайт риэлтора хотел, чтобы всё на странице сверкало, блестело, свистело и далее по списку. Знаете, как в старых играх — персонаж не может стоять спокойно в ожидании. Он словно под веществами.

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

Мне пришлось и с дизайнерами поработать. Знаете, у нас в городе нет дизайнеров, которые работают с вебом. Я предупреждаю об этом. Но «да не, он крутой, он нам офигенные буклеты сбацал». Ладно, кто платит — тот танцует.

Один сделал сайт, похожий на рекламный буклет или меню суши-бара. Знаете, светлый фон из паттернов с мелкими суши-ролло-палочко-мисочко-бутылками, кремовые цвета, красные акценты… Всю информацию попытались вместить в экран 1024x768. Получилась теснота, хаос и неразбериха. Как ни странно, именно его я теперь могу показать, не стыдясь — до владельца дошли мои увещевания и демонстрация стильных, аккуратных сайтов в этом бизнесе. Мы сделали адаптивный дизайн, крупные карточки товаров, хорошие фото и прочее. Вышло неплохо.

Теперь есть сайт магазина аксессуаров. Его я сдал ещё месяц назад. Но они взяли дизайнера. Был довольно лаконичный дизайн в стиле современных мобильных приложений типа viber или хотя бы gmail. Строгий фон, цветовые акценты в нужных местах, ничто не отвлекает от главного — красивых фото товаров. Сказали мне, что «да-да, мы ж всё согласовали, ничего не поменяется радикально, просто цвета-шрифты-логотип да пара свежих баннеров». Ок, это вполне входит в стоимость, мне ничего не надо сверху.

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

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

Знаете что? Я хочу чинить чайники в отделе гарантийного ремонта в каком-нибудь «Дорадо» или «Видео».

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

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

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

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

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

Упс. Заказчик не счастлив. Не верьте и не сдавайтесь! Нарисуйте ещё один скин своего любимого шаблона, но не читайте техническое задание.

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

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

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

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

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

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

Если заказчик грозится расторгнуть договор и просит предоставить документацию, отвечайте как можно лаконичнее: «сделано», «сделано частично», «не сделано». Пусть вас не смущает, что сделанным вы объявили то, что является связующим звеном между двумя не сделанными частями. Только не читайте техническое задание.

Когда время очередных доделок истекло, устройте торжественный показ. Максимум уверенности: «Тут играем, тут не играем, здесь жирное пятно — рыбу заворачивали».

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

Попросите вас отпустить.

Я веб-разработчик. Прислали ТЗ:

В каталог товаров добавить боковой фильтр по следующим критериям:

• По цене (от и до)

• По цвету

• По полу (мужчины, женщины, дети)

Настроение — на целый день.

— С чем у вас ассоциируется этот значок? — спросил журналист и показал синюю букву e с кружком.

— С геморроем, матом, мамонтами, желанием убивать и бессонными ночами, — ответил я.

— Но… почему?

— Я занимаюсь веб-разработкой.

Оказалось, что у большинства среднестатистического населения злосчастная буква ассоциируется с запрещёнными у нас и маскирующимися под интернет-клубы подпольными казино. Зло многогранно, но символ его — один.

Коллеги! Выбирайте технологии. Выбирайте так, чтобы потом не жаловаться, что приходится поддерживать за кем-то код «не очень красивого цвета», который ещё и пахнет соответственно.

Поделюсь немного своим опытом. Я веб-разработчик, программист, в основном бэкэнд.

До относительно недавних пор я работал преимущественно с широко известной в России CMS, отличающейся агрессивным маркетингом (вплоть до упоминания жёлтой программы в своём названии), низким порогом вхождения и широкими возможностями нарушения архитектуры. Точно так же, как и многие любители чистого и красивого кода, плакал кровью, глядя на некоторые конструкции, особенно написанные «золотыми сертифицированными партнёрами», осилившими эпический труд «PHP за 24 часа для чайников». Компонент (почти аналог контроллера в традиционных системах), который не содержит логики, а только подключает тот или иной шаблон в зависимости от входного параметра — нормально! А вся логика в шаблоне. Вплоть до обращения к БД. Да, прямыми SQL-запросами, несмотря на то, что система имеет хоть и своеобразный, но всё же ORM. А что? В учебниках для начинающих же действительно есть такие примеры, и возможность обратиться в БД прямо из HTML-файла преподносится как преимущество и неоспоримое достоинство PHP. Но ладно. Сами авторы системы тоже не ангелы. Кто-то про классы жаловался? Так вот, классы — это, по мнению авторов замечательной (без иронии) CMS, всего лишь способ логически объединить несколько функций. Большинство методов класса статические. Но в некоторых случаях нужно создавать объект класса, который будет использован только для вызова одного метода, и нигде и никогда больше. Такое своеобразное видение ООП.

Беда? Однозначно беда. Копаться в таком быдлокоде — приятного мало. Надо было что-то делать. Я изучил альтернативы и остановился на приятном фреймворке Django, с помощью которого теперь и разрабатываю сайты. Возможно, вы не поверите, но проблема чужого кода исчезла. Во-первых, оформление кода. Оно всегда и у всех одинаковое. Синтаксис языка Python предъявляет жёсткие требования. Питоновская идеология также гласит, что для решения задачи должен быть один очевидный способ. В Django эта идея поддерживается. И это помогает, экономит время и нервы. Кто бы ни писал до меня, я заранее знаю, где искать нужный код, даже если проект впервые вижу.

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

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

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

Когда-то давно был популярен такой анекдот: «В то время как обычный пользователь полагает, будто в килобайте тысяча байт, программист точно знает, что в километре 1024 метра».

Вспомнил я его, наблюдая за действиями одного из наших программистов. Ему потребовалось узнать количество символов в фразе при заполнении документа. Многие знают, что в Ворде узнать количество символов достаточно просто. Но Ворд не является основным рабочим инструментом веб-программиста, и проще ему оказалось открыть веб-инспектор в Хроме и вписать нечто вроде 'интересующая фраза'.length.

Яваскрипт, конечно же, всё посчитал. Я добавил этот способ в копилку.