Руководство по Angular Signals с практическими примерами использования (часть 1)

Руководство по сигналам в Angular с практическими примерами. Материал освещает концепцию сигналов, их роль в управлении данными и взаимодействии компонентов. Структурированный подход к сигналам улучшает организацию кода и обеспечивает более гибкую архитектуру. Это первая часть из серии, в которой будут рассмотрены вариации использования сигналов.

👉 @sWebDev

Flatpickr

Flatpickr - легковесная и настраиваемая JavaScript библиотека для выбора даты и времени в веб-приложениях. Она обладает богатым функционалом и поддерживает различные форматы дат, локализацию и темы оформления. Удобен для создания интерфейсов с выбором дат и времени.

👉 @sWebDev

Представляем атомарный дизайн в Vue.js

Атомный дизайн — это методология создания систем дизайна, которая разбивает пользовательские интерфейсы на небольшие повторно используемые компоненты.
Рассмотрим:
1. Атомы.
2. Молекулы.
3. Организмы.
4. Шаблоны.
5. Страницы.

👉 @sWebDev

Как установить заголовок страницы в Angular из компонента?

В Angular есть функционал, позволяющий задавать title из компонента. Как это можно сделать?

👉 @sWebDev

Falling autumn leaves shader

Осенняя атмосфера в анимированном проекте на Three.js.

👉 @sWebDev

Декоратор Attribute в Angular

В Angular есть декоратор Attribute, который позволяет передавать статическую строку без дополнительной нагрузки на производительность путем устранения проверки на изменения в ней. Значения декоратора Attribute проверяются однократно. Подход имеет сходство с декоратором @Input:

    @Component({
        ...
    })
    export class BlogComponent {
        constructor(@Attribute("type") private type: string ) {}
    }

👉 @sWebDev

Loader

Прелоадер, выполненный в формате разделения клеток. Реализовано на Splitting.js и Gsap.js.

👉 @sWebDev

Создание доступных форм в Vue с помощью Formkit

Рассмотрим использование FormKit во Vue для создания доступных форм. Материал дает понимание о том, как обеспечить доступность веб-форм для всех пользователей, включая людей с ограниченными возможностями.

👉 @sWebDev

ngx-mask

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

👉 @sWebDev

The Basement

Анимированная загрузка текста, выполненная на Splitting.js.

👉 @sWebDev

Топ 8 инструментов для разработки на Angular в 2023 году

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

👉 @sWebDev

ngx-spinner

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

👉 @sWebDev

Solid.js vs Svelte: битва принципов

В материале сравнение между двумя современными JavaScript-библиотеками для создания пользовательских интерфейсов - Solid.js и Svelte. Автор выделяет ключевые аспекты каждой библиотеки и помогает разработчикам определить наиболее подходящий инструмент для ваших целей.

👉 @sWebDev

Как создать собственный интерполятор в Angular?

В основном используется стандартный интерполятор шаблона {{}} для отображения свойств компонента Angular. Но мы можем изменить интерполятор на свой. Как это можно сделать?

👉 @sWebDev

Jumping Gooey Navigation

Анимированная навигационная панель, выполненная на Gsap.js.

👉 @sWebDev

Полезные практики React в 2023 году. Часть 1

1.Создание новой базовой структуры приложения React.
Для соблюдения лучших практик в React необходимо создать структуру проекта, которая будет соответствовать его размеру. Для этого можно использовать команду NPM create-react-app.

Следующие шаги могут помочь при определении архитектуры:
1) Макет папок: рекомендуется ориентироваться на компоненты и группировать файлы компонентов (такие как тесты, CSS, JavaScript и ресурсы) в одной папке:

   Components
   |
   --Login
   |
   --tests--
   --Login.test.js
   --Login.jsx
   --Login.scss
   --LoginAPI.js

2) Группировка файлов по типу: можно также рассматривать группировку файлов по типам, чтобы облегчить организацию:

  APIs
  |
   --LoginAPI
   --ProfileAPI
   --UserAPI
   Components
   |
   --Login.jsx
   --Login.test.js
   --Profile.jsx
   --Profile.test.js
   --User.jsx

👉 @sWebDev

GSAP ANIMATION PIZZA LANDING PAGE

Анимированная сборка пиццы при скролле, выполненная на GSAP.js.

👉 @sWebDev

Лучшие практики для создания масштабируемого приложения Vue.js

Руководство по созданию масштабируемых веб-приложений с использованием фреймворка Vue.js. В статье рассматриваются различные аспекты разработки, начиная с организации проекта и заканчивая управлением состоянием с помощью Vuex.

👉 @sWebDev

React, Visualized

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

👉 @sWebDev