vorst.ru - Статьи о задачах возникающих при создании сайта и их решении

Как удалить не используемые CSS правила

Очистка и сжатие CSS с помощью Gulp

Сейчас много шаблонов на базе bootstrap. На сайте, из всего разнообразия стилей, предлагаемых шаблоном, используется порой 10-20%. От балласта можно избавиться с помощью on-line ресурсов. Например uncss-online. Но этот подход трудоемок.

Надежнее использовать утилиту. Задание создается один раз и при любых изменениях в проекте достаточно выполнить одну или пару команд.


Как написать валидатор

Пример валидатора для серверной и клиентской частей

Есть таблица цен на номера в пансионате. Цена зависит от различных параметров - номера, типа ценника, типа питания, варианта размещения, наличия или отсутствия лечения. Цена, для определенной комбинации значений этих параметров, может быть только одна.

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


Интерфейс для полнотекстового поиска

Использование ElasticSearch во frontend

На создание ElasticSearch индекса понадобилось совсем не много усилий, как видно из предыдущей статьи. Чтобы сделать индекс доступным конечному пользователю, усилий понадобиться не многим больше.

Теперь нужна форма ввода и нужно немного подправить действие контроллера для ее обработки и получения результатов и представление, чтобы отображать форму.


Как создать индекс ElasticSearch

Полнотекстовый поиск

Один парень написал: "Нужно сделать поиск слов в таблице "articles" по столбцу "content". В результатах поиска сначала выводить те, которые содержат наибольшее количество слов в статье и далее по мере уменьшения."

Мысль летит) Но ясно, что нужен полнотекстовый поиск.


Рефакторинг кода авторизации

Использование аккаунта социальной сети для авторизации

Авторизация с помощью социальной сети не должна зависеть от типа аккаунта. В предыдущем посте используется код, где в конструкторе классa common/components/SocialContact.php выполняется оператор switch. При добавлении обработчика для новой социальной сети, придется дописывать код, при этом меняя класс.

Перепишем конструктор так, чтобы класс не нужно было менять и он не зависел от типов социальных сетей.


Как подключить авторизацию через аккаунт

OAuth2 авторизация с использованием аккаунта

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

Авторизация с помощью социальной сети позволяет избежать повторного заполнения формы регистрации. При этом защищенность вашего аккаунта в социальной сети никак не страдает. Вы просто подтверждаете, что вы это вы. Как подключить эту услугу к проекту используя расширение yiisoft/yii2-authclient?


Как написать виджет для WordPress

Пример виджета для WordPress

Иногда производители предоставляют возможность покупателю самостоятельно выбрать на сайте комплектацию товара. В этом случае, при разработке сайта, нужно предусмотреть возможность показа текущей цены на видном месте (demo).

В WordPress для подобных задач используется область виджетов. Как писать виджет в WordPress подробно написано в кодексе. Но всегда есть нюансы.


Как написать short-code для WordPress

Пример написания short-code для WordPress

На сайте магазина нужно, чтобы пользователь мог, выбирать комплектацию товара отвечая на вопросы. Вопросы должны сопровождаться наглядными картинками.

Должна быть возможность легко размещать такой вопросник в статье или на странице блога WordPress. Об этом была речь в предыдущем посте.


Как написать плагин для WordPress

Плагин для WordPress подсчета цены по компонентам

Любой товар состоит из элементов. Довольно часто производитель, поставив задачу написать электронный магазин, позволяет выбирать комплектацию заранее, до производства. Выбирая комплектующие есть возможность сэкономить или наоборот, согласиться с утверждением "Я этого достоин(а)" и заказать по полной.

Например можно представить пиццерию, где в меню указана стоимость составляющих - лепешка, сыр трех сортов, помидоры двух сортов, колбаса 5 видов. Комбинируете вы сами и постоянно видите, как ваш выбор отражается на цене.

Но это отвлеченный пример, а был конкретный - Demo, Plugin.


Как определить правило для RBAC

Выполнять действие или нет

В предыдущей статье были определены две роли - Админ и Автор, как в обычном блоге. А обычно блог используется при создании любого сайта. Для ролей Админ и Автор были определены разрешения.

Если вы Админ, то у вас есть общее разрешение create. Оно дает право добавлять данные к любым моделям. Если вы Автор, то такое разрешение давать не стоит. Автор не может, например, добавить новую рубрику.


Определение разрешений на доступ и ролей для пользователей

Задание доступа только к определенным действиям

Разработка бекенда сайта часто подразумевает ограничение прав при редактировании контента.

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


Как подключить RBAC

Подключение ролевого доступа

В большом количестве задач необходимо в backend-части приложения разрешать одним группам пользователей выполнять только определенные действия. Другим может быть разрешено чуть больше. И так далее, до админа.

Именно распределение прав для групп пользователей и будет рассмотрено в паре-тройке статей. В качестве примера будет использоваться всего две роли.


Как отсортировать картинки мышкой

Сортировка строк мышкой

Оставили комментарий в конце января: "Напишите, пожалуйста, статью, как массово загружать изображения через ajax с возможностью сортировки перетаскиванием."

Речь о расширении yii2-uploader, которое может загружать, сжимать, обрезать картинки для любой модели. Я писал о нем уже пару раз.

На тот момент этой функциональности не было. Собирался я долго. Наконец добавил требуемое. Теперь спешу написать несколько слов о процессе. Демо (при редактировании).


Как подключить кеширование

Ускорение работы сайта с помощью кеширования

Содержание конкретной страницы, как правило, требует предварительной подготовки. Например, в посте присутствует сразу текст на русском и на английском языке. В этом случае нужна предварительная обработка, чтобы на экране отображался только текст на текущем языке.

Если текст поста меняется редко, желательно выполнять работу по подготовке страниц в "первый" просмотр и затем выводить уже готовые страницы.


WordPress плагин для недвижимости

Без изменения структуры данных

Привлекательность WordPress в большом количестве тем оформления. Иллюзия легкости, с которой можно поменять тему, не дает покоя разработчикам. Сейчас на WordPress работают даже магазины.

Чтобы разобраться, как это возможно, я решил написать плагин для агенств недвижимости. Расширять структуру данных не хотелось - это уже будет не WordPress. Решил сохранять JSON-определения объектов недвижимости в поле post_content и преобразовывать эти определения "на лету" - Demo, GitHub


Пример работы с amoCRM

Как получить данные из amoCRM

Заказчик попросил вывести данные о сделках в таблицу в формате CSV. Данные должны быть максимально полными.

В том числе, необходимо вывести все возможные этапы сделки и даты, когда сделка переходила с этапа на этап. В amoCRM предусмотрена возможность определять этапы для каждой воронки продаж. Необходимо было, чтобы учитывались все этапы, всех воронок.

Ну и прочее - кто, когда, с кем, контакты клиента и, наконец, все комментарии к сделке.


Пример загрузки контента без перезагрузки страницы

Динамическая загрузка контента

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


Как добавить атрибут к загруженному файлу

Добавление описания к файлу

Иногда важно определить дополнительную информацию для загружаемого файла. Например это может быть описание. В расширении yii2-uploader возможность добавить описание к файлу уже предусмотрена.

Кроме описания может быть добавлено и любое другое свойство. В предыдущем примере использовалось свойство when типа radio с двумя значениями - "до" и "после". Как добавить новое свойство?


Как сделать галерею фотографий "До и После"

Показ фотографий до и после момента времени

Представьте, что вы продаете курс похудания. Вам нужно наглядно представить результат вашего курса. Фото "До" и "После", что может быть лучшей иллюстрацией?

Как и в предыдущем примере примем, что участников ограниченное количество. Например 4. Забудем про похудающих - слишком скучно. Будем "работать" с кинозвездами. Для каждого можно загрузить только 4 фотографии. Таким образом всего 16 фото. Если загружены все 16 и кому-то захочется добавить "свои" фото, то придется что-то удалить. Демо.


Делаем демо для загрузки фото

Загрузка жестко определенного количества файлов

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

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



Поиск



Как удалить не используемые CSS правила

Очистка и сжатие CSS с помощью Gulp

Сейчас много шаблонов на базе bootstrap. На сайте, из всего разнообразия стилей, предлагаемых шаблоном, используется порой 10-20%. От балласта можно избавиться с помощью on-line ресурсов. Например uncss-online. Но этот подход трудоемок.

Надежнее использовать утилиту. Задание создается один раз и при любых изменениях в проекте достаточно выполнить одну или пару команд.


    Поделиться

Установка утилиты проста и описана в Gulp quick-start. После установки, в папке проекта появится каталог node_modules с большим количеством подкаталогов. Чтобы каталог не попал на сервер, добавьте строчку в .gitignore.

# JS
node_modules

Дополнительные модули

Кроме Gulp для работы с CSS необходимы еще несколько модулей - gulp-uncss, gulp-cssnano, gulp-concat-css. Каждый нужно установить локально.

npm install gulp-uncss --save-dev

Gulpfile.js пример & структура

Для работы утилиты нужно подготовить специальный файл gulpfile.js в корне проекта.

var gulp = require('gulp');
var uncss = require('gulp-uncss');
var cssnano = require('gulp-cssnano');
var concatCss = require('gulp-concat-css');
gulp.task('uncss', function () {
    return gulp.src([
        './vendor/bower-asset/bootstrap/dist/css/bootstrap.min.css',
    ])
    .pipe(concatCss('bundle.css'))
    .pipe(uncss({
        html: [
            'http://localhost/site/index',
            'http://localhost/post/rubric/trade-union-news',
            'http://localhost/post/15-spartakiada',
            'http://localhost/site/feedback'
        ],
        ignore: [/\.collapse\.in/, /\.dropdown/, /\.dropdown-menu/, /\.dropdown-toggle/]
    }))
    .pipe(cssnano())
    .pipe(gulp.dest('./frontend/web/out/css'));
});
gulp.task('mincss', function () {
    return gulp.src([
        './frontend/web/css/site.css',
        './frontend/web/css/magnific-popup.css',
        './frontend/web/css/responsive.css',
        './frontend/web/css/BootsnippQuoteCarousel/style.css'
    ])
    .pipe(concatCss('all.css'))
    .pipe(cssnano())
    .pipe(gulp.dest('./frontend/web/out/css'));
});

В секции gulp.src, через запятую, указываются все CSS ресурсы, которые нуждаются в чистке. В данном случае указан только один файл.

В функции concatCSS указывается имя финального файла.

В uncss.html нужно перечислить все страницы, которые имеют стили, отличные от остальных страниц.

Многие элементы появляются и исчезают на экране при взаимодействии с посетителем. Стили таких элементов не видны при обходе и не попадают в финальный файл. Такие элементы нужно искать вручную и добавлять в секцию uncss.ignore.

Наконец в секции gulp.dest нужно указать каталог, в который будет записан финальный файл.

Assets

Для работы утилиты нужен полный CSS файл, а для тестирования результатов - сжатый. Обычно все необходимые ресурсы подключаются в frontend/views/layouts/main.php одним вызовом.

frontend\assets\AppAsset::register($this);

Все необходимые ресурсы указаны либо в самом классе, либо в зависимостях. В данном случае зависимостей, кроме стандартных, пара.

namespace frontend\assets;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
    ];
    public $js = [
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
        'yii\bootstrap\BootstrapPluginAsset',
        'frontend\assets\TextualAsset',
        'frontend\assets\BootsnippQuoteCarouselAsset',
    ];
}

Чтобы быстро переключаться с одного набора ресурсов на другой, можно сделать копию ресурсов в папке prod.

namespace frontend\assets\prod;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'out/css/bundle.css',
        'out/css/all.css',
    ];
    public $js = [
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
        'yii\bootstrap\BootstrapPluginAsset',
        'frontend\assets\prod\TextualAsset',
        'frontend\assets\prod\BootsnippQuoteCarouselAsset',
    ];
}

Теперь, для тестирования, почти достаточно поменять регистрацию ресурсов в файле frontend/views/layouts/main.php.

frontend\assets\prod\AppAsset::register($this);

Почти, потому что нужно жестко отключить стандартные ресурсы. Например в конфигурации frontend/config/main.php.

    'components' => [
        'assetManager' => [
            'bundles' => [
                'yii\web\JqueryAsset' => [
                    'js' => ['jquery.min.js'],
                ],
                'yii\bootstrap\BootstrapAsset' => [
                    'css' => [], //['css/bootstrap.min.css'],
                ],
                'yii\bootstrap\BootstrapPluginAsset' => [
                    'js' => ['js/bootstrap.min.js'],
                ],
            ],
        ],

Запуск

При "полных" ресурсах в корне проекта нужно выполнить пару команд, затем переключиться на вариант prod и тестировать результат.

gulp uncss
gulp mincss

Заключение

От хлама стоит избавляться в больших файлах стилей. Связанные с темой стилевые файлы проще просто сжимать.

Оставьте комментарий

Только зарегистрированные пользователи могут оставлять комментарии. Пожалуйста войдите или пройдите регистрацию.