🖥️ Уточнение требований к компоненту

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

Промпт:

Создай компонент на React, который отображает список задач с возможностью добавления, удаления и изменения статуса. Используй Zustand для управления состоянием. Компонент должен быть адаптивным и поддерживать темную тему.

Чем полезен:

➡️ Ясное описание функционала компонента.

➡️ Упоминание ключевых аспектов, таких как состояние, адаптивность и темная тема.

➡️ Понимание, как использовать Zustand для управления состоянием в компоненте.

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

#буст

🧘

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

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

🍿 Как настроить Source Maps и отладку в продакшене

Source Maps позволяют отлаживать минифицированный код, показывая исходники в DevTools.

Почему важно:

📍 Упрощает отладку ошибок в продакшене

📍 Сохраняет имена файлов и строки из исходного кода

📍 Помогает находить баги без доступа к исходникам на сервере

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

1. Включаем генерацию Source Maps в сборщике:

➡️ Webpack:

module.exports = {
  devtool: 'source-map', // или 'hidden-source-map' для продакшена
  mode: 'production',
};

➡️ Vite:

export default {
  build: {
    sourcemap: true, // true или 'hidden'
  }
}

➡️ Next.js (через next.config.js):

module.exports = {
  productionBrowserSourceMaps: true,
};

2. Решаем, публиковать или нет:

➖ source-map — полностью доступен в DevTools, но может раскрыть структуру проекта.

➖ hidden-source-map — позволяет видеть ошибки и стек-трейсы, но не отображает исходный код в браузере.

➖ nosources-source-map — показывает имена файлов и номеров строк без самих исходников.

3. Используем Sentry, Rollbar, Bugsnag и пр.

➖ Загружайте .map файлы в систему мониторинга ошибок. Это позволит видеть стек-трейсы как будто вы в Dev-режиме.

➖ Пример для Sentry:

sentry-cli releases files your-release upload-sourcemaps ./dist --url-prefix '~/static/js’

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

#буст

🌀 Фишка инструмента Reactime

Reactime — это расширение для Chrome, которое позволяет визуально отслеживать, как меняется состояние приложения, какие компоненты ререндерятся и что запускает useEffect.

Это как DevTools, но с акцентом на время, зависимости и жизненный цикл.

Чем полезен:

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

➡️ Можно наглядно увидеть, как срабатывают useState, useReducer и useEffect — когда и с какими значениями

➡️ Reactime позволяет перемещаться между состояниями и наблюдать, как UI реагирует на изменения — удобно для отладки сложных состояний

Как начать:

1. Установите расширение

2. Откройте React-приложение в режиме разработки

3. Перейдите во вкладку Reactime в DevTools и начните взаимодействие с UI

4. Следите за рендерингом, изменениями стейта и запуском эффектов

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

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

#буст

💬 Общие чаты в команде: за и против

Slack, Telegram, Discord — рабочие чаты стали центром всего: задачи, баги, апдейты, мемы. Удобно… пока не превращается в постоянный шум и расфокус.

🔘 Что удобно:

— Быстро решить вопрос без созвонов

— Видно, кто чем занят

— Меньше митингов, больше живого контекста

— Держит команду в тонусе

🔘 Что бесит:

— Поток отвлечений не прекращается

— Важное тонет в болтовне

— Нарушает фокус и deep work

— Появляется тревожка «а вдруг я что-то пропустил»

Чаты работают, когда в них есть правила: меньше @all, больше тредов, без лишнего шума — и никто не сходит с ума.

❓А как у вас: общие чаты помогают или выматывают? Расскажите, как вы с этим справляетесь👇

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

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

😅

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

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

📌 Подборка статей о Call Stack и микрозадачах

Погружаемся в движок JavaScript: от детальных визуализаций до официальных гайдов Mozilla.

❌ JavaScript Asynchronous Event Loop Deep Dive — детальный разбор трех ключевых компонентов: Call Stack, Task Queue (макрозадачи) и Microtask Queue, с визуализациями и примерами кода.

❌ Visualizing How JavaScript Really Works Behind the Scenes — иллюстрированное объяснение порядка выполнения синхронного кода, микрозадач и макрозадач.

❌ queueMicrotask() в JavaScript: как и зачем использовать — разбор функции для добавления задачи в очередь микрозадач, кейсы применения и преимущества перед setTimeout(..., 0).

❌ In depth: Microtasks and the JavaScript runtime environment — роль микрозадач (Promise, MutationObserver) и их взаимодействие с контекстами выполнения.

❌ How the Event Loop Handles Microtasks and Macrotasks — пошаговое описание цикла Event Loop: сначала все микрозадачи, а уже затем макрозадачи, с примерами «ловушек» асинхронного кода.

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

#свежак

🧪 Feature-флаги во фронте

В проекте нужно включать/отключать экспериментальные фичи для разных пользователей. Вы решаете внедрить систему feature flag’ов.

Рассматриваются такие варианты:

➰ Получение флагов с сервера

➰ Чтение из .env

➰ Флаги на этапе билда

➰ Рендеринг на сервере с разными конфигурациями

Что обязательно нужно учесть при выборе способа ❓

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

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

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

Разработчик JavaScript/TypeScript — до 240 000 ₽, удаленно (Москва)

Frontend-разработчик — от 150 000 до 180 000 ₽, удаленно (Москва)

Frontend Vue & Developer Middle++ — от 2000 до 2500 $, удаленно (ОАЭ)

Senior JavaScript developer — от 290 000 ₽, удаленно (Москва)

Frontend Team Lead — от 350 000 до 400 000 ₽, удаленно (Краснодар)

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

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

#свежак

🌸 Как эффективно использовать Vue Composition API

Vue Composition API позволяет создавать более гибкие, масштабируемые и чистые компоненты, разделяя логику по частям. Вместо того чтобы создавать большие компоненты, мы можем инкапсулировать логику в функции.

Почему важно:

📍 Повышает читаемость и поддерживаемость кода

📍 Облегчает тестирование

📍 Улучшает повторное использование логики

1. Основы Composition API:

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubledCount = computed(() => count.value * 2);

    const increment = () => {
      count.value++;
    };

    return { count, doubledCount, increment };
  },
};

— ref(): создаёт реактивные данные для примитивных типов.

— computed(): создаёт вычисляемые значения.

2. Создание повторно используемой логики:

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

// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;
  
  return { count, increment };
}

Теперь используем в компоненте:

import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment } = useCounter();
    
    return { count, increment };
  },
};

3. Работа с API и асинхронными данными:

import { ref } from 'vue';

export function useFetch(url) {
  const data = ref(null);
  const loading = ref(true);
  
  fetch(url)
    .then(response => response.json())
    .then(fetchedData => {
      data.value = fetchedData;
      loading.value = false;
    });

  return { data, loading };
}

Используем в компоненте:

import { useFetch } from './useFetch';

export default {
  setup() {
    const { data, loading } = useFetch('https://api.example.com');

    return { data, loading };
  },
};

💡 Рекомендации:

— Разделяйте логику на composition functions для улучшения читаемости.

— Используйте ref для примитивов и reactive для объектов.

— Используйте computed для вычисляемых значений, а не для хранения состояния.

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

#буст

👍 Что нового в Next.js

14 июля вышел Next.js 15.4, в котором улучшена производительность и стабильность. Теперь команда next build --turbopack прошла все 8298 интеграционных тестов, что приближает Turbopack к стабильному релизу.

Также был анонсирован первый взгляд на Next.js 16 — следующую мажорную версию, которая принесет новые возможности для разработки.

🔗 Читать подробнее

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

#свежак