​Хватит использовать && для условного рендеринга в 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

Бесплатное обучение дизайну с нуля. Вместе сделаем портфолио из 4+ работ с личной поддержкой от наставника.

Что вы получите?
— Фидбэк (мощный разбор всех ДЗ от куратора)
— Тусовка (личный кабинет с уроками + живой чат)
— Портфолио и экзамен (упакуем по урокам и проверим)
— Мастер-класс "как заработать на дизайне" и найти клиента

🔥 Будем делать: веб-дизайн, графический дизайн, анимацию интерфейсов.

→ Начать обучение бесплатно

Программа бесплатного курса:
— Обучение по Figma с нуля и 4+ дз с личным разбором
— Изучение основ дизайна (контент, сетки, композиция т.д.)
— Создание анимации интерфейса
— Все о профессии и доходе дизайнера (поиск клиентов и реальный доход)

👉 Первый урок уже сегодня, кликайте сюда и забирайте все бонусы

👉 @frontendInterview

CSS background

CSS3 предоставляет возможность указать несколько фонов для блока одной строкой с помощью короткой записи которая объединяет свойства background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, и background-attachment.

 
background
   url(url.jpg) center / 50% no-repeat, 
   url(url.noscript) top 100% / contain fixed repeat-x,
   linear-gradient(to bottom, #000 0%, #0000 100%),
   #ccc

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

👉 @frontendInterview

Learning TypeScript (2022)

Вы узнаете:
- Преимущества TypeScript и общие характеристики его системы типов
- Почему и как TypeScript полезен поверх JavaScript
- Как информировать свою систему типов с помощью аннотаций типов, предназначенных только для разработчиков
- Как TypeScript анализирует и понимает код, чтобы помочь вам дополнить существующие модели разработки
- Как TypeScript помогает работать с массивами, классами, функциями, объектами и другими важными встроенными конструкциями JavaScript

👉 @frontendInterview

Object extend

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

Примеры:
extend( {a: 1, b: 2}, {c: 3} )
// should === {a: 1, b: 2, c: 3}

extend( {a: 1, b: 2}, {c: 3}, {d: 4} )
// should === {a: 1, b: 2, c: 3, d: 4}

extend( {a: 1, b: 2}, {a: 3, c: 3} )
// should === {a: 1, b: 2, c: 3}

👉 @frontendInterview

Object.freeze и Object.seal в JavaScript.

Object.seal()
1. Предотвращает добавление и / или удаление свойств из запечатанного объекта; использование delete вернет false

2. Делает каждое существующее свойство неконфигурируемым: они не могут быть преобразованы из «дескрипторов данных» в «дескрипторы доступа» (и наоборот), и никакой атрибут дескрипторов доступа не может быть изменен вообще (тогда как дескрипторы данных могут изменить свой writable атрибут, и их value атрибут, если writeable === true).

3. Может выдавать TypeError при попытке изменить значение самого запечатанного объекта (чаще всего в строгом режиме )

Object.freeze()
Делает всё то же самое что и Object.seal плюс предотвращает изменение любых существующих свойств.

👉 @frontendInterview

Оператор void в JavaScript

Я полагал, что мне знакомы все операторы JavaScript до тех пор пока не увидел оператор void, который, как оказалось, присутствует в JS с 1996-го года. Его поддерживают все браузеры, работает он довольно просто. Вот что пишут об этом на MDN:

Оператор void вычисляет переданное выражение и возвращает undefined.

Этот оператор позволяет, например, использовать альтернативную форму конструирования IIFE:

 void function iife() {  
   console.log('hello');
 }();

 // это – то же самое, что и...

 (function iife() {
    console.log('hello');
 })()

По поводу void можно сделать лишь одно замечание, которое заключается в том, что вычисление выражения это… void (undefined)!
const word = void function iife() {
return 'hello';
}();

// word имеет значение "undefined"

const word = (function iife() {
return 'hello';
})();

// word имеет значение "hello"

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

​Оптимизация js скриптов

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

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

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

Итак, вы убедились, что скрипты только нужные, а загружаются они только на нужных страницах. Далее смотрим внутри этих файлов. Сжат ли там код? Если нет, то простое сокращение ненужных символов может сэкономить десятки килобайт. Можно это сделать вручную (например, https://jscompress.com/), а можно с помощью дополнительных сервисов, которые сжимают код всех подключенных js файлов автоматически (например, в Modx это MinifyX).

Следующий этап оптимизации - проверить место подключения js файлов. Чем выше в шаблоне сайта подключение скриптов, тем сильнее их загрузка откладывает отображение основного контента сайта. Не всем скриптам обязательно подключение в разделе head, некоторые можно перенести в самый конец документа перед закрывающим тегом body.

👉 @frontendInterview