Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
21.2K subscribers
3.62K photos
326 videos
86 files
5.89K links
Все самое полезное для фронтенда в одном канале.

Наши курсы: https://clc.to/WV2U4g

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

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

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
📹 Что должен делать агент-оркестратор?

Посмотрите короткий отрывок из вебинара с Дмитрием Юдиным, внутри концентрат инсайтов о ии-агентах. А если хотите погрузиться в тему с головой, у нас доступна и полная запись этого эфира.

Готовы перейти от теории к практике и собрать свой первый продакшн-кейс?

Прямо сейчас действует мощная акция «3 курса по цене 1»:

🔥 При покупке VIP-тарифа нового потока «Разработка ИИ-агентов» вы получаете в подарок хардкорный курс «AgentOps» + ещё один любой курс Академии на ваш выбор!

Выгода в цифрах: два топовых курса по созданию и контролю агентов обойдутся вам всего в 134.000 ₽ вместо 263.000 ₽. Плюс третий курс бонусом (например, можно подтянуть математику для AI). Ваша чистая экономия — 129 000 ₽!

Сомневаетесь, подойдет ли вам формат? Оставьте заявку и пройдите бесплатный демо-урок, чтобы протестировать платформу перед покупкой.

👉 Пройти демо-урок и забрать 3 курса по цене 1
😁4🥰1🌚1
Media is too big
VIEW IN TELEGRAM
🍀 Лёгкая библиотека для слайдеров без зависимостей

Если нужен современный слайдер без перегруженных решений, обратите внимание на Splide.

Что умеет:

— работает без зависимостей;
— поддерживает React, Vue и обычный JavaScript;
— адаптируется под разные размеры экрана;
— есть автопрокрутка, lazy loading, вертикальный режим и миниатюры;
— поддерживает управление с клавиатуры и соответствует требованиям доступности.


При этом библиотека весит около 12 КБ в gzip и не ухудшает показатели Lighthouse.

📍 Навигация: [Вакансии]

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

#stack
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🥰21
🎬 Как ИИ ускоряет разработку и где ломаются архитектуры

Мы провели открытый вебинар, где разобрали реальные боли проектирования автономных систем. Ольга Лукьянова на практическом кейсе показала, как использовать ИИ-ассистентов для реальных задач. Вы просили запись встречи — она уже в открытом доступе!

Что внутри:

— Как с помощью ИИ быстрее разбираться в незнакомом коде и готовить пулл-реквесты;
— Критерии выбора между одним агентом и мультиагентной системой;
— Разбор популярных архитектурных ошибок и ограничений современных ИИ;
— Практические рекомендации по проектированию и внедрению облачных агентов.

👉 Посмотреть полную запись можно тут:
VK
YouTube

🚀 Хотите пойти дальше открытого вебинара? Если вы готовы перейти от простых промптов к проектированию надежных, отказоустойчивых ИИ-систем, которые не сливают бюджет компании на API, приходите на курс AgentOps. Поток уже стартовал, но двери еще приоткрыты!

👉 Успеть на курс AgentOps
🥰1
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ Самый быстрый способ протестировать шрифты на любом сайте

Нашли удобное расширение Tinkerfont, которое позволяет тестировать шрифты прямо на реальных сайтах — без DevTools и правок CSS.

Можно посмотреть, какие шрифты использует страница, заменить их на любой из 1900+ Bunny Fonts или загрузить свой, а затем сразу скопировать код подключения.


Полезный инструмент для быстрого подбора типографики.

📍 Навигация: [Вакансии]

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

#stack
Please open Telegram to view this post
VIEW IN TELEGRAM
4
🤔 Вопрос с собеседования

Расскажи про useDeferredValue в React. Для чего он нужен?

👇 Правильный ответ (нажми, чтобы прочитать):

useDeferredValue возвращает отложенную версию значения, позволяя React сначала обработать более приоритетные обновления интерфейса, а тяжёлые компоненты перерисовать позже.

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

import { useState, useDeferredValue } from "react";

function Search() {
const [query, setQuery] = useState("");
const deferredQuery = useDeferredValue(query);

return (
<>
<input
value={query}
onChange={(e) => setQuery(e.target.value)}
/>

<Results query={deferredQuery} />
</>
);
}

⚠️ useDeferredValue не заменяет debounce.

Он не использует таймер, не уменьшает количество запросов к API и не предотвращает рендеры. Он лишь позволяет React выполнить обновление с более низким приоритетом.


👍 — знал/а
🔥 — стало понятнее

💼 Щелкаешь такие задачи как орешки? Найди проект с достойной зарплатой тут

📍 Навигация: [Вакансии]

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

