💳 Подборка свежих статей

1️⃣ Кастомизация Keycloak

➡️ Для тех, кто работает с авторизацией. Покажет, почему Freemarker неудобен и как Keycloakify на React/TS упрощает кастомизацию UI.

2️⃣ Бесшовный старт в Angular

➡️ Для фронтендеров на Angular и SPA. Рецепт, как убрать «белый экран» при загрузке и сделать старт плавным.

3️⃣ Отображение четырёхмерного пространства на двухмерную плоскость

➡️ Для любителей графики и математики. Как построить и визуализировать тессеракт в WebGL.

🐸 Библиотека фронтендера

#read_watch #react #angular #js

🔑 Cортировка по нескольким ключам

Когда нужно отсортировать массив объектов сразу по нескольким полям — вместо вложенных if можно сделать так:

const sortBy = (arr, keys) => [...arr].sort((a, b) =>
  keys.reduce((res, k) => res || (a[k] > b[k] ? 1 : a[k] < b[k] ? -1 : 0), 0)
);

Где пригодится:

➡️ Сортировка таблиц и списков в UI;

➡️ Подготовка данных из API;

➡️ Фильтры («сначала по категории, потом по цене»).

⚡️ reduce + sort = компактный способ заменить кучу if-else и делать гибкую сортировку по любым ключам.

🐸 Библиотека фронтендера

#readme #js

⭐️ Небольшая задачка на логику

Посмотрите на код (он в картинке 👆).

Какой ответ выведет консоль ❓

Объясните, почему вывод именно такой. Почините код, чтобы выводилось корректное значение счётчика.

Подсказка: исправьте код без использования bind и дополнительных временных переменных.

Ответ в комментах скрывайте под спойлер 😉

🐸 Библиотека фронтендера

#code_challenge #js

💳 Подборка свежих статей

1️⃣ $220K в месяц на рендеринге JavaScript

История Prerender — как простой сервис для индексации JS-сайтов вырос в SaaS с органическим ростом и стабильной выручкой.

2️⃣ «Фулстек JavaScript: Секреты для миддлов»

Обзор книги Милесии МакГрегор: переход от middle к senior, работа с legacy, архитектурные решения в NestJS и React, DevOps-подходы и важность soft-skills.

3️⃣ SolidJS под капотом: для React-разработчиков

Перевод статьи о том, как работает реактивная библиотека без виртуального DOM: сигналы, эффекты, прокси-хранилища и ловушки вроде деструктуризации пропсов.

🐸 Библиотека фронтендера

#read_watch #js #react

🔑 Ограничение частоты вызова (throttle)

Когда обработчик срабатывает слишком часто (scroll, resize, mousemove) — он грузит браузер и рендер.

➡️ Решение: ограничиваем вызовы по времени с помощью throttle.

➡️ Где пригодится:

— Индикатор прогресса при скролле;
— Drag&drop;
— Частые API-запросы (real-time).

⚡️ Экономит ресурсы и делает UI отзывчивее. Компактная реализация без lodash.

🐸 Библиотека фронтендера

#readme #js

🌸 Разбор задачи на this: почему счётчик выводит NaN

Раннее мы выкладывали задачу 📎

Правильный ответ: NaN

➡️ Почему так:

— В setTimeout обычная функция → её this указывает на window (или undefined в strict).

— У глобального объекта нет count.

— undefined++ → NaN.

✅ Фикс без bind и переменных:

function Counter() {
  this.count = 0;

  this.start = function() {
    setTimeout(() => {
      this.count++;
      console.log(this.count);
    }, 1000);
  }
}

📌 Стрелочные функции берут this из окружения, а не создают свой.

🐸 Библиотека фронтендера

#code_challenge #js

🧩 Задача на понимание устройства JS

В цикле навешиваются обработчики на элементы списка.
Однако при клике на любой пункт в консоль выводится одно и то же число 🤔

❓ Как исправить поведение, чтобы при клике выводился правильный индекс элемента:

❤️ — Заменить var i на let i

🔥 — Заменить стрелочную функцию на обычную

⚡️— Перед циклом сделать i = 0;

🐸 Библиотека фронтендера

#code_challenge #js

🔗 Подборка свежих статей

1⃣ Создаем иммерсивную трехмерную визуализацию погоды

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

2⃣ Почему @starting-style не заменит keyframes

Автор показывает, что за красивым синтаксисом скрываются подводные камни специфичности и неожиданные баги, из-за которых старые добрые keyframes по-прежнему оказываются надёжнее.

3⃣ Почему исходный код TypeScript усеян var-ами

🐸 Библиотека фронтендера

#read_watch #react #js #ts