Как стать автором
Обновить
-2
0
Зирка Андрей @BlackStar1991

Увлеченный сайтодел

Отправить сообщение

Как опубликовать свой плагин в репозиторий WordPress.org

Время на прочтение 12 мин
Количество просмотров 3.5K

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

Читать далее
Всего голосов 6: ↑6 и ↓0 +6
Комментарии 3

Новые форматы графики в CSS с помощью обновлённой функции image-set

Время на прочтение 4 мин
Количество просмотров 11K

CSS функция image-set поддерживается в браузерах на основе Chromium с 2012 года, а в Safari начиная с версии 6. Недавно поддержка появилась в Firefox 88. Давайте углубимся в эту тему и посмотрим, что мы можем и чего не можем делать с помощью функции image-set ()

Читать далее
Всего голосов 8: ↑8 и ↓0 +8
Комментарии 8

Как отследить загрузку файлов со своего сайта на WordPress

Время на прочтение 3 мин
Количество просмотров 5.6K


Возникла задача отслеживания загрузок файлов с сайта (изображений, документов, видео, дистрибутивов, …), т.к. обычные сервисы статистики не могут это делать без изменения URL файлов. И статистика должна быть видна в привычном месте (например, Google Analytics или FireBase).

Перебрав несколько плагинов (большинство имеют в названии слова Download и Manager), я обнаружил, что все они организованы по принципу ручного составления списка файлов для мониторинга. И во многих из них реализованы защиты от неавторизированного скачивания, что в данной задаче избыточно. Можно было бы воспользоваться ими, но если файлов много, то в итоге:

  • слишком неудобно и долго заводить элемент под каждый файл;
  • файлы могут менять свое расположение – опять придется исправлять элемент.

В итоге сделана своя реализация в виде плагина к WordPress, в котором просто указывается каталог (относительный путь сайта) и далее происходит мониторинг загрузок его содержимого.

Ссылка на бесплатный плагин тут для тех кому информации выше достаточно. Дальше приведены примеры результатов статистик и подробности технической реализации.
Читать дальше →
Всего голосов 8: ↑6 и ↓2 +4
Комментарии 2

Топ рекомендаций по Core Web Vitals на 2023 год

Время на прочтение 11 мин
Количество просмотров 8.2K


Привет, друзья!


Представляю вашему вниманию перевод этой замечательной статьи, представляющей собой коллекцию лучших практик, которые по мнению команды Chrome DevRel являются наиболее эффективными способами улучшения показателей Core Web Vitals.


Core Web Vitals — это часть метрик Web Vitals, используемых для оценки веб-страниц и включенных во все инструменты Google. Владельцы сайтов должны учитывать эти метрики. Каждый показатель Core Web Vitals представляет собой отдельный аспект опыта взаимодействия пользователя с сайтом, измеряемый в полевых условиях и отражающий реальные действия по достижению критически важного результата, ориентированного на пользователя.


Web Vitals — это инициатива Google, цель которой — предоставить единое руководство по сигналам качества, необходимым для обеспечения хорошего взаимодействия с пользователем в Интернете (источник).


Интересно? Тогда прошу под кат.

Читать дальше →
Всего голосов 22: ↑21 и ↓1 +20
Комментарии 1

Анимация грида в CSS

Время на прочтение 4 мин
Количество просмотров 8.8K

Я рад пролить свет на тот факт, что CSS grid-template-rows и grid-template-columns теперь можно анимировать во всех основных веб-браузерах! Что ж, CSS Grid уже давно технически поддерживает анимацию, ведь она встроена прямо в спецификацию CSS Grid Layout Module Level 1.

Читать дальше →
Всего голосов 4: ↑3 и ↓1 +2
Комментарии 4

Делаем свернутый контент доступным с помощью hidden=until-Found

Время на прочтение 3 мин
Количество просмотров 2.6K

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

HTML-атрибут hidden=until-found и событие beforematch могут решить эти проблемы. Добавляя hidden=until-found в контейнер для вашего скрытого контента, вы позволяете браузеру искать текст в этой скрытой области и открывать раздел, если совпадение найдено.

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

Эти функции доступны в Chrome 102, поэтому давайте посмотрим, как они работают.