#career_merge
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥12🥰4
🖥 Deno теперь умеет собирать десктопные приложения

В Deno 2.9 появилась команда deno desktop, которая позволяет превратить проект на JavaScript или TypeScript в нативное приложение для Windows, macOS и Linux.

Поддерживаются Next.js, SvelteKit, Astro, Remix, Nuxt, Vite и другие популярные фреймворки

Можно использовать системный WebView или встроенный Chromium, а также доступны автообновления и кросс-компиляция.

📍 Навигация: [Вакансии]

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

#release_digest
Please open Telegram to view this post
VIEW IN TELEGRAM
👏6🥰32👾1
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 Библиотека для создания веб-читалок комиксов и манги

Нашли Comimi — JS/TS-библиотеку для создания собственных читалок прямо в браузере.

Что умеет:

— разные режимы чтения;
— несколько вариантов отображения страниц;
— гибкая настройка поведения ридера;
— подходит для веб-просмотра комиксов и манги.


Полезно, если разрабатываете собственную платформу с цифровыми изданиями или просто ищете готовое решение вместо реализации с нуля.

📍 Навигация: [Вакансии]

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

#stack #js
Please open Telegram to view this post
VIEW IN TELEGRAM
3🥰2🤔2
🔐 Можно ли защититься от ботов без тотального трекинга пользователей?

Mozilla представила концепцию PACT (Private Access Control Tokens) — систему анонимных учетных данных для веба.

Как работает:

🈂️ Сайт получает подтверждение, что перед ним «добросовестный пользователь», но не узнаёт его личность и не может отслеживать между сайтами.

🈂️ Вместо отпечатков браузера, обязательной регистрации или постоянных CAPTCHA предлагается использовать криптографические токены с ограничением по частоте запросов (rate limiting).

📍 Навигация: [Вакансии]

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

#under_hood #security
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔3🥰2
💡 Как обрезать изображение без JavaScript

Если картинка должна полностью заполнить контейнер, но при этом сохранить пропорции, используйте object-fit.


img {
width: 100%;
height: 250px;
object-fit: cover;
}


Что делает object-fit: cover:

— заполняет контейнер целиком;
— сохраняет пропорции изображения;
— автоматически обрезает лишние части, если они не помещаются.

📍 Навигация: [Вакансии]

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

#readme
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰3
🔥 Открытое занятие по AgentOps — курс стартовал!

Сегодня в 19:00 по МСК пройдет первое занятие нового потока, на которое может прийти каждый. Оцените пользу нашего подхода на ретрансляции урока в VK!

👨‍💻 Спикер: Андрей Носов

Тема: Архитектура управления: state machine для AI-агентов

Будем разбираться, как использовать State machine в качестве главного оружия против стохастики (непредсказуемости) LLM.

Что в программе:

● State machine: инварианты и терминальные состояния;
● Паттерны маршрутизации: Supervisor, ReAct, Plan-and-Solve;
● Детекция циклов и настройка аварийных выходов;
● Абстракция от модели: как сделать каркас, который переживет смену LLM/провайдера;
● Адаптация графов под ограничения локальных моделей;
● Версионирование графов и миграции стейта.

Результат занятия: Вы поймете, как спроектировать надежный каркас агента с жестким контролем исполнения и переходов.

👉 Подписывайтесь на нашу группу ВКонтакте, чтобы не пропустить старт трансляции!
🥰2
🧩 Почему в JavaScript до сих пор нет настоящих full-stack модулей

В Wasp объяснили, почему в экосистеме JavaScript нельзя просто установить один пакет, который сразу добавит UI, серверную логику, миграции и API.

🔜 Проблема не в npm, а в отсутствии единого full-stack стандарта. Каждый проект по-своему организует роутинг, сервер, базу данных и сборку, поэтому библиотекам не на что опереться.

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

📍 Навигация: [Вакансии]

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

#read_watch
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰4
Как вернуть удалённую ветку в Git

Иногда ветку удаляют по ошибке — локально или даже на удалённом репозитории. А потом всплывает, что там был нужный код или незавершённая работа. Поднимать заново неудобно, особенно если не помнишь последний коммит.

Решение:


git reflog
git checkout -b my-branch <commit_hash>


➡️ Что произойдёт:

— git reflog покажет историю всех действий, даже удалённых веток,
— можно найти нужный commit_hash,
— checkout -b создаст ветку заново с того же коммита.

📍 Навигация: [Вакансии]

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

#readme #git
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🥰4🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 CSS получил нативную замену Masonry.js

В Safari появилась поддержка display: grid-lanes — нового режима раскладки для Pinterest-подобных сеток.

Теперь карточки разной высоты можно размещать без JavaScript и сторонних библиотек:


.container {
display: grid-lanes;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}


Apple подготовила отдельный сайт с примерами, интерактивными демо и подробным гайдом по новой возможности.

⚠️ Пока grid-lanes работает только в Safari.

📍 Навигация: [Вакансии]

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

#release_digest
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10🥰4👍2👏1
This media is not supported in your browser
VIEW IN TELEGRAM
Как сделать, чтобы выпадающий список был «не слишком большим и не слишком маленьким»

Оказывается, для этого уже есть calc-size().

Вместо фиксированной высоты можно написать:


min-block-size: calc-size(fit-content, min(size, 12em));
max-block-size: calc-size(stretch, min(size, 30em));


Такой подход позволяет <select> автоматически подстраиваться под количество элементов, но при этом не занимать весь экран и не становиться слишком маленьким.

Пока calc-size() поддерживается не везде, поэтому автор показывает, как реализовать кроссбраузерный fallback.

📍 Навигация: [Вакансии]

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

#under_hood
Please open Telegram to view this post
VIEW IN TELEGRAM
👍124🥰3
This media is not supported in your browser
VIEW IN TELEGRAM
🎨 Meta открыла исходный код своей дизайн-системы Astryx

Компания выложила в open source Astryx — внутреннюю дизайн-систему, которую использует уже более 8 лет.

Что внутри:

🔹 150+ готовых UI-компонентов;
🔹 7 встроенных тем оформления;
🔹 поддержка кастомизации;
🔹 ориентирована на создание крупных интерфейсов.

🤖 Хотите глубже разобраться, как AI помогает в современной разработке? Посмотрите курс по AI-агентам в Proglib Academy🔗

📍 Навигация: [Вакансии]

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

#stack
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥5🥰3
🔥 Каверзный вопрос с собеса

Метод .map() передаёт в колбэк три аргумента: текущий элемент, индекс и исходный массив. Функция parseInt принимает: строку и radix — основание системы счисления. Поэтому индекс массива попадает в radix.

🔍 Что происходит на самом деле:


parseInt('1', 0)


radix = 0 означает автоопределение системы счисления:

• если строка начинается с '0x' или '0X' → основание = 16
• во всех остальных случаях → используется основание = 10

Поэтому '1' интерпретируется как десятичная.


parseInt('7', 1)


системы счисления с основанием 1 не существует => Nan


parseInt('11', 2)


'11' в двоичной системе — это 3₁₀ => 3

❇️ parseInt('11', 2) парсит всю строку как двоичную, потому что она корректна полностью.
Распространённый миф — будто бы берётся только первый символ; это неверно.

Как исправить:


['1', '7', '11'].map(str => parseInt(str))


Или проще:


['1', '7', '11'].map(Number)


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

#career_merge #middle
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰5👍4🌚2👏1
🔥 ИИ-выходные: Собери своего AI-агента за 2 дня

Хватит просто читать про ИИ, пора собирать автономные системы руками! 1–2 августа пройдет хардкорный онлайн-интенсив для junior-middle разработчиков.

Формат: теория ➡️ сразу практика. Вы будете управлять AI-инструментами.

🛠️ Как всё пройдет:

День 1 (Суббота): разбираем анатомию агента, подключаем инструменты (shell, GitHub, Postgres) и дебажим трейсы.
День 2 (Воскресенье): собираем собственного агента под вашу задачу, настраиваем Eval + Guardrails (чтобы бот не галлюцинировал) и проводим демо.


Для кого: Вы пишете на Python, работаете с Git и терминалом. (С нуля не подойдет, темп очень быстрый!)

Артефакт на выходе: Рабочий репозиторий с вашим агентом, который не стыдно показать команде.
👨‍💻 Спикер: Алексей Жиряков (Сбер, GenAI).

Места ограничены!

👉 Изучить программу и занять место
3🥰2🙏2
React Tips - Memoization is NOT a Performance Strategy.pdf
300.3 KB
🔥 Больше useMemo ≠ быстрее React-приложение

Когда приложение начинает тормозить, многие сразу добавляют useMemo, useCallback или React.memo. На практике главный прирост производительности чаще дает архитектура компонентов.

Что действительно помогает:

🔵 держать состояние как можно ближе к месту использования;
🔵 не поднимать state выше, чем это необходимо;
🔵 уменьшать количество лишних ререндеров;
🔵 использовать мемоизацию только там, где она действительно оправдана.


📍 Навигация: [Вакансии]

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

#under_hood #react
Please open Telegram to view this post
VIEW IN TELEGRAM
8👍4🥰2