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

Refokus 22 Пример анимации страницы на Three.js. 👉 @sWebDev

⁉️ Только начинаешь свой путь в IT, и для трудоустройства не хватает реального опыта работы? Знакомая история? Тогда давай к нам! 🚀 PREAX — онлайн-стажировка для frontend-разработчиков. Помогаем накопить реальный 💪 опыт, формируем кадровый резерв для работодателей и привлекаем лучших к коммерческим заказам. ЧТО ВНУТРИ? 🔖 Пять больших проектов. Пополнишь портфолио крутыми кейсами. 🔖 Спринты и дедлайны. Научишься рассчитывать время и укладываться в сроки. 🔖 Работа с легаси. Исправишь ошибки, оптимизируешь код и сделаешь рефакторинг. 🔖 Пачка код-ревью. Поделишься опытом и увидишь, как сделать свой код еще лучше. 🔖 Поддержка сообщества. Сможешь задать вопрос и получить совет, если нужна помощь. 🔖 Новый стек технологий. Закрепишь на практике и расширишь стек технологий. 🔖 Гибкий график. Сможешь выстраивать нагрузку, легко совмещая её с работой или учебой. В итоге получишь реальный опыт работы в команде! Попробуй! 1-й спринт — 🆓 БЕСПЛАТНО! Реклама, ООО «Преакс Плэтформ», ОГРН 1237700372755

Оптимизация жизненного цикла компонентов afterRender и afterNextRender - это два новых хука жизненного цикла, которые были добавлены в Angular 17. afterRender вызывается один раз после завершения рендеринга компонента. Подходит для: 1) Доступа к DOM-элементам. 2) Инициализации сторонних библиотек. 3) Выполнения кода, который должен быть выполнен после рендеринга. afterNextRender вызывается после каждого цикла обнаружения изменений. Подходит для: 1) Синхронизации состояния компонента с DOM. 2) Обновления отображения в ответ на изменения данных. 3) Реагирования на изменения размеров окна. afterRender и afterNextRender не вызываются при SSR (Server-Side Rendering). afterNextRender не гарантирует, что DOM будет стабильным. Пример:

export class MyComponent {
  constructor() {}

  ngAfterRender() {
    console.log('Component has been rendered');
  }

  ngAfterNextRender() {
    console.log('Component has been rendered and change detection has run');
  }
}

👉 @sWebDev

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

Веб-скрапинг с Bright Data, Node.js и Puppeteer Статья рассказывает о том, как использовать Bright Data для эффективного сбора данных с веб-сайтов с помощью Node.js. В статье рассматриваются следующие темы: Введение в веб-скрапинг, преимущества Bright Data, настройка Node.js и сбор данных с помощью Bright Data и Puppeteer. 👉 @sWebDev

Назначение action в хуке useFormState Для чего используется атрибут action в хуке useFormState? 👉 @sWebDev

Million.js Million.js - это минималистичный фреймворк на JavaScript, который эффективно работает с элементами DOM. В отличие от традиционных фреймворков, которые обновляют весь DOM при каждом изменении состояния. Библиотека использует более детальный подход, обновляя только необходимые части DOM. Million.js также имеет свой компилятор, который автоматически оптимизирует компоненты React на сервере. 👉 @sWebDev

Loadig003 Пример анимации загрузки на Three.js. 👉 @sWebDev

Промышленные весы для бизнеса! Группа компаний «Невские весы» с 1999 года разрабатывает и производит весоизмерительное оборудование. Собственная производственная база компании, полный цикл производства, соединение традиций и новаторства в технологических и конструкторских решениях, высококачественные датчики производства мировых лидеров – вот составляющие, позволяющие компании производить весы для грузов от 100 мг до 400 тонн различного класса точности для компаний различных отраслей и обеспечивать высокие метрологические характеристики оборудования. Узнать больше #реклама vesservice.com О рекламодателе

