Библиотека фронтендера | 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
加入频道
😎 Топ-вакансий для фронтендеров за неделю

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
📌 Команда дня: очистка кэша и зависимостей

Полная зачистка проекта, когда «ничего не работает, а вчера работало».


rm -rf node_modules dist .vite && npm cache clean --force && npm install


Используется при переходе между ветками, конфликте зависимостей или странных сборках 💡

Зачем это нужно:

— Удаляет артефакты и кэш, которые могут ломать сборку.

— Позволяет начать «с нуля» без удаления проекта.

— Помогает при миграции зависимостей или обновлении сборщиков.

Лайфхаки:

➡️ Добавьnt alias в .zshrc или .bashrc:


alias resetnode="rm -rf node_modules dist .vite && npm cache clean --force && npm install»


➡️ Для monorepo можно чистить весь workspace:


rm -rf node_modules && lerna clean && lerna bootstrap


➡️ Если используете pnpm:


pnpm store prune && pnpm install --force


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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥42👏2
🔥 Последняя неделя перед стартом курса по AI-агентам

Старт курса уже 5го числа! Если вы планировали вписаться — сейчас ПОСЛЕДНИЙ шанс забронировать место

На курсе:
разложим LLM по косточкам: токенизация, SFT, PEFT, инференс
— соберём RAG и научимся оценивать его адекватно
— построим настоящую мультиагентную систему — архитектуру, которая умеет расти
— разберём CoPilot, сломаем через prompt injection (спасибо Максу)
— и наконец, посмотрим, как это работает в MCP и реальных кейсах

📍 Это 5 живых вебинаров + раздатка + домашки + чат с преподавателями

И главное — возможность реально разобраться, как проектировать системы на LLM, а не просто «поиграться с API»

👉 Курс здесь
👍3
⭐️ Чеклист: CI для фронтенда

CI — ваш честный ревьюер. Он проверит, не забыли ли вы запустить тесты, форматировать код и не сломал ли билд.

1️⃣ Автоматическая сборка проекта

— Убедитесь, что build проходит на каждом коммите

— Добавьте проверку на размер бандла (webpack-bundle-analyzer, size-limit)

— Сравнивайте метрики между коммитами (например, с CI compare или Bundlewatch)

➡️ npm run build, vite build, next build

2️⃣ Линтинг и форматирование

— Настройте ESLint (с правилами под ваш стек: React, TS и т.д.)

— Подключите Prettier с автоформатированием

— Проверяйте линт перед пушем через lint-staged и husky

➡️ eslint ., prettier --check .

3️⃣ Юнит- и интеграционные тесты

— Запускайте тесты на каждый PR

— Покрывайте бизнес-логику, хуки, компоненты

— Минимум: jest + @testing-library/react

➡️ jest --coverage, vitest, c8

4️⃣ Проверка типов

— Включите строгую проверку TypeScript

— Ошибки типов — повод не пускать PR в main

— Не забудьте проверить .d.ts и внешние типы

➡️ tsc --noEmit, tsc -p tsconfig.json

5️⃣ Проверка production-конфига

— Убедитесь, что .env.production загружается правильно

— Добавьте в CI проверку на наличие всех нужных переменных

— Прогоните Lighthouse/Pa11y, если хочется extra-модуль

➡️ dotenv-linter, dotenv-cli, pa11y-ci

6️⃣ Визуальные/регрессионные тесты (опционально)

— Снимайте скриншоты UI (Storybook + Chromatic, Percy)

— Ловите баги до ревью

— Можно запускать раз в день/неделю в cron-режиме

7️⃣ Бейджики и отчёты

— Добавтеь бейджи покрытия, билда и линта в README

— Публикуйте отчёты в MR/PR

— Настройте уведомления в Telegram/Slack

➡️ Codecov, Coveralls, GitHub Actions Summary

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

#буст
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥4
🌻 Пишем код, который V8 будет любить

В первой части мы разобрали, как движок V8 исполняет JavaScript, теперь — как писать код, который работает на полной скорости.

Что внутри карточек:

➡️ Как работает Inline Caching и когда оно ломается

➡️ Что такое Hidden Classes и почему важен порядок свойств

➡️ Как движок избавляется от «мёртвого» кода

➡️ Как оптимизировать async/await и циклы

➡️ Какие антипаттерны тормозят V8

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

🐸 Библиотека фронтендера
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥52
🧠 «Поиграйся с LLM, почитай про агентов — и сам поймёшь, как это работает»

Это один из самых бесполезных советов, который мы слышали в адрес тех, кто хочет разобраться в AI-агентах.

Поиграйся — это как?
Потыкать пару промптов в ChatGPT и решить, что теперь ты можешь строить мультиагентные системы? 🤡 Ну-ну.

AI-агенты — это не «очередная обёртка над GPT». Это архитектура. Состояния, инструменты, цепочки вызовов, память, оценка качества и адекватность поведения.

➡️ Чтобы разобраться, нужно:
— понимать, как устроен LLM под капотом
— уметь подключать внешние данные (RAG, retrievers, rerankers)
— уметь масштабировать и дебажить поведение агентов
— разбираться в фреймворках вроде AutoGen, CrewAI, LangChain
— знать, как всё это тащится в прод

Если вы реально хотите не «поиграться», а научиться собирать рабочие агентные системы — у нас стартует курс по разработке ИИ-агентов 5го июля

P.S: не упусти свой шанс, промокод: LASTCALL на 10.000₽
👾4🔥1