Онлайн-генератор иконок

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

Подавление уведомлений Softaculous после установки ПУ Vesta

После установки Vesta по дефолту в панели активен сервис Softaculous (вкладка Apps). Зачем нужен этот магазин приложений вменяемому админу, не совсем понятно. Кроме того, сервис каждые сутки проверяет актуальность дистрибутивов и присылает длиннющий отчет на имейл. Избавиться от этого можно довольно радикальными способами вплоть до тотального удаления всех рабочих директорий softaculous.

Продолжение…

Опыт перехода на бюджетный VPS хостера Beget

Мы давно сотрудничаем с компанией Beget, которая изначально специализировалась на shared-хостинге, но уверенно расширяет спектр услуг. Так, некоторое время тому назад, Beget стал сертифицированным регистратором доменов, причем предложил весьма демократичные цены, так что вариантов они нам не оставили — перевели домены к ним, о чем ни разу не пожалели. И вот дело дошло до тестирования еще одной новинки — создания бюджетного виртуального выделенного сервера. Впрочем, бюджетный интересовал именно нас самих, для размещения пэт-проектов. Но вообще, хостер предлагает полноценную линейку различных вариантов конфигурации на любой кошелек, вплоть до 16Гб ОЗУ и 8-ядерного процессора для очень серьезной нагрузки. Мы же выбрали тариф Simple и приступили к его созданию.

beget vps

Продолжение статьи…

Редирект с https на http

Форсирование http — довольно экзотическая задача во времена тотального перехода на https. Но, если это понадобилось вдруг, например, из-за каких-то проблем с сертификатом и необходимо сменить основное зеркало, то вот рабочее правило для .htaccess:

RewriteCond %{HTTP:X-Forwarded-Proto} =https
RewriteRule ^(.*)$ http://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

А вот канонический вариант, который не срабатывает в данном случае:

RewriteCond %{SERVER_PORT} ^443$ [OR]
RewriteCond %{HTTPS} =on
RewriteRule ^.*$ http://%{SERVER_NAME}%{REQUEST_URI} [R=301,L]

Центрирование блока с абсолютным позиционированием

В карусели owl требуется выводить отцентрированную навигацию по кадрам (dots), размещенную поверх них. Сделать это можно с помощью следующего кода:

.owl-dots {
  position: absolute;
  bottom: 0.1rem;
  left: 50%;
  transform: translate(-50%, -30%);
}

Идея позаимствована из статьи Absolute Centering in CSS

Небольшая подборка статей с полезными рекомендациями по контенту товарных карточек интернет-магазина

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

Автоматические отступы у картинок с обтеканием

При работе с TinyMCE пользователь может задать у картинок опцию обтекания штатными средствами, при этом не понимая как добиться, чтобы текст не сливался с изображением. Между тем, реализовать этот эффект можно с помощью следующего CSS-кода:

img[style*="right"] {
  margin-left:  20px;
}
img[style*="left"] {
  margin-right:  20px;
}

Допиливаем возможность вставки адаптивного видео в tinymce

  1. Ищем в файле tinymce/plugins/media/plugin.min.js фрагмент:
    <iframe src="'+h.source1+'"

    и оборачиваем видеофрейм:

    <div class="videocontainer"><iframe src="'+h.source1+'" width="'+h.width+'" height="'+h.height+'"'+p+"></iframe></div>
    
    
  2. В scss-файл добавляем:
    .videocontainer {
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 30px;
      height: 0;
      overflow: hidden;
      iframe, object, embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }

Альтернативный вариант — подключить специальную библиотеку FitVids.js.

Карточки одинаковой высоты в Bootstrap 4

Иногда требуется, чтобы блоки однотипного контента, помещенного в одну строку, имели одинаковую высоту, например, в случае формирования товарного каталога или карусели товаров. Реализовать это можно с помощью такого кода:

<div class="row equal">
    <div class="col-12 col-md-4 d-flex pb-3">
        <div class="card">
             ........
        </div>
    </div>
</div>

Отключение проверки владельца домена при создании поддоменов в ISPmanager Lite

Чтобы избежать возникновение ошибки «Доменное имя верхнего уровня принадлежит другому пользователю» достаточно дописать в конфиг ISPmanager /usr/local/ispmgr/etc/ispmgr.conf строчку:
Option InsecureDomain
После чего произвести перезапуск панели командой:
killall ispmgr
При открытии панели в браузере процесс ispmgr запустится автоматически.

Решение для ISPmanager 5

Икононочные шрифты в актуальном фреймворке

Как известно, из Bootstrap 4 выпилили иконочный фонт. Хорошее решение — сгенерировать свой набор из тех пиктограмм, которые реально нужны. И поможет в этом fontello.com. А если каких-то из готовой библиотеки не хватает, то можно добавить кастомные в svg. И еще один хороший фонтовый сервис поможет подготовить файлы и код для того, чтобы не подгружать шрифты с Гугла. Это небольшое разъяснение будет тут не лишним.

Подключаем Google Recaptcha в PHP-коде

Довольно простой способ прикрутить recaptcha к сайту с проверкой без использования curl:

$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']);
$responseData = json_decode($verifyResponse);
if($responseData->success) ...

Полезно явно указать язык при вызове скрипта
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit&hl=ru" async defer>

Два варианта сделать рекапчу адаптивной:

А еще лучше — использовать Invisible recaptcha. Вот так можно подружить ее с Bootstrap, когда используется валидатор форм.

Яндекс.Метрика для продвинутых

Добавляем в мемориз две качественные статьи по настройке отчетов Метрики:

Очистка HTML-кода от мусора

Весьма распространенная операция — перенос на сайт форматированного текста, созданного, например, в Word’е, который вставляет тонны ненужных инлайновых стилей. Далеко не всегда с этим успешно справляются популярные WYSIWYG-редакторы типа TinyMCE, хотя, казалось бы, нет особых проблем встроить в них качественный клинер. Пока же будем пользоваться он-лайновыми сервисами, один из них — лаконичный и качественный — word2cleanhtml.

Компактный вывод блоков разной высоты в несколько колонок

Найдена и опробована в действии неплохая masonry-библиотека Salvattore, которая легко внедряется в проект, например, с использованием bootstrap. В CSS-код с нашей стороны было внесено маленькое дополнение для создания отступов у колонок:

#grid .size-1of2:nth-child(2n) {
    margin-left: 10%;
}
#grid .size-1of3:nth-child(3n+2) {
    margin-left: 5%;
    margin-right: 5%;
}

Действующий пример можно посмотреть здесь.

CSS tooltips

Обнаружен годный онлайн-генератор тултипов на чистом CSS.  Код требует некоторой последующей доводки, но в большинстве случаев все будет работать как задумывалось.

На сайте содержится большое количество других полезных CSS-фич, инструментов и примеров, а также блог. Берем на заметку.

Адаптивные таблицы

Простой и быстрый способ сделать так, чтобы таблицы подстроились под мобильные устройства — это обернуть их div’ом, используя следующий код в духе bootstrap:

div.table-responsive {
  overflow-x: auto;
  max-width: 100%;
}
.table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

ISPmanager 5

В популярной панели управления хостингом произошли шикарные изменения. Существенно переработан интерфейс — можно оперативно переключаться между задачами, открывающимися во вкладках. Настройка php стала более наглядная и полноценная. Появилась возможность создания инкрементальных бэкапов, которой остро не хватало. Но есть и ряд разочаровывающих моментов. Обновляться придется платно. ISPmanager 5 заточен под самые последние версии дистрибутивов Linux и FreeBSD. Автоматизированный перенос аккаунтов со старой версии ISPmanager не предусмотрен, так что веб-сервера придется переносить вручную.

Автоматическое кадрирование изображений

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