Frontender Libs - обзор библиотек JS / CSS
Открыть в Telegram
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/sWebDev
Больше7 739
Подписчики
-524 часа
-157 дней
-5030 день
Архив постов
Предотвращаем рендеры компонента с react-freeze
Библиотека использует механизм работы Suspense. Компонент оборачивается в Suspense и обертку Suspender. Чтобы “заморозить” компонент в Suspender выбрасывается исключение Promise , перехватывающее Suspense. При получении промиса-исключения, Suspense ставит компонент в режим ожидания, предотвращая лишний рендер и изменение состояния.
👉 @sWebDev
"Javascript developer. Professional" - это хардкорный онлайн-курс для web-разработчиков по продвинутым возможностям JS и его фреймворков.
Справитесь ли вы с уровнем курса? Покажет вступительный тест.
📍Пройдите тестирование, чтобы:
● оценить свои навыки
● получить доступ к демо-занятиям курса
● занять место по специальной цене
● получить доступ в закрытое сообщество JS-разработчиков
👉 Пройти полное тестирование: https://otus.pw/X0vX/м
TroisJS Starfield
По ссылке анимированный фон, созданный с помощью CSS и TroisJS. Фон напоминает прыжок в гиперпространство из звездных войн. При наведении на текст анимация ускоряется, а по клику на кнопку можно менять цвет окружающих объектов.
👉 @sWebDev
Paper.js
Библиотека для работы с векторной графикой. Из особенностей:
открытый исходный код;
импорт и экспорт SVG;
гибкий API;
кроссбраузерность;
👉 @sWebDev
49. parallax bird
По ссылке пример реализации параллакс эффекта при помощи Less и библиотеки Three.js
👉 @sWebDev
Dolphins at dawn
Продвинутая анимация ныряющих дельфинов, созданная при помощи CSS и библиотек GSAP и Three.js.
👉 @sWebDev
Как настроить Next.js на TypeScript, чтобы получить оценку в 100% от Google Lighthouse и Vercel Analytics
В этой статье мы проследим весь путь создания прогрессивного веб-приложения с Next.js и получения 100-процентного результата от Google Lighthouse, Next.js Analytics и уровня безопасности A+ на webpagetest.org.
👉 @sWebDev
Анимированная форма ввода на Vue.js
По ссылке код забавной формы ввода, созданной на Vue.js. Может оказаться полезным, если делаете тематическое веб-приложение.
👉 @sWebDev
Plotly.js
Библиотека для создания графиков с применением JavaScript. Особенности:
возможность использовать более 40 типов диаграм;
открытый исходный код;
доступна для: JavaScript, Python и т.д.
👉 @sWebDev
Функция промежуточного программного обеспечения Next.js
Благодаря функции промежуточного программного обеспечения Next.js можно создавать функции, которые будут выполняться после сделанного пользователем запроса и до момента его выполнения. Все подробности в материале по ссылке.
👉 @sWebDev
Спидометр на GSAP.js
Анимация спидометра для вашего веб-приложения. Реализовано с помощью Canvas, SVG и библиотеки GSAP.js.
👉 @sWebDev
Динамические импорты React
В статье разберёмся с динамическим импортами в React, которые позволят увеличить скорость загрузки вашего веб-приложения.
👉 @sWebDev
Лучшие пропсы компонента Vue
В статье рассмотрим практики правильной передачи пропсов компонента vue, которые позволят избежать ненужного повтора в рендеринге.
👉 @sWebDev
Яндекс Карты в React Native приложениях
Сейчас при разработке мобильных и веб-приложений Google Карты лучше не использовать. У этого две причины: сервисы Google нельзя оплатить и есть шанс, что их могут заблокировать в России. В текущей ситуации можно попробовать перейти на Яндекс Карты. Команда разработки VVDEV расскажет, как это сделать.
👉 @sWebDev
Leaflet.js
Библиотека для создания интерактивных карт. Из особенностей:
адаптация под мобильные устройства;
кроссбраузерность;
открытый исходный код;
малый вес;
хорошая документация.
👉 @sWebDev
Nexus — новый визуализатор дерева компонентов для Next.js
Занимаясь поисками инструментов специально для разработчиков Next.js, мы подбирали стороннее расширение VS Code, структурированное под уникальный функционал Next.js, в то же время функционально считаясь с тем, что находится в его основе — библиотекой React. Фактически, мы искали визуализатор дерева компонентов, знакомый разработчикам React, но структурированный подобно приложению на Next.js и дающий детальную информацию об извлечении данных.
Nexus - Это гибкое и легкое расширение VS Code для разработки на Next.js. С Nexus можно просматривать древовидную структуру кодовой базы на Next.js — информация об извлечении соответствующих данных для всех вложенных компонентов будет у вас под рукой.
👉 @sWebDev
Загрузочный скелет страницы на React
Думаю, многие видели функционал загрузочного скелета, который заключается в том, что страница еще не прогрузилась, а мы уже видим деление и расположение элементов. В данной статье узнаем, как сделать такой функционал на React.
👉 @sWebDev
Next.js
Фреймворк Next.js от Vercel. Интуитивно понятная архитектура маршрутизации на основе каталогов и встроенных функций извлечения данных с возможностями серверного рендеринга до функционала Fast Refresh, с которым пропадает необходимость в системах сборки для «живой перезагрузки», — в Next.js создается по-настоящему интегрированный, мощный процесс разработки полного цикла. Узнать все подробности можно по ссылке.
👉 @sWebDev
🔴 Для тех кто ответил: присматриваюсь
Есть вариант быстро стартануть карьеру и начать зарабатывать от 60к меньше чем через год
Вот самый полный курс по фронту на сегодня:
Профессия Frontend-разработчик с нуля до PRO
А вот причины почему надо идти:
📌 Сезонная скидка на курс - 50%
📌 Гарантируют трудоустройство
📌 Первые полгода вы учитесь бесплатно
Уже доступно! Исследование Telegram 2025 — ключевые инсайты года 
