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

0:04

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

True Frontender

Что лучше?

Anonymous Poll

118 voters604 views11:44

True Frontender

Всем хорошей пятницы и выходных!
Заканчивайте работать и учиться программированию. Проведите этот вечер со второй половинкой или с собой любимым ❤️

А еще напоминаю, что посты возобновятся в понедельник. На выходных у меня выходной 🏝

Please open Telegram to view this post

VIEW IN TELEGRAM

❤125

616 views16:32

True Frontender

Привет! Отдохнули? А теперь можно и задачи порешать 👨‍💻

Сегодня у нас задача, которая проверит понимание работы блоков try, catch и finally. Я взял ее с собеседования на позицию мидла.

Рассмотрим следующую функцию:


function someFn() {
    try {
        if (Math.random() <= 0.5) {
            throw new Error("error");
        }
        return 1;
    } catch (e) {
        return 2;
    } finally {
        return 3;
    }
}

console.log(someFn());

Что выведет эта функция в консоль и почему?

Для того чтобы найти ответ, давайте разберем работу блоков try, catch и finally:

1. Блок try:
— В этом блоке выполняется код, который может вызвать ошибку.
— Если условие Math.random() <= 0.5 истинно, выбрасывается ошибка с помощью throw new Error("error").
— Если условие ложно, выполнение доходит до строки return 1.

2. Блок catch:
— Этот блок срабатывает, если в блоке try была выброшена ошибка.
— В нашем случае, если ошибка возникает, выполнение переходит в блок catch, где возвращается значение 2.

3. Блок finally:
— Блок finally всегда выполняется, независимо от того, произошла ли ошибка или нет.
— Если в блоке finally есть оператор return, он перезапишет любое значение, которое было возвращено ранее.

Что будет выведено?
Независимо от того, выполнился блок try или catch, значение, которое вернёт функция, всегда будет определяться блоком finally. Поскольку в блоке finally стоит return 3, именно это значение будет возвращено функцией.

Ответ:

console.log(someFn()); всегда выведет 3 .

#interview #JavaScript

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥14👨‍💻6👀3

562 views11:49

About

Blog

Apps

Platform