The New CSS Reset

В последние годы CSS приобрел ряд новых функций, позволяющих нам сбросить CSS более лаконично, чем раньше. Более того, теперь, в 2021 году, все
эти функции CSS имеют широкую поддержку во всех популярных браузерах. Автор предлагает посмотреть на его вариант современного "ресета" CSS.

Обнаружение ввода определенного текста с помощью 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 — лучший инструмент, который Вы не используете для своих тестов

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