bootg.com »
United States »
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js » Telegram Web
Подписчик делится своим опытом применения AI-инструментов в фронтенд-разработке.
А какое ваше мнение на этот счет? Делитесь в комментариях
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🥱5👍4🔥1
Please open Telegram to view this post
VIEW IN TELEGRAM
😁13🌚3🔥1
В Svelte уже есть изоляция стилей через scoped CSS, но стоит ли добавлять Tailwind? Этот инструмент был создан для React, чтобы бороться с проблемой «протекания» стилей, которая в Svelte не возникает.
— Быстрая верстка без необходимости писать свой CSS.
— Готовая система цветов, шрифтов, отступов.
— Легко переносить классы и шаблоны между проектами.
— Если команда уже работает с Tailwind — проще не разводить свой CSS‑зоопарк.
— Шаблон может превратиться в мешанину из утилитарных классов.
— Для сложной анимации или кастомных эффектов Tailwind быстро становится неудобным.
— Встроенный scoped CSS в Svelte часто чище и понятнее.
— Чужой код на Tailwind порой тяжело читать и поддерживать.
А вы как думаете? Tailwind в Svelte — мастхэв или излишество? Делитесь в комментариях!
#междусобойчик
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔8👍7
В этой подборке мы сосредоточимся на использовании watch и watchEffect в Vue.js для отслеживания изменений в данных и выполнения действий в ответ на эти изменения.
1. Watch и WatchEffect на практике — примеры самых часто используемых компонентов вместе с наблюдателями.
2. Работа с состоянием во Vue и React — отличия, использование, как перекликаются между двумя фреймворками.
3. watch vs watchEffect — когда использовать какой подход
4. Как выбрать библиотеку для управления состоянием — преимущества и недостатки Vuex и Pinia, а также советы по выбору подходящего инструмента для вашего проекта.
5. watchEffect — введение в watchEffect, который автоматически отслеживает все реактивные зависимости внутри своей функции.
#свежак
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥1
Anonymous Quiz
3%
Способ ускорить загрузку сайта только на мобильных устройствах
3%
Разработка только для мобильных приложений без версии для десктопа
93%
Сначала создаётся версия сайта для мобильных устройств, затем для планшетов и десктопов
1%
Все стили пишутся только через inline CSS
👍7🥱5🤔3
Senior front-end developer (React) — от 380 000 ₽, удаленно (Москва)
Team Lead Frontend — от 300 000 ₽, удаленно (Москва)
Frontend-разработчик — гибрид (Москва)
JavaScript - разработчик — гибрид (Санкт-Петербург)
Старший Frontend (JavaScript) разработчик — от 350 000 до 400 000 ₽, удаленно (Москва)
#свежак
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4❤2
Проблема: необходимо динамически обновлять интерфейс в зависимости от ввода пользователя, например, при фильтрации списка элементов.
Решение: в книге «Building Real-World Web Applications with Vue.js 3» автор показывает, как эффективно использовать реактивные данные и вычисляемые свойства для реализации фильтрации в реальном времени.
Пример кода:
<template>
<div>
<input v-model="searchQuery" placeholder="Поиск..." />
<ul>
<li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
const items = ref([
{ id: 1, name: 'Яблоко' },
{ id: 2, name: 'Банан' },
{ id: 3, name: 'Вишня' },
]);
const searchQuery = ref('');
const filteredItems = computed(() => {
return items.value.filter(item =>
item.name.toLowerCase().includes(searchQuery.value.toLowerCase())
);
});
</script>
Преимущества:
— Автоматическое обновление интерфейса без явных манипуляций с DOM.
— Легкость в реализации фильтрации для больших списков.
— Удобное и понятное API для работы с реактивностью.
#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👍1
На собеседовании вам могут задать вопросы о том, как работают методы, которые помогают оптимизировать частые события в JavaScript.
В карточках разберем:
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥3❤2
🐞 Как быстрее находить и устранять баги
Вместо того чтобы часами гуглить странный баг, проще сразу задать точный вопрос. Особенно если ошибка связана с нюансами рендеринга или 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