Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
21.8K subscribers
2.76K photos
189 videos
42 files
5.1K links
Все самое полезное для фронтенда в одном канале.

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

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

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

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
👨‍🦳 Почему <div role="button"> — это не кнопка

Частая картина в коде:


<div class="btn" role="button">Нажми меня</div>


Кажется, что role="button" превращает <div> в кнопку. Но это не так.

🔤 Ключевой инсайт:

role="button" только сообщает скринридерам «это кнопка», но НЕ добавляет поведение кнопки.

У такого "div-button" по-прежнему нет:

- Фокуса с клавиатуры (Tab)
- Активации по Space/Enter
- Состояния disabled
- Доступного имени

Всё это нужно программировать вручную через JS.

Есть способ проще:

button {
all: unset;
}


Одна строка CSS сбрасывает стили браузера — и можно стилизовать <button> как угодно, сохраняя всю встроенную доступность.

Семантический HTML — это не только про «правильность». Это способ избежать лишней работы.

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

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

#read_watch
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰6🔥3
🎁 И мозг прокачать, и макбук утащить!

Proglib.academy разыгрывает MacBook Pro 14 (M3 Pro, 36 GB, 1 TB SSD) 💻

Условия:

1️⃣ Покупаешь любой курс Proglib до 15 ноября.
2️⃣ Проходишь минимум 2 учебные недели (можно осилить за два вечера).
3️⃣ Пишешь куратору в чат своего курса: #розыгрыш.

Что за курсы?

Математика для Data Science (6 месяцев боли и просветления).
Основы Python, ML, алгоритмы, AI-агенты и даже курс для тех, кто в IT, но не кодит.

👉 Участвовать в розыгрыше
🥰4🤔2🔥1
⚡️ Bun заменяет 5 инструментов одной командой

npm install, Webpack, Jest, nodemon, dotenv — забудьте этот зоопарк. Bun объединяет всё в один быстрый бинарь.

🟣 bunx — запускайте CLI без глобальных установок

🟣 Workspaces — монорепо без Lerna и Nx

🟣 Единый сервер — фронтенд и API под одной капотом

Один runtime вместо пяти конфиг-файлов.

🔗 Оригинал статьи

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

#readme
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
7🔥4
Nuxtjs-Cheat-Sheet.pdf
820.3 KB
⭐️ Шпаргалка по Nuxt

Всё, что нужно Vue-разработчику в одной шпаргалке:

— Pages & Layouts
— useFetch / useAsyncData
— SSR / SSG / Hybrid
— useState / useRoute / useHead
— Оптимизация и best practices

🔤 Актуально для Nuxt 3.x и Nuxt 4.

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

#readme
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰6🔥1
💻 ВАЖНО: макбук ещё не забрали!

Proglib.academy продолжает розыгрыш MacBook Pro 14» (M3 Pro, 36 Гб, 1 Тб SSD).

Что нужно для участия?

— Берёшь любой курс Академии до 15 ноября.
— Проходишь хотя бы 2 недели обучения (можно за два дня).
— Пишешь куратору #розыгрыш. Всё — ты в игре!

Что за курсы?

▫️Алгоритмы и структуры данных — если хочешь готовиться к собесам в Яндекс, FAANG и не сидеть на джуне вечно.

▫️Архитектуры и шаблоны проектирования — учат думать как senior, а не просто писать код.

▫️ Python, математика для DS, основы IT и другие темы — можно стартовать с нуля или усилить то, что уже знаешь.

👉 Влетай, не думай!
🥰5
🎯 Interest Invoker API — тултипы без единой строчки JS

Раньше, чтобы показать поповер по ховеру, нужен был JavaScript. Теперь — достаточно HTML.

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

interesttarget связывает элемент-триггер и поповер. Браузер сам обрабатывает hover, focus или long-press и показывает подсказку.

Можно совмещать с Popover API и Anchor Positioning для точного позиционирования.

⚠️ Поддержка:

Пока экспериментальная — работает в Chromium-браузерах (Chrome 135+, Edge 135+). В Firefox и Safari API ещё не реализован, поэтому стоит использовать фолбэк или JS-вариант для совместимости.

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

#readme #html
Please open Telegram to view this post
VIEW IN TELEGRAM
👍82🥰2
🚀 Storybook 10 — меньше кода, больше типобезопасности

Вышел крупнейший релиз года для тех, кто работает с UI-компонентами.

Три ключевых изменения:

1. ESM-only — код стал на 29% легче и теперь не минифицирован (дебажить проще)

2. CSF Factories — новый формат историй для TypeScript: меньше бойлерплейта, больше автокомплита

3. Новый sb.mock — простой и надёжный автомокинг модулей (совместно с Vitest)

⚠️ Требует Node 20.16+ / 22.19+ / 24+

Детали — в карточках выше

🔗 Ссылка на релиз

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

#career_merge
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🤩2😁1
Frontend VK Hub — как работают наши интерфейсы?

Что делает интерфейсы VK быстрыми, удобными и устойчивыми под нагрузкой миллионов пользователей?
Frontend VK Hub — это сообщество инженеров, которые создают и развивают пользовательские интерфейсы для ВКонтакте, VK Play, VK WorkSpace и других сервисов экосистемы. Мы делимся практическим опытом, рассказываем о подходах к производительности, внедрении современных фреймворков и всему, что связано с улучшением Developer Experience.

Здесь можно найти инсайты от ведущих фронтенд-разработчиков, разборы реальных задач, новости индустрии и приглашения на мероприятия VK. И конечно, вакансии!

Подписывайся!
🥰5👍1