Обнаружение ввода определенного текста с помощью HTML и CSS

Разбор трюка с примером кода.

Демо - https://codepen.io/propjockey/pen/NWjWwLo

Поставьте фокус на окне страницы, нажмите [Alt] + c (windows) / [Control] + [Alt] + c (osx) и введите "wow!".

#js_note

Разница между императивным и декларативным стилем программирования

Императивный стиль

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

function onlyOdd(array) {
let result = []

for (const element of array) {
if (element % 2 !== 0) {
result.push(element)
}
}

return result
}

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

Декларативный стиль

Теперь попробуем ту же функцию написать декларативно, то есть не вдаваясь в детали:

function onlyOdd(array) {
return array.filter((element) => element % 2 !== 0)
}

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

Разница между этими подходами — в деталях реализации. В первом случае детали описываем мы сами, во втором они от нас скрыты.

Решение задач по JavaScript: throttle и debounce

Автор рассматривает 2 распространенные задачи, которые могут вам попасться на собеседовании - throttle и debounce, а также объясняет их решение.

Clickhouse & Grafana: история успеха одних алертов

Пост о настройке алертов на клиентские метрики продукта.

Микрофронтеды: достоинства, недостатки и нюансы

Автор постарался объяснить суть и особенности применения микрофронтендов, что они из себя представляют и какие проблемы решают.

Создание эффекта прозрачного стекла с помощью Three.js

* При загрузке сцены, возможно, придется немного подождать.

Демо - https://tympanus.net/Tutorials/GlassEffect/

Внедрение зависимостей в JavaScript — лучший инструмент, который Вы не используете для своих тестов

Автор статьи объясняет, почему некоторые разработчики пишут юнит-тесты неправильно.

WebSocket: руководство для начинающих

Пост из цикла статей о том, как получить опыт использования веб-сокетов.

​​#js_note

Оператор нулевого слияния

Оператор нулевого слияния (??) это логический оператор, который возвращает значение правого операнда когда значение левого операнда равно null или undefined, в противном случае будет возвращено значение левого операнда.

В отличие от логического ИЛИ (||), левая часть оператора вычисляется и возвращается даже если его результат после приведения к логическому типу оказывается ложным, но не является null или undefined. Другими словами, если вы используете || чтобы установить значение по умолчанию, вы можете столкнуться с неожиданным поведением если считаете некоторые ложные значения пригодными для использования (например, "" или 0). Ниже приведены примеры.

Использование оператора нулевого слияния

В этом примере показано как устанавливать значения по умолчанию, оставив в покое значения отличные от null или undefined.