Всем привет!

CSS стремительно развивается, появляются новые возможности визуального оформления страниц.

Сегодня давайте обсудим плюсы и минусы разных инструментов для работы со стилями и выберем самый удобный.

➡Читать о стилях

@chulakov_dev

Привет, друзья!

Что такое временная мертвая зона, и какое отношение она имеет к разработке? ☠️ Давайте разбираться!

⚫Временная мертвая зона, или Temporal Dead Zone (TDZ), — это временной промежуток, в течение которого let- и const-переменные не могут быть использованы. Это происходит, когда переменная была инициализирована после попытки обращения к ней.

⚫Как и hoisting, такого понятия, как TDZ, в спецификации ECMAScript не существует. Все это является теоретической базой для понимания того, как работает доступ к определенным сущностям и что тем более ничего не «поднимается наверх», как многие любят об этом рассказывать, упоминая hoisting.

⚫Итак, var-переменные, а также Function Declaration и Generator Declaration доступны из любой точки кода, вне зависимости от их объявления. В отличие от них, let- и const-переменные ведут себя иначе. При попытке обратиться к ним до их инициализации рантайм выбросит ошибку, так как эти переменные находятся во временной мертвой зоне. То же самое касается Function Expression и Generator Expression.

✅ При разработке очень важно понимать теорию о TDZ, так как она позволяет определять, в каких случаях можно или нельзя обращаться к переменным. Более того, выброс ошибки в случае обращения к переменным, когда они находятся в TDZ, может предостеречь нас от ошибок проектирования и нестабильности скрипта/модуля. Напомним, что var-переменная доступна сразу со значением undefined, пока ей не будет присвоено какое-либо значение.

@chulakov_dev

Привет, друзья!

↪ Итак, правильный ответ на вчерашнюю задачу — вариант №1: start -> end -> promise1 -> timer1 -> promise2 -> timer2

Объясняем, почему.

1. Выполняем синхронную задачу console.log("start").

2. Далее идет промис. Это асинхронная операция, и поэтому она помещается в стек микротасок. Она исполнится, как только вернется со статусом fulfilled/rejected.

3. Далее — setTimeout. Он выходит из Main Thread, поэтому также не выполняется.

4. Выполняем синхронную задачу console.log("end"), т.к. в предыдущем тике микротаска еще не была исполнена.

5. В этом же тике у нас готова микротаска. Выводим promise1 и выпускаем setTimeout из основного потока.

6. У нас вернулся timer1. В нем выводится такая же строка и запускается выполнение промиса. Тут очень важный момент — в текущем тике у нас нет синхронных задач (timer2 еще гуляет вне потока), а значит, можно сразу выполнить микротаску с выводом promise2.

7. Возвращается timer2 и выводится в консоль.

🤔 Если у вас остались вопросы — задавайте, будем разбираться вместе.

Привет, друзья!

В этом посте мы хотим развеять несколько мифов относительно Event Loop и рассказать про некоторые его особенности.

↪ Event Loop — обычный агент, который не является частью ядра V8. Тот цикл событий, который вы привыкли видеть, — Event Loop спецификации HTML5, который, помимо JS, работает также и с DOM, и с Web API. В конце концов, у Node.js реализован свой Event Loop, который отличается от клиентского.

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

↪ Код может выходить из Main Thread, даже если вы не создавали воркер. Например, функции setTimeout или setInterval. Но стоит помнить, что любая функция, которая осуществляет подобное, является частью Web API, включая воркеры, так как ни одна сущность, реализуемая ядром V8, не дает сделать ничего подобного.

А какие особенности Event Loop знаете вы?

@chulakov_dev

Всем привет!

Как правильно ответить на вопрос «Что такое чистая функция?», если различные источники дают разные трактовки? Кажется, мы нашли лучшее определение этому понятию. Следите за ходом мысли.

➡ Функция должна иметь только одну точку входа и только одну точку выхода из нее. Давайте назовем их ординарными, так как эти точки работают максимально ожидаемо. Следовательно, максимальная ожидаемая точка входа — это аргументы функции, а точка выхода — оператор return.

Почему только по одной точке на вход и выход?

⚫ Абсолютно любой другой вход в функцию — это использование внешних переменных, функций и т.д. — побочное действие.
⚫ Абсолютно любой другой выход из функции — присвоение значений внешним переменным, операции ввода/вывода, HTTP-запросы — побочное действие.

В итоге мы имеем следующее определение:

Чистая функция — это функция, которая имеет только одну ординарную точку входа (ее аргументы) и одну ординарную точку выхода (оператор return).

+1 понятие в вашу копилку.

@chulakov_dev

Всем привет!

Давайте разберем вчерашний вопрос «Какой функциональный объект в JS можно назвать функтором?».

✅ Правильный ответ — вариант № 2: объект, реализующий метод map.

Объясняем, почему.

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

ℹ Теперь давайте рассмотрим другие варианты.

Sort — изменяет входной массив, т.е. он не является чистой функцией.

Reduce — также может вернуть аналогичную структуру, но это не гарантированно, т.к. он более универсален.

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

Если остались еще вопросы, задавайте.

@chulakov_dev

Привет, друзья!

🤔 Интересно, вы когда-нибудь слышали о методе requestIdleCallback?

Сегодня поговорим о нем.

⚫️Метод requestIdleCallback очень редко используется, но в некоторых моментах он может значительно оптимизировать ваш код. Его суть заключается в следующем: метод принимает в качестве первого аргумента колбэк, который ставит в очередь Task Queue, и этот колбэк выполняется, когда браузер находится в режиме простоя.

Другими словами, когда браузеру «нечего делать», он может взять функцию, переданную через requestIdleCallback, и выполнить ее, тем самым не мешая выполнению других задач, когда это необходимо.

⚫️Вторым аргументом он принимает дополнительные параметры, но пока реализован только один — timeout. В нем вы можете указать максимальное время (в миллисекундах), которое потребуется колбэку на выполнение. Если он не уложится в отведенное вами время, выполнение колбэка прервется.

Этот метод пока не поддерживается в Safari, но мы надеемся, что специалисты из Apple вскоре реализуют такую классную возможность.

@chulakov_dev