Сравнение паролей — parsley validator

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

Некоторое время назад столкнулся с казалось бы тривиальной задачей — сравнить пароли при регистрации пользователя и в случае ошибки выдать пользователю соответствующее сообщение. Так уж получилось что раньше для этого дела я использовал самописный jQuery, но в данном проекте во что бы то ни стало нужно было задействовать Parsley validator. В документации было четко обозначено что для сравнения полей можно использовать

где anotherfield — это id первого запроса ввода пароля. Нет ничего проще подумал я и сделал согласно документаци.

Однако все работало корректно кроме сравнения паролей. Стало быть parsley отрабатывал, значит проблема была или в синтаксисе при сравнении паролей либо из-за каких-то внешних воздействий (конфликта с другими скриптами).

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

Утром со свежей головой отправился снова в гугл. Наткнулся на ветку в оверфлоу, где пользователь описывает идентичную моей проблему. Никакого решения там не предлагалось. У того разработчика кроме парсли валидатора был еще один скрипт на странице, который использовал старую библиотеку jQuery, еще версии 2.0. У меня было нечто похожее. Другой скрипт, но тоже со старой библиотекой. Все что нужно было сделать это заменить версию jQuery с 2 на 3. Думаю кому-то может пригодиться. Удачи.

lazyload.js — подгрузка изображений при скроллинге страницы

Сегодня хочу поговорить о такой простой в интеграции и полезной библиотеке как lazyload.js. Видимо само название заставляет многих разработчиком лениться и не оснащать проекты своих клиентов таким удобством как постепенная подгрузка контента при скролинге. Также удобно при создании внушительных фотогалерей. Самый яркий пример использования такого метода подачи контента — это любая социальная сеть. Вообще соц. сети довольно серьезно подходят к вопросу оптимизации контента, я лишь покажу как просто сегодня можно сделать постподгрузку контента на страницу.

При использовании этого метода вы убиваете сразу двух зайцев.

    Заяц 1 : Подгрузка контента происходит не сразу, а постепенно, а это уважительное отношение к трафику пользователя. Осебенно если речь идет действительно о крупных проектах, в которых счет единиц подгружаемого контента идет на тысячи, десятки тысяч или миллионы.
    Заяц 2. Можно забыть про дурацкую пагинацию внизу страницы. Изучение контента на странице сводится только лишь к прокручиванию колесика на мышки или стрелки на клавиатуре.



Интеграция

Если у вас еще не установлен jQuery качаем: https://code.jquery.com/jquery-3.2.1.min.js
Для начала скачиваем плагин: https://plugins.jquery.com/lazyload/

Добавляем библиотеку jquery и файл с библиотекой lazyload

Вставляем изображения. Обратите внимание, что вместо тега атрибута src используется data-original. Схема работы такая: сначала подгружаются пустые изображения, а по мере скроллинга теги заполняются изображениями из атрибута data-original. Не забудьте указать класс lazy для каждого изображения.

Ну и разумеется связываем класс lazy с jquery.

Можно установить параметр threshold в значение 200 и тогда контент подгрузится только после смещения вниз на 200 пикселей.

Можно использовать события jQuery такие как click или mouseover для подгрузки контента.

По умолчанию плагин ждет полной загрузки изображения и вызывает функцию show(). Можно использовать любой эффект, например fadeIn.

Описанный плагин — это первая версия. Есть еще вторая, но она мало чем отличается от первой, но она иногда допиливается автором. Если в ней появится что-то интересно, я обязательно расскажу о ней.

Кстати, для wordpress есть плагин https://ru.wordpress.org/plugins/lazy-load/, так что кому лень ковыряться в коде можете попробовать его, я сам не пробовал заненадобностью, но читал на форумах что он рабочий.

Выбор исполнителя: фрилансер или веб-студия

Фрилансер или студияМысль, которая посещает каждого перед выбором исполнителя: фрилансер или веб-студия. Сегодня поделюсь с читателями своим видением вопроса: кого выбрать в качестве исполнителя для разработки, поддержки или продвижения сайта? Себя отношу скорее к фрилансерам, хотя и имею виртуальную веб-студию с небольшим штатом сотрудников, работающих удаленно. В данной статье веб-студия будет соответствовать следующим требованиям: наличие реального офиса или нескольких, штат сотрудников от 10 человек, широкий спектр услуг. Забегая вперед, могу ответить на вопрос от себя: я исключительно за фриланс, но при жестких критериях отбора исполнителя. А теперь о том почему я так считаю…



Очевидные минусы веб-студий

  1. Стоимость работ. Если вы не хотите переплачивать, то выбор студии точно не для вас. Веб-студия имеет серьезные расходы (выплата зарплат, содержание офиса, оснащение рабочих мест сотрудников, медицинское страхование и другие расходы), поэтому они возьмутся за любой проект, даже если не смогут его сделать качественно. Переплата по сравнению с фрилансером будет существенная, а результат может быть значительно хуже. Лично я сталкивался с такими работами студий, что становилось страшно как за такие деньги можно было предоставить такой результат. Сайт стоимостью 450 тысяч рублей выглядел в лучшем случае на 25, а про программную часть говорить вообще не хочется.

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

  3. Бестолковые личные менеджеры. Если вам выделили личного менеджера, который будет вести ваш проект, это не означает что он будет из штанов выпрыгивать и ежечасно интересоваться как там трудятся над вашим проектом дизайнеры и программисты, а в случае чего сразу же с вами связываться. Не дождетесь! Его задача — быть посредником между вами и исполнителями, отсюда на лицо испорченный телефон. Вам придется постараться объяснить менеджеру что и как нужно исправить и надеяться, что информация дойдет до реального исполнителя в понятном для него виде.

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

  5. Общение и контакт. Как правило, крупные студии работают в пятидневку, например с 9 до 18 часов, а их сотрудники не выезжают к клиенту на встречи. Заказчик должен сам в ограниченное и, возможно, неудобное для себя время приезжать в офис компании.
Фрилансер или студия


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

Исходя из написанного выше, выбор в пользу фрилансера очевиден. Но фрилансеры бывают разные. Есть мошенники, которые занимаются разводом на предоплату и исчезают. А есть просто «исполнители», которые работают спустя рукава. И здесь важно не ошибиться при выборе. Какой-то конкретной схемы по отбору фрилансера не существует. Кому-то понравились показанные работы и он уже готов делать предоплату, кому-то понравился стиль общения по скайпу, телефону или через другие средства связи. Все это может быть подставой. Поэтому всегда проверяйте того, с кем собираетесь иметь дело, особенно если фрилансер работает по предоплате. Я бы предложил воспользоваться таким набором проверки на мошенничество и адекватность в целом:

  • Выясните реальные ФИО фрилансера, желательно документальное подтверждение. Честный фрилансер не будет скрывать реальные данные.

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

  • Изучите страницы социальных сетей, персональный сайт, блог фрилансера. Отличить основную страницу от фейковой очень просто. Если вам дали ссылку на фейковую страницу, не связывайтесь с таким исполнителем. Напишите фрилансеру через социальную сеть, тем самым вы проверите действительно ли это тот человек или он выдает себя за реального фрилансера. Если вам дали персональный сайт с портфолио проверьте по WHOIS, на кого зарегистрирован сайт и совпадает ли информация с полученной ранее.

  • Проверьте готовность встретиться лично, если вы живете в одном городе (мошенник будет всячески избегать личного контакта).

  • Если вам известен ник, email, фио, телефон, электронный кошелек, страница социальной сети или другая информация, погуглите ее, написав в поисковой строке гугла известную информацию в кавычках. Возможно узнаете много интересного.

Можно привести и ряд доводов в пользу веб-студий, но все они не будут иметь значение, если для вас имеет первостепенное значение цена вопроса. Надеюсь, информация оказалась полезной для вас. Если у вас есть свое мнение по вопросу выбора фрилансера или веб-студии, буду рад почитать об этом в комментариях. Удачи в выборе исполнителя!

Разработка сайта: 8 шагов до готового продукта

Разработка сайта: 8 шаговСегодня опишу процесс разработки сайта. Использую его для создания практически любого сайта. Всего 8 шагов до готового продукта. Вот они:

  1. Сбор информации для написания технического задания;
  2. Расчет стоимости и сроков, написание и утверждение технического задания;
  3. Заключение договора, предоплата 50%;
  4. Отрисовка дизайн-макета;
  5. Верстка дизайн-макета;
  6. Установка CMS и подключение сверстанного дизайн макета;
  7. Наполнение сайта контентом;
  8. Тестирование и запуск на нужном домене.

Теперь обо всем подробнее

1. Сбор информации для написания технического задания

Для того чтобы написать техническое задание необходимо получить от заказчика информацию о том какой сайт ему нужен. Какой дизайн он бы хотел видеть, пожелания к цветовой гамме, каким функционалом должен обладать сайт и что необходимо предусмотреть в CMS. Обязательно составить карту сайта, она же будет добавлена к техническому заданию. Я использую для этого специальный опросный лист. В нем всего несколько вопросов:

  • Логотип, слоган, цветовые предпочтения, наличие кнопок социальных сетей.
  • Сфера деятельности компании, миссия, тип рынка. Опишите максимально подробно чем занимается компания. Если есть готовый контент для сайта, присылайте его.
  • Опишите какие блоки вы хотите видеть на главной странице (новости, анонсы, слайдер, отзывы, акции и т.д.)
  • Напишите структуру страниц для сайта (карта сайта).
  • Опишите каким функционалом должен обладать сайт (мультиязычность, поиск по сайту, фотогалереи, rss лента, калькуляторы и т.д.)
  • Ссылки на понравившиеся сайты. Напишите что именно понравилось.
  • Ссылки на сайты конкурентов.



2. Расчет стоимости и сроков, написание и утверждение технического задания

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

3. Заключение договора, предоплата 50%

Обычно к заключению договора я прибегаю при заказе сложных, дорогих сайтов (от 50 000 р.). Если требуется разработать простейший сайт визитку, просто не хочется тратить время на бюрократические процедуры, составлять договор, выписывать счета, акты, ездить обмениваться документами и т.д. Кроме того, при заключении договора оплата будет производиться по безналу, поэтому стоимость работ увеличится на 10%.

4. Отрисовка дизайн-макета или эскиза

Переходим к дизайну. Я или мой дизайнер отрисовываем дизайн-макет. Заказчик вносит необходимые корректировки пока его не устроит внешний вид сайта. Если все устраивает макет подготавливается к верстке. С этого момента вносить изменения в дизайн будет нельзя.

5. Верстка дизайн-макета

Верстка сайта — пожалуй самый быстрый из всех шагов, не считая тестирования. Верстка занимает от 1 до 5 дней, в зависимости от сложности дизайн-макета. Сверстанный сайт выкладывается на тестовую площадку и показывается заказчику.

6. Установка CMS и подключение сверстанного дизайн макета

Если замечаний по верстке нет, я перехожу к установке CMS и программированию отдельных модулей (если они не предусмотрены CMS). Настройка всех модулей, карты сайта, создание структуры сайта согласно ТЗ.

7. Наполнение сайта контентом

Наполнение сайта предоставленным контентом (до 20 000 знаков бесплатно).

8. Тестирование и запуск на домене заказчика

Сайт тестируется на тестовой площадке. Если все работает должным образом, сайт переносится на домен заказчика.

Вот такая простая схема разработки сайта.