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

Senior Frontend Developer (Angular 15) — 3 500 —‍ 6 000 €, relocation (Cyprus)

Frontend Developer (React) — 150 000 ₽, удаленно

Frontend-разработчик — офис (Москва)

Frontend vue.js developer — удаленно (Москва)

Frontend Team Lead — от 350 000 ₽ до 400 000 ₽, удаленно

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

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

#свежак

🎮 Обработка форм с использованием useActionState

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

Решение: в книге «Learn React Hooks, 2nd Edition» автор предлагает использовать хук useActionState для управления состоянием формы, включая её отправку и обработку ошибок.

Пример кода:

import React, { useState } from 'react';

function useActionState(initialState) {
  const [state, setState] = useState(initialState);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState(null);

  const submit = async (action) => {
    setIsSubmitting(true);
    try {
      await action();
      setState(initialState);
    } catch (err) {
      setError(err);
    } finally {
      setIsSubmitting(false);
    }
  };

  return { state, isSubmitting, error, submit };
}

function LoginForm() {
  const { state, isSubmitting, error, submit } = useActionState({
    username: '',
    password: '',
  });

  const handleSubmit = () => {
    submit(async () => {
      // Асинхронная отправка данных
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={state.username}
        onChange={(e) => setState({ ...state, username: e.target.value })}
      />
      <input
        type="password"
        value={state.password}
        onChange={(e) => setState({ ...state, password: e.target.value })}
      />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Submitting...' : 'Submit'}
      </button>
      {error && <p>{error.message}</p>}
    </form>
  );
}

Преимущества:

— Управление состоянием формы и её отправкой.
— Обработка ошибок и асинхронных операций.
— Упрощение кода формы.

➡️ Еще больше полезных книг — в нашем канале @progbook

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

#буст

📌 Команда дня: очистка кэша и зависимостей

Полная зачистка проекта, когда «ничего не работает, а вчера работало».

rm -rf node_modules dist .vite && npm cache clean --force && npm install

Используется при переходе между ветками, конфликте зависимостей или странных сборках 💡

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

— Удаляет артефакты и кэш, которые могут ломать сборку.

— Позволяет начать «с нуля» без удаления проекта.

— Помогает при миграции зависимостей или обновлении сборщиков.

Лайфхаки:

➡️ Добавьnt alias в .zshrc или .bashrc:

alias resetnode="rm -rf node_modules dist .vite && npm cache clean --force && npm install»

➡️ Для monorepo можно чистить весь workspace:

rm -rf node_modules && lerna clean && lerna bootstrap

➡️ Если используете pnpm:

pnpm store prune && pnpm install --force

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

#буст

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

#развлекалово

⭐️ Чеклист: CI для фронтенда

CI — ваш честный ревьюер. Он проверит, не забыли ли вы запустить тесты, форматировать код и не сломал ли билд.

1️⃣ Автоматическая сборка проекта

— Убедитесь, что build проходит на каждом коммите

— Добавьте проверку на размер бандла (webpack-bundle-analyzer, size-limit)

— Сравнивайте метрики между коммитами (например, с CI compare или Bundlewatch)

➡️ npm run build, vite build, next build

2️⃣ Линтинг и форматирование

— Настройте ESLint (с правилами под ваш стек: React, TS и т.д.)

— Подключите Prettier с автоформатированием

— Проверяйте линт перед пушем через lint-staged и husky

➡️ eslint ., prettier --check .

3️⃣ Юнит- и интеграционные тесты

— Запускайте тесты на каждый PR

— Покрывайте бизнес-логику, хуки, компоненты

— Минимум: jest + @testing-library/react

➡️ jest --coverage, vitest, c8

4️⃣ Проверка типов

— Включите строгую проверку TypeScript

— Ошибки типов — повод не пускать PR в main

— Не забудьте проверить .d.ts и внешние типы

➡️ tsc --noEmit, tsc -p tsconfig.json

5️⃣ Проверка production-конфига

— Убедитесь, что .env.production загружается правильно

— Добавьте в CI проверку на наличие всех нужных переменных

— Прогоните Lighthouse/Pa11y, если хочется extra-модуль

➡️ dotenv-linter, dotenv-cli, pa11y-ci

6️⃣ Визуальные/регрессионные тесты (опционально)

— Снимайте скриншоты UI (Storybook + Chromatic, Percy)

— Ловите баги до ревью

— Можно запускать раз в день/неделю в cron-режиме

7️⃣ Бейджики и отчёты

— Добавтеь бейджи покрытия, билда и линта в README

— Публикуйте отчёты в MR/PR

— Настройте уведомления в Telegram/Slack

➡️ Codecov, Coveralls, GitHub Actions Summary

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

#буст