Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
21.6K subscribers
2.9K photos
208 videos
48 files
5.2K links
Все самое полезное для фронтенда в одном канале.

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

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

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

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
📋 Канбан-доска: HTML + CSS + SortableJS

Примеры кода для создания интерактивной доски задач в стиле Trello.

🔢 Что внутри:

— HTML-разметка колонок и карточек задач
— CSS-стилизация с кастомными цветовыми тегами
Drag & Drop через библиотеку SortableJS
— Профили задач с аватарами и датами

Готовый код для изучения и использования в проектах.

🔹 Курс «Алгоритмы и структуры данных»
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib

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

#readme #css #html #js
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
5🥰2👏2
👨‍💻 React 19.2 меняет фундамент работы с асинхронностью

В статье по ссылке разбирается, как новые примитивы — use(), <Suspense>, useTransition() и View Transitions — полностью заменяют старую связку useEffect + fetch и убирают большую часть ручной логики загрузки.

Выше — краткие карточки с ключевыми изменениями и примерами кода. Полный разбор и детали — в статье 📎📎

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

#under_hood
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9❤‍🔥3😁2
Scrum_Guide.pdf
398.8 KB
💳 Официальное руководство по Scrum

Гайд от Кена Швабера и Джеффа Сазерленда — 17 страниц, которые задают единственный корректный способ понимать Scrum.

🔤 Если вы работаете в продуктовой команде, строите процессы или хотите лучше понимать, как организуются современные фронтенд-команды, — это must-have.

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

#readme #scrum
Please open Telegram to view this post
VIEW IN TELEGRAM
6🔥1
🛡️ TypeScript: безопасный доступ к вложенным свойствам

Никаких больше “Cannot read property of undefined”!


// Опасно
const city = user.address.city;
// Ошибка, если address === undefined

// Многословно
const city = user && user.address && user.address.city;

// Безопасно и элегантно
const city = user?.address?.city ?? 'Не указан’;


🔴 Optional chaining (?.)
Возвращает undefined, если слева null или undefined, и не пытается читать свойство дальше.

🔴 Nullish coalescing (??)
Возвращает правую часть только если слева null или undefined.

💡 Чем отличается от ||:


const volume = settings.volume ?? 0.5;
// Если volume = 0, вернёт 0 — корректно

const volume = settings.volume || 0.5;
// Если volume = 0, вернёт 0.5 — нежелательное поведение


Где использовать:

— ответы API
— вложенные объекты конфигурации
— поля форм, которые могут отсутствовать
— опциональные коллбэки

🈁 Примеры:


// Массивы
const first = users?.[0]?.name ?? 'Гость';

// Функции
onClick?.();

// Сложные цепочки
const price = product?.variants?.[0]?.price?.amount ?? 0;


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

#hotfix #ts
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰63
🔥 Каверзный вопрос с собеса по TypeScript

Типы any и unknown часто путают, но они работают совершенно по-разному!

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

any — «отключает» TypeScript


let value1: any = "hello";
value1.toUpperCase(); // TS не проверяет
value1.someMethod(); // TS разрешает всё
value1.foo.bar.baz; // Никаких проверок


TypeScript полностью доверяет вам и не проводит никаких проверок
Это как "аварийный выход" из системы типов

unknown — «безопасный any»


let value2: unknown = "hello";
value2.toUpperCase(); // Ошибка компиляции!

// Нужна проверка типа:
if (typeof value2 === 'string') {
value2.toUpperCase(); // Теперь работает
}


TypeScript требует явной проверки типа перед использованием
Это безопасный способ работы с неизвестными данными

🎯 Когда использовать:

any — когда:
— Мигрируете JS → TS постепенно
— Работаете с legacy-кодом
— Но помните: это технический долг!

unknown — когда:
— Парсите JSON с бэкенда
— Работаете с пользовательским вводом
— Получаете данные из внешних API
— Обрабатываете ошибки в catch

Best practice:


// Плохо
function parseResponse(response: any) {
return response.data.user.name;
}

// Хорошо
function parseResponse(response: unknown) {
if (
response &&
typeof response === 'object' &&
'data' in response
) {
// Type guard для безопасной работы
return (response as {data: {user: {name: string}}}).data.user.name;
}
throw new Error('Invalid response');
}


❗️ unknown заставляет вас думать о безопасности типов, any — отключает эту защиту.

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

#career_merge #ts #middle
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7❤‍🔥4🥰4
Forwarded from Библиотека программиста | программирование, кодинг, разработка
Летим зимовать ✈️

Когда холодает, айтишники пакуют чемоданы, а мы разыгрываем ваучер на 50 000 рублей в Островке.

Поехать к морю или остаться среди снежных пейзажей — выбирайте сами!

Чтобы участвовать, нужно оставить любую реакцию под этим постом и подписаться на каналы ниже:

😎 Типичный программист
🐸 Библиотека программиста
🟢 Ostrovok! Tech

Теперь осталось нажать на кнопку участия под этим постом и вы в игре!

Итоги подведём 12 декабря. Победителя выберем с помощью бота. Подробнее с правилами можно ознакомиться здесь.

Всем удачи!

Участников: 111
Призовых мест: 1
Дата розыгрыша: 19:00, 12.12.2025 MSK (3 дня)
Please open Telegram to view this post
VIEW IN TELEGRAM
6❤‍🔥1🔥1🥰1
This media is not supported in your browser
VIEW IN TELEGRAM
Всего пиксель вправо — а уже не то.

Фронтендеры знают: идеальный интерфейс — понятный каждому. Узнайте, как их создают в команде VK. По ссылке — принципы, кейсы и вакансии для перфекционистов.
🥰5
This media is not supported in your browser
VIEW IN TELEGRAM
💡 Новое в CSS: автоматическая подгонка текста под контейнер

В Chrome Canary 145 появились свойства, которые позволяют нативно растягивать или ужимать текст под ширину блока — без JS.


h1 {
text-grow: per-line scale;
}


ℹ️ Что добавили:

• text-grow — растягивает короткие строки
• text-shrink — ужимает длинные

ℹ️ Методы подгонки:

scale, scale-inline, font-size, letter-spacing


По сути, это нативный FitText.js, только одной строкой CSS.

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

#release_digest #readme #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥2🥰1