Это лендос для компании, сайт которой, запилил тот-чьё-имя-нельзя-называть (я этому господину отдельную статью посвятил).

В чем проблема-то, бро?

К сожалению, клиент с эстетической точки зрения очень высоко оценил творение господина "дизайн-философа", которое устарело уже в момент своего рождения (это ж 2013, мать его год!), и требовал от дизайнера подстраивать макет под то самое чудо-юдо.

Кусочек чуда!

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

Однако, в продакшен вышел довольно-таки сносный дизайн (хвала Элуне!), компромисс между "клиент всегда прав" и "мы не будем лепить говно" всё же был найден.

Хотя конечно же имеются очень спорные моменты. К примеру, взгляните на шапку:

Видите кнопку "Скидка для вас"? На скриншоте она выглядит криво и размыто - это потому что она без конца вибрирует как на электрическом стуле.

На практике это смотрится как серьёзный баг в верстке. Хотя, наверное это единственное, что лично меня огорчает.

А вот вам окошко для сравнения двух дизайнов (попробуйте определить, где человек работал, а где справлял нужду):

Нет, дружище, это-то понятно, а ты-то там каким боком??

Действительно, что это я всё о дизайне, да о дизайне, будто сам дизайнер, виды повидавший. :D Давайте посмотрим, что конкретно на этом проекте сделал я.

Уже по лендосно-эмэсцешной традиции, моя роль состояла в самой обычной рутине - оптимизационные скрипты для gulp (когда-нибудь, я все-таки научу наших верстальщиков галп любить), правка верстки (да-да, почему-то наши верстальщики никак не приучатся расставлять теги <form> самостоятельно, что начинает подзливать меня) и mail скрипт (с ним кстати возникла небольшая проблема, т.к. я сейчас использую composer для установки пакетов, таких как PHPMailer, а на серваке PHP 5.2, который с композитором не дружит).

Но этим все не закончилось

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

Вот как преобразилось отображение сайта в мобильниках:

Помимо этого припилил плавающее меню, и исправил корявые якоря.

Помимо этой, довольно скучной, работы, было и кое-что поинтереснее:

Во-первых, я немного адаптировал скрипт для отслеживания ситуации, когда юзер тянется-потянется к кнопочке закрытия вкладки. В этом случае на лендосе выпрыгивает модалка:

Во-вторых сделал хитрожопый скрипт хитрожопого калькулятора:) Почему хитрожопого? Взгляните на ТЗ:

Интересная система наценок, неправда-ли? Тут вам и инкрементальные наценки (рупь за штуку) и условно инкрементальные (первые 4 бесплатно, остальные за денюгу). Очевидно, что реализация этого не тянет на статус какого-то мощного-ппц-зубодробительного скрипта, однако как у нас это часто бывает, есть больше одного способа это сделать.

Первый способ - это традиционное "через-жопу"

Конечно, недальновидный джун, подскажет, что это легко сделать, тупо захардкодив вычисление стоимости всех параметров в одной функции. Самые суровые "js погромисты" захардкодили бы еще и получение данных из формы (ну подумаешь верстка поменялась, who cares?). Собственно такую реализацию доверчивые клиенты получают, связываясь со всякими доширансерами.

PS: Я искренне надеюсь, что среди читателей не найдется людей регулярно практикующих такой метод.

Второй способ - как нас учили отцы

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

Но, что-то я отошел от темы. Итак, результатом двухчасовой атаки на javascript (и на кофе) стал небольшой модуль TiskomCalculator. Весь код я покрыл модульными тестами с помощью Mocha (не моча, а мокка - разновидность кофе такая) в связке с библиотечкой Chai. Благодаря тестам, на месте отловил и исправил парочку багов и все это отправилось в продакшн на сервер клиента. (да, я не практикую TDD, пока что)

Помимо "наркулятора" на проекте, к сожалению, больше ничего особо интересного и не было.

В итоге такая вот тема у нас получилась: