Индикатор загрузки страницы (css + pure js)

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

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

Итак, каким же требованиям должен отвечать наш индикатор загрузки?

  • Отсутствие растровых изображений;
  • Старые браузеры — в топку, мы будем использовать современные CSS3 методы;
  • JavaScript поддерживается и включен по умолчанию более чем на 90% браузеров — не стесняемся его использовать;
  • Минимализм по возможности во всем — это же индикатор загрузки, и именно он должен загрузиться и отрисоваться у клиента быстрее всего;
  • И не забываем про адаптивность под мобильные гаджеты.

Подробнее под катом

Настройка страниц ошибок для nginx

При работе с web-ресурсом возникают ошибки, и причина их может быть совершенно различна — от опечатки в URL, до ошибок самого сервера. И если у нас внешним сервером является nginx — мы можем довольно удобно указать свое содержание, которое будет выводиться при той или иной ситуации. Во-первых это позволяет в какой-то мере замаскировать используемое ПО (т.к. определение по сигнатурам ответа становится невозможным); во-вторых — это визуальная кастомизация, которая положительно говорит о ресурсе в целом.

Указание своих страниц ошибок

Для того, чтоб nginx вместо встроенных шаблонов отдавал нужный нам контент — существует следующая конструкция (документация):

error_page 401 /401.html;
error_page 404 /404.html;

Которая нам говорит:

В случае возникновения ошибки с кодом 401 вывести страницу 401.html, которая находится в корне веб-ресурса, и т.д.

Под катом решение для множества хостов и пример страницы..

Форма обратной связи — Ajax + PHP

Отправка писем и оповещений с сайта — чуть ли не самая распространенная фишка, ведь это и формы обратной связи клиентами, и фидбэки для получения отзывов и заказов, и функционал волшебной кнопки “Связаться с нами”, “Форма заказа для сайта”. Уверен, что отдача от возможности отправить письмо или сообщение прямо с сайта (“здесь и сейчас”) на 90% эффективнее простого e-mail адреса в контактах, ведь для этого не надо совершать никаких дополнительных действий.

Более того, если эта самая форма обратной связи (далее по тексту — “форма”) будет работать асинхронно (не перезагружать страницу) и сама по себе интуитивно понятна — это отдельный плюс в карму разработчикам.

Итак, перед нами сейчас стоит задача:

Разработать форму обратной связи, работающей независимо от того, включен (поддерживается) ли JavaScript браузером клиента; при включенном JavaScript — работает асинхронно; интуитивно понятно выводящую сообщения об ошибках или статусах отправки; работающую со структурированными (json) данными; безопасную и максимально настраиваемую.

Подробнее под катом

Страница «Обновите ваш браузер»

Сколько раз я ловил себя на мысли, что надо, надо написать такую страницу-заготовку для использования в своих проектах. Страницу, которая будет говорить “У вас устаревший браузер” и предоставлять на выбор крайние версии наиболее популярных. И ощутив некоторую жажду в верстке взялся таки, и сделал.

Требования, которые выставлял к работе:

  • Минималистичность в коде и графике
  • Приятный взгляду итоговый дизайн
  • Отказ от использования скриптов (используется лишь один — в случае, если браузер IE 8 или старее)
  • Адаптиность под различные устройства
  • Кроссбраузернасть и корректное отображение на старых версиях различных браузеров
  • Минимальный итоговый размер (html + css + img)
  • Легкость интеграции в любые проекты
  • Легкость перевода на любой язык

Все цели, как мне кажется, были успешно достигнуты. Итоговый размер страницы (со всеми потрохами) составил 86Kb (передается браузеру 33,5Kb). Скачать крайнюю версию или посмотреть демо можно по ссылкам ниже:

ДемоСкачатьGitHub