💎 Расширение для просмотра используемых технологий на сайте💎

Супер хорошее бесплатное расширение для браузера Wappalyzer. С помощью него можно быстро посмотреть на чём сделан сайт.

Что мне понравилось больше всего:
👍Работает быстро
👍Очень хорошая интеграция с wordpress технологиями. Он не только покажет, что сайт на wordpress, расширение ещё покажет какие плагины на нём используется и какой версии.
👍Показывает кучу всего. От языков программирования до аналитики и безопасности.

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

WEB PANDA | #сервисы

🎆 Эффект падающей капли от нажатия мышки 🎆

Эффект сделан на css с использованием js, выглядит очень красиво и отлично впишется практически в любой сайт.

WEB PANDA | #codepen

💎 Плагин для конвертации в webp при загрузке изображения 💎

В настоящее время ~95% всего трафика и ~96% мобильного трафика приходится на браузеры, поддерживающие webp.

Зачем нужна конвертация в webp?
- Webp изображения обычно имеют размер менее половины при сохранении того же качества
- Улучшается скорость загрузки сайта

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

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

WEB PANDA | #плагины #wordpress #оптимизация

💎 Возможности chrome консоли 💎

Хорошо ли вы знаете инструменты разработчика Chrome? На самом деле, есть множество мощных, но не слишком известных возможностей, которые способны значительно повысить вашу эффективность и скорость работы.

Малый список возможностей:
1) Полноценный скриншот всей страницы или её части.
2) Мониторинг загрузки страницы
3) Копирование изображения в виде Data URL, чтобы например использовать его в css
4) Перетаскивание объектов в панели Elements
5) Быстрое скрытие элемента нажатием одной клавиши
6) Получить все шрифты/цвета/медиа запросы, которые используются на странице.

Запускайте в консоли Run Command и изучайте оставшиеся возможности. Они точно вам пригодятся в будущем.

Для краткого ознакомления рекомендую прочитать статью.

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

WEB PANDA | #сервисы

💎 Дорожная карта веб-разработчика 💎

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

Название технологий по порядоку для изучения:
1) Интернет
2) HTML
3) CSS
4) JavaScript
5) Веб-безопасность
6) Инструменты (хотя часть инструментов я бы изучил ещё на 2 пункте).
7) Фреймворки
8) GraphQL

Если вы хотите стать ещё wordpress разработчиком, то можете после 5 или 6 пункта изучать php.

Карта взята с сайта TProger.

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

WEB PANDA | #сервисы

😎 Справочник для веб-разработчиков 😎

Сайт "Дока" начал свою работу 12 октября 2021 года. С тех пор на нем опубликовалось очень много материалом по веб-разработке.
От html и css до javanoscript и доступности.

Интересная статья: как браузер рисует страницы.

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

WEB PANDA | #сервисы

💎 Сниппет для отключения всех обновлений wordpress💎

Данный сниппет отключает обновления:
1) wordpress
2) плагинов
3) переводов
4) тем

🚀 Код сниппета находится в комментариях.

👀 Вставка кода в wordpress

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

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

Красивый слайдер продуктов на swiper

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

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

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

💎 Сайт с коллекцией бесплатных noscript иконок с кастомизацией 💎

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

👀 Есть плагин для figma.

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

WEB PANDA | #дизайн

💎 Must have плагины для каждого сайта 💎

Данный пост содержит плагины, которые по моему мнению должны быть на каждом wordpress сайте.
1) Cyr to lat - конвертация кириллицы в латиницу.
2) Contact Form 7 - контактные формы
3) Rank Math Seo - seo оптимизация сайта
4) WP Rocket - оптимизация скорости загрузки сайта
5) Webp Express - конвертация картинок в webp
6) Robin image optimizer - оптимизация размера картинок
7) All In One Wp Security - защита сайта
8) Woody code snippets / любой другой плагин для сниппетов - вставка php сниппетов, гугл аналитики и прочего.

А какие плагины используете вы? Поделитесь своим опытом в комментариях.

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

