Сегодня про проблемы начинающих (и не только) разработчиков — использование transition: all. Это может казаться удобным, но на практике часто приносит больше вреда, чем пользы.

Почему transition: all проблема?
CSS-свойств много, и когда вы используете all, вы переходите в режим «а пусть плавно изменится всё». Это может вызвать неожиданные эффекты, если вы добавите или измените свойства в будущем.

Например:

button {
  transition: all 0.3s ease;
}

button:hover {
  background-color: #ff5722;
  transform: scale(1.1);
}

Что произойдёт, если вы решите менять ещё и box-shadow или добавите border? Всё будет анимироваться, даже если вы этого не хотите. В результате — неочевидный баг на проде.

Как правильно?
Используйте только те свойства, которые действительно нужно анимировать:

button {
  transition: background-color 0.3s ease, transform 0.3s ease;
}

Здесь мы явно указали, что хотим анимировать только background-color и transform.

Итог
transition: all — это как "универсальный ключ", который вроде как открывает всё, но может сломать половину замков. Не ленитесь и всегда указывайте только нужные свойства.

#CSS #BestPractices

Простая, но невероятно милая анимация пульсирующего сердца❤️

Посмотреть реализацию можно тут CodePen

Редкий атрибут, про который многие даже не слышали, — это reversed для <ol>. Довольно простая и базовая штука, но, возможно, однажды пригодится)

Что делает reversed?
Вы, наверное, догадались по названию, но если нет — атрибут reversed позволяет отображать элементы списка в обратном порядке нумерации. Вместо того чтобы начинать с единицы, счёт стартует с максимального числа и идёт вниз.

Как работает?
Добавьте этот атрибут к <ol>, например:

<ol>
  <li>Первое место</li>
  <li>Второе место</li>
  <li>Третье место</li>
</ol>

Браузер покажет это так:

3. Первое место  
2. Второе место  
1. Третье место  

Кто-нибудь знал про этот атрибут?

#HTML

Сегодня кажется, что почти каждая команда работает по Scrum или чему-то приближенному. Но довольно часто вижу, что у многих из встреч остаются только базовые. Однако есть одна практика, о которой знают далеко не все — особенно если в вашей команде никогда не было скрам-мастера. Это встреча «Три амиго».

Что это за встреча?
Это встреча на которой пересекаются бизнес, разработка и тестирование, чтобы превратить идеи в понятные, четко сформулированные задачи.

Кто учавствует?
1. Бизнес — задаёт контекст и отвечает на главный вопрос: «Зачем это нужно?».
2. Разработчик — оценивает технические аспекты и предлагает: «Как это сделать?».
3. Тестировщик — добавляет перспективу качества и спрашивает: «Как проверить, что это работает правильно?».

Что происходит на встрече?
1. Разбираются пользовательские истории или фичи, чтобы у всех было единое понимание.
2. Выявляются «узкие места» в реализации, чтобы избежать сюрпризов.
3. Определяются четкие критерии готовности (DoD), чтобы не допустить размытых требований.

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

Что в итоге?
Такие встречи помогают синхронизировать участников процесса, предотвратить недоразумения и экономить время на доработках.

Кто-то из вас участвовал в таких встречах? В моем опыте это довольно редкая практика.
Запущу опрос ниже, чтобы понять, насколько популярна эта практика)

#Scrum #Продуктивность #BestPractices

Разберём Intersection Observer — это API для отслеживания появления элементов в зоне видимости.

Синтаксис выглядит так:

const observer = new IntersectionObserver(callback, options);
observer.observe(targetElement);

Опции для настройки:
1. root — Контейнер, в пределах которого отслеживается пересечение. По умолчанию — null (viewport).
2. rootMargin — Отступы вокруг контейнера, например, 50px 0px отслеживает на 50px раньше.
3. threshold — Уровень видимости элемента (например, 0.5 для 50% видимости или массив значений [0, 0.5, 1], чтобы отслеживать видимость элемента на 0%, 50% и 100%).

Методы:
observe() — Начинает отслеживать указанный элемент.
unobserve() — Прекращает отслеживание элемента.
disconnect() — Полностью останавливает работу Observer.
takeRecords() — Возвращает список всех записей о пересечении, которые ещё не были обработаны.

Что внутри entries и entry?
entries — это массив объектов, содержащих информацию о каждом отслеживаемом элементе.
entry — один из этих объектов. Вот его свойства:
isIntersecting — true, если элемент пересёк границы видимости.
target — сам элемент DOM, за которым ведётся наблюдение.
intersectionRatio — степень видимости элемента (например, 0.5 для 50%).
boundingClientRect — размеры и положение элемента относительно viewport.
intersectionRect — область пересечения элемента с видимой частью контейнера.
rootBounds — размеры контейнера (root), если он указан.

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

P.S Сделал шпаргалку на всякий случай. Сохраняйте чтобы не забыть)

#JavaScript #webapi #шпаргалка

Вчера я рассказывал про Intersection Observer , а сегодня подготовил пример его использования. С помощью Intersection Observer будем "печатать" текст, когда он попадает в зону видимости, и скрывать при прокрутке вверх.

Посмотреть пример можно тут JSFiddle / CodePen

#CSS #HTML #JavaScript

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

Может быть, кто-то помнит бородатые времена UCOZ? У них был довольно прикольный интерфейс в виде рабочего стола.
Я нашел интересный проект, который написан на чистом JavaScript и может быть поднят локально.

Что интересно:
— Написан на чистом JavaScript.
— Можно поднять локально.
— Работает как полноценная операционная система в браузере.

Репозиторий проекта: GitHub
Демонстрация: Puter.com

#JavaScript #OpenSource

Давно не было постов про React. Пора это исправлять) Сегодня про встроенную поддержку метаданных в 19 версии реакта. Теперь можно легко задавать <title>, <meta> и <link> прямо внутри компонентов, без сторонних библиотек.

Что это за фича?
Раньше для изменения метаданных страницы нужно было использовать такие библиотеки, как react-helmet. Но теперь всё стало намного проще, так как React позволяет добавлять метаданные прямо в код компонента, а обновление тегов выполняется автоматически.

Как это работает?
Метаданные можно описывать прямо в JSX, и React автоматически добавит их в <head> страницы.

Пример:

const Post = ({ post }) => {
  return (
    <article>
      <h1>{post.title}</h1>
      <title>{post.title}</title>
      <meta name="description" content={post.description} />
      <meta name="keywords" content={post.keywords.join(', ')} />
      <link rel="canonical" href={post.url} />
      <p>{post.content}</p>
    </article>
  );
}

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

Почему это удобно?
— Теперь метаданные задаются прямо в коде React-компонента.
— Всё обновляется автоматически при изменении компонента.
— Никаких дополнительных зависимостей или сложных настроек.

Кто-нибудь уже успел попробовать или еще сидите на 18 версии?

#react #BestPractices

Хотите сделать скролл плавным и приятным? Вам поможет CSS-свойство scroll-behavior.

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

Какие значения бывают?
auto (по умолчанию): Скролл происходит мгновенно, без плавности.
smooth: Скролл становится плавным

Пример:

html {
  scroll-behavior: smooth;
}

Теперь при переходе к якорным ссылкам или использовании JavaScript для скроллинга ваша страница будет плавно прокручиваться.

Использование в JavaScript:
scroll-behavior также работает в сочетании с методами JavaScript, такими как scrollTo или scrollIntoView.

Пример:

document.querySelector('#button').addEventListener('click', () => {
  document.querySelector('#section').scrollIntoView({
    behavior: 'smooth'
  });
});

Когда использовать:
— Якорные ссылки, чтобы сделать переходы между разделами страницы удобнее.
— Скролл к элементам, например, кнопки "Вверх" или выделенные области.
— Длинные страницы, чтобы пользователь видел плавные анимации и навигация выглядела более дружелюбно.

Посмотреть реализацию можно тут JSFiddle / CodePen

#CSS #JavaScript

Большинство из нас сталкивалось с задачей, когда нужно отформатировать вывод даты. Например, показать, когда было последнее изменение или указать, когда что-то произойдёт. Часто на проектах для этого пишут кастомные решения, но можно не изобретать велосипед и использовать встроенный инструмент Intl.RelativeTimeFormat.

RelativeTimeFormat - это часть API Intl, которая позволяет форматировать относительное время для разных языков. Он поддерживает локализацию, поэтому вы можете сразу получить перевод фраз на нужный язык. Больше не придётся подключать библиотеки вроде i18n или вручную писать переводы.

Пример использования:

const rtf = new Intl.RelativeTimeFormat('ru', { numeric: 'always' });
console.log(rtf.format(-5, 'minute')); // "5 минут назад"
console.log(rtf.format(2, 'day')); // "через 2 дня"

Intl.RelativeTimeFormat принимает следующие аргументы:
1. Локаль — передаётся первым аргументом, например 'ru' или 'en'.
2. Объект опций — опционально передаётся вторым аргументом, где вы можете настроить форматирование.

Что можно передать в опциях?
localeMatcher:
"lookup" — Строгое сопоставление, используется только точное совпадение локали. Если локаль не найдена, будет использована базовая (например, en вместо en-US).
"best fit"(по умолчанию) — Умное сопоставление, использует ближайшее подходящее значение локали. Например, en-GB может быть интерпретирован как en.

numeric:
"auto" — Использует слова вроде "вчера", "завтра", "послезавтра".
"always"(по умолчанию) — Всегда отображает числовое значение, например, "1 день назад".

style:
"long"(по умолчанию) — Полная форма (по умолчанию).
"short" — Сокращённая форма, например, "5 мин назад".
"narrow" — Ещё более сокращённая, например, "5м".

Методы Intl.RelativeTimeFormat:
1. format(value, unit) — Форматирует относительное время, где value — числовое значение (например, -1 или 2), а unit — единица времени (например, 'day' или 'month').

2. formatToParts(value, unit) — Возвращает массив объектов с разбиением форматированного времени на части, где каждая часть описывает, например, число или текст.

3. resolvedOptions() — Возвращает текущие настройки объекта, такие как locale, numeric, style.

Единицы времени для format которые передаются вторым аргументом:
second — секунды.
minute — минуты.
hour — часы.
day — дни.
week — недели.
month — месяцы.
quarter — кварталы.
year — годы.

Итого
Intl.RelativeTimeFormat — это готовое решение, которое позволяет избавиться от сложной логики, сделать код чище и нативные методы для форматирования времени.

#JavaScript