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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поехали!

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

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

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

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

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

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

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