Читать далее
Всего голосов 1: ↑1 и ↓0 +1
Комментарии 1

Как использовать API Google Analytics

Время на прочтение 3 мин
Количество просмотров 3.8K

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

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

Читать далее
Всего голосов 4: ↑3 и ↓1 +2
Комментарии 0

Сага о SEO, часть 1: серверный рендеринг

Время на прочтение 18 мин
Количество просмотров 8.2K

Наверняка хотя бы раз в жизни вы или ваши знакомые в поисках приятного досуга на вечер обращались к Яндексу или Гуглу с запросами вроде “кино онлайн бесплатно” или “смотреть сериалы 2021”. Если так, не стоит стесняться, вы такой не один, с подобными запросами в Яндекс, например, обращаются несколько миллионов человек в месяц. При этом, скорее всего, как и большинство пользователей с таким запросом, вы не имеете преференций относительно того, где вам этот контент покажут, и перебираете ссылки в выдаче сверху вниз, пока не найдете устраивающий вас ресурс. А значит, владельцы этих ресурсов максимально заинтересованы в том, чтобы

Читать далее
Всего голосов 13: ↑12 и ↓1 +11
Комментарии 6

Сага о SEO, часть 2: разметка

Время на прочтение 8 мин
Количество просмотров 4.6K

В предыдущей части статьи мы разбирались, как обеспечить поисковым роботам доступ к HTML-коду страницы. С вами снова Александр Усков, я ведущий разработчик more.tv, и в этом посте мы поговорим о том, что именно представляет из себя этот код и что можно сделать, чтобы сделать его максимально «понятным» и содержательным и для поисковых систем, и для браузеров.

Читать далее
Всего голосов 14: ↑10 и ↓4 +6
Комментарии 3

Настройка Webpack 5

Время на прочтение 29 мин
Количество просмотров 51K

Пошаговое руководство по настройке сборщика Webpack 5 совместно с такими инструментами как Pug, Sass, JavaScript, React и Markdown.

Читать далее
Всего голосов 22: ↑21 и ↓1 +20
Комментарии 37

14 КБ это слишком много. Делаем сайты меньше 1 КБ

Время на прочтение 6 мин
Количество просмотров 31K

Минимализм хорош во всех отношениях. Во-первых, это красиво. Во-вторых, эффективно. Разница в скорости загрузки сайтов особенно заметна на фоне монструозных корпоративных приложений с мегабайтами скриптов, тормозящих практически на любом устройстве. Поразительно, что за годы компьютеры ускорились в десятки раз, а сайты грузятся медленнее, чем раньше (график на КДПВ за 2011–2019 гг, статистика по скорости от Httparchive.org). Только подумайте, на сколько же сайтам нужно жиреть каждый год, чтобы сохранить эти тормоза!

Известно, что для минимизации задержки важным рубежом является 14 КБ. Если ужать веб-страницу или её первую часть в меньший объём, загрузка сильно ускоряется из-за спецификации TCP, которая определяет максимальный размер пакета в 1500 байт (из них 1460 полезных) и алгоритма медленного старта TCP, ограниченного десятью пакетами.

Но 14 КБ — не предел оптимизации. Далеко не предел.
Читать дальше →
Всего голосов 72: ↑71 и ↓1 +70
Комментарии 73

Что нового можем делать с формами в 2022?

Время на прочтение 5 мин
Количество просмотров 16K

Браузеры постоянно добавляют новые функции HTML, JavaScript и CSS. Вот несколько полезных дополнений к работе с формами, которые вы могли пропустить…

Читать далее
Всего голосов 20: ↑18 и ↓2 +16
Комментарии 11

Как повысить скорость разработки с помощью общедоступных функций JavaScript

Время на прочтение 10 мин
Количество просмотров 11K

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

Читать далее
Всего голосов 14: ↑8 и ↓6 +2
Комментарии 3

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

Время на прочтение 10 мин
Количество просмотров 5.4K

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

Меня зовут Глеб Михеев, я CTO Skillbox Holding, а также руководитель программного комитета FrontendConf. Уже как 19 лет работаю в коммерческой разработке. Сегодня я расскажу, как устроен браузерный конвейер поставки кадров на экран и что нужно знать каждому разработчику, чтобы его интерфейсы были отзывчивыми, не лагали, а анимации были плавными и выдавали 60fps даже при высокой вычислительной нагрузке на main thread.

Читать далее
Всего голосов 17: ↑16 и ↓1 +15
Комментарии 1

GraphQL, что ты такое?

Время на прочтение 7 мин
Количество просмотров 16K

Привет! Сегодня у нашей статьи два автора — бэкенд-разработчик Артём и фронтенд-разработчик Илья. 

Примерно год назад мы решили попробовать внедрить graphQL у себя в проекте и сейчас хотим поделиться, как это происходило. Расскажем, что такое GraphQL, как его внедряли, почему мы вообще решили с ним подружиться и как начать взаимодействовать с API бэкенда словно вы граф, а не холоп.

Если лень читать или больше нравится видеоформат — вам сюда

Читать далее
Всего голосов 12: ↑9 и ↓3 +6
Комментарии 22

Введение в SVG-анимации для верстальщиков

Время на прочтение 36 мин
Количество просмотров 24K


Время идет, технологии меняются, набитые шишки копятся, настала пора обновить материалы по SVG-анимациям. Тем более, что тема для многих фронтендеров все еще остается странной и запутанной. В этой статье мы рассмотрим SVG-анимации с разных сторон, посмотрим на актуальное состояние дел, возможности и сопутствующие инструменты. Мы не будем разбирать каждое свойство и каждый хак. Слишком большой объем материала получится. Для этого есть MDN и ему подобные сайты. Задача текущей статьи — дать общее представление о том, что бывает, и от чего можно оттолкнуться, если вы решили изучать эту тему, а у вас полная каша в голове.

Читать дальше →
Всего голосов 28: ↑27 и ↓1 +26
Комментарии 12

11 хитростей Chrome DevTools, которые помогут Вам стать Senior FrontEnd-разработчиком

Время на прочтение 4 мин
Количество просмотров 56K

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

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

Давайте посмотрим
Всего голосов 62: ↑56 и ↓6 +50
Комментарии 23

Глубокое погружение в функцию CSS :where()

Время на прочтение 7 мин
Количество просмотров 8.1K

Функция CSS :where() — новейшее детище в блоке псевдоклассов. Она принимает список селекторов в качестве аргументов и минимизирует их, позволяя вам писать меньше кода и в то же время стилизовать их все вместе.

В этом уроке мы узнаем про функцию псевдокласса :where() и покажем, как ее можно использовать в продакшене. Мы обсудим наложение, специфичность в отношении функции :where(), а также рассмотрим некоторые конкретные варианты использования.

Поехали!

Читать далее
Всего голосов 6: ↑5 и ↓1 +4
Комментарии 8

Всё о веб-анимациях в 2022

Время на прочтение 7 мин
Количество просмотров 38K

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

Чаще всего дизайнер отрисовывает анимацию в специальной программе, например, After Effects, и присылает верстальщику видео, по которому нужно повторить анимацию. А вот как реализовать эту идею — решать разработчику. Он может использовать три вида анимаций: CSS-анимации, SVG-анимации или JavaScript-анимации.

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

Анимация на КПДВ: Дилан Баунманн, codepen.

Читать далее
Всего голосов 20: ↑19 и ↓1 +18
Комментарии 8

Производительность фронтенда: большое приложение на реактивном SSR-топливе

Время на прочтение 12 мин
Количество просмотров 6.4K

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

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

На все эти вопросы ответил frontend-разработчик Виталий Старов на конференции FrontendConf 2021. Он рассказал о серверном рендеринге на примере приложения SuperJob. Читайте под катом, как SuperJob пришли к своей реализации серверного рендеринга, узнав по пути много интересного. Узнаете, когда хорош SSR и как он работает, из чего он устроен, чем может быть полезен и кому.  

Читать далее
Всего голосов 18: ↑18 и ↓0 +18
Комментарии 1

Информация

В рейтинге
Не участвует
Откуда
Киев, Киевская обл., Украина
Дата рождения
Зарегистрирован
Активность