WEB PANDA | #дизайн

💎 Вставка снега на сайт 💎

Скоро Новый Год, а это значит, что пора украшать свои сайты.

Для вставки снега надо просто вставить тег <noscript>, который находится по ссылке, в любое место страницы.

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

WEB PANDA | #дизайн

💎 Экологичная тема для блога wordpress 💎

Тема root от русскоязычных разработчиков WShop уже давно себя зарекомендовала, как хорошая минималистичная seo оптимизированная тема.

Преимущества темы:
👍Красивый дизайн
👍Превосходное seo
👍Очень чистый код
👍Хорошая адаптивность
👍Легко встроить рекламные баннеры
👍Супер скорость

Купить тему

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

WEB PANDA | #wordpress

💎 SEO оптимизация сайта своими руками💎

Плюсы SEO продвижения:
1) один из самых дешевых источников привлечения клиентов;
2) оптимизация сайта положительно влияет на его конверсию и на другие источники трафика;
3) даже остановив работу, результат продвижения сохранится на длительное время.

Минусы SEO продвижения:
1) зачастую первых значимых результатов необходимо ждать длительное время (ускорить процесс, не навредив проекту, практически невозможно);
2) несмотря на то, что это один из самых дешевых источников привлечения клиентов, все равно иногда требует больших денежных вложений;
3) зависимость от поисковых систем (изменения алгоритмов могут привести к резкому снижению посетителей);
4) Большой объем работ.

О том, как продвинуть сайт самостоятельно, можете прочитать в статье.

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

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

💎 Поисковик, который может заменить Google и Yandex, если вы разработчик💎

Недавно появился поисковик с искусственным интеллектом.

You.com не отображает миллион результатов, которые вы никогда не просмотрите. Вместо этого ИИ‑алгоритмы делают анализ и показывают сверху не рекламу и SEO‑ссылки, а статьи даже с маленьких сайтов, если те соответствуют вашему запросу.

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

Я лично попробовал написать пару запросов для wordpress и он написал!

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

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

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

WEB PANDA | #сервисы

💎 Вкладки с анимацией переключения 💎

Сделано на css без использования js.

Единственный минус по моему мнению - это то, что табы написаны на html radio, а не на js. Из-за этого будет немного сложнее встроить в свой проект или кастомизировать.

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

WEB PANDA | #codepen

💎 Бесплатные карты на сайт 💎

На удивление, немногие знают про сервис "Конструктор карт" от Яндекса.
Он позволяет создавать красивые карты с нескольким количеством меток совершенно бесплатно.

Также можно настраивать карту, например:
1) Включить/выключить пробки
2) Переключить вид с классической схемы на спутник или гибрид.
3) Выделять на карте зоны. И эти зоны можно гибко кастомизировать. Например, изменить цвет контура, заливки, добавить текст.
4) Рисовать линии на карте.

На выходе вам даётся код в виде Iframe или noscript, который можно обычной вставкой интегрировать на сайт.

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

WEB PANDA | #сервисы

💎 Скрытие всех способов доставки, когда доступна бесплатная доставка 💎

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

Код сниппета в комментариях.

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

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

💎 Фишки для улучшения сайта 💎

Фишки в дизайне могут сделать любой дизайн более запоминающимся и увлекательным для пользователя.

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

2) Параллакс. Когда фоновое изображение перемещается медленнее, чем сам сайт, что дает впечатление глубины.

3) Легкая навигация по сайту. Использование различных видов навигации, таких как меню, табы и ссылки, для упрощения поиска информации и улучшения юзабилити.

4) Графика в одном стиле. Часто на сайтах встречаются иконки/графика, которые подходят блоку, но нарисованы в разных стилях. Такое бывает, когда дизайнер ищет подходящую иконку в интернете или на сайте с иконками, но не в одном паке с иконками.
Рекомендую перед началом создания дизайна выбрать определенный пак иконок и графики, который будет использоваться на сайте.

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

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