TGViewer
Channel Public Channel
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

@frontendproglib

Все самое полезное для фронтенда в одном канале.

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

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

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

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Subscribers
20.9K
Photos
3.7K
Videos
342
Links
6K

Showing posts older than #8261 · Back to latest

Older Posts 15 shown
Post #8260 1.62K
Кажется, у онлайн-обучения появился формат, которого давно не хватало 👇
  • 🥰 3
Post #8259 1.99K
🔊 936 звуков для интерфейсов в одной библиотеке

Open-source-библиотека собрала звуковые эффекты для кнопок, уведомлений, загрузки, ошибок, успешных действий, переключателей и других состояний интерфейса.

Все звуки распределены по 12 стилям — среди них Minimal, Glass, Sci-Fi, Mechanical, Zen и Retro. Это помогает выдержать единый звуковой стиль во всём продукте.


⚡️ Звуки можно подключать вручную или использовать готовый промпт, чтобы AI-агент сам подобрал подходящий эффект.

Полезная находка для SaaS, игр и интерактивных интерфейсов. А разобраться, как внедрять такие решения в реальные проекты с помощью AI-инструментов, можно на курсе «ИИ для разработчиков» 👋

🔗 Ссылка

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

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

#stack #ux_review
  • ❤ 5
  • 🤔 2
  • 🥰 1
Post #8258 1.72K
📱 Отключайте автокапитализацию там, где она мешает

Мобильные Chrome и Safari могут автоматически делать первую букву заглавной. Для обычного текста это удобно, но в полях с логином, email, промокодом или техническим значением такая помощь только увеличивает число ошибок.

Добавьте атрибут:


<input autocapitalize="off">


Он подскажет браузеру, что при вводе не нужно автоматически менять регистр букв.

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

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

#readme
  • 👍 14
  • 🥰 2
Post #8253 1.75K
⭐️ Что стоит знать про работу с массивами и объектами

Работа с массивами и объектами — не только про хранение данных, но и про правильную трансформацию, фильтрацию и аккумулирование значений, соблюдая иммутабельность.

Что в карточках:

➡️ Что такое иммутабельность и зачем её соблюдать

➡️ Как работают методы массивов map, filter и reduce

➡️ Конкретный пример кода на reduce с объяснением аргументов и отличий от forEach


📌 Для практики: попробуйте фильтровать пользователей, создать массив имён и посчитать сумму через reduce — классические кейсы на собеседованиях.

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

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

#under_hood
  • 👍 6
  • ❤ 4
  • 🥰 1
Post #8252 1.71K
👾 Превращаем SVG и текст в 3D-компоненты для React

3dsvg.design — бесплатный браузерный инструмент, который превращает обычные SVG, текст и простую графику в объёмные интерактивные элементы.

Можно:

— загрузить SVG или добавить текст;
— настроить глубину, освещение и положение объекта;
— сразу посмотреть результат в браузере;
— экспортировать готовый React-компонент и вставить код в проект.


Полезно для лендингов, hero-блоков и интерфейсов, где хочется добавить 3D без ручной работы с WebGL.

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

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

#stack #react
  • 👍 4
  • 🥰 2
  • ❤ 1
Post #8251 1.83K
😧 Как ловить «висящие» запросы

SPA иногда «залипает» — индикатор крутится, ответа нет. Причина часто в pending-запросах.

1️⃣ Как искать:

— DevTools → Network → сортировка по Status
— Pending-запросы = кандидаты
— Вкладка Initiator покажет, что их вызвало
— Waterfall помогает увидеть длинные цепочки

2️⃣ Фиксы:

— Ставьтете таймауты (axios/fetch):


fetch(url, { signal: controller.signal })


— Отменяйте запросы в cleanup useEffect
— Избегайте дубликатов при повторных монтированиях

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

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

#readme
  • 👍 5
  • 🥰 5
Post #8250 1.81K
🖥 Что нового в Chrome 151

В стабильной версии Chrome появился новый элемент <usermedia>. Он позволяет запускать работу с камерой и микрофоном через браузерный контрол, без отдельного вызова getUserMedia().

Ещё несколько заметных изменений:

— shadowrootslotassignment у <template> позволяет настраивать ручное распределение слотов в Declarative Shadow DOM прямо из HTML;

— новые метрики soft-navigation и interaction-contentful-paint помогают измерять производительность SPA после переходов и пользовательских действий;

— метод textStream() появился у Request, Response и Blob;

— событие wheel получило свойство momentum, чтобы отличать физический скролл от инерционного;

— XML-парсер для ряда сценариев переписали на Rust ради защиты от ошибок памяти.


Также Chrome 151 больше не поддерживает macOS 12: для обновлений понадобится macOS 13 или новее.

🔗 Источник

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

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

#release_notes #chrome #browser
  • ❤ 7
  • 🥰 3
Post #8249 1.8K
🫧 Генератор необычных SVG-фигур за пару кликов

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

Можно настроить количество точек и контраст между ними, подобрать подходящую «кляксу», а затем скачать её в SVG или сразу скопировать код.

🔗 Ссылка

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

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

#stack
  • ❤ 4
  • 🥰 2
Post #8247 2.08K
😎 Антипаттерны фронтенда

Если хочется понять не только «как правильно», но и «как делать не стоит» — вот подборка материалов про антипаттерны. Полезно и джунам, и мидлам, чтобы узнавать знакомые грабли:

1️⃣ ТОП 7 антипаттернов React

➡️ Видео с наглядными примерами ошибок, которые превращают проект в хаос: от пропс-дриллинга до гигантских компонентов.

2️⃣ Организация потоков данных во фронтенд-приложениях

➡️ Хотя статья не полностью «антипаттерны», есть разбор того, как плохая организация потоков данных может породить антипаттерны. Полезно понять, как избежать каша в данных.

3️⃣ Паттерны и антипаттерны написания условий в JS

➡️ Разбор типичных if-else и тернарных адов. Показывает, как простые привычки могут убить читаемость.

4️⃣ Избегайте 5 антипаттернов с коллекциями в JS

➡️ Как неправильно работать с массивами и коллбэками, и какие практики реально спасают от багов.

5️⃣ Антипаттерны в разработке: что с ними делать

➡️ Теория и практика: откуда берутся антипаттерны, как их распознавать и как чинить, если уже всё плохо.

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

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

#read_watch
  • 👍 5
  • 🥰 2
  • ❤ 1
Post #8246 1.86K
💡 Почему inline-пропсы отключают React.memo

React.memo пропускает повторный рендер только тогда, когда пропсы не изменились. Объекты и функции React сравнивает по ссылке через Object.is.

🔵 Поэтому такой код создаёт новые ссылки при каждом рендере родителя:


<ProductRow
style={{ padding: 16 }}
onAddToCart={(id) => addToCart(id)}
/>


Даже если содержимое не изменилось, React.memo видит новые пропсы и снова рендерит ProductRow.

🔵 Статический объект лучше вынести за компонент:


const ROW_STYLE = { padding: 16 };


🔵 А колбэк, который передаётся в memoизированного потомка, стабилизировать через useCallback:


const handleAddToCart = useCallback((id) => {
addToCart(id);
}, []);


Но делать это для всех объектов и функций не нужно. Оптимизация имеет смысл, когда родитель часто обновляется, дочерний компонент достаточно тяжёлый и лишние рендеры подтверждены в React DevTools Profiler.

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

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

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

#under_hood
  • 👍 5
  • 🥰 2
  • 😁 1
Post #8245 1.67K
😧 Как определить системную тему в JavaScript

prefers-color-scheme показывает, какую тему пользователь выбрал в системе: светлую или тёмную.

🔜 Через matchMedia() это можно проверить из JavaScript:



console.log(theme.matches ? 'dark' : 'light’);


🔜 И подписаться на изменение темы без перезагрузки страницы:


theme.addEventListener('change', ({ matches }) => {
document.documentElement.dataset.theme =
matches ? 'dark' : 'light';
});


Полезно для интерфейсов, которые автоматически подстраиваются под настройки ОС.

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

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

#readme
  • ❤ 2
  • 🥰 2
  • 👍 1
Post #8244 1.29K

Forwarded from Proglib.academy | IT-курсы

😱 Знакомо? Лимит уже закончился, а задача всё ещё не готова. Часть токенов могла уйти на повторное чтение файлов, лишний контекст и неудачные попытки.

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

В итоге станет понятнее, сколько ресурсов выделять на запуск, когда его останавливать и в какой момент лучше изменить подход 🔍


До 31 июля курс можно купить со скидкой, а все материалы останутся в бессрочном доступе.

🔗 Узнать подробности о курсе

🏃‍♀️ Proglib Academy
  • 🥰 2
Post #8243 1.48K
Куда на самом деле уходят токены во время агентного кодинга? 🔥
  • 🥰 2
Post #8238 1.69K
⭐️ Что стоит знать про WebGL

WebGL — это не только 3D в браузере, а доступ к возможностям GPU из JavaScript для игр, симуляций, карт и визуализаций.

Что разобрано в карточках:

➡️ Что такое WebGL и как он работает в браузере
➡️ Зачем он нужен и где применяется
➡️ Какие библиотеки упрощают работу с WebGL
➡️ Минимальный пример инициализации контекста


📌 Для профи рекомендуем книгу OpenGL ES 2.0 Programming Guide — это база, на которой построен WebGL, и лучший способ понять, как всё работает под капотом.

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

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

#career_merge
  • ❤ 4
  • 👍 3
  • 🥰 2
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →