Рекурсивные запросы к БД

Posted by

Обнаружена отличная статья с примерами, связанными с выводом иерархических данных, с использованием рекурсии на уровне СУБД. Может быть полезным, например, для вывода каталога товаров в виде дерева. После косметических правок код был протестирован на актуальных MySQL и MariaDB. Нужно только поправить приведение типов: CAST(id AS CHAR(50)) вместо VCHAR(50) и конкатенацию: CONCAT() вместо ||, т.к. в оригинальном коде используется диалект Oracle/PLSQL.

Ускоряем загрузку страниц со встроенным видео

Posted by

Не секрет, что youtube’овские iframes значительно тормозят загрузку сайта, особенно если их размещено несколько. Хорошим решением проблемы является замена встроенных видео картинками-превью с возможностью подстановки вместо них плейеров при клике пользователя. Мы воспользовались библиотекой lite-youtube-embed, чтобы не изобретать велосипед. Результат впечатляет, показатели Google Pagespeed на одном из последних проектов вновь вернулись в зеленую зону!

Некоторые нюансы миграции на Bootstrap 5

Posted by
  1. В навигационном меню navbar вместо атрибутов data-toggle и data-target теперь используются data-bs-toggle и data-bs-target.
  2. Раскрывающиеся пункты мультилевел-меню не будут работать без дополнительного подключения библиотеки popper.min.js.
  3. Чтобы выпадающие подменю корректно работали, необходимо указать атрибут data-bs-auto-close="outside" в элементах с классами "nav-link dropdown-toggle".
  4. В новой версии Bootstrap появилась возможность нативного использования offcanvas и теперь адаптивное меню в мобильном виде можно выводить в перекрывающем окно слое. Пример с фрагментом кода: 
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarContent" 
aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-start" data-bs-backdrop="false" id="navbarContent">
...

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

Posted by

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

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

Posted by

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

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

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

Posted by

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

beget vps

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

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

Posted by

Форсирование 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]

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

Posted by

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

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

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

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

Posted by

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

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

Posted by

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

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

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

Posted by
  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

Posted by

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

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

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

Posted by

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

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

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

Posted by

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

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

Posted by

Довольно простой способ прикрутить 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, когда используется валидатор форм.

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

Posted by

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

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

Posted by

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

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

Posted by

Найдена и опробована в действии неплохая 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%;
}

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