Создание навигационной панели с помощью Angular 17 и Tailwind CSS Гайд по созданию навигационной панели с помощью Angular 17 и Tailwind CSS. 👉 @sWebDev

‼️Всем кодерам посвящается‼️ Code Ready — полезные ресурсы, шпаргалки, проекты на GitHub, разработка веб-приложений, и многое другое для твоих проектов, сразу с готовым кодом, и примером их использования. 🪩Расставь приоритеты, добавь лёгкости в свою работу и становись лучше с @code_ready

When Animators Become Web Designers Пример анимации загрузки страницы на GSAP.js. 👉 @sWebDev

Хватит играть в танчики, пора создавать что-то новое. Новую игру, которая принесет тебе миллионы (и мы не только о поклонниках, но и о деньгах) Геймдизайнер — это режиссёр игры. Его задача собрать из сюжета, игровых механик и графики захватывающий мир и придумать правила, по которым он будет жить. Опытные геймдизайнеры могут зарабатывать около 200 000 рублей, по данным hh.ru. Попробуйте прямо сейчас, не ждите, пока мест не останется! ❕ Запрыгнуть в последний вагон, несущий вас к деньгам, славе и успеху можно тут. Причем БЕСПЛАТНО!

Reatom Reatom - это библиотека управления состоянием для React, которая является альтернативой RTK, Zustand и React Query. Бибилиотека позволяет создавать глобальное состояние, которое можно легко использовать и изменять в любых компонентах с помощью хуков или декораторов. Также поддерживаются асинхронные действия, селекторы, подписки, отладки и другие возможности. 👉 @sWebDev

Управление состоянием в Angular: какие есть варианты? Статья рассказывает о различных вариантах управления состоянием в Angular приложениях. Автор объясняет, что такое состояние, зачем им нужно управлять, и какие библиотеки и подходы существуют для этого. 👉 @sWebDev

Любишь рисовать или создавать новые проекты – тебе сюда, на бесплатный курс компьютерной графики! ☑️ Узнай, как создавать арт-проекты для игр, кино и рекламы. ☑️ Научись делать уникальный визуал, даже если у тебя нет опыта в компьютерной графике. Куратор поможет, и ты совсем скоро добавишь в портфолио 20 работ — и сможешь устроиться в студию, работать на фрилансе или стать NFT-художником. Классная перспектива? Ну да, для тех, кто запишется прямо сейчас, а не отложит все на потом.

Разрыв фото на Gsap.js Пример анимации разрыва фото на GSAP.js. 👉 @sWebDev

Не бойся собеседований и поиска работы! Трать 10 минут в день и оставайся максимально актуальным разработчиком на рынке. progway — канал с разбором самых актуальных вопросов с Front-End собеседований: — Как оценить алгоритм? — Откуда методы у примитивов? — Какая структура у HTTP запроса? — Что такое cookies? — и ещё более 150 вопросов Автор канала — Денис, разработчик с опытом менторинга и собеседований более 4 лет. Готовься к собеседованиям эффективно вместе с @prog_way_blog — выделись среди конкурентов!

Тонкая настройка директивы ngModel ngModelOptions – это объект, который позволяет настроить различные параметры директивы ngModel. updateOn: определяет, когда происходит обновление модели (при blur, change или input). debounceTime: задержка обновления модели (в миллисекундах). emitModelToViewChange: позволяет синхронизировать изменения модели с представлением. modelToViewConverter: функция для преобразования значения модели перед отображением в представлении. viewToModelConverter: функция для преобразования значения представления перед сохранением в модели. Пример использования:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent {
  model = '';

  constructor() {}

  ngOnInit() {
    this.model = '初始值';
  }
}

<input [(ngModel)]="model" ngModelOptions="{updateOn: 'blur', debounceTime: 500}">

В этом примере значение модели будет обновляться только при потере фокуса с поля ввода. обновление модели будет задерживаться на 500 миллисекунд. 👉 @sWebDev