⬜️ Инструкция по конструктору Bricks ⬜️

Статья про краткий обзор Bricks.

Данный конструктор идёт как wordpress тема. Он имеет большой функционал и множество настроек. Именно из-за этого разобраться в нем довольно трудно и он кажется сложным. Но благодаря видео можно понять основы и научиться им пользоваться.

Сообщество Bricks в Telegram

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

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

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

⬜️ Иконки социальных сетей с эффектом наведения⬜️

Красивые иконки социальных сетей. Сделаны на чистом css без noscript, js.

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

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

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

⬜️ Плагин безопасности ⬜️

SiteGround Security — плагин для защиты сайта от взлома. Есть множество настроек. Имеет хорошие отзывы и большое количество установок.

Статьи про безопасность на канале:
— Гайд по безопасности wordpress
— Инструкция по защите сайта на wordpress

🔗 Посмотреть плагин 🔗

👍 Средняя оценка: 4.5
✨ Количество скачиваний: 800 000+
🎯 Последнее обновление: 6 дней назад

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

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

⬜️ GreenShift — комбайн плагинов для Gutenberg⬜️

GreenShift — это огромный пак аддонов для Gutenberg, который делает его супер мощным. Можно сказать, что это как crocoblock для elementor, но только в мире Gutenberg.

Из интересного:
— Супер быстрый. Плагину требуются 2кб стилей. Ничего лишнего не грузится, если блок не используется.
— Изменения чего угодно. Полная поддержка FSE, редактируется шапка, подвал, шаблоны кастомных типов постов и многое другое.
— Анимация. Фреймфорк для потрясающей анимации весом 2 кб.
— Конструктор запросов, что позволяет делать woocommerce магазины и запросы любого типа.
— Более 70 виджетов. Многие с динамической поддержкой.

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

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

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

⬜️ Бесплатное расширение для автокода⬜️

Codeium — бесплатный аналог copilot или tabnine. Умеет дописывать код, благодаря анализу других файлов и нейросети. Функционал бесплатной версии неограничен.

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

Поддерживаемые редакторы кода:
— Vs Code
— JetBrains
— Vim
— GoLand
— PyCharm
— PhpStorm
— WebStorm
— Android studio
— многое другое...

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

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

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

⬜️ Коллекция html элементов ⬜️

Сайт с множеством интересных интерактивных сложных элементов. Аналог codepen.

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

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

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

⬜️ Почему не следует брать изображения из поиска ⬜️

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

➡️ Лицензированные изображения — это изображения с разрешением автора на использование только по лицензии Creative Commons или при покупке безвозмездной лицензии.

Существует множество бесплатных библиотек изображений, где вы можете найти бесплатные изображения, такие как Unsplash, Flickr и другие. Хотя поиск бесплатных изображений требует больше времени и усилий, но это того стоит, чтобы избежать потенциальных последствий, таких как:

⬜️ Нарушение авторских прав. Если вы используете изображение без разрешения, владелец может направить запрос на удаление, требующий, чтобы вы удалили изображение. Множественные нарушения могут привести к судебному иску против вас.

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

⬜️ Ущерб репутации. Использование украденных изображений плохо отражается на вас и вашем сайте. Это создает впечатление, что вы можете украсть или использовать в плагиате другой контент. Поддерживайте свою репутацию, уважая работу других людей и используя только изображения, тексты и другие материалы, лицензированные по закону.
Конечно, вряд ли пользователи смогут заметить то, что изображение заменилось, но всё равно лучше чтобы шанс был равен нулю, особенно на популярных сайтах.

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

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

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

⬜️ Сервис для создания мокапов ⬜️

Сайт позволяет создавать красивые мокапы из скриншотов сайта. Идеален для создания стильного портфолио в 1 стиле.

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

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

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

⬜️ Сервис для создания дизайнов ⬜️

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

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

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

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

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



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

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

⬜️ Стилизация select file ⬜️

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

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

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

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

⬜️ Про мета тег keywords ⬜️

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

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

В результате, поисковые системы перестали учитывать мета-тег keywords при ранжировании страниц.

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

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

WEB PANDA | #seo

Что такое UX-дизайн: определение и основные задачи Что такое UX-дизайн: определение и основные задачи ⬜️

UX-дизайн или user experience design — это процесс проектирования предоставляемого продукта или услуги с учетом потребностей и ожиданий пользователей. Главная цель UX-дизайна — сделать взаимодействие с продуктом максимально простым и удобным для пользователя.

Основные задачи UX-дизайна:

• Понимание пользователей и их потребностей. UX-дизайнеры проводят исследования целевой аудитории, изучают рынок и продукт.

• Создание пользовательских сценариев (user flows). Это последовательность шагов, которые предпринимает пользователь для выполнения задачи или достижения цели. UX-дизайнеры прорабатывают оптимальные сценарии взаимодействия с продуктом.

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

• Тестирование и итерация. UX-дизайнеры получают отзывы от пользователей, выявляют проблемы интерфейса и улучшают его. Этот процесс повторяется до тех пор, пока UX не будет максимально понятным и удобным для целевой аудитории.

• Создание UX-спецификаций и документации. На этом этапе описываются все детали взаимодействия с продуктом: пользовательские сценарии, интерфейс, требования к UX и т.д. Эта информация передается разработчикам для дальнейшей реализации продукта.

UX-дизайн направлен на создание удобного, понятного и полезного продукта, который решает задачи пользователей и приносит им удовлетворение от взаимодействия с ним. Хороший UX-дизайн — залог успеха любого digital-продукта.

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

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

⬜️ Красивые анимации при нажатии на меню ⬜️

Небольшая коллекция анимации переключения бургер меню.

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

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

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

⬜️ Сервис для проверки работоспособности сайта ⬜️

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

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

Для мониторинга доступности сайта используются специальные сервисы, которые автоматически проверяют сайт на предмет работоспособности с заданной периодичностью, например, раз в 5-15 минут. При обнаружении проблемы сервисы оповещают вас.

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

https://uptimerobot.com — условно бесплатный сервис. В бесплатном тарифе доступен мониторинг 50 сайтов с интервалом проверки в 5 минут.

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

WEB PANDA | #сервисы

⬜️ Меню из соц. сетей ⬜️

Необычное исполнение социальных сетей. Такое оформление точно привлечет внимание пользователя и скорее всего с большей вероятностью он нажмет на него. Встроить можно в подвал в отдельную колонку. Сделано на css и html.

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

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

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

⬜️ Асинхронная загрузка скриптов: за и против ⬜️

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

Плюсы:

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

✅ Улучшение SEO. Более быстрая загрузка положительно влияет на рейтинг сайта в поисковых системах.

✅ Улучшение UX. Пользователи видят контент быстрее и меньше раздражаются из-за медленно загружающихся страниц.

Минусы:

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

❌ Сложности в отладке. Отлаживать асинхронные скрипты сложнее, потому что порядок их выполнения непредсказуем.

❌ Не подходит для взаимозависимых скриптов. Если скрипты используют функции или переменные друг друга, их нужно загружать синхронно.

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

🌐 В WordPress асинхронную загрузку скриптов можно включить с помощью плагина WP rocket.

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

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

⬜️ Flexbox vs CSS Grid: области применения и различия ⬜️

Flexbox и CSS Grid — это два мощных модуля CSS, предназначенные для упрощения разметки страниц. Они оба предоставляют расширенные возможности для выравнивания, организации и перемещения элементов на странице. Однако у каждого из них есть свои сильные стороны и подходящие случаи использования.

Области применения Flexbox:

• Выравнивание элементов (расположения в строку или столбец)
• Изменение порядка элементов
• Распределение пространства между элементами
• Выравнивание элементов друг относительно друга по горизонтали или вертикали

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

Области применения CSS Grid:

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

CSS Grid мощный и гибкий, подходит для создания всевозможных макетов, основанных на сетке. С его помощью легко создавать и перемещать объекты по строкам и колонкам и настраивать размеры ячеек сетки.

Основные различия:
• Flexbox работает по оси, а Grid — по колонкам и строкам
• В Flexbox контейнер определяет размеры элементов, а в Grid размеры явно задаются или вычисляются
• Flexbox выравнивает элементы относительно друг друга, а Grid позволяет выравнивать их относительно колонок и строк
• Flexbox наследует вертикальную ориентацию, а Grid — нет

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

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

WEB PANDA | #верстка

⬜️ Генерация комментариев для страниц ⬜️

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

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

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

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

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

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

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

⬜️ Семантические теги в HTML ⬜️
— это элементы, которые предоставляют дополнительную информацию о содержании и структуре веб-страницы. Они помогают разработчикам и поисковым системам лучше понимать смысл и назначение различных блоков контента. В этом посте рассмотрим основные семантические теги и приведем примеры их использования.

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

<header> -- шапка сайта или заголовок блока в <section>
<nav> -- навигация сайта, например меню на сайте
<main> -- уникальный контент страницы, который не повторяется больше нигде.
<section> -- блок.
<article> -- статья или анонс статьи на другой страницы.
<aside> -- незначительный элемент страницы. Например, рекламный баннер или сайдбар.
<footer> -- подвал сайта или нижний контент <section>.
<time> -- отображения времени поста, страницы и тд.
<mark> -- выделение текста в справочных целей или на который стоит обратить внимание пользователю. Например при поиске им следует выделять ключевое слово в найденных постах.

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

WEB PANDA | #верстка

⬜️ Методология БЭМ. Что это такое и какие преимущества? ⬜️

Методология БЭМ (Блок, Элемент, Модификатор) - это подход к разметке HTML, который помогает создавать гибкие и масштабируемые сайты. Основные принципы БЭМ:

Блок (Block) - это независимый компонент интерфейса, например, заголовок, меню, текст и т.д. Каждому блоку присваивается отдельный CSS-класс.

Элемент (Element) - это часть блока, которая не может существовать отдельно, например, заголовок и параграф внутри блока. Классы элементов начинаются с двух подчеркиваний и названия блока.

Модификатор (Modifier) - это вариация блока или элемента. Используется для индикации стиля, состояния или версии. Обозначается двумя дефисами.

Преимущества БЭМ:

• Логичная и понятная структура HTML-разметки.

• Возможность многократного использования блоков.

• Снижение сложности CSS за счет того, что стили не пересекаются.

• Легкость внесения изменений без нарушения всей системы.

• Возможность разработки сайта большой командой - нет коллизий в HTML и CSS.

• Совместимость с préprocesорами (LESS, SASS, Stylus) для удобства вложенности и переиспользования.

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

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

WEB PANDA | #верстка