- PVSM.RU - https://www.pvsm.ru -
Год назад знакомые попросили сделать меня сайт с динамическим контентом. Тогда о Web я знал чуть больше чем ничего, но попробовать было интересно.
Под катом впечатления заядлого С++ программиста от мира Web, собственные велосипеды, необычные решения, возмущения по поводу и без. Все эмоции вынесены в спойлеры, дабы не нагружать статью.
Надеюсь будет интересно Web разработчикам посмотреть на потуги С++ника, ну а С++ разработчикам узнать для себя что-то новое.
Находясь в твердой уверенности что не стоит забивать гвозди С++ом, основным языком разработки был выбран PHP. Остальные языки проиграли сравнения по поддерживаемости, количеству статей и мануалов, популярности.
Операционной системой для разработки была выбрана Ubuntu 14.04, базой данных PostgreSQL.
Веб сервером был выбран nginx. Возможности Apache были бы избыточны для достаточно простого проекта.
Поставив PHP-fpm и написав «Hello world!» я уж было обрадовался что всё хорошо движется, но тут на глаза попалась статья про тест на проникновение [1]. Из статьи стало понятно, что конфигурация PHP по умолчанию опасна! После чего на настройку PHP ушел день… а через месяц ещё два дня. Твёрдой уверенности в том, что все хорошо, нет до сих пор!
Очень печалит огромное количество возможностей прострелить себе ногу в плане безопасности. А ведь PHP — это язык который изначально разрабатывался для работы с Web.
После сомнительной борьбы с конфигурацией решено было отдохнуть и прикинуть как должна выглядеть страница. Осведомлённый о Bootstrap, я нашел пару шаблонов страниц на нём с не поломанным адаптивным дизайном, выбрал по симпатичнее и начал подгонять под проект.
Руки, загрубевшие от брутального С++, напрочь не подходили для работы с прекрасным. Выдавить из себя что-либо путное получалось с огромным трудом, на минимальное исправление дизайна уходили часы кропотливой работы.
В итоге выработался следующий механизм работы с дизайном:
Bootstrap для CSS — это как Boost для C++. Сложно представить сколько усилий уходит если его не использовать. Моего ничтожного на тот момент знания CSS было более чем достаточно, чтобы начать им пользоваться, подгонять под себя и даже сделать красивую менюшку вверху страницы.
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
.navbar .dropdown-menu {
margin-top: 0px;
}
Так же легко оказалось сделать шрифт побольше:
/* Making menue font bigger*/
.nav > li > a {
font-size: 1.1em;
}
Так что я очень доволен Bootstrap!
jQuery — это то, как на самом деле должен выглядеть javascript. Короткие имена функций, анимация, легкий доступ к элементам и итерация по ним, абстрагирование над браузер-специфичными вещами. Основы понимаются за 15 мин чтения документации.
Пришлось сделать вспомогательный файл с javascript и вынести в него свои расширения.
В процессе разработки начали проявляться разнообразные проблемы и недостатки выбранных инструментов и технологий, столкнулся с отсутствием адекватных реализаций базовых вещей.
Самой большая проблемой оказалась авторизация пользователей. Решено было использовать сторонние сервисы для авторизации, как то Вконтакте, Твиттер, Фейсбук, Yandex, MailRu, Одноклассники.
Внезапно оказалось, что все известные сервисы видят OAuth по своему. Различия не то чтобы совсем значительные, но из-за мелких деталей разработка превратилась в настоящий АД!
При этом у всех сервисов сообщения об ошибках абсолютно не информативные, а отладка PHP кода — отдельное удовольствие, о котором ниже. В добавок ответы от всех сервисов приходят в своём формате, никак не похожем на форматы других сервисов.
С PHP всё достаточно неплохо — язык как язык. Правда после C++ было непривычно работать с интерпретируемым языком: ошибки что в С++ находятся на этапе компиляции в PHP находятся только на рантайме. Осознал что С++ — развращает, позволяя меньше времени уделять проверке на опечатки.
В PHP напрягает отсутствие бесплатного отладчика, отсутствие бесплатной среды разработки.
Для слайдшоу из картинок использовался плагин Backstretch. А вот сделать текстовое слайдшоу пришлось самому по тому что хотелось чтобы хорошо смотрелось на малых экранах. Если делать через картинки пришлось бы делать картинки под различные разрешения экранов, а это долго.
Поэтому решено было возложить красивое расположение текста на Booststrap, и просто скрывать куски текста и показывать по таймеру.
Черновая версия одной из страниц весила несколько мегабайт. Грузилось до одурения долго. На помощь пришёл Pagespeed [2] со своими советами.
Но самую большую помощь оказал сайт TinyPNG [3], который используя чёрную магию и квантование ужимает картинки в несколько раз без потери качества.
Я абсолютно серьезен. Internet Explorer — великолепен! Конечно не как браузер для пользователя, а как средство отладки сайта. Конечно не как дебаггер и не инспектор стилей.
Internet Explorer — отображает сайт практически без всяких CSS расширений, он очень требователен к разметке и невероятно долго грузит страницы. Это всё плюсы! На нём можно удостовериться что сайт быстро отображается, что в javascript случайно не закрались незакрытые теги. В конце концов можно увидеть как сайт выглядит в худшем случае, и что контент всё еще читаемый.
Непередаваемые ощущения от прикосновения к новому для меня миру. Ощущения в основном положительные, а результат работы [6] на мой непритязательный вкус выглядит достойно.
Автор: antoshkka
Источник [7]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/84955
Ссылки в тексте:
[1] про тест на проникновение: http://habrahabr.ru/post/213719/
[2] Pagespeed: https://developers.google.com/speed/pagespeed/insights/
[3] TinyPNG: https://tinypng.com/
[4] размере: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fhabrahabr.ru%2F
[5] Google: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fgoogle.com%2F
[6] результат работы: http://top-me.org
[7] Источник: http://habrahabr.ru/post/250825/
Нажмите здесь для печати.