Всем привет!
Сегодня у нас 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Привет! А вы заметили, что вчера не было поста? Причину отсутствия я написал в нашем чате(тык).
Сегодня продолжаем посты! Представьте, что вам нужно создать сложную строку с переменными, многострочным текстом или даже HTML-разметкой. Раньше для этого приходилось использовать конкатенацию (+) и \n для переноса строк. К счастью, начиная с ES6, у нас есть шаблонные строки которые решают все эти проблемы.

Что такое шаблонные строки?
Шаблонные строки — это способ создания строк с использованием обратных кавычек (`). Они позволяют:
1. Вставлять переменные и выражения прямо внутри строки.
2. Разбивать строки на несколько строк без использования специальных символов.

Синтаксис:

текст ${выражение} текст

Примеры использования
1. Вставка переменных

const name = 'Кирилл';
const age = 42;

// Без шаблонных строк
console.log('Меня зовут ' + name + ' и мне ' + age + ' года.');

// С шаблонными строками
console.log(`Меня зовут ${name} и мне ${age} года.`);

Шаблонные строки упрощают вставку переменных

2. Многострочные строки

// Без шаблонных строк
console.log('Это первая строка.\n' +
            'Это вторая строка.\n' +
            'Это третья строка.');

// С шаблонными строками
console.log(`Это первая строка.
Это вторая строка.
Это третья строка.`);

Шаблонные строки поддерживают многострочный вывод без необходимости использовать \n

3. Выполнение выражений

const a = 10;
const b = 5;

console.log(`Сумма равна ${a + b}.`);
console.log(`Результат: ${a > b ? 'a больше b' : 'b больше a'}`);

Вы можете вставлять любые выражения внутри ${}

Преимущества шаблонных строк:
1. Код становится более понятным и компактным.
2. Легко вставлять переменные и выполнять выражения.
3. Удобство создания многострочных строк.
4. Шаблонные строки появились в ES6 и являются стандартом для современного JS.

Практический пример с HTML

 const user = {
  name: 'Кирилл',
  age: 42,
};

const html = `
  <div class="user-card">
    <h2>${user.name}</h2>
    <p>Возраст: ${user.age}</p>
  </div>
`;

document.body.innerHTML = html;

Результат: На странице появится карточка пользователя с его данными.


Небольшой интерактив
Вот исходные данные для нашего мини-задания:

const channelName = 'True Frontender'; // Название канала
const subscriberCount = 1087; // Количество подписчиков
const theme = 'Frontend'; // Тематика канала

Попробуйте создать шаблонную строку, которая выводит информацию о канале в таком формате:

Канал: True Frontender
Тематика: Frontend
Подписчики: 1087

#JavaScript #BestPractices #Practice

Сегодня о концепции, которая уже сейчас вызывает много обсуждений – signals. Что это такое, почему это может изменить ваш подход к управлению состоянием.

Что такое Signals?
Signals – это реактивные примитивы, позволяющие:
1. Декларативно хранить состояние. Вместо традиционных хуков, таких как useState или useEffect, вы работаете с сигналами, которые автоматически отслеживают изменения.

2. Минимизировать лишние перерисовки. Обновляются только те компоненты, которые непосредственно зависят от изменившегося значения.

3. Упростить логику обновления интерфейса. Благодаря более явной зависимости между данными и представлением, ваш код становится чище и понятнее.

Такой подход уже применяется в фреймворках, как SolidJS или Preact, и его адаптация для React открывает новые возможности для повышения производительности и удобства разработки.

Как использовать Signals в реакте?
1. Установите пакет @preact/signals-react.
2. Настройте вашу сборку или используйте хук useSignals
3. Импортируйте функцию signal из пакета и создайте реактивное значение:

import React from 'react';
import { signal } from '@preact/signals-react';

const count = signal(0);

function Counter() {
  return (
    <div>
      <h3>Счетчик: {count.value}</h3>
      <button onClick={() => count.value++}>Увеличить</button>
    </div>
  );
}

export default Counter;

В этом примере:
1. Функция signal(0) создаёт реактивное значение count с начальным значением 0.
2. Компонент перерисовывается автоматически при изменении count.value, избавляя вас от необходимости использовать setState или другие хуки для управления обновлением UI.

Итог
Пакет @preact/signals-react предлагает новый способ управления состоянием, позволяя создавать более декларативный и эффективный код за счёт автоматического и точечного обновления компонентов.

Документация по установке тут https://github.com/preactjs/signals/tree/main/packages/react

#react #Perfomance #JavaScript

В JavaScript есть несколько методов, которые позволяют управлять контекстом исполнения функции. Один из них — это метод call. Что он делает и зачем он нужен?

call — это метод, который позволяет вам вызвать функцию с конкретным значением this и передать аргументы в неё. Простыми словами, он даёт возможность контролировать, в каком контексте будет выполняться функция.

Синтаксис:

functionName.call(thisArg, arg1, arg2, ...);

- thisArg — объект, который будет использован в качестве this в функции.
- arg1, arg2, ... — аргументы, которые передаются в вызываемую функцию.

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

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

const person = {
  name: 'Иван'
};

// Вызовем функцию с использованием call, указав, что контекстом функции будет объект person
greet.call(person);  // Привет, Иван!

В этом примере метод call устанавливает this в контексте объекта person, что позволяет функции greet обращаться к свойствам этого объекта.

Передача аргументов через call:
Метод call может принимать не только контекст, но и дополнительные аргументы, которые будут переданы в вызываемую функцию. Например:

function sum(a, b) {
  console.log(a + b);
}

sum.call(null, 5, 3);  // 8

Здесь null в качестве первого аргумента указывает, что this не будет использоваться в функции sum, и просто передаются значения 5 и 3.

Итого
Метод call — это способ контролировать контекст исполнения функции. Это полезно в случаях, когда нужно явно указать, какой объект будет использоваться в качестве this.

Когда нам нужно сравнить строки с учетом локали, метод localeCompare может стать идеальным инструментом.

Что такое localeCompare?
Метод localeCompare сравнивает две строки с учетом локали, то есть с учетом специфики алфавита и правил сортировки в определенном языке или регионе.

Синтаксис:

str1.localeCompare(str2, locales, options)

- str1: первая строка, которую вы хотите сравнить.
- str2: вторая строка для сравнения.
- locales: (необязательный) строка или массив строк, представляющий локаль или локали, для которых будет выполнено сравнение.
- options: (необязательный) объект, который может включать такие параметры, как чувствительность к регистру и направление сортировки.

Как работает localeCompare?
Метод возвращает одно из следующих значений:
- 0, если строки равны.
- -1, если str1 меньше str2.
- 1, если str1 больше str2.

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

const str1 = 'apple';
const str2 = 'banana';

console.log(str1.localeCompare(str2)); // -1 (apple < banana)

Параметры
В объекте options можно настроить дополнительные параметры:
- sensitivity: чувствительность к регистру и акцентам. Возможные значения:
- base: игнорирует различия в регистрах и акцентах.
- accent: игнорирует только различия в акцентах.
- case: игнорирует только различия в регистре.
- variant: чувствительно ко всем различиям.

Когда использовать localeCompare?
1. Когда вам нужно правильно отсортировать строки, учитывая языковые особенности (например, для сортировки списка имён в разных языках).
2. Если вам нужно сравнить строки с учётом специфики языка (например, "é" может быть приоритетнее "e" в французском языке).
3. В многоязычных приложениях localeCompare поможет правильно сортировать и сравнивать данные, поступающие от пользователя.

Пример сортировки фруктов по алфавиту:

const words = ['ЯблОко', 'АнАнАс', 'ёж', 'грушА'];

words.sort((a, b) => a.localeCompare(b, 'ru', { sensitivity: 'case' }));
console.log(words); // ['АнАнАс', 'грушА', 'ёж', 'ЯблОко']

- В этом примере мы сортируем список слов на русском языке.
- Мы используем локаль 'ru', чтобы корректно отсортировать слова с учетом русской сортировки.
- Параметр sensitivity: 'case' указывает, что регистр символов имеет значение при сравнении строк.

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

#JavaScript #Intl

Каждый из нас хотя бы раз сталкивался с конструкторами в классах. Например, когда вы создаёте новый объект, используя new, конструктор автоматически инициализирует его свойства. Но знали ли вы, что до появления классов (ES6) в JavaScript существовали функции-конструкторы?

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

Что такое функция-конструктор?
Функция-конструктор — это обычная функция, которая используется для создания новых объектов. Она вызывается с помощью оператора new, и при этом:
1. Создаётся новый пустой объект.
2. Новый объект связывается с прототипом функции.
3. Выполняется код внутри функции, где this ссылается на созданный объект.
4. Возвращается созданный объект.

Пример:

function Car(model, year) {
  this.model = model;
  this.year = year;

  this.info = function() {
    console.log(`Модель: ${this.model}, Год: ${this.year}`);
  };
}

const myCar = new Car('Tesla', 2023);
myCar.info(); // Модель: Tesla, Год: 2023

Факт:
Если забыть написать new, this будет указывать на глобальный объект(window).

Пример ошибки:

function Car(model, year) {
  this.model = model;
  this.year = year;
}

const car = Car('Tesla', 2023); // Забыли new
console.log(car); // undefined
console.log(window.model); // 'Tesla' (в браузере)

Используйте строгий режим, который вызывает ошибку, если this используется без new.

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

function Car(model, year) {
  this.model = model;
  this.year = year;
}

Car.prototype.info = function() {
  console.log(`Модель: ${this.model}, Год: ${this.year}`);
};

2. Не забывайте про соглашения из этого поста(тык)
3. Используйте классы, если возможно. Классы — это более современный и читаемый способ создания объектов. Они скрывают детали работы с прототипами и делают код более понятным.

Подведем итоги
Функции-конструкторы — это инструмент, который позволяет создавать объекты одного типа. Однако для их правильного использования важно соблюдать следующие соглашения:
— Используйте заглавные буквы для именования.
— Добавляйте методы в прототип, а не в саму функцию.
— Не забывайте про new при вызове функции.
— Предпочитайте классы для более современного подхода.

#BestPractices #JavaScript #interview

Привет! Давно не было реакта. Давайте начнем эту неделю с него)

В React часто нужно привязывать id к элементам, например, для <label> и <input>. Хардкодить id или генерировать их вручную неудобно. В таких случаях поможет хук useId.

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

import { useId } from "react";

export function Form() {
  const id = useId();

  return (
    <div>
      <label htmlFor={id}>Имя:</label>
      <input id={id} type="text" />
    </div>
  );
}

Теперь id для <input> будет уникальным для каждого инстанса компонента, но при этом не будет меняться при ререндере, что важно для правильной работы формы.

Какие проблемы решает useId?
1. Предотвращает дублирование id, создавая уникальные идентификаторы для каждого экземпляра компонента.
2. Ререндеринг не меняет значение id.
3. Избавляет от необходимости хардкодить id, упрощая поддержку кода и предотвращая ошибки при масштабировании компонентов.

Когда использовать useId?
— Для <label> и <input>, чтобы корректно связать их
— Для ARIA-атрибутов (aria-labelledby, aria-describedby)
— Для генерации id в списках без конфликтов

Когда useId не подойдёт?
- Для глобальных id, которые должны быть одинаковыми в разных компонентах

Вывод
useId полезен в формах, сложных UI-компонентах, списках и ARIA-атрибутах. Он избавляет от необходимости хардкодить id и снижает вероятность дублирования.

#react #BestPractices