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

Передозировка useMemo В статье автор рассказывает о том, как чрезмерное использование хука useMemo может негативно повлиять на производительность вашего React-приложения, например, привести к ненужному кэшированию значений, что может увеличить объем памяти, используемой вашим приложением. 👉 @sWebDev

Metrognome Пример реализации метронома на anime.js. 👉 @sWebDev

React Icons Библиотека предоставляет набор из более чем 1 000 иконок. Иконки можно кастомизировать, настроить под себя, изменив их размер и цвет. Работать с иконками просто благодаря API. Кроме того, разработчик может создавать пользовательские наборы значков либо же переопределять стили отдельных значков по умолчанию, если это нужно для конкретного проекта. 👉 @sWebDev

Как писать чистые компоненты Vue Эта статья о том, как писать чистые компоненты Vue. Автор статьи предлагает использовать паттерны Функциональное ядро и императивный интерфейс. Функциональное ядро: "чистая" часть кода, где живет бизнес-логика. Она не зависит от Vue и легко тестируется. Императивный интерфейс: часть кода, которая взаимодействует с Vue. Здесь вы управляете state, событиями и другими Vue-специфическими вещами. 👉 @sWebDev

Хочешь освоить или улучшить свои навыки JavaScript? Отличные новости — тебе теперь есть где тренироваться! В канале @codewars_js публикуют задачи разной сложности по JavaScript Подписывайся и развивайся, всего за 5-10 минут в день!

AnimeJS Animation Effects Пример анимации сетки на Anime.js. 👉 @sWebDev

Как заработать в соц сетях с помощью Perfluence История о том, что крупные бренды сотрудничают только с блогерами-миллионниками давно прошла. Имея всего 1500 подписчиков ты можешь сотрудничать с топовыми косметическими сетями и брендами, получать от них продукцию для распаковок и зарабатывать на покупках своих подписчиков. Регистрируешься на платформе Perfluence. Это абсолютно бесплатное приложение, тебе не надо платить за доступ. Выбираешь бренд, который хочешь прорекламировать, получаешь индивидуальный промокод на скидку, которым поделишься с подписчиками в своем блоге. Ну вот и все. Чем больше они используют твоих промо, тем выше будет твой доход. Зарегистрироваться #реклама 16+ dash.perfluence.net О рекламодателе

Хук для работы с action useFormState – новый хук в React 19, помогающий работать с action у формы. Он принимает функцию action и дефолтный стейт формы, возвращая два значения: Текущий стейт формы: обновляется при каждом вызове action. Новый action: используется в форме для передачи данных в action. Пример:

import { useFormState } from 'react-dom';
import { action } from './action';

function MyComponent() {
  const [state, formAction] = useFormState(action, null);
  // ...

  return (
    <form action={formAction}>
      {/* ... */}
    </form>
  );
}

👉 @sWebDev

Реализация технологии lazy loading в Angular Статья рассказывает о том, как реализовать технологию lazy loading в Angular приложениях. Lazy loading - это техника, которая позволяет загружать части приложения только тогда, когда они необходимы. Это может быть полезно для улучшения производительности приложений, особенно крупных приложений с большим количеством модулей. 👉 @sWebDev

Отраслевые мероприятия 2024 Полезные отраслевые форумы и конференции - новые рынки сбыта и перспективы для бизнеса. В эпоху изменений российских и глобальных рынков регулярная коммуникация и обмен опытом становятся критичными для развития компаний. Участвуйте в бизнес событиях - это прямой диалог регуляторов, заказчиков и поставщиков. Узнать больше #реклама event.tektorg.ru О рекламодателе

Cоздание сложных макетов в Angular Какой атрибут директивы ng-template-outlet определяет имя шаблона, который будет вставлен? 👉 @sWebDev

Joint.js Joint.js - это библиотека JavaScript для создания диаграмм и графиков на основе SVG. Она позволяет создавать различные типы диаграмм, включая блок-схемы, организационные диаграммы, линейные диаграммы, круговые диаграммы и другие. Библиотека является альтернативой GoJS, которая также поддерживает различные типы диаграмм. Она отличается более простой и понятной API. 👉 @sWebDev

Sad Walk Пиксельная анимация на Three.js. 👉 @sWebDev

Курс «Python-разработчик» от Яндекса. Начните с нуля. Программа 2024 года. Диплом о переподготовке и помощь с поиском работы. Рассрочка. Зарегистрироваться #реклама 16+ practicum.yandex.ru О рекламодателе

Создание асинхронных операций для сигналов в Angular Эта статья о том, как построить computedAsync для сигналов в Angular. Сигналы - это новая функция Angular, которая позволяет коду сообщать шаблонам (и другому коду), что данные изменились. Это улучшает обнаружение изменений в Angular, а также повышает производительность и реактивность кода. Автор статьи объясняет, как использовать сигналы, как создавать вычисляемые сигналы с помощью computed и computedAsync, и как работать с асинхронными операциями с помощью computedAsync. 👉 @sWebDev

Pop-out Scrollers w/ GSAP Пример реализации слайдера на GSAP.js. 👉 @sWebDev

UAParser.js UAParser.js - это библиотека JavaScript для определения пользовательского агента, браузера, операционной системы, процессора и типа устройства. Она может использоваться для различных целей, например, для адаптации веб-приложений к различным устройствам или для отображения различной информации в зависимости от типа браузера. 👉 @sWebDev

Бесплатный практический вебинар для всех возрастов: Профессия «Frontend-разработчик». ⏰ Когда: уже 20 февраля в 19:00 по мск. Вы узнаете о типичных рабочих задачах программиста и напишете мини-игру, которая работает прямо в браузере. Под капотом немного HTML+CSS и базовые конструкции JS. Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular? 🎁 Всем, кто зарегистрировался — Карта компетенций начинающего Frontend-разработчика, а каждому участнику — Гайд «Как заговорить на сленге IT-специалистов».

Использование createStateContext для совместного использования хука useState Статья рассказывает о том, как использовать контекст React для совместного использования состояния между компонентами. Контекст React часто ошибочно считается решением для управления состоянием. На самом деле контекст предназначен для внедрения зависимостей. Вы предоставляете значение обертке компонента, а затем любой дочерний компонент может использовать это значение с помощью хука useContext. 👉 @sWebDev