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

Часто берете больничный? ❤️ - Да. 👍 - Я на удаленке, у меня каждый день больничный. 👉 @sWebDev

Timekeeping Cекундомер созданный с использованием Vue.js и GSAP.js. 👉 @sWebDev

Suspense и React 19 RC В React 19 RC рендер всех дочерних компонентов происходит после завершения загрузки данных, в отличие от React 18, где рендерились все компоненты и отображался fallback до завершения загрузки.

export default function App() {
  return (
    <Suspense fallback={<p>...</p>}>
      <Header />
      <Navbar />
      <main>
        <Content />
      </main>
      <Footer />
    </Suspense>
  )
}

При приостановке компонента происходит последовательная загрузка данных и создается «водопад» запросов. Для решения этой проблемы нужно делать предварительные запросы на уровне роута:

export const Route = createFileRoute('/')({
  loader: ({ context: { queryClient } }) => {
    queryClient.ensureQueryData(repoOptions('tanstack/query'))
    queryClient.ensureQueryData(repoOptions('tanstack/table'))
  },
  component: () => (
    <Suspense fallback={<p>...</p>}>
      <RepoData name="tanstack/query" />
      <RepoData name="tanstack/table" />
    </Suspense>
  ),
})

👉 @sWebDev

👩‍💻 Программирование теперь в телеграм! Вот обширная база материалов, которая ежедневно обновляется, выбирай своё направление: Обучение JavaScript с нуля Обучение Python с нуля Обучение Java с нуля Обучение HTML/CSS с нуля Обучение C/С++ с нуля Обучение С# с нуля Обучение SQL/GO/PHP с нуля Обучение Kotlin/Swift с нуля ⛓ Курсы, книги, шпаргалки, статьи, видео ресурсы — всё собрано в одном месте: @roadmap_ready

Бэкенд-разработчик сел за фронтенд. 👉 @sWebDev | #юмор

Отложенные представления в Angular Когда загружается компонент, обернутый в @defer? Забыли? Вернитесь к посту от 24.06.2024. 👉 @sWebDev

Cesium.js CesiumJS — это библиотека JavaScript, предназначенная для создания 3D-карт и геопространственных визуализаций в браузере. Она используется в различных приложениях, требующих отображения и анализа геопространственных данных. 👉 @sWebDev

Первое собеседование, или Почему устроиться на работу сложнее, чем сдать экзамен В статье рассказывается о сложностях, с которыми сталкиваются соискатели при поиске первой работы, в ней сравнивается процесс собеседования с экзаменами в учебных заведениях. Автор объясняет, почему интервью часто оказывается более трудным испытанием: оно требует не только знаний и навыков, но и умения презентовать себя, справляться с неожиданными вопросами, демонстрировать софт-скиллы и адаптироваться к динамичной и непредсказуемой атмосфере собеседования. 👉 @sWebDev | #собес

Сигналы и ngOnChanges для лучшего управления состоянием Angular Статья сравнивает два подхода к управлению состоянием в Angular: использование Signals и ngOnChanges. В ней объясняется, что ngOnChanges является стандартным методом Angular для отслеживания изменений в данных компонентов, позволяя реагировать на изменения входных параметров. В то время как Signals предлагают альтернативный способ управления состоянием, предоставляя возможность более гибко и эффективно отслеживать изменения данных. 👉 @sWebDev

Star trails Анимированный трекер курсора на ThreeJS. 👉 @sWebDev

Fabric.js Fabric.js — это библиотека JavaScript для работы с HTML5 Canvas, предназначенная для создания и манипулирования объектами в 2D-графике. Она поддерживает современные браузеры и предоставляет простой API для создания интерактивных и анимированных графических элементов. Fabric.js позволяет работать с различными объектами, такими как текст, изображения, формы и пути, а также предоставляет функции для трансформации и группировки объектов. Библиотека поддерживает экспорт и импорт данных в формате JSON или SVG, что облегчает сохранение и восстановление графических сцен. 👉 @sWebDev

Получите диплом от НИТУ МИСИС в веб-разработке Яндекс Практикум и НИТУ МИСИС приглашают на онлайн-программу «Веб-разработчик» Полноценная учёба в онлайн-формате Зачёты, сессии, лекции и семинары с гибким графиком. На платформе Практикума Гибкая теория, автоматическая проверка заданий и встроенная YandexGPT. Преподаватели НИТУ МИСИС и наставники Яндекс Практикума Они будут проводить занятия и учить вас применять теорию на практике. Студенческий, льготы и диплом гособразца У вас будут все преимущества студента-очника. Доступ к инфраструктуре вуза — кампусам, библиотекам и мероприятиям. Оплатить учёбу можно разными способами: всю сумму сразу, по семестрам или с помощью госкредита — тогда ежемесячный платёж составит от 500 ₽, а государство погасит часть кредита за вас. Подать заявку #реклама 16+ practicum.yandex.ru О рекламодателе

Жизненно? 👍 - Да. 🤔 - Нет, я спорю из-за фреймворков. 👉 @sWebDev | #юмор

Portforio Анимированная галерея карточек с использованием ThreeJS. 👉 @sWebDev

Бесплатное обучение IT-профессиям! Базовые знания и практические задания для новичков. Учитесь на практике. Выберите свой путь в IT! Узнать больше #реклама 16+ free.skillfactory.ru О рекламодателе

Управление изменениями данных в Angular ngDoCheck — это метод жизненного цикла компонента в Angular, который предназначен для выполнения собственных проверок и действий, которые не могут быть захвачены встроенными механизмами обнаружения изменений Angular ( например, объекты и массивы, которые модифицируются напрямую, а не заменяются целиком). Синтаксис метода:

ngDoCheck() {
  // Ваша логика проверки изменений
}

Предположим, у вас есть компонент, который отслеживает изменения в массиве объектов. Вы можете использовать ngDoCheck, чтобы вручную проверять эти изменения:

import { Component, DoCheck } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `<div *ngFor="let item of items">{{ item.name }}</div>`
})
export class MyComponent implements DoCheck {
  items = [{ name: 'Item 1' }, { name: 'Item 2' }];

  ngDoCheck() {
    console.log('ngDoCheck called');
    // Логика для проверки изменений в items
  }
}

👉 @sWebDev

А на чем посыпались вы? 🤔 - На HTML. 👍 - Еще держусь. 👉 @sWebDev | #юмор

Реклама для бизнеса любого уровня в Яндекс Директе Создайте эффективную рекламную кампанию с алгоритмами Яндекс Директа 👌 Начните прямо сейчас ⚡ Зарегистрироваться #реклама direct.yandex.ru О рекламодателе