Интересные работы

Свежие записи

Не спешите обновлять CMS WordPress до версии 5.7 – обнаружен конфликт с Contact Form 7 версии 5.4

Итак, суть проблемы – на многих сайтах перестала работать форма обратной связи Contact Form 7 версии 5.4 после обновления CMS WordPress до версии 5.7. Исходные...

Делаем картинку такой же высоты как соседний блок с помощью flex и object-fit

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

Как удалить несколько последних слайдов в слайдере Slick

Задача – выводить в десктопной версии несколько слайдов с определенным дизайном, а в мобильной версии выводить больше слайдов с другим дизайном. Нашел одно решение –...

Как задать тексту фоновый рисунок с помощью CSS-свойства background-clip

Простой пример, как можно задать для текста фоновое изображение с помощью CSS-свойства background-clip. HTML – проще некуда: CSS – максимально упрощенный, чтобы было понятно, что...

Какая разница между esc_html, esc_attr, esc_html_e, _e() и другими?

Уже давно не давал мне покоя вопрос в чем разница между функциями _e() и esc_html_e… Но я везде использовал _e() и не парился, пока не...

Функция, чтобы исключить текущий пост из виджета Recent Posts Widget

Простая функция, которая позволяет не отображать в виджете Recent Posts Widget текущую запись, которая открыта в данный момент, например, если вы открыли последнюю запись в...

Онлайн CSS-генератор треугольников

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

Препроцессор SCSS-to-CSS с помощью GULP4

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

Оптимизация изображений без сторонних приложений с помощью Gulp 4

Мой репозиторий – https://github.com/DenisShapkun/images-optimization. Используем вместо Tinypng десктопный вариант Gulp. Пакетная оптимизация изображений формата PNG, JPEG, GIF, SVG. PNG без альфа-канала (без прозрачности) лучше сначала...

Как сделать бекап и импортировать базу через SSH

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

Множественная тень с эффектом свечения с помощью CSS

Если по дизайну для текста нужна тень то обычно мы используем CSS-свойство text-shadow в таком формате: И получаем такую простую тень: Темная тень на светлом...

Кастомный tootlip с помощью CSS и jQuery

Задача – добавить на сайт всплывающие подсказки, но без подключения дополнительных библиотек, потому как их и так подключено много (но ни в одной нет tooltips)....

Мой опыт работы с крауд-ссылками

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

background-position чуть подробнее

В общем, background-position – очень простое свойство в CSS используемое, чтобы указать позицию фонового изображения. Есть несколько вариантов синтаксиса, чтобы указать позицию фона: Числовое значение...

Как задетектить скролл вниз или вверх в браузере

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

Как задать отдельные стили только для браузера IE 11 и Edge

Задача такая, для IE11 и Edge задать отдельные стили для SVG, потому что в этих браузерах не поддерживаются фильтры для свг и соответственно свг-шка не...

SEO продвижение сайтов с помощью вечных ссылок

Не буду лить воду про важность продвижения сайтов в интернете и про ссылочное продвижение, которое “должно было умереть” еще 10 лет назад по версиям различных...

Эффективный способ перенести свой e-commerce проект на WordPress на новый хостинг и не потерять прибыль

Для e-commerce проектов особенно важна устойчивая работа хостинга. Плохой Uptime и медленная работа сервера негативно отражаются на прибыли проекта и SEO-показателях. Причиной смены хостинга также...

Как задать длину цитаты (excerpt) или изменить ее вид

Цитата записи (excerpt) выводится внутри цикла таким кодом: По умолчанию, она обрежется длиной в 55 слов и в конце будут такие символы […], что не...

Пакетная оптимизация картинок для Google Page Speed Insight

Репозиторий с оптимизатором картинок на Github – https://github.com/DenisShapkun/images-optimization. В общем, это моя секретная разработка для сжатия картинок (PNG, JPEG, GIF, SVG). Все сейчас гоняются за...

Быстрое копирование сайта с помощью плагина website-scraper

Копирование сайта с помощью Website Scraper – https://www.npmjs.com/package/website-scraper. Запускаем консоль в нужной директории и устанавливаем плагин website-scraper с помощью команды: Создаем файл scraper.js с примерно...

fadeIn() для flex-контейнера

Суть задачи в том, чтобы сделать плавное появление и скрытие flex-контейнера. Если использовать просто fadeIn(), то блоку будет задано свойство display: block;. Можно, конечно, flex-контейнер...

Убираем из адреса страницы .html для статических сайтов

Редирект с .html Задача простая – убрать из урла расширение страницы .html. Чтобы вместо было: Нужно в файл .htaccess добавить такие директивы:

Как объединить 2 массива в один

Простой пример, как объединить 2 массива в один, чтобы соответствующие элементы каждого массива были помещены в отдельные объекты объединенного массива. Скрипт: Получаем такой массив с...

Как добавить эффект свечения (тень) для SVG при наведении

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

Анимированная светящаяся при наведении кнопка с помощью CSS

Простой пример очередной анимированной кнопки с эффектом свечения при наведении. Можно сделать свечение кнопки и без наведения, это уже дело вкуса и дизайна. HTML для...

Что лучше использовать – чистый HTML, самописный движок или CMS WordPress ?

Тема вопроса на самом деле гораздо шире. Что лучше использовать для своего сайта? Статичную верстку на HTML, популярную CMS или самописный движок? Я не буду...

Сжатие и конвертирование видео для сайта

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

Как создать блок с видео-фоном на сайте

Когда-то я уже делал небольшую статью про создание видео-фона в блоке (Делаем видео-фон для блока с помощью CSS). Но в статье было много лишнего кода...

Safari отображает семизначные числа как номера телефонов

Суть проблемы – мобильные браузеры, в частности, Safari отображают семизначные числа как ссылку на телефон. В общем-то, это было бы удобно, если бы, это был...