🐞 Как быстрее находить и устранять баги
Вместо того чтобы часами гуглить странный баг, проще сразу задать точный вопрос. Особенно если ошибка связана с нюансами рендеринга или useEffect в Next.js — ИИ часто видит то, что пролетает мимо глаз даже опытных разработчиков.
Промпт:
Что дает промпт:
➡️ Быстрая диагностика ошибок рендеринга, хуков и async‑логики
➡️ Подсветка edge-case’ов, которые сложно заметить вручную
➡️ Конкретные рекомендации по фиксам с пояснением логики
💡 Дополнительно можно запросить:
— Альтернативные способы написания кода без ошибки
— Пояснение, почему ошибка проявляется только в проде
🐸 Библиотека фронтендера
#буст
Вместо того чтобы часами гуглить странный баг, проще сразу задать точный вопрос. Особенно если ошибка связана с нюансами рендеринга или useEffect в Next.js — ИИ часто видит то, что пролетает мимо глаз даже опытных разработчиков.
Промпт:
Why am I getting this error in my [framework] component?
[вставь сообщение об ошибке и кусок кода]
Или конкретнее:
I'm getting a hydration error in Next.js 13 when using useEffect.
Here’s the component — how can I fix it?
Что дает промпт:
— Альтернативные способы написания кода без ошибки
— Пояснение, почему ошибка проявляется только в проде
#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
😁12👍1
Please open Telegram to view this post
VIEW IN TELEGRAM
😁19😢2🌚2
Parcel — это бандлер, который позволяет собирать фронтенд без настройки Webpack’а, Vite или Rollup. Он сам определяет, как обрабатывать файлы, и просто работает из коробки.
Зачем нужен:
Как использовать:
1. Установите Parcel в проект:
npm install --save-dev parcel
2. Создай простой index.html и укажи путь к JS-файлу:
<script src="./index.ts"></script>
3. Запустите дев-сервер:
npx parcel index.html
4. Соберите проект для продакшна:
npx parcel build index.html
Что важно знать:
— Parcel сам создаёт конфигурации Babel, TypeScript и PostCSS, но ты можешь переопределить их, если нужно.
— Поддерживает alias’ы, .env-файлы и monorepo через workspaces.
— Идеально подходит для новичков, быстрых MVP или проектов, где хочется меньше ceremony.
— Отлично сочетается с React, Vue, Preact и VanillaJS.
#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4❤3🔥2
Современный веб давно вышел за рамки «страниц» — PWAs поддерживают офлайн и устанавливаются как обычные приложения. Но достаточно ли этого для полной замены нативного клиента?
— Мгновенная установка: «Добавить на главный экран» без ожидания модерации
— Автоматические обновления: пользователи всегда на последней версии (Pinterest PWA +60% конверсии)
— SEO и открытость: индексируются поисковиками — новые аудитории через Google
— Кроссплатформа: единый код для веба, Android и iOS
— iOS-барьеры: фоновые уведомления и Web Push в iOS работают только в активном окне
— Ограниченный API-доступ: нет полного доступа к AR/VR, Bluetooth LE, NFC и другим системным фичам
— Системные бейджи и deep linking: натив реализует их куда глубже (SMS-связывание, Universal Links)
— Heavy-duty кейсы: игры с высокой частотой кадров, фоторедакторы или видео-стриминг требуют нативной производительности.
Когда что выбрать:
#междусобойчик
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔4❤2👍2
Radix UI — это не просто компоненты, а гибкий набор примитивов с точным контролем поведения. Вот несколько фишек, которые можно использовать:
Большинство компонентов (Dialog, Popover, DropdownMenu) можно открыть/закрыть вручную через open и onOpenChange. Это удобно для синхронизации с глобальным состоянием или URL.
<Dialog open={isOpen} onOpenChange={setIsOpen}>
{/* ... */}
</Dialog>
По умолчанию контент рендерится в body через Portal. Но если нужен рендеринг в текущем DOM (для стилизации, тестирования или ограничения области), вы можете отказаться от портала.
<Dialog.Content>
{/* ... */}
</Dialog.Content>
Radix по умолчанию удаляет элементы из DOM при скрытии. Чтобы включить CSS-анимации ухода (opacity, scale, transform), используйте forceMount.
<Dialog.Content forceMount className="fade-out-animation">
{/* ... */}
</Dialog.Content>
Вы можете вкладывать один компонент в другой — например, Popover в DropdownMenu или Dialog в Tabs. Radix правильно обрабатывает фокус, события и поведение, даже в сложных вложенных интерфейсах.
Radix UI даёт не просто готовые элементы — он предоставляет гибкий интерфейсный слой, который адаптируется под архитектуру вашего приложения.
#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👍2
Обновление браузера принесло фичи, которые открывают новые возможности в UI и улучшении пользовательского опыта.
В карточках разберем:
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12❤2🔥2
Please open Telegram to view this post
VIEW IN TELEGRAM
😁18
Когда берёшься за новый проект, не хочется тратить время на выбор — просто ставишь то, с чем уже давно удобно. У каждого свой набор: кому-то без Tailwind некомфортно, кто-то кидает Zustand даже в самые простые задачи.
У меня сейчас так:
– Vite
– Tailwind + shadcn/ui
– Zustand
– jQuery
– Авторизация на скорую руку
Не идеал, но работать можно. Всё лишнее — позже, если понадобится.
Если постик зашёл, то поддержите бустом канала
#междусобойчик
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔14👍9❤1
В этой подборке — лучшие статьи, симуляторы и объяснения, которые разложат асинхронность в JS по полочкам.
#свежак
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥2
У вас есть объект настроек по умолчанию и фрагмент кода (на картинке).
Пользователь ввёл JSON:
{«__proto__": {"polluted": true}, "isAdmin": true}
Какими будут значения defaults.isAdmin и defaults.theme после выполнения этого кода
#междусобойчик
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤3🔥2
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 ₽, удаленно
#свежак
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
Проблема: управление состоянием формы и её отправкой может быть сложным, особенно при наличии валидации и асинхронных операций.
Решение: в книге «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>
);
}
Преимущества:
— Управление состоянием формы и её отправкой.
— Обработка ошибок и асинхронных операций.
— Упрощение кода формы.
#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5👍2
Вы пишите
let x = 1 + 2
, а под капотом V8 уже строит синтаксическое дерево, генерирует байт-код и думает, стоит ли компилировать это в машинный код.Что в карточках:
Если хотите писать реально быстрый JS, нужно понимать, как его читает движок.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥2