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

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

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

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

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

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

Web-gui для wget (light)

Данная статья является копией публикации на хабре

Ранее здесь находилось описание возможных ситуаций, когда данное решение могло бы вам понадобиться, но давайте его опустим. Возможность удобного создания удаленных закачек, которые выполняются привычным wget-ом (можно спокойно увидеть их список при помощи ps), с отображением прогресса — идея не новая. И даже есть некоторые решения, но не актуальные, так как более 5 лет никем не поддерживаются.

Для торрентов всё просто и тривиально — ставим Transmission или любой аналогичный клиент с веб-мордой. Но для ссылок на простые файлы/страницы нужно что то своё. Вот короткий список задач, которые меня подтолкнули к написанию оного:

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

Если вам стало интересно — добро пожаловать под кат:

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

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

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

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

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

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

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