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

Reset CSS
Сброс CSS - это метод, при котором у всех HTML-элементов удаляются стандартные стили браузера. Цель - предоставить одинаковую стартовую точку для дальнейшей стилизации. Это означает, что все отступы, шрифты и другие стили сбрасываются до нуля.

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

Normalize CSS
Нормализация, в отличие от сброса, не убирает все стили браузера, а корректирует и унифицирует отображение элементов, сохраняя при этом полезные умолчания. Она исправляет ошибки и обеспечивает единообразное отображение в разных браузерах, опираясь на современные стандарты.

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

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

#css

На собеседованиях часто поднимается тема Utility Types в TypeScript Сегодня мы рассмотрим одну из таких утилит – Pick. Этот инструмент позволяет нам создавать новые типы, выбирая из существующих только те свойства, которые нам нужны.

Что такое Pick?
Pick<T, K> — это утилита в TypeScript, которая позволяет создать новый тип на основе типа T, выбрав из него свойства, указанные в K.

Как это работает?
Допустим, у нас есть тип User с несколькими свойствами:

```
type User = {
id: number;
name: string;
email: string;
age: number;
};

```

Мы хотим создать новый тип, который включал бы только name и email пользователя. Вот как мы это можем сделать с помощью Pick:

```
type UserContactInfo = Pick;

```

Теперь UserContactInfo — это новый тип с двумя свойствами: name и email, исключая все остальные свойства из User.

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

#typescript #interview

А вы знаете про псевдокласс :is() в CSS? Эта фича может значительно упростить ваш код и сделать его более читаемым.

Что такое псевдокласс :is()?
Псевдокласс :is() позволяет группировать несколько селекторов в один, применяя к ним общие стилевые правила. Это особенно полезно, когда вы хотите применить одинаковые стили к различным элементам без повторения кода.

Вложенные селекторы
Представьте, что вам нужно применить стили к элементам, находящимся внутри разных контейнеров, но только при определенных условиях. Без :is(), ваш CSS может быстро стать запутанным. Вот где :is() действительно нужен, позволяя вам сократить и упростить ваш код.

Пример использования
Рассмотрим кнопки, расположенные в различных секциях сайта — header, main, footer. Вы хотите применить к ним одинаковые стили при наведении.

Вот как это можно сделать с помощью псевдокласса:

```
:is(.section, .header, .footer) a:hover {
background-color: blue;
color: white;
}

```

Без :is(), ваш CSS выглядел бы так:

```
.section a:hover, .header a:hover, .footer a:hover {
background-color: blue;
color: white;
}

```

Преимущества использования:
- Стили становятся проще для восприятия.
- Вносить изменения становится легче, поскольку они требуют редактирования только в одном месте.

Итого
Использование псевдокласса :is() в вашем CSS может существенно упростить стилевые определения и сделать ваш код более простым. Это одна из тех маленьких фич, которые могут сделать большую разницу в поддержке и разработке ваших проектов.

#css

Всем привет ?! Разберемся с отложенной загрузкой изображений. Этот способо может значительно улучшить производительность и сократить количество трафика.

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

Нативный метод отложенной загрузки
Самый простой и доступный способ - использование атрибута loading с значением lazy в теге <img>. Это говорит браузеру, что загрузку изображения следует отложить до момента, когда оно окажется в области видимости пользователя.

```

```

Преимущества:
- Легкость внедрения.
- Не требует JS, работает сразу после добавления атрибута.

Использование Intersection Observer API
Для случаев, когда требуется больше контроля или когда нативная поддержка отсутствует, на помощь приходит Intersection Observer API. Этот метод позволяет определить, когда изображение входит в область видимости пользователя, и загрузить его.

```

```

```
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});

const lazyImages = document.querySelectorAll('img[data-src]');
lazyImages.forEach((img) => {
observer.observe(img);
});

```

Преимущества:
- Полный контроль над процессом загрузки.
- Возможность использования для других типов контента, помимо изображений.
- Гибкость в обработке событий входа и выхода из области видимости.

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

Привет! На этой неделе мы разберемся, как найти максимальную подстроку без повторяющихся символов. Это не самая популярная, но интересная и не простая задача.

Что мы хотим сделать?
Нужно написать функцию, которая принимает строку и возвращает длину самой длинной подстроки, состоящей из уникальных символов. Например, для строки "abcabcbb", ответ будет 3, потому что максимальная подстрока без повторений - "abc".

Алгоритм решения:
1. Определяем начальный индекс подстроки start и переменную для хранения максимальной длины подстроки maxLength.
2. Создаем коллекцию charIndex для отслеживания символов и их последних позиций в строке.
3. Проходим циклом по каждому символу строки. Если текущий символ уже встречался, обновляем start до его текущей позиции.
4. Добавляем/обновляем позицию текущего символа.
5. Сравниваем текущую длину подстроки с maxLength и обновляем maxLength , если появилось значение больше.
6. Возвращаем maxLength после завершения цикла.

Решение
```
function findLongestSubstring(str) {
// Инициализация начального индекса подстроки и максимальной длины
let start = 0;
let maxLength = 0;
// Создаем коллекцию для хранения символов и их последних позиций в строке
const charIndex = new Map();

// Проходим по каждому символу в строке
for (let end = 0; end < str.length; end++) {
const currentChar = str[end];
// Если символ уже встречался, обновляем начальный индекс подстроки
// чтобы исключить повторяющийся символ
if (charIndex.has(currentChar)) {
start = Math.max(start, charIndex.get(currentChar) + 1);
}
// Записываем или обновляем позицию текущего символа
charIndex.set(currentChar, end);
// Вычисляем максимальную длину, сравнивая текущую длину подстроки с максимальной
maxLength = Math.max(maxLength, end - start + 1);
}

// Возвращаем максимальную длину найденной подстроки
return maxLength;
}

findLongestSubstring('abcabcbb') // Возвращает 3, т.к. максимальная подстрока без повторений - "abc"

```

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

#interview #javascript