🎮 Прокачка без курсов: сам себе ментор и тренажер

Подборка интерактивных ресурсов, которые помогут прокачать навыки на практике.

➡️ Flexbox Froggy — классика, которая не стареет: расставляй лягушек по лилиям через Flexbox.

➡️ LittleJS Games / Code Sketches — набор мини-игр, написанных на ванильном JS. Можно редактировать и запускать прямо в браузере.

➡️ JavaScript30 от Wes Bos — 30 мини-проектов без фреймворков: часы, видеоплееры, слайдеры.

➡️ RegexLearn — интерактивное обучение регулярным выражениям: объясняет каждую часть и даёт практику с фидбеком.

➡️ JS Challenger — задачи с автофидбеком по темам: строки, числа, объекты, массивы.

➡️ CSSBattle — нестандартный челлендж: воссоздай фигуру минимальным CSS-кодом.

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

#свежак

❓ Задача: лишний ререндер

Вы заметили, что компонент повторно рендерится при каждом изменении родителя, хотя его пропсы остаются теми же.

В коде используется функциональный компонент, передаётся onClick, определённый внутри родителя как анонимная функция.

Как можно избежать лишнего рендера этого компонента? 😐

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

#междусобойчик

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

Junior Frontend Developer (React) — от 160 000 ₽, офис/гибрид (Москва)

Frontend-разработчик JavaScript — 130 000 - 165 000 ₽, удаленно (Санкт-Петербург)

Software Engineer (JavaScript) — 4 000 - 5 500$, удаленно (США)

Эксперт по web-разработке — 200 000 —‍ 240 000 ₽, удаленно (Москва)

Senior Front-End Developer — от 200 000 ₽, удаленно (Москва)

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

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

#свежак

🎮 Управление состоянием с использованием useReducer

Проблема: управление сложным состоянием в React-приложении может стать трудным и запутанным, особенно при наличии множества состояний и действий.

Решение: в книге «Learn React Hooks, 2nd Edition» автор предлагает использовать хук useReducer для централизованного управления состоянием. Это позволяет более эффективно обрабатывать сложные состояния и действия.

Пример кода:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </>
  );
}

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

— Централизованное управление состоянием.
— Лёгкость в добавлении новых состояний и действий.
— Чистота и предсказуемость кода.

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

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

#буст

⭐️ Инструмент недели: ускоряем сборку фронтенда с Turbopack

Turbopack — новый бандлер от команды Vercel, использующий Rust для ускорения. Однако для крупных и сложных проектов стоит внимательно следить за его стабильностью, так как он все ещё в бета-версии.

Какие еще преимущества:

🔵 С каждым изменением пересобираются только те части приложения, которые изменились, а не весь проект.

🔵 Улучшает работу как с клиентскими, так и серверными компонентами в Next.js.

🔵 Благодаря Hot Module Replacement (HMR) изменения в коде моментально отображаются без перезагрузки страницы, что важно для динамичных интерфейсов.

🔵 Совместим с большинством плагинов Webpack, что упрощает переход. Вы можете продолжить использовать привычные плагины и настройки, но с улучшенной производительностью.

Как использовать:

1. Установите Turbopack:

npm install --save-dev turbopack

2. Для проектов на Next.js просто запустите dev-сервер с флагом --turbo:

npm run dev -- --turbo

3. Для других проектов настройте Turbopack в соответствии с вашей конфигурацией.

🔗 Ссылка на документацию

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

#буст

😂😂

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

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

🧠 AI, который пишет UI вместо вас

Вышел разбор нового инструмента Dualite Alpha — это AI, который генерирует интерфейсы под любые задачи: от лендинга до канбан-доски, даже если вы не дизайнер.

Что в видео:

➡️ Как быстро собрать интерфейс под свой стек (React, Tailwind, Angular и др.)

➡️ Как загрузить макет или фото, чтобы AI превратил его в код

➡️ Как подключать API, редактировать страницы и сразу деплоить

Подойдет тем, кто хочет сэкономить время на прототипировании или быстро собрать фронт для pet-проекта.

🔗 Смотреть видео

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

#буст

🥲 Хотели новый опыт — получили новый вид боли

Сначала всё как в сказке: рендер за миллисекунду, бандл ноль, DX на десятку. А на деле — баги, костыли и ощущение, что ты не код пишешь, а фреймворк отлаживаешь за его авторов.

Вопрос от подписчика:

«Пробовал Solid — вроде быстрый, всё летает, но как только начинаешь что-то серьёзное делать, всё сыпется. Devtools нестабильные, баги вылазят на ровном месте. С Qwik вообще не понял, как с этим жить — ощущение, что дебажу не код, а магию. Marko — прикольный, но куда его вообще девать, кто его реально юзает? Есть тут кто юзал это всё в проде и не пожалел? Или всё это — больше про доклады, чем про реальные проекты?»

❓ Брали ли вы что-то из этих новых фреймворков под реальные задачи?

P.S. Если хотите задать вопрос, заполните нашу гугл-форму. Это займет 5 минут.

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

#междусобойчик

📌 Команда дня: временное сохранение изменений в git

Позволяет спрятать незакоммиченные изменения, переключиться на другую ветку, а потом вернуть их обратно.

git stash

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

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

➡️ Избежать грязных коммитов ради «переключиться на минуту».

➡️ Быстро тестировать что-то в другой ветке, не теряя свою работу.

➡️ Безопасно — можно потом восстановить всё, даже после перезапуска IDE.

💡 Лайфхаки:

— Команда с пояснением:

git stash push -m «фиксы верстки в header»

— Вернуть обратно:

git stash pop

— Посмотреть, что спрятано:

git stash list

— Посмотреть, что внутри:

git stash show -p

— Забрать только нужные файлы:

git checkout stash@{0} -- path/to/file

— Удалить stash после использования:

git stash drop stash@{0}

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

#буст