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

📌 Подборка инструментов и плагинов в Figma

🔵 Figma to Code — автоматическая генерация React/HTML/Flutter кода из макетов.

➤ Отлично подходит для быстрой верстки прототипов и MVP.

🔵 Design Lint — помогает находить несогласованные отступы, цвета, стили и т.д.

➤ Снижает количество дизайнерских багов до передачи в разработку.

🔵 Figma Tokens — управление дизайн-токенами (цвета, типографика, spacing) напрямую в Figma.

➤ Подходит для проектов с дизайн-системами.

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

#свежак

🧠 Проверьте внимательность и интуицию

В тексте на картинке скрылись 5 названий популярных фронтенд-технологий. Некоторые замаскированы, другие — спрятаны внутри слов или фраз.

Получилось найти хотя бы три? Пишите ответы в комментариях ✏️

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

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

🧠 Проверьте внимательность и интуицию

В тексте на картинке скрылись 5 названий популярных фронтенд-технологий. Некоторые замаскированы, другие — спрятаны внутри слов или фраз.

Получилось найти хотя бы три? Пишите ответ в комментариях ✏️

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

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

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

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

🤨 Как избежать ошибок при использовании useEffect в React

useEffect — один из самых мощных, но одновременно и самых коварных хуков в React. Даже опытные разработчики порой сталкиваются с неожиданным порядком выполнения эффектов.

О чем статья:

📍 Как работает useEffect и как избежать типичных ошибок

📍 Почему порядок вызова эффектов зависит от React Fiber

📍 Чем useLayoutEffect отличается от useEffect

📍 Как понимать жизненный цикл компонентов через призму архитектуры React

С примерами, визуализациями и разбором кода — всё, что нужно для глубокого понимания и уверенной работы с эффектами в React 🔗

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

⭐️ Запускаем кастомные скрипты в WebStorm

В больших проектах рутина часто повторяется — запуск тестов, сборка, форматирование, генерация кода. Автоматизация через кастомные скрипты — лучший способ ускорить работу. Но еще руче — запускать их одним нажатием клавиши.

1️⃣ Создаем External Tool

➡️ В меню: File > Settings > Tools > External Tools

➡️ Добавьте новый инструмент, указав путь к скрипту (например, npm run lint или bash-скрипт) и настройте рабочую директорию

2️⃣ Привяжем горячую клавишу

➡️ Перейдите в Settings > Keymap и в поиске введите название External Tool

➡️ Правый клик → Add Keyboard Shortcut → назначь удобную комбинацию

💡 Комбинируйте запуск скриптов с WebStorm Live Templates и макросами для ещё более мощного ускорения.

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

#буст

🚨 Смешные новости про IT теперь в одном канале

Мы запустили @hahacker_news — наш новый юмористический IT-канал.

Туда будем постить лучшие шутки до 19го мая, которые вы присылали на конкурс.

👉 @hahacker_news — голосование уже идёт, переходите, читайте, угарайте и оставляйте реакции

❓Как сгенерировать пользовательский путь из PRD

Один из эффективных подходов — использование ChatGPT для генерации пользовательских путей на основе документации продукта.

Промпт:

Generate a user flow based on this PRD. Describe the pages, features, and major states.

Почему это полезно:

➡️ Позволяет быстро перейти от концепции к визуальному представлению интерфейса.

➡️ Помогает организовать мысли и определить основные компоненты интерфейса.

➡️ Подходит для различных проектов и технологий.

🔗 Этот подход был подробно описан в обсуждении на Reddit, где участники делились своими методами использования AI для ускорения разработки.

Пример использования:

Представим, что у нас есть PRD для приложения по доставке еды:

Generate a user flow based on this PRD: An app that allows users to order food from local restaurants, track delivery in real-time, and provide feedback after receiving the order.

ChatGPT предоставит описание пользовательского пути, включая страницы, функции и основные состояния.

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

#буст

Лайф 🤩

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

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

👓 Как ускорить сборку с Webpack

Когда проект растёт, время сборки может стать серьёзной проблемой. Рассмотрим несколько методов для ускорения процесса с помощью Webpack.

1️⃣ Persistent Caching

Использование файлового кэша позволяет избегать повторной сборки неизменённых модулей.

Как настроить:

cache: {
  type: 'filesystem',
}
➡️ WebPack не пересобирает всё с нуля, а использует кэшированные данные, что сокращает время сборки.

2️⃣ Tree Shaking

Удаление неиспользуемого кода, чтобы уменьшить размер бандла.

Как настроить:

optimization: {
  usedExports: true,
}

➡️ Webpack отслеживает, какие части кода не используются, и исключает их из финальной сборки.

3️⃣ Module Federation

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

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

Как настроить:

cache: {
  type: 'filesystem',
}

➡️

 WebPack не 

➡️ Модульная загрузка помогает минимизировать размер бандлов и ускоряет загрузку.

4️⃣ Минификация с Terser

Минификация и сжатие JavaScript-кода для уменьшения его размера.

Как настроить:

optimization: {
  minimize: true,
  minimizer: [new TerserPlugin()],
}

➡️ Сжатие кода уменьшает его объём и ускоряет загрузку.

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

#буст