Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
22.7K subscribers
2.37K photos
143 videos
38 files
4.78K links
Все самое полезное для фронтенда в одном канале.

По рекламе: @proglib_adv

Учиться у нас: https://proglib.io/w/77178ed4

Для обратной связи: @proglibrary_feeedback_bot

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
加入频道
👀 Выбираем между PWA и нативом

Современный веб давно вышел за рамки «страниц» — PWAs поддерживают офлайн и устанавливаются как обычные приложения. Но достаточно ли этого для полной замены нативного клиента?

Плюсы PWA:

— Мгновенная установка: «Добавить на главный экран» без ожидания модерации

— Автоматические обновления: пользователи всегда на последней версии (Pinterest PWA +60% конверсии)

— SEO и открытость: индексируются поисковиками — новые аудитории через Google

— Кроссплатформа: единый код для веба, Android и iOS

⛔️ Ограничения PWA:

— iOS-барьеры: фоновые уведомления и Web Push в iOS работают только в активном окне

— Ограниченный API-доступ: нет полного доступа к AR/VR, Bluetooth LE, NFC и другим системным фичам

— Системные бейджи и deep linking: натив реализует их куда глубже (SMS-связывание, Universal Links)

— Heavy-duty кейсы: игры с высокой частотой кадров, фоторедакторы или видео-стриминг требуют нативной производительности.

Когда что выбрать:

➡️ Контентные проекты (новостные сайты, e-commerce): PWA для быстрого запуска, SEO и мгновенной установки

➡️ Тяжёлые» приложения (игры, AR/VR, сложные SDK): натив для полной производительности и всех API

➡️ Гибридный подход: PWA как дополнительней канал плюс нативное ядро — лучшее из обоих миров

А вы уже пробовали PWA вместо нативных? В каких проектах это сработало, а где вы всё же вернулись к «родному» коду?

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

#междусобойчик
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔42👍2
⭐️ Скрытые возможности Radix UI

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
😀 Что полезного для фронтенда в Chrome 138

Обновление браузера принесло фичи, которые открывают новые возможности в UI и улучшении пользовательского опыта.

В карточках разберем:

➡️ Какие AI API теперь доступны прямо в браузере

➡️ Что нового появилось в CSS-функциях

➡️ Что помогает адаптировать вёрстку под складные экраны

🔗 Источник

🐸 Библиотека фронтендера
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍122🔥2
🧩 Ваш базовый стек для старта проекта

Когда берёшься за новый проект, не хочется тратить время на выбор — просто ставишь то, с чем уже давно удобно. У каждого свой набор: кому-то без Tailwind некомфортно, кто-то кидает Zustand даже в самые простые задачи.

У меня сейчас так:

– Vite
– Tailwind + shadcn/ui
– Zustand
– jQuery
– Авторизация на скорую руку


Не идеал, но работать можно. Всё лишнее — позже, если понадобится.

А у вас как? Что ставите в первую очередь?

Если постик зашёл, то поддержите бустом канала 🙂

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

#междусобойчик
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔14👍91
⭐️ Понимание Event Loop и async/await: как JavaScript реально работает с асинхронностью

В этой подборке — лучшие статьи, симуляторы и объяснения, которые разложат асинхронность в JS по полочкам.

➡️ Event Loop 2025 — визуальный разбор Event Loop с современными Web APIs и Workers. Показывает приоритеты микротасков и макротасков в живой модели.

➡️ How we tamed Node.js event loop lag — кейс‑стади из продакшена: как обнаруживали лаги event loop, анализировали, мониторили и устраняли.

➡️ Async Made Easy — от коллбэков до async/await, с практическими примерами и разбором перехода от callback hell к современному async.

➡️ Async/Await: What Happens Under the Hood — шаг за шагом про трансляцию await в state machine, как это работает «под капотом»

➡️ Визуальный симулятор Event Loop — интерактивный playground, который показывает стек вызовов, очередь макро- и микротасков.

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

#свежак
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
👍63🔥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 ₽, удаленно

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

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

#свежак
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
🎮 Обработка форм с использованием useActionState

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

Решение: в книге «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>
);
}


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

— Управление состоянием формы и её отправкой.
— Обработка ошибок и асинхронных операций.
— Упрощение кода формы.

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

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
5👍2
⭐️ Как JavaScript исполняется под капотом V8

Вы пишите let x = 1 + 2, а под капотом V8 уже строит синтаксическое дерево, генерирует байт-код и думает, стоит ли компилировать это в машинный код.

Что в карточках:

➡️ Как V8 парсит и интерпретирует код

➡️ Что делает TurboFan и зачем нужен байт-код

➡️ Как работает сборка мусора

➡️ И почему порядок добавления свойств в объект — это не мелочь

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

🔗 Полный текст статьи по ссылке

🐸 Библиотека фронтендера
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥2