Пять строк кода.

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

👉 @frontendInterview

Strict Mode

Создайте функцию, которая определит, запущена ли она в строгом режиме (strict mode).

👉 @frontendInterview

Псевдоэлементы для подсветки текста

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

::selection: выделенный текст
::target-text: represents text directly targetted by the document URL’s fragment
::spelling-error: содержимое, которое было помечено user-agent как ошибочное
::grammar-error: содержимое, которое было помечено user-agent как грамматически не верное

Последние два псевдоэлемента еще не поддерживаются браузерами.

Эти псевдоэлементы могут принимать свойства:
- color
- background-color
- cursor
- caret-color
- outline
- text-decoration
- text-emphasis-color
- text-shadow

👉 @frontendInterview

👉 @frontendInterview

Scroll Snap

CSS Scroll Snap позволяет привязать положение прокрутки к местоположению или определённым элементам после того, как пользователь прокрутил страницу.

Если относиться к этому ответственно, привязка прокрутки может стать полезным инструментом. Точки привязки CSS позволяют вам включиться во встроенный в браузер процесс работы с прокруткой без ущерба плавности интерфейса.

Свойство хорошо поддерживается браузерами.

👉 @frontendInterview

👉 @frontendInterview

Как определить местоположение пользователя?

Geolocation API позволяет пользователю предоставлять свое местоположение web-приложению. При вызове метода navigator.geolocation.getCurrentPosition() браузер запросит разрешение на передачу данных о геолокации, в случае разрешения будет вызван первый колбэк, в случае отказа - второй.

В примере реализовано получение координат пользователя через Geolocation API и если геолокация не доступна - используется сервис определения местоположения по ip-адресу

👉 @frontendInterview

Совершенный алгоритм

Алгоритмы — это сердце и душа computer science. Без них не обойтись, они есть везде — от сетевой маршрутизации и расчетов по геномике до криптографии и машинного обучения. «Совершенный алгоритм» превратит вас в настоящего профи, который будет ставить задачи и мастерски их решать как в жизни, так и на собеседовании при приеме на работу в любую IT-компанию.

👉 @frontendInterview

Посчитать слова

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

Примеры:
wordCount("hello there") => 2
wordCount("I'd like to say goodbye") => 6

👉 @frontendInterview

box-sizing

CSS свойство box-sizing определяет как вычисляется общая ширина и высота элемента.

Согласно CSS размеры блока складывается из размера контента, внешних отступов, внутренних отступов и границ. Box-sizing позволяет изменить этот алгоритм, чтобы width и height задавали размеры не контента, а блока.

Расчет размеров блока по умолчанию слегка не очевиден и может причинить немало проблем.

Рассмотрим пример:

 .parent{
   width: 100px;
 }
 .child{
   width: 50%;
   padding: 10px;
 }

Кажется что ширина блока .child должна быть равна 50px, но по факту ширина будет равна половине ширины родителя + левый padding + правый padding = 70px. Разумеется, можно изначально указать размер блока calc(50% - 20px), но это не всегда удобно.

Для решения этой проблемы часто используется переопределение box-sizing для всех элементов, делается это элементарно:

 *{box-sizing: border-box}

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

​Хватит использовать && для условного рендеринга в React

Как работает "&&"
Классический пример использования этого оператора в React выглядит так:
function MyComponent({ condition }) {
return (
<div>
<h1>Title</h1>
{condition && <ConditionalComponent />}
</div>
);
}

Если condition возвращает значение true, <ConditionalComponent /> рендерится, а если false, <ConditionalComponent /> не рендерится.

Почему не надо использовать “&&”
В случае выше, если condition оценен как true или false, ты получаешь то, на что рассчитывал — <ConditionalComponent /> или что он не будет отрендерен. Все пока нормально. Но, если condition не будет оценен как булево значение, это может вызвать проблемы.

Например:
- если condition возвращает 0, 0 будет отображен в UI
- если condition вернет undefined, ты получишь ошибку "Uncaught Error: Error(...): Nothing was returned from render..."

Что использовать вместо “&&”
Чтобы избежать отображения в UI чего-то неожиданного, что может сломать разметку, вроде 0, используй тернарный оператор:
condition ? <ConditionalComponent /> : null;

👉 @frontendInterview