😗😗

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

#pixel_pause

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

#code_challenge #js

💻 Подсказки поверх интерфейса

Shepherd.js — библиотека для пошаговых подсказок в веб-приложении: выделяет элементы интерфейса и последовательно объясняет, что с ними делать.

🔢 Что даёт:

— подходит для онбординга и обучения пользователей
— работает с React, Vue, Angular и чистым JavaScript
— минимальные стили, легко подстраивается под дизайн
— поддержка клавиатуры и стандартов доступности (a11y)

📍 Навигация: [Вакансии]

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

#stack

💻 Параллельная работа с ветками и компактные web-components

Git worktrees: как держать несколько веток в отдельных папках, работать параллельно без stash, безопасно пробовать идеи и быстрее переключаться между задачами. Плюс — пример, как это используют в Cursor для параллельных агентов.

lit-html вместо Lit: компактный подход к кастомным элементам — меньший бандл, light DOM без shadow DOM, простые импорты. На практике: textarea с статус-баром и интерактивные карточки с состоянием и клавиатурной навигацией.

📍 Навигация: [Вакансии]

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

#read_watch

🖍 Почему SPA тормозит после переходов

getEventListeners(window) — полезная команда, если приложение начинает подтормаживать после навигации.

🟡 Обычно причина простая:

обработчики событий не снимаются при размонтировании компонентов и со временем накапливаются в памяти.

🔤 Быстрая проверка:

getEventListeners(window).scroll
getEventListeners(document).click

Если после переходов обработчиков становится больше — вот источник лагов.

📍 Навигация: [Вакансии]

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

#readme

💳 Топ-вакансий недели для фронтендеров

Frontend-разработчик (Middle/Senior) — (от 260 000 до 320 000, удаленно)

Junior Frontend-разработчик (100 000 ₽, офис, Москва)

Frontend-разработчик (Middle) (офис, Санкт-Петербург)

➡️ Больше офферов в канале: @jsdevjob

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

🔥 Хватит плодить массивы

Большинство фронтенд-кода обрабатывает данные задолго до того, как они попадут на экран. Мы привыкли писать так:

data
  .map(...)
  .filter(...)
  .slice(...)
  .map(...)

Читабельно? Да. Но это создаёт кучу промежуточных массивов и делает лишнюю работу. Решение — Iterator Helpers ✅

🖍 Где это полезно:

1. Большие списки
Виртуализация, бесконечный скролл — рендерим только то, что видно:

const visibleRows = rows(data)
  .filter(isInViewport)
  .take(20)
  .toArray();

2. Стримы и API
Работаем с пагинацией без буферизации:

const firstTen = await fetchPages()
  .filter(isValid)
  .take(10)
  .toArray();

3. Чистые пайплайны
Без сторонних библиотек:

const ids = users
  .values()
  .map(u => u.id)
  .filter(Boolean)
  .toArray();

⚠️ Когда НЕ использовать:

— Нужен случайный доступ (`items[5]`)
— Маленький объём данных
— Нужна мутация массива

Поддержка: все современные браузеры и Node 22+

📎 Источник

📍 Навигация: [Вакансии]

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

#under_hood