Лендос для Тиском

Или есть ли жизнь после art73?

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

 

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


 

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

 

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

 

 

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

 

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

 

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

 

 

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

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

 

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

 

 

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


 

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

 

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

 

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

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

 

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

 

 

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

 

Пример корявого якоря (пример акции)

 

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

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

 

Ну не уходите, ну позязя, мы вам даже скидочку сделаем... :'(

 

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

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

 

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

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

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

 

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

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

 

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

 

mocha+chai в действии

 

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

 

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