Frontender Libs - обзор библиотек JS / CSS

Дарим подписку на Яндекс Музыку Ответьте на 1 вопрос и Яндекс Музыка ваша для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже в подписке. Попробуйте бесплатно❤️ Попробовать #реклама 18+ music.yandex.ru О рекламодателе Реклама на Яндексе

Ammo.js demo Интерактивная анимация вращающегося куба с предметами на Ammo.js. 👉 @sWebDev

Контекст в React: различие между родительскими и владельцами компонентов В React важно понимать разницу между родительскими и владельцами компонентов, особенно при работе с контекстом. Родитель — это компонент, в котором вложен другой, а владелец — тот, который его рендерит. Это различие влияет на обновления: при изменении состояния перерисовываются компоненты во владении, а не все вложенные. В статье показано, как вынести Context.Provider и состояние в отдельный компонент, чтобы избежать лишних перерисовок и улучшить производительность. Подходит тем, кто хочет глубже разобраться в механизмах обновления и оптимизации React-приложений. 👉 @sWebDev

Align HTML Elements to 3D Globe Интерактивная анимация глобуса с настройкой отображения названий на Three.js. 👉 @sWebDev

Trianglify Trianglify — JavaScript-библиотека для генерации фоновых узоров из треугольников с помощью Delaunay-триангуляции. Поддерживает кастомизацию цветов, размеров и плотности. Подойдёт для генерации фоновых изображений, placeholder’ов и декоративных элементов. 👉 @sWebDev

Научим создавать карточки для WB и Ozon с нуля! Дизайнер карточек для маркетплейсов — востребованная и доходная профессия 💰 Научись ей бесплатно! - Бесплатный доступ к курсу - Разбор ДЗ от наставника - Мощные кейсы в портфолио Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

Главное правило вайб-кодера? 👍 – Не спрашивать, как это работает. ❤️ – Если работает – не трогать. 🤔 – Не говорить о вайб-кодинге на ревью. 👉 @sWebDev | #юмор

Snake Game Игра "Змейка" на GSAP. 👉 @sWebDev

👩‍💻 Всем программистам посвящается! Вот 17 авторских обучающих IT каналов по самым востребованным областям программирования: Выбирай своё направление: 👩‍💻 Frontend — t.me/frontend_ready 📱 JavaScript — t.me/javascript_ready 👩‍💻 Backend — t.me/backend_ready 📱 GitHub & Git — t.me/github_ready 👩‍💻 Python — t.me/python_ready 🤔 InfoSec & Хакинг — t.me/hacking_ready 🖥 SQL & Базы Данных — t.me/sql_ready 🤖 Нейросети — t.me/neuro_ready 👩‍💻 C/C++ — https://t.me/cpp_ready 👩‍💻 C# & Unity — t.me/csharp_ready 👩‍💻 Linux — t.me/linux_ready 📖 IT Книги — t.me/books_ready 👩‍💻 Java — t.me/java_ready 👩‍💻 Весь IT — t.me/it_ready 👩‍💻 Bash & Shell — t.me/bash_ready 🖼️ DevOps — t.me/devops_ready 🖥 Design — t.me/design_ready 📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!

Предзагрузка ресурсов с помощью ReactDOM.preinit() Метод ReactDOM.preinit() регистрирует ресурс (например, скрипт или стили), который React должен начать загружать до начала рендеринга. Такой подход ускоряет время отображения контента за счёт раннего запроса критических файлов. Метод не выполняет загрузку — он сообщает React, что ресурс уже начал загружаться или должен быть загружен, и исключает дублирование при отрисовке.

import ReactDOM from 'react-dom';

ReactDOM.preinit('https://example.com/script.js', { as: 'script' });
ReactDOM.preinit('/style.css', { as: 'style', precedence: 'high' });

Сценарий: если известно, что модуль или стиль понадобится в первом кадре (например, в suspense-компоненте или при серверной вставке), вызов preinit() до рендера уменьшает задержку между HTML и визуальным отображением. Поддерживаются типы 'script', 'style', 'font', 'image', 'fetch', 'worker'. 👉 @sWebDev

Чего не хватает современному минимализму? 👍 – Душевных интро-роликов уровня Flash. ❤️ – Ничего, лишние эффекты только отвлекают. 👉 @sWebDev | #юмор

Работа с ChangeDetectorRef.detach() Для чего используется метод ChangeDetectorRef.detach()? Забыли? Вернитесь к посту от 19.05.2025. 👉 @sWebDev

Jump.js Jump.js — библиотека для плавной прокрутки к элементам на странице. Работает без зависимостей, поддерживает настройку отступов и колбэки. Подойдёт для лендингов, навигации по якорям и одностраничных интерфейсов. 👉 @sWebDev

Как бренд влияет на рост ИТ-компаний? Помогите нам найти ответ — участвуйте в исследовании от агентства маркетинга и PR AggreMarketing. Нам важно ваше мнение и практический опыт! Если вы работаете в ИТ и принимаете решения в области маркетинга или PR, приглашаем пройти опрос. Это займет не больше 10 минут. Участники получат приглашение на закрытую онлайн-встречу с результатами исследования и инсайтами рынками. Начать #реклама yandex.ru О рекламодателе

Astral temple, 3d tarot display Интерактивная анимация карт на Three.js. 👉 @sWebDev

Современное E2E-тестирование Angular-приложений с помощью Playwright Unit-тесты проверяют логику, но не отражают, как работает всё приложение целиком. Когда проект растёт, а релизы выходят всё чаще, важно видеть поведение интерфейса глазами пользователя. В статье рассказывается, как использовать Playwright для написания сквозных тестов в Angular и почему этот инструмент помогает выпускать обновления быстрее и увереннее. 👉 @sWebDev

CPChallenge: Food Drops Анимация падения объектов на Three.js. 👉 @sWebDev

Срочно требуются Веб-Дизайнеры в Figma. Обучим с нуля. Онлайн-программа с наставником и чатом. Осторожно! 80% практики. По результату обучения у вас будет портфолио из нескольких работ. Сертификат о прохождении курса. Возможность пройти полное обучение и получить гарантированное трудоустройство! Учитесь дизайну у профессионалов. Переходи по кнопки: "Узнать больше" и начинай свое обучение. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

Cuttr.js Cuttr.js — JavaScript-библиотека для обрезки текста с добавлением многоточия. Позволяет ограничивать вывод по количеству строк или символов. Подойдёт для карточек, превью и адаптивных блоков с переменной длиной контента. 👉 @sWebDev