Циклическое отображение элементов массива в Angular

Какой синтаксис используется для циклического отображения элементов массива с помощью директивы ngForOf?

👉 @sWebDev

Обнаружение локальных изменений в Angular 17

В Angular 17 разработчики могут использовать стратегию обнаружения изменений OnPush для указания, что компонент должен перерисовываться только при изменении определенных свойств. Это может помочь повысить производительность приложения, поскольку Angular не будет проверять все свойства компонента при каждом изменении.

Статья также рассматривает использование сигналов для управления локальным обнаружением изменений. Сигналы позволяют разработчикам передавать информацию между компонентами, не вызывая повторного рендеринга.

👉 @sWebDev

Директива для создания сложных макетов в Angular

Директива ng-template-outlet позволяет вставлять шаблоны в другие шаблоны. Это может быть полезно для создания более сложных макетов.

Директива имеет один атрибут: name - имя шаблона, который будет вставлен.

Пример использования ng-template-outlet:

<div>
  <ng-template-outlet name="header"></ng-template-outlet>
  <ng-template-outlet name="content"></ng-template-outlet>
</div>

<ng-template #header>
  <h1>Заголовок</h1>
</ng-template>

<ng-template #content>
  <p>Контент</p>
</ng-template>

В примере ng-template-outlet используется для вставки двух шаблонов в один контейнер. Шаблон с именем header будет вставлен в верхнюю часть контейнера, а шаблон с именем content будет вставлен в нижнюю часть контейнера.

👉 @sWebDev

Diorama - ThreeJS

Пример реализации трехмерной диорамы на Three.js.

👉 @sWebDev

Освоение обработки ошибок в Angular: подробное руководство

В статье автор рассказывает о том, как обрабатывать ошибки в Angular приложениях. Он рассматривает четыре простых и наиболее распространенных стратегии обработки ошибок:

- Обработка исключений в синхронном и асинхронном коде.
- Обработка HTTP ошибок.
- Использование сервисов ошибок.
- Обработка ошибок в компонентах.

👉 @sWebDev

Simple data analysis (SDA) v2

SDA v2 - это JavaScript-библиотека для анализа данных, которая объединяет в себе лучшее из Python, R и JavaScript. Вторая версия SDA была полностью переписана для повышения производительности, используя DuckDB в качестве движка базы данных. Это позволило библиотеке работать в шесть раз быстрее, чем предыдущая версия.

👉 @sWebDev

Block tower

Пример реализации игры с постройкой башни на Three.js.

👉 @sWebDev

8 лучших практик для разработки компонентов React.js

В статье автор делится восемью лучшими практиками разработки компонентов React.js.

👉 @sWebDev

Tab Bar Animation (Dark)

Анимация для создания интерактивной навигации в приложении на GSAP.js.

👉 @sWebDev

React Advanced Function Component (AFC)

React-afc - это библиотека для более простого (чем в простом React) уменьшения количества ненужных ререндеров дочерних компонентов.

В обычном React функциональный компонент рендерится заново при каждом обновлении состояния или при изменении внешних зависимостей, таких как props. Это может привести к снижению производительности приложения, особенно если компонент имеет много дочерних компонентов.

React-afc предоставляет набор методов, которые позволяют оптимизировать рендеринг дочерних компонентов. Эти методы позволяют определять, какие дочерние компоненты необходимо рендерить заново, а какие можно пропустить.

👉 @sWebDev

Узнайте, как устроены сайты, и научитесь создавать свои. Присоединяйтесь к мини-курсу по веб-разработке от Skillbox и получите гайд по профессии. Он поможет вам узнать больше о том, что нужно для старта карьеры в веб-разработке.

Регистрация и подробная программа — по ссылке: https://epic.st/55jYv

После завершения мини-курса вы сможете добавить в своё портфолио 3 классных проекта: сайт, приложение и сервис.

Спикер мини-курса — Даниил Пилипенко, основатель и директор центра подбора IT-специалистов SymbioWay. 19 лет работает в сфере Java и веб-разработки, руководит командами разработки в разных проектах. Автор 10 курсов по программированию и карьере программистов.

🎉Всех участников ждут подарки:
— сертификат на скидку 10 000 рублей на любой курс;
— доступ к изучению английского языка на год;
— персональная карьерная консультация.

🌟Откройте новые возможности для карьеры с нами!

Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880

Как получить доступ к информации о компонентах, директивах и шаблонах Angular

Какая директива Angular позволяет получить доступ к информации о компонентах, директивах и шаблонах?

👉 @sWebDev

React-компоненты на сервере: плюсы, минусы и подводные камни

В статье автор делится своим опытом использования React Server Components (RSC) в Next.js. Он рассматривает плюсы и минусы использования RSC, а также дает рекомендации по их применению.

👉 @sWebDev

Объединение рефов в React

Функция useForkRef() позволяет объединить два или более рефов в один. Принимает в качестве аргументов один или несколько рефов. В качестве результата функция возвращает функцию-реф, которая привязывает к себе все переданные рефы.

Пример useForkRef():

function App() {
  const [inputRef, inputRef2] = useForkRef(input);

  inputRef.current.addEventListener("change", handleChange);
  inputRef2.current.addEventListener("change", handleOtherChange);

  return (
    <input ref={input} />
  );
}

В этом примере мы используем функцию useForkRef() для создания двух отдельных обработчиков событий для одного и того же элемента DOM. Первый обработчик будет вызывать функцию handleChange(), а второй - функцию handleOtherChange().

👉 @sWebDev

Анимация на Anime.js

Абстрактная трехмерная анимация на Anime.js.

👉 @sWebDev

28 продвинутых функций Next.js, которые должен знать каждый

В статье рассматриваются некоторые продвинутые функции Next.JS, например, легкое удаление свойств JSX или проверка типов для файла next.config.js.

👉 @sWebDev

Symbiote.js 2.0

Это новая версия популярной фронтенд-библиотеки для создания веб-компонентов и приложений.

Symbiote.js отличается от других популярных библиотек тем, что она не пытается заменить собой веб-платформу или создать новый синтаксис. Вместо этого, она расширяет стандартные браузерные API, позволяя создавать гибкие и расширяемые решения.

👉 @sWebDev

Highway race

Пример реализации игры на Three.js.

👉 @sWebDev

Будущее React.use и React.useMemo: мощная альтернатива контекстным селекторам

Контекстные селекторы - это способ получения доступа к данным из контекста React. Они могут помочь предотвратить ненужные рендеры, но имеют ряд недостатков.

👉 @sWebDev