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

Разработчик фронтенда — от 300 000 до 490 000 ₽, офис/гибрид (Москва)

JS React Frontend Developer — от 4 000 $, удаленно (Москва)

Frontend разработчик (React) — удаленно (Санкт-Петербург)

MultiTrack для фронтенд-разработчиков — от 250 000 ₽, офис/гибрид (Москва)

Senior WEB Developer — от 300 000 ₽, удаленно (Москва)

🔜 Еще больше топовых вакансий — в нашем канале Javascript jobs

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

#свежак

😢 Ключи в списках: почему index ломает

❌ Было:

{items.map((item, index) => (
  <li key={index}>
    <input value={item.name} />
  </li>
))}

➡️ Переставили элементы → React думает, что <li key=0> остался тем же.
В итоге сбивается фокус и теряется ввод.

✅ Стало:

{items.map((item) => (
  <li key={item.id}>
    <input value={item.name} />
  </li>
))}

➡️ Стабильный id сохраняет правильное соответствие элементов, и UI ведёт себя предсказуемо.

💡 Используйте index только если список точно статичен (например, меню без состояния). В остальных случаях всегда нужен стабильный уникальный ключ (id).

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

#hotfix #react

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

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

📂 htmx: быстрый способ оживить интерфейс

Вместо тонны JS-кода можно писать интерактив прямо в атрибутах: hx-get, hx-post, hx-swap, hx-trigger.

➡️ Зачем пробовать:

— Минимум кода, максимум динамики

— Быстрый старт без фреймворка

— Удобно и для пет-проектов, и для прототипов

💡 Не заменит полноценный React/Vue, если нужна сложная логика

➡️ Мини-пример:

<button hx-get="/api/articles" hx-target="#list" hx-swap="innerHTML">
  Загрузить статью
</button>

<div id="list"></div>

Запрос уходит на сервер → HTML-фрагмент прилетает и рендерится в #list.

📎 Подробнее

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

#stack #html

🌪 CSS-баттл

Представим: старт проекта завтра. Что возьмете в основу?

➡️ Tailwind CSS

— Быстрая верстка за счёт утилитарных классов
— Чёткий дизайн-системный язык без лишнего нейминга
— Удобно для больших команд — меньше стиля-разброда

➡️ Styled Components

— Стили прямо в компоненте → чище структура
— Динамика через пропсы без костылей
— Отличная интеграция с React, всё на JS

Голосуем реакциями:

👍 — Tailwind
❤️ — Styled Components

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

#code_battle

🌪 useEffect и зависимости

На картинке 3 кейса:

➡️ Забыли проп в deps → эффект не срабатывает при изменении данных

➡️ Положили объект/функцию → эффект запускается каждый ререндер

➡️ Скаляр в deps → всё стабильно, эффект срабатывает ровно при нужном изменении

⌨️ Совет:

— Всегда указывайте все зависимости эффекта

— Если зависимость нестабильна (объект/функция) → мемоизируйте (useMemo, useCallback)

— Примитивы (строка, число) в deps — самый безопасный вариант

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

#hotfix #react

🧠 Как строить UI-компоненты по принципу атомов, молекул и организмов

Компоненты делятся на уровни:

1️⃣ Атомы — базовые элементы: кнопки, инпуты, иконки.

2️⃣ Молекулы — простые комбинации атомов, например форма поиска.

3️⃣ Организмы — сложные блоки интерфейса, например хедер или карточка товара.

4️⃣ Шаблоны — структура страницы с расставленными организмами, без конкретного контента.

5️⃣ Страницы — финальная реализация шаблонов с реальными данными.

➡️ Зачем это нужно:

— Упрощает повторное использование компонентов

— Делает код предсказуемым и масштабируемым

— Помогает поддерживать дизайн-систему

📌 Atomic Design особенно полезен для больших проектов, где интерфейс постоянно растёт и нужно избегать хаоса в компонентах.

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

#blueprint

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

#pixel_pause

🪄 Как откатить коммит и не потерять работу

Бывает: сделал коммит слишком рано — что-то забыл или добавил лишнее. Удалять изменения не хочется, а переписывать руками — долго.

Решение:

git reset --soft HEAD~1

➡️ Что произойдёт:

— последний коммит исчезнет из истории,
— все изменения вернутся в staged,
— можно поправить и закоммитить заново.

🧠 Идеально для случаев «ой, рано нажал git commit».

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

#readme #git