Библиотека фронтендера | 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
💡 CSS Grid Lanes решает одну проблему, но может создать другую

Красивая раскладка карточек — это здорово. Но если внутри есть ссылки или кнопки, порядок перехода по Tab может оказаться совершенно неожиданным.

Разбираемся, в чём причина

🔗 Ссылка на статью

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

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

#under_hood
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
3👏2🥰1🤔1
⚠️ Уже завтра стартует курс AgentOps!

Мы собрали на потоке сборную из мастеров IT-рынка. Практики из BigTech научат вас контролировать и отлаживать ИИ-агентов, чтобы они работали предсказуемо и не сливали бюджет на API.

🔥 Заберите 3 курса по цене 1:
● При покупке VIP-тарифа (осталось 4 места) нового потока «Разработка ИИ-агентов» получаете в подарок курс «AgentOps» + ещё один любой курс Академии (например, «Математика для разработки AI», чтобы глубже освоить направление).

● Три курса обойдутся вам всего в 134.000 ₽ вместо 263.000 ₽.

● Доступна удобная беспроцентная рассрочка, платеж можно разбить на несколько комфортных частей.


Хотите прокачать свое портфолио продакшн-кейсом, но пока сомневаетесь? Пройдите наш бесплатный демо-урок, чтобы протестировать формат перед покупкой.

👉 Забрать 3 курса по цене 1 и получить демо-урок
🥰3🥱2😁1
330+ React Interview Questions That Can Give You a Real Edge.pdf
1.7 MB
📌 330+ вопросов по React для подготовки к собеседованиям

Если готовитесь к поиску работы или хотите освежить знания, сохраните эту шпаргалку.

• JSX, компоненты, props и state;
• Hooks и жизненный цикл;
• Virtual DOM и Reconciliation;
• Context API и Redux Toolkit;
• React Router;
• оптимизация производительности;
• тестирование (Jest);
• SSR и основы Next.js;
• распространённые ошибки и лучшие практики.


🔗 Источник

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

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

#readme #react #career_merge
Please open Telegram to view this post
VIEW IN TELEGRAM
8🥰2
😎 React Reconciliation под капотом

Разберемся, как работает сравнение виртуального DOM, зачем нужны ключи и как React сохраняет состояние при обновлении. Видео и статьи — от гайдовых до настоящего deep dive.

Build Your Own Virtual DOM: Understanding React’s Reconciliation Algorithm — пошаговый гайд: строительство VDOM, diff, patch своими руками

Understanding React’s Reconciliation Algorithm: How It Efficiently Updates the DOM — рациональные принципы: TypeMatcher, ContentWatcher, KeyMaster

React Reconciliation: The Hidden Engine Behind Your Component — сильное deep dive с примерами про сохранение state, identity, key и позицию в дереве

Under the Hood: Understanding React’s Reconciliation Algorithm — свежий доклад о внутренностях reconciliation (можно взять из плейлиста/таймлайн)

The Heart of React || How React works under the hood — отличное объяснение reconciliation, Fiber, rebuilding/rendering механизмов

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

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

#read_watch
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥41🥰1
♿️ Проверьте, насколько хорошо вы знаете веб-доступность

Появился A11y.quest — интерактивный тренажёр с 128 вопросами по accessibility.

Внутри:

• семантический HTML;
• ARIA;
• навигация с клавиатуры;
• формы;
• работа со скринридерами и другие темы.


Вопросы разделены по уровням сложности, их можно перемешивать, а сервис показывает статистику, точность ответов и текущую серию.

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

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

#тест_драйв #a11y #html
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥2🥰1
This media is not supported in your browser
VIEW IN TELEGRAM
💡 Мини-лайфхак для VS Code

Часто пишете console.log() вручную?

В VS Code можно создать свой сниппет: например, набираете cc, нажимаете Tab — и редактор подставляет заготовку.

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

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

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

#readme
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🥱4🔥1
ОПРОС: Ответьте на пару вопросов и получите промокод на все наши курсы! 🎁

Команда Prоglib.аcаdemy готовит к запуску новые продукты, и нам нужна ваша помощь. Мы хотим создавать обучение, которое будет решать ваши реальные карьерные задачи и бить точно в цель.

Поделитесь своим опытом и ожиданиями, чтобы мы сделали наши курсы еще полезнее именно для вас! Заполнение анкеты займет буквально 2–3 минуты, а с нас — скидка на любой наш курс!

👉 Пройти опрос в Яндекс Формах и забрать промокод
🥰3😁1
This media is not supported in your browser
VIEW IN TELEGRAM
🎨 Подборка готовых UI-анимаций для интерфейсов

Нашли библиотеку Transitions.dev с коллекцией плавных переходов для современных веб-приложений.

Внутри — готовые анимации для:

• карточек;
• модальных окон;
• выпадающих меню;
• табов и аккордеонов;
• уведомлений;
• скелетонов;
• загрузчиков;
• переключателей и других UI-компонентов.


Каждую анимацию можно сразу посмотреть в действии, изучить реализацию и адаптировать под свой проект

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

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

#stack
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🥰2
💡 HTML может научиться показывать локальное время без JavaScript

В WHATWG обсуждают расширение элемента <time>, которое позволит браузеру автоматически отображать дату и время в локальном формате пользователя.

Например, вместо ручного форматирования через JavaScript можно будет написать:


<time datetime="2026-06-17T08:13:41Z" format="datetime">
17 June 2026
</time>


🔤 Браузер сам покажет дату в часовом поясе и формате пользователя, а для старых браузеров останется текст внутри <time>.

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

🔗 Источник

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

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

#under_hood
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥2🥰1
🗳 Адаптивный размер шрифта без медиазапросов

Если раньше для адаптивной типографики приходилось писать несколько @media, то сейчас во многих случаях достаточно одной строки:


h1 {
font-size: clamp(2rem, 5vw, 4rem);
}


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

2rem — минимальный размер;
5vw — размер плавно меняется в зависимости от ширины окна;
4rem — максимальный размер.


Браузер сам выберет подходящее значение между минимумом и максимумом.

Такой подход особенно полезен для:

— заголовков;
— hero-блоков;
— карточек;
— адаптивной типографики без лишних @media.

💡 clamp() работает не только со шрифтами. Его можно использовать для width, height, padding, margin, gap и других свойств.

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

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

#readme
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥3🥰1🥱1💯1
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