⬜️ Бесплатный фотосток Skitterphoto ⬜️

Skitterphoto — сайт с множеством хороших фотографий с бесплатной лицензией.

🔗 Посмотреть 🔗

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

WEB PANDA | #сервисы #дизайн

⬜️ Кнопка с интересным эффектом ⬜️

Реализована с помощью CSS и библиотеки GSAP.

🔗 Посмотреть 🔗

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

WEB PANDA | #codepen #верстка

⬜️ Создание wordpress шорткодов ⬜️

Shortcoder — плагин, который позволяет создавать собственные шорткоды для использования на сайте без знания программирования.

🔗 Посмотреть 🔗

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

WEB PANDA | #плагины #wordpress

⬜️ Скорость против дизайна и функциональности. Что важнее? ⬜️

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

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

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

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

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

WEB PANDA | #оптимизация

⬜️ Калькулятор для жидких размеров ⬜️

Жидкие размеры — это значения, которые меняются в зависимости от ширины экрана. В css они задаются через функцию clamp(). Там указывается максимальный размер, минимальный размер, максимальная ширина устройства и минимальная ширина устройства.

Например, вы задаёте, что размер будет 40px на мониторах 1600px и выше, а минимальный размер в 30px на мониторах 360px. В итоге у вас будет пропорционально меняться размер.

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

🔗 Посмотреть 🔗

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

WEB PANDA | #верстка

⬜️ Шпаргалка для свойства display:flex ⬜️

Сайт разбирает каждое свойство для flex. Полезен для ознакомления с возможностями flex, а также для освежения своих знаний.

🔗 Посмотреть 🔗

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

WEB PANDA | #верстка #сервисы

⬜️ Запросы для ИИ для написания текстов ⬜️

1) Исследование и сбор информации.
Пример запроса. Собери экспертные мнения, статьи и исследования, которые подтвердят эффективность интервального голодания.

2) Структура статьи.
Пример запроса. Составь структуру для статьи на тему правильного рациона питания. Используй подзаголовки и списки.

3) Введение и заключение.
Пример запроса. Напиши введение на 300 символов для статьи на тему: достопримечательности Нью-Йорка.

4) Креативный контент.
Пример запроса. Напиши 5 вариантов введения для статьи на тему: топ-3 ресторанов Москвы. Текст должен вызывать положительные эмоции.

5) Редактирование для исправления грамматических, орфографических, пунктуационных или стилистических ошибок.
Пример запроса. Проверь текст на грамматические ошибки.

Есть ещё пара интересных идей для контента. Напишите в комментариях, если нужна вторая часть.

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

WEB PANDA | #seo #сервисы #оптимизация

⬜️ Вышел релиз безопасности WordPress 6.2.2 ⬜️

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

🔗 Посмотреть 🔗

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

WEB PANDA | #wordpress

⬜️ Эмодзи в мета теге noscript ⬜️

Использование эмодзи в мета-тегах заголовков (meta noscript) может повысить CTR (процентное соотношение количества кликов или просмотров рекламы к количеству показов) в поиске.

1) Исследование компании Backlinko показало, что использование эмодзи в мета-тегах может привести к повышению CTR на 30%.

2) Эта тенденция подтверждается и другими исследованиями. Исследование компании HubSpot показало, что эмодзи повышает узнаваемость бренда, а также привлекает внимание пользователей в поисковой строке.

3) Также это может помочь улучшить позиции сайта в поисковой выдаче. Как показывает исследование компании RankRanger, Google рассматривает эмодзи в мета-тегах заголовков как дополнительный контекст и может использовать его для определения релевантности страницы.

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

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

WEB PANDA | #seo

⬜️ Область подсветки ⬜️

Реализовано на чистом css и одном div.

🔗 Посмотреть 🔗

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

WEB PANDA | #codepen #верстка

⬜️ Conditional Fields for Contact Form 7 ⬜️

Плагин позволяет отображать поля в зависимости от значения других полей.

🔗 Посмотреть 🔗

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

WEB PANDA | #wordpress #плагины

⬜️ Тест "угадай цвет" ⬜️

Тест на codepen, который предлагает вам выбрать цвет по его hex коду или наоборот. В конце показывает количество баллов, которые вы набрали.

А вы знаете, как работает hex формат? Нужен ли пост о нем?

🔗 Посмотреть 🔗

Я набрал 598 баллов. Напишите свой результат в комментариях.

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

WEB PANDA | #верстка

⬜️ Мгновенный chatGPT без регистрации ⬜️

BAI CHAT — сайт с chatGPT с красивой подсветкой кода и полноценным функционалом. Не требует никакой регистрации.

🔗 Посмотреть 🔗

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

WEB PANDA | #сервисы

⬜️ Вывод количества минут для чтения статьи ⬜️

PHP функция, которая делит все слова в статье на 180 (слов в минуту) и выводит время с нужным склонением слова "минута".

function get_reading_time() {
global $post;
$content = get_post_field('post_content', $post->ID);
$word_count = str_word_count(strip_tags($content));
$reading_time = ceil($word_count / 180);
echo 'Время прочтения: ' . $reading_time . ' ' . declOfNum($reading_time, ['минута', 'минуты', 'минут']);
}

function declOfNum($num, $noscripts) {
$cases = array(2, 0, 1, 1, 1, 2);
return $num . " " . $noscripts[($num % 100 > 4 && $num % 100 < 20) ? 2 : $cases[min($num % 10, 5)]];
}

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

WEB PANDA | #сниппет #wordpress

⬜️ Mix blend mode — режим наложения css ⬜️

Свойство mix-blend-mode задаёт режим смешивания цветов выбранного элемента с низ лежащими слоями.

Очень полезно в некоторых ситуациях. Например, когда у вас jpeg картинка с белым фоном, а вам нужно её встроить на черный фон. Тогда можно применить это свойство и оно само удалит весь фон с изображения. Также с помощью него можно задать тексту фон картинки, которая на заднем плане и многое другое.

🔗 Посмотреть 🔗

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

WEB PANDA | #верстка

⬜️ Last-Modified and If-Modified-Since Headers ⬜️

Заголовки Last-Modified and If-Modified-Since Headers передают поисковым роботам и сообщает им о том, редактировалась ли страница. Они позволяют улучшить SEO, сообщая им о том, редактировалась ли страница и нужно ли её повторно индексировалась.

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

Итог:
— Увеличенная скорость загрузки.
— Сниженная нагрузка на сервер, так как не придется подгружать разделы сайта в лишний раз.
— Увеличится скорость индексации.
— Улучшится поисковой сниппет (появится дата публикации и изменения).

Проверить наличие заголовков вы можете тут.

Многие seo плагины поддерживают их, но если вы столкнулись с тем, что у вас на сайте их нет, то рекомендую установить данный плагин.

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

WEB PANDA | #seo #wordpress #плагины

⬜️ Стили для обычных ссылок | CSS Хак ⬜️

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

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

Благодаря коду ниже, мы стилизуем ссылку, которая не имеет класса.

a:not([class]) { text-decoration-thickness: max(0.08em, 1px);
  text-underline-offset: 0.15em;
}

👩‍💻 Нужны ли еще посты про css хаки?

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

WEB PANDA |  #cssхак #верстка