Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
23.1K subscribers
2.22K photos
126 videos
38 files
4.65K links
Все самое полезное для фронтенда в одном канале.

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

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

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

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
加入频道
This media is not supported in your browser
VIEW IN TELEGRAM
💡 Две строки CSS, которые сделают любой блочный элемент изменяемым по размеру

С помощью всего двух CSS-свойств — resize и overflow — можно позволить пользователю изменять размер (ширину/высоту) любого блочного элемента на странице:

p, div, th {
resize: horizontal; /* или vertical, both, none */
overflow: auto; /* важно: не должно быть visible */
}


🔗 Источник

🐸 Библиотека фронтендера #буст
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Анонс Motion для Vue

Motion — популярная и мощная библиотека анимации, которая чаще всего ассоциируется с React, теперь появилась новая версия Vue, и ее функциональность тоже полностью реализована.

Ее легко запустить и интересно освоить, ее уникальный гибридный движок сочетает производительность аппаратно-ускоренных браузерных API с безграничным потенциалом JavaScript.

<template>
<motion.div
:initial="{ opacity: 0, scale: 0 }"
:animate="{ opacity: 1, scale: 1 }"
/>
</template>


🔗 Подробнее

🐸 Библиотека фронтендера #буст
Please open Telegram to view this post
VIEW IN TELEGRAM
👨🏻‍💻 Исследование IT-аудитории Proglib 2025: зарплаты, технологии, профессии

Кто такой современный разработчик в 2025 году? Актуальное исследование портрета IT-специалистов: зарплаты, технологии, специализации и демография разработчиков.

➡️ Вся статистика и детали — здесь

Библиотека программиста #свежак
Please open Telegram to view this post
VIEW IN TELEGRAM
🎧 467-й выпуск подкаста «Веб-стандарты»

Кого слушаем: Юлия Миоцен, Никита Дубко, Алексей Симоненко, Вадим Макеев.

⏱️ Таймкоды:

00:01:00 Дэшборд веб-платформы
00:11:54 Бэкпорт require(esm) в Node.js 20
00:31:26 Рамки в сетках
00:55:47 Всего 14 SVG-фильтров
01:17:33 Styled-components всё
01:37:31 Подчёркивание ссылок
01:58:40 Ответы на вопросы

▶️ Сайт подкаста

🐸 Библиотека фронтендера #буст
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
💡 Copy styles в действии

С помощью данной фичи Chrome DevTools можно быстро скопировать все CSS-стили (включая inline, external, inherited), применённые к конкретному HTML-элементу.

🔗 Источник

🐸 Библиотека фронтендера #буст
Please open Telegram to view this post
VIEW IN TELEGRAM
TypeScript 🆚 JavaScript

Еще в 2023 году вышла статья Ditching TypeScript for JavaScript, где автор делится опытом отказа от TS в пользу JS. Он утверждает, что TypeScript решает проблемы, которых у него никогда не было, а в реальности часто усложняет процесс разработки — особенно в маленьких командах или библиотеках.

💬 А что вы думаете по этому поводу?

🐸 Библиотека фронтендера #междусобойчик
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥 Дайджест новостей за неделю: свежие анонсы и ключевые обновления во фронтенд-разработке

⭕️ Элемент <select> теперь можно настраивать с помощью CSS: теперь есть доступный стандартизированный способ создания настраиваемых элементов <select> — благодаря appearance: base-select.

⭕️ Поддержка логических сокращений в CSS: рабочая группа CSS недавно решила добавить сокращение для установки ширины и высоты элемента.

⭕️ Оформление пробелов: новый способ рисования разделителей в CSS. Kevin Babbitt, Principal Software Engineer, объясняет принципы оформления пробелов в CSS и представляет новое предложение, над которым работает команда для добавления и расширения возможностей тонкой настройки оформления пробелов.

⭕️ Fancy Components: растущая библиотека готовых к использованию анимированных компонентов React — включает в себя множество компонентов для создания различных текстовых анимаций, а также компоненты для фона, анимации, связанной с физикой, SVG-фильтры и многое другое.

⭕️ Вот что нового в WebGPU в Chrome 135, включая экспериментальное тестирование WebXR.

⭕️ Сравните, как ведущие мировые сайты в различных нишах ранжируются по показателям производительности Core Web Vitals.

⭕️ Если вам когда-нибудь понадобится вдохновение в области типографики, Fonts In Use — хороший архив с примерами использования в реальном мире.

⭕️ Parvus 3.0 — доступный лайтбокс без зависимостей. Пример на CodePen.

🐸 Библиотека фронтендера #свежак
Please open Telegram to view this post
VIEW IN TELEGRAM
💡 Простая шпаргалка для фронтенд-разработчика

Object.freeze — метод JavaScript, который возвращает объект с readonly свойствами в TypeScript.

as const — полностью фича TypeScript, которая позволяет добиться глубокой неизменяемости через проверку типов (без семантики на уровне выполнения).

🔗 Источник

🐸 Библиотека фронтендера #буст
Please open Telegram to view this post
VIEW IN TELEGRAM
🎭 Dev Memes: 1 апреля, а баги всё те же

Сегодня день официально разрешённого троллинга — и мы не могли пройти мимо. Собрали подборку мемов для Фронтендеров, которые вызывают лёгкое желание уволиться.

👉 Всё это — из нашего мемного канала «Библиотека IT-мемов»

🐸 Библиотека фронтендера
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🫠 Причины и способы устранения утечек памяти в JavaScript

Утечка памяти — один из самых коварных багов, способный превратить простое приложение в неповоротливого монстра. В этой статье мы разберем основные причины утечек памяти в JavaScript и научимся их эффективно предотвращать.

🔗 Читать статью
🔗 Зеркало
Please open Telegram to view this post
VIEW IN TELEGRAM
Media is too big
VIEW IN TELEGRAM
👾 Babylon.js 8.0 — один из самых мощных, красивых, простых и открытых 3D-движков веб-рендеринга на JavaScript

В версии 8.0 добавлена поддержка улучшенного «освещения на основе изображений» и «освещения области» для окружающего освещения и теней, дополнительный контроль над пайплайном рендеринга и новый облегчённый просмотрщик. Короткое демо смотрите выше ☝️

🔗 Читать анонс

🐸 Библиотека фронтендера #буст
Please open Telegram to view this post
VIEW IN TELEGRAM
🤖 Создание простого ragdoll симулятора

Пример промпта для Claude Sonnet 3.7 и Grok3:

Create a ragdoll physics simulation using Matter.js and HTML5 Canvas in JavaScript. The simulation features a stick-figure-like humanoid composed of rigid bodies connected by joints, standing on a flat surface. When a force is applied, the ragdoll falls, tumbles, and reacts realistically to gravity and obstacles. Implement mouse interactions to push the ragdoll, a reset button, and a slow-motion mode for detailed physics observation


⚡️ Как вам? Делитесь в комментариях👇

🐸 Библиотека фронтендера #буст
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM