👉 @frontendInterview

Оптимизация css стилей

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

Принципы оптимизации загрузки css файлов:
1. Загружаем нужны стили на нужных страницах
2. Сжимаем код
3. Объединяем в один файл
Можно выделить самые важные стили (описание 10-100 самых базовых элементов) и встроить их (inline) в код страницы. Google рекомендует это делать для ускорения прорисовки шаблона/структуры страницы.

Все оптимизации css стилей также лучше автоматизировать с помощью плагинов.

К сожалению, многие CMS (Wordpress, Битрикс) идут с шаблонами, которые изначально сделаны так, как будто они специально хотят замедлить ваш сайт. Оптимизируйте подключаемые js и css файлы - это обязательный этап работы по ускорению скорости загрузки сайта.

👉 @frontendInterview

Разработка веб-приложений GraphQL с React, Node.js и Neo4j

Язык запросов API GraphQL заметно упрощает обмен данными с серверами, позволяя приложениям получать данные в виде простых для понимания графов. Преимущества GraphQL можно усилить за счет таких графовых инструментов и хранилищ данных, как React, Apollo и Neo4j. Подход к разработке графовых приложений полного цикла обеспечивает согласованную модель данных от начала до конца, повышая продуктивность разработчиков. Эта книга научит вас создавать графовые веб-приложения с использованием GraphQL, React, Apollo и базы данных Neo4j, которые все вместе называются GRANDstack.

👉 @frontendInterview

Двумерный массив

Ваша задача - изменить числа на главной диагонали. Все отрицательные нужно заменить на 0, а положительные на 1.

Пример:
Входной массив
[
[-1, 4, -5, -9, 3 ],
[ 6, -4, -7, 4, -5 ],
[ 3, 5, 0, -9, -1 ],
[ 1, 5, -7, -8, -9 ],
[-3, 2, 1, -5, 6 ]
]

Выходной массив
[
[ 0, 4, -5, -9, 3 ],
[ 6, 0, -7, 4, -5 ],
[ 3, 5, 1, -9, -1 ],
[ 1, 5, -7, 0, -9 ],
[-3, 2, 1, -5, 1 ]
]

👉 @frontendInterview

::first-letter

Псевдоэлемент ::first-letter позволяет задать стили для первой буквы первой строки блочного элемента, если перед текстом нет другого содержимого.

Напишем код, выделяющий первую букву в цитате:
blockquote::first-letter {
font-size: 1.86rem;
font-weight: 700;
font-style: italic;
letter-spacing: 0.12rem;
}

Для псевдоэлемента сработает лишь небольшой набор CSS-свойств:
- font и шрифтовые свойства, начинающиеся на font-;
- background и свойства фона, начинающиеся на background-;
- margin и внешние отступы, начинающиеся на margin-;
- padding и внутренние отступы, начинающиеся на padding-;
- border и свойства рамок, начинающиеся на border-;
цвет текста color;
- текстовые свойства text-decoration, text-shadow, text-transform, letter-spacing, word-spacing, line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align.

👉 @frontendInterview

👉 @frontendInterview

word-wrap

Свойство word-wrap управляет переносом длинных слов, если они не помещаются в родительский блок.

Пример того, как можно настроить перенос по символам с помощью word-wrap.
p {
border: 1px solid #fff;
width: 100px;
word-wrap: break-word;
}

Возможные значения:
normal — значение по умолчанию. При этом значении текст будет переноситься по пробелам, специальным символам и тегу <br>.
break-word — слово переносится на любой букве при достижении края родительской области.

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

​scrollbar-gutter

scrollbar-gutter решает проблему с «прыгающей» шириной контента при появлении или скрытии скроллбара. Обычно эта проблема появляется при изменении высоты контента или появлении модального окна.

Проблема со скроллбаром
Например у нас длина контента превышает высоту экрана, поэтому скроллбар виден всегда. Но при появлении модального окна мы прячем скроллбар, задав overflow: hidden у body. Это довольно частое решение — мы не хотим чтобы можно было прокручивать страницу при открытом модальном окне.

Но как это исправить? Можно компенсировать удаление скроллбара добавлением отступов у <body>, но мы сразу натыкаемся на ряд проблем:
- Разные браузеры могут иметь разную ширину скроллбара. И даже если сейчас ширина скроллбара совпадает с общепринятой, разработчикам браузера ничего не мешает поменять её (хоть это и очень маловероятно) в одном из будущих обновлений.
- Есть два типа скроллбара — статичный и оверлей. Оверлей не виден по умолчанию, но появляется поверх страницы при её прокрутке. Если мы добавим отступ при оверлейном скроллбаре, мы не скомпенсируем, а наоборот, добавим сдвиг контента при открытии модалки.
Как-то выглядит совсем запутанно, и написать полноценное кроссбраузерное и кроссплатформенное решение, которое работает всегда и везде, займёт отнюдь не мало времени. К счастью, у нас есть замечательное свойство scrollbar-gutter.

У scrollbar-gutter 3 возможных значения:
auto — дефолтное значение. Если задано overflow: scroll или overflow: auto и контент вызывает переполнение, то появится отступ для скроллбара.
stable — отступ для скроллбара появляется если значение overflow равно hidden, scroll или auto, вне зависимости от того, вызывает контент переполнение или нет.
stable both-edges — то же самое что и stable, но отступы будут создаваться с двух противоположных сторон. При вертикальной прокрутке — справа и слева, при горизонтальной — сверху и снизу.
Во всех случаях не будет создаваться отступ, если скроллбар — оверлейный.
В нашем случае используем scrollbar-gutter: stable чтобы при скрытии прокрутки через overflow: hidden у нас появился отступ вместо скроллбара и контент остался на месте.
html,
body {
scrollbar-gutter: stable;
}

👉 @frontendInterview

Just React!: Learn React the React Way (2022)

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

👉 @frontendInterview

Найти нечетное число

Вам дан массив из чисел. Ваша задача - написать функцию, которая вернет число, которое появляется в массиве нечетное число раз.

👉 @frontendInterview

​​Array.prototype.flat

Метод flat() возвращает новый массив,
var newArray = arr.flat(depth);
в котором все элементы вложенных подмассивов были рекурсивно "подняты" на указанный уровень depth.

Пример:
const arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(); // [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2); // [1, 2, 3, 4, 5, 6]

Также существует и побочное действие, он удаляет неопределенные элементы массива.

Пример:
const arr4 = [1, 2, , 4, 5];
arr4.flat(); // [1, 2, 4, 5]

👉 @frontendInterview