True Frontender – Telegram

True Frontender

@truefrontender

1.02K subscribers

143 photos

7 videos

89 links

Сборная солянка про фронтенд.

JavaScript, React, TypeScript, HTML, CSS — здесь обсуждаем всё, что связано с веб-разработкой!

Связь: @pmowq

Download Telegram

About

Blog

Apps

Platform

True Frontender

1.02K subscribers

True Frontender

This media is not supported in your browser

VIEW IN TELEGRAM

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

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

#CSS #HTML #JavaScript

🔥9👀4👍3

650 views11:30

True Frontender

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

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

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

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

#JavaScript #OpenSource

5❤4👍2🔥2

693 views11:41

True Frontender

Всем привет 👋 Начнем эту неделю с очень простой темы)
Если вы хоть раз верстали, то наверняка сталкивались с тегами, которые не нужно закрывать. Сегодняшний пост как раз о них 🙂

Что это за элементы и как они называются?
Void-элементы— это тип HTML-элементов, которые не требуют закрывающего тега. Такие элементы предназначены для случаев, когда контент внутри недопустим. Например, <img> используется для добавления изображений, а <br> — для переноса строки.

Полный список void-элементов:
<area> — для создания активных областей в <map>.
<base> — задаёт базовый URL для документа.
<br> — перенос строки.
<col> — определяет колонки в таблицах.
<embed> — для вставки мультимедиа-контента.
<hr> — горизонтальная линия для разделения секций.
<img> — для добавления изображений.
<input> — для создания полей ввода.
<link> — подключение внешних ресурсов, например, CSS.
<meta> — метаинформация о документе.
<source> — источник для <audio> и <video>.
<track> — субтитры и текстовые дорожки для видео.
<wbr> — возможный разрыв длинного слова.

На что обратить внимание?
1. Не закрывайте void-элементы вручную:


<img src="photo.jpg"></img> <!-- Ошибка -->

2. Void-элементы не могут содержать вложений:


<hr>---</hr> <!-- Так нельзя -->

3. В HTML5 не нужно добавлять слэш перед закрытием:


<img src="example.jpg" alt="Описание"> <!-- Добавляем без слэша -->

Итого
Void-элементы — это HTML-элементы, которые не требуют закрытия, не допускают вложений и в HTML5 не нуждаются в слэше перед закрытием.

#HTML #шпаргалка

Please open Telegram to view this post

VIEW IN TELEGRAM

👍16🔥5

638 views11:27

True Frontender

А как вы относитесь к чату? Он уже есть, но пока он используется только для комментариев к постам. Давайте попробуем сделать его более активным? Возможно, в нём вы сможете найти ответы на свои вопросы по фронту или, наоборот, помочь кому-то.

Если интересно, то предлагаю вступить в чат(тык). А еще его можно найти в профиле канала 😏

Please open Telegram to view this post

VIEW IN TELEGRAM

👀6

711 views16:22

True Frontender

True Frontender pinned a photo

16:22

True Frontender

Давно не было постов про 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

🔥13👍5👀22

621 views11:42

True Frontender

This media is not supported in your browser

VIEW IN TELEGRAM

Хотите сделать скролл плавным и приятным? Вам поможет 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

👍8🔥6🆒1

577 views11:31

True Frontender

Большинство из нас сталкивалось с задачей, когда нужно отформатировать вывод даты. Например, показать, когда было последнее изменение или указать, когда что-то произойдёт. Часто на проектах для этого пишут кастомные решения, но можно не изобретать велосипед и использовать встроенный инструмент 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

👍12🔥7👀1

611 views11:21

True Frontender

Не переживайте, если что-то не работает. Если бы всё работало, вас бы уволили 😏
Эта фраза идеально отражает реальность работы разработчика. Каждый день мы ищем проблемы и решаем их. Давайте разберем, почему ошибки — это нормально и даже полезно.

Если в проекте всё работает идеально, это может означать:
— Вы просто ещё не нашли проблемы.
— Проект больше не развивается и требует обновлений.

В первом случае у вас точно есть задачи. Во втором — проект устарел и, скорее всего, требует доработок или новых решений.

Почему ошибки — это хорошо?
1. Ошибки помогают расти. Каждая исправленная проблема улучшает ваше понимание кода и систем.
2. Программирование — это решение задач. Даже самые опытные разработчики сталкиваются с проблемами, и это нормально.
3. Ваша ценность в умении решать. Неважно, сколько багов появляется. Главное, как быстро и качественно вы их устраняете.

Как правильно относиться к ошибкам?
1. Не принимайте их на личный счёт. Ошибки — это не показатель вашей некомпетентности, а часть рабочего процесса.
2. Учитесь на них. Каждая ошибка — это шанс понять, что пошло не так, и сделать выводы для будущего.
3. Не бойтесь пробовать. Программирование — это эксперименты. Если что-то не получилось, это не провал, а шаг вперёд.

Напоминание

❗️

Ошибки — это то, что делает вас важным специалистом. Исправление багов помогает вам развиваться, улучшает проект и повышает вашу ценность на рынке.
Так что, если сегодня вы застряли на проблеме, помните: если бы всё работало идеально, вашей работы просто не существовало бы🧑‍💻

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

Please open Telegram to view this post

VIEW IN TELEGRAM

❤12👍4👏2

625 views11:43

True Frontender

Привет! Снова начнем неделю с чего-то простого? 🕺

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

Параметры — это имена переменных, которые вы указываете в круглых скобках при объявлении функции. Они как "контейнеры", которые показывают, какие данные функция будет использовать.

Пример:


function greet(name) {
  console.log(`Привет, ${name}!`);
}

Здесь name — это параметр. Он задаёт, что функция greet ожидает какое-то значение, но пока не знает, какое именно.

Аргументы — это значения, которые вы передаёте функции при её вызове. Они «заполняют» параметры.

Пример:


greet('TrueFrontender');

Здесь TrueFrontender — это аргумент, который подставляется в параметр name. Теперь функция знает, с чем ей работать.

Если сложно запомнить, думайте так:
1. Параметры — это "пустые места", которые нужно заполнить.
2. Аргументы — это данные, которые заполняют эти места.

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

А вы когда-нибудь путали параметры и аргументы?

#JavaScript

Please open Telegram to view this post

VIEW IN TELEGRAM

👍11❤4🔥1

496 views11:34

True Frontender

На всякий случай напоминаю, что у нас есть чат(тык). Присоединяйтесь 💪

Буду иногда напоминать про него 😉

Please open Telegram to view this post

VIEW IN TELEGRAM

7👨‍💻2

511 views15:14

True Frontender

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

Что такое NaN?
NaN — это специальное значение, которое указывает на то, что результат вычисления не является корректным числом, хотя его тип всё равно — number. Проще говоря, это невалидное число.

Когда появляется?
1. При некорректных математических операциях:


console.log('abc' / 2); // NaN — строка не может быть поделена на число
console.log(Math.sqrt(-1)); // NaN — нет квадратного корня из отрицательного числа

2. При попытке преобразовать некорректные данные в число:


console.log(parseInt('hello')); // NaN
console.log(Number('world')); // NaN

3. В вычислениях, где уже есть NaN:


console.log(NaN + 10); // NaN
console.log(NaN * 2); // NaN

Почему typeof NaN === 'number'?
На первый взгляд это нелогично:


console.log(typeof NaN); // 'number'

Но причина в том, что NaN — это часть числового типа. Это означает, что NaN является специальным невалидным числом.

Особенности, которые стоит знать
1. NaN не равен ничему, даже самому себе:


console.log(NaN === NaN); // false
console.log(NaN == NaN); // false

Это поведение связано с тем, что NaN используется для обозначения некорректного значения, а некорректные значения не должны считаться равными.

2. Поскольку NaN не равен даже самому себе, обычные проверки не сработают. Вместо этого используйте Number.isNaN:


console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN('abc')); // false — строка не NaN

3. Ранее использовали глобальную функцию isNaN, но она менее точна, так как пытается преобразовать значение в число:


console.log(isNaN('abc')); // true — преобразует 'abc' в NaN
console.log(Number.isNaN('abc')); // false

Итог:
NaN — это особое значение, указывающее на ошибку в вычислениях, когда результат не может быть представлен как число.
Для проверки всегда используйте Number.isNaN и не забывайте валидировать входные данные, чтобы избежать ошибок.

Ставь реакцию, если понравился пост💋

#JavaScript

Please open Telegram to view this post

VIEW IN TELEGRAM

👍17👨‍💻3❤2

546 views11:41

True Frontender

А вы знали, что текст в вебе можно писать не только горизонтально? Разберём, как использовать writing-mode для управления направлением текста.

Что такое writing-mode?
writing-mode управляет направлением текста в вашем документе. С его помощью можно менять стандартный поток текста (слева направо, сверху вниз) на вертикальный или наоборот.

Поддерживаемые значения:
1. horizontal-tb (по умолчанию): текст идёт горизонтально, строки расположены сверху вниз.
2. vertical-rl: текст идёт вертикально, строки расположены справа налево.
3. vertical-lr: текст идёт вертикально, строки расположены слева направо.
4. sideways-rl: текст поворачивается на 90° и идёт горизонтально справа налево.
5. sideways-lr: текст поворачивается на 90° и идёт горизонтально слева направо.

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


.vertical-rl {
  writing-mode: vertical-rl;
}


<div class="vertical-rl">@TrueFrontender</div>

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

#CSS

🔥12👀6⚡2👍1

536 views11:42

True Frontender

В прошлом посте мы говорили о writing-mode и его влиянии на направление текста. Но это только половина дела — теперь давайте разберёмся, как управлять ориентацией символов с помощью text-orientation.

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

Поддерживаемые значения:
1. mixed (по умолчанию): буквы латиницы поворачиваются вертикально, а символы восточных языков остаются прямыми.
2. upright: все символы остаются вертикальными, даже латиница.
3. sideways: символы поворачиваются на 90° и "лежат" горизонтально.

Когда пригодится?
— Настройка типографики для восточных языков.
— Создание креативных макетов, таких как карточки с вертикальным текстом.
— Добавление эффектных дизайнерских решений, которые выделяют текст визуально.

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

#CSS

🔥10👍5

563 views11:33

True Frontender

Всех с пятницей 😏
Начали эту неделю с простой темы и закончим тоже)

Эта тема будет полезна как новичкам, которые только начинают разбираться в JavaScript, так и разработчикам с опытом. Ведь даже те, кто давно пишет на JS, могут забыть нюансы работы нестрогого равенства (==), так как в практике чаще используется строгое равенство (===). Освежим знания и разберем всё по полочкам.

Нестрогое равенство(==):
Этот оператор сравнивает два значения, пытаясь привести их к одному типу. JavaScript автоматически преобразует данные, чтобы попытаться сделать их равными.

Примеры:


console.log(1 == '1'); // true — строка '1' преобразуется в число
console.log(true == 1); // true — true преобразуется в 1
console.log(null == undefined); // true — специальное правило сравнения

Когда нестрогое равенство может сбить с толку:


console.log('' == false); // true
console.log(0 == false);  // true
console.log('  ' == 0);  // true

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

Строгое равенство(===):
Сравнивает значения без изменения их типа:


console.log(1 === '1'); // false — разные типы
console.log(true === 1); // false — разные типы
console.log(null === undefined); // false — разные типы

Почему строгое равенство предпочтительнее?
1. Оно гарантирует, что сравниваются именно те значения и типы, которые вы ожидаете.
2. Устраняет двусмысленность, возникающую при приведении типов.

Обратите внимание:
Нестрогое сравнение работает с приведением типов, но это не значит, что оно всегда плохое. Просто важно понимать, как и зачем оно применяется.

Например, null и undefined равны при нестрогом, но не равны при строгом сравнении:


console.log(null == undefined); // true
console.log(null === undefined); // false

Итог:
В повседневной работе предпочитайте строгое сравнение. Это избавит вас от головной боли.
Используйте нестрогое сравнение осознанно, например, для проверки на null или undefined или в ситуациях, где автоматическое приведение типов упрощает логику.

#JavaScript #interview

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥6👍3👀2

563 views11:41

True Frontender

Всем хороших выходных!

У меня это была одна из тяжёлых недель. Надеюсь, у вас прошло чуть лучше! 😅

А если вдруг захотите что-то обсудить, задать вопрос или просто поболтать — не забывайте, что у нас есть чат(перейти)

☕️

Увидимся на следующей неделе!

Please open Telegram to view this post

VIEW IN TELEGRAM

❤9👾3

589 views16:03

True Frontender

Всем привет!
Сегодня у нас CSS-функция clamp, которая позволяет задавать значения с учетом минимальных и максимальных границ.

Что такое clamp()?
Функция clamp принимает три параметра:
1. Минимальное значение — нижняя граница, меньше которой значение не опустится.
2. Предпочитаемое значение — основное, которое браузер старается использовать, если оно в пределах границ.
3. Максимальное значение — верхняя граница, больше которой значение не вырастет.

Пример:


.element {  
  font-size: clamp(1rem, 5vw, 2rem);  
}

1rem — минимальный размер.
5vw — значение, зависящее от ширины окна (предпочтительное).
2rem — максимальный размер.

Как это работает?
Браузер использует предпочитаемое значение (второй параметр), но только если оно укладывается в рамки. Если выходит за границы, берутся минимальное или максимальное значения.

Пример с шириной окна:
— При ширине 400px: 5vw = 20px, используется 20px.
— При ширине 200px: 5vw = 10px, меньше минимума применяется 1rem (16px).
— При ширине 2000px: 5vw = 100px, больше максимума берётся 2rem (32px).

Полезные нюансы:
1. Если предпочитаемое значение фиксированное и уже укладывается в диапазон, например clamp(5px, 10px, 20px), использование clamp() избыточно.

2. Поддержка есть у большинства современных браузеров, но для IE и других старых версий нужен резервный стиль:


font-size: 16px; /* Fallback /  
font-size: clamp(16px, 5vw, 32px);

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

Почему это удобно?
clamp() идеально подходит для случаев, когда значение должно адаптироваться к размеру экрана, но не выходить за рамки:
1. Адаптивные шрифты
2. Гибкие отступы
3. Ограничения ширины и высоты блоков

#CSS

👍12❤6👀2

521 views11:42

True Frontender

На собеседованиях нередко встречаются вопросы, связанные с ссылочными типами. Сегодня разберём одну из таких задач:


let obj1 = { name: "name 1" };
let obj2 = obj1;
obj1 = { name: "name 2" };

console.log(obj2);

Вопрос: Что будет выведено в консоль?
Ответ: { name: 'name 1' }

Объяснение
Чтобы понять, почему консоль выводит именно { name: 'name 1' }, рассмотрим по шагам, что происходит в коде:
1. Создание объекта и присваивание переменной:


let obj1 = { name: "name 1" };

Здесь переменная obj1 ссылается на объект { name: "name 1" }.

2. Копирование ссылки:


let obj2 = obj1;

Теперь переменная obj2 получает ту же ссылку, что и obj1. Обе переменные указывают на один и тот же объект в памяти.

3. Переопределение переменной:


obj1 = { name: "name 2" };

Здесь переменной obj1 присваивается ссылка на новый объект { name: "name 2" }. При этом переменная obj2 продолжает ссылаться на первоначальный объект { name: "name 1" }.

4. Вывод результата:


console.log(obj2);

Так как obj2 всё ещё ссылается на первый объект, в консоли будет выведено { name: "name 1" }.

Основные моменты:
— Объекты в JavaScript являются ссылочными типами. Это означает, что при присваивании объекта переменной сохраняется не копия объекта, а ссылка на него.
— Когда переменной obj1 присваивается новый объект, это не влияет на переменные которые уже хранят ссылку на предыдущий объект (в нашем случае — obj2).

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

#JavaScript #interview

👍13❤4👀3

506 views11:34

True Frontender

Нейминг — это большая наша проблема. Сегодня пост про нейминг классов)

1. Имена классов в JavaScript пишутся с заглавной буквы и в PascalCase (каждое слово с большой буквы, без пробелов и подчёркиваний).


// Хорошо
class UserProfile {}
class ShoppingCart {}
class ProductItem {}

// Плохо
class userprofile {}
class shopping_cart {}
class productitem {}

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

2. Класс — это, по сути, шаблон для объектов. А объекты обычно представляют сущности (людей, вещи, процессы). Поэтому имена классов должны быть существительными.


// Хорошо
class Car {}
class Order {}
class User {}

// Плохо
class Drive {}   // Глагол
class CalculateOrder {} // Действие

3. Название класса должно отражать его смысл. Чем понятнее имя, тем легче работать с кодом.


// Хорошо
class EventEmitter {} // Генерирует события
class DataFetcher {}  // Загружает данные

// Плохо
class Ef {}  // Что это?
class DF {}  // Непонятно без контекста

Аббревиатуры допустимы, только если они общеизвестны (например, HTTPClient или UIComponent).

4. Некоторые имена уже заняты встроенными классами, например Object, Array, String. Избегайте их, чтобы не перезаписать стандартные объекты.


// Очень плохая идея
class Object {}  
class String {}

5. Если у вас есть несколько схожих классов, используйте постфиксы для ясности:


class User {}
class AdminUser extends User {}   // Расширенная версия User
class GuestUser extends User {}   // Гость
class UserService extends User {} // Обслуживает пользователей

А какие принципы именования классов используете вы?

#BestPractices #JavaScript

👍9🔥4

527 views11:38

True Frontender

Как правильно указывать источник цитаты? Со стороны семантики будет правильно использваит cite. В этом посте постараемся разобраться как его использовать.

Что такое тег <cite>?
Тег <cite> предназначен для обозначения названия какого-либо произведения или источника. Это может быть:
— Книга
— Статья
— Ресурс в интернете
— Исследовательская работа

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

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


<p> В своем посте автор ссылается на канал <cite>True Frontender</cite>, где подробно рассматриваются вопросы фронтенда. </p>

Нюансы и ошибки при использовании <cite>:
1. Тег <cite> следует применять для обозначения названий произведений или источников информации. Его не стоит использовать для выделения имен авторов или других текстовых фрагментов, не являющихся названиями.
2. <cite> помогает поисковым системам и вспомогательным технологиям (например, экранным ридерам) понять, что данный элемент содержит информацию об источнике.
3. В HTML существует также атрибут cite, который используется с тегами <blockquote> и <q> для указания URL источника цитируемого материала. Он никак не связан с тегом <cite>, предназначенным для оформления названий произведений.

Итого. Тег <cite> помогает:
- Обозначить названия произведений и источников информации.
- Улучшить доступность и структурированность страницы.
- Предоставить поисковым системам дополнительную информацию для более качественной индексации.

👍8👀3

643 views11:54

True Frontender

Вью или Реакт? Вот в чем вопрос!

Настало время выяснить, какой фреймворк лучше: Vue или React? Запускаю опрос ниже, чтобы узнать ваше мнение)

Делитесь своим опытом и аргументами в комментариях, а также вступайте(тык) в наш чат для обсуждения)

4👍3

649 views11:44