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

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

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

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

Slider Swiper.js Карточки блюд, выполненные с применением библиотеки Swiper.js. 👉 @sWebDev

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

Создание страницы новостной рассылки с помощью Vue и Firebase Cloud Firestore Включение возможности подписки на новости на веб-сайте имеет важное значение в рамках цифровой стратегии. Это позволяет расширить список адресов электронной почты и информировать подписчиков о последних продуктах, историях, блогах, новых функциях и других бизнес-событиях. Также этот инструмент помогает продвигать нашу продукцию среди широкой и разнообразной аудитории. В данной статье мы разберем понятия Firebase и Cloud Firestore, а также узнаем, как создать мощную страницу подписки на новости с использованием этих инструментов. 👉 @sWebDev

Concatenated Figures "Резиновый" эффект при наведении, выполненный с использованием GSAP.js. 👉 @sWebDev

Location в Angular Сервис Location позволяет получить URL текущего окна браузера. В зависимости от используемой стратегии LocationStrategy, Location будет сохраняться либо в пути URL, либо в сегменте хэша URL. С помощью Location мы можем перейти по URL, перемещаться вперед в истории платформы, вернуться назад в истории платформы, изменить URL браузера, или заменить верхний элемент в стеке истории платформы. Для использования сервиса Location мы внедряем его из CommonModule.

     import { Location } from "@angular/common"
   @Component({
       ...
   })
   export class AppComponent {
       constructor(private location: Location) {}
       navigateTo(url) {
           this.location.go(url)
       }
       goBack() {
           this.location.back()
       }
       goForward() {
           this.location.forward()
       }
   }

👉 @sWebDev

Calculator Калькулятор, выполненный с применением библиотеки Babel.js. 👉 @sWebDev

Проблемы открытых редиректов React Недавно мы рассматривали одну из уязвимостей React - открытые редиректы. Но какие могут произойти проблемы из-за них? 👉 @sWebDev

Одностраничное приложение: аутентификация и авторизация в Angular Рассматриваем вопросы аутентификации и авторизации в одностраничных приложениях с использованием Angular. Узнаем, как настроить механизмы безопасности, включая JWT-токены и интерсепторы HTTP, чтобы обеспечить безопасность данных и ограничить доступ. 👉 @sWebDev

Zustand Zustand - библиотека управления состоянием для React. Она обеспечивает простой и мощный способ управления состоянием компонентов, подобно Redux, но с меньшим количеством кода. Основанная на функциональных концепциях хуков, Zustand предоставляет легко интегрируемую альтернативу для глобального состояния. Она обеспечивает реактивность, прозрачную обработку асинхронных операций и хорошую производительность. 👉 @sWebDev

DOM, DI и View: деревья в Angular Чтобы стать продуктивным разработчиком на Angular, потребуется понимание различных деревьев, из которых состоит приложение. На первый взгляд легко можно спутать дерево инжекторов DI и DOM-дерево непосредственных HTML-элементов и вьюх Angular. Они похожи и иногда имеют прямое соответствие, но далеко не всегда. В статье рассмотрим различия, научимся держать их в уме и освоим, как можно обойти возможные трудности, связанные с ними. 👉 @sWebDev

​​Хочешь бесплатно освоить JavaScript? Эти два канала научат тебя писать фронт и бэк на JS 👉 Frontender's notes - один из самых больших каналов по фронту с инфой и хаками по фронту 👉 Серверный JavaScript | Node.JS - о серверной стороне JS. Подойдет для фулстаков и тем кто хочет ими стать. Добро пожаловать!

The Cube Анимированный кубик-рубика, выполненный на Three.js. 👉 @sWebDev

Viem Viem - библиотека для создания пользовательских интерфейсов на Vue.js. Она предлагает удобный и декларативный способ разработки UI с помощью визуальных компонентов. Использование Viem улучшает производительность, уменьшает количество кода и упрощает процесс создания интерфейса. 👉 @sWebDev

Что такое запахи кода в Angular? "Запахи" кода - паттерны и принципы программирования, которые могут указывать на проблемы в кодовой базе. В статье рассматриваются несколько типичных "запахов", таких как "длинные методы", "глубокие вложенности", "дублирование кода". Автор предоставляет примеры кода и объяснения, как избегать или исправлять эти "запахи", чтобы сделать код более чистым, поддерживаемым и эффективным. 👉 @sWebDev

Top 10 Albums 2018 Проект анимированного музыкального рейтинга, выполненный на Splitting.js. 👉 @sWebDev

Изменение интерполяции шаблона Angular Мы все используем стандартный интерполятор шаблона {{}} в наших шаблонах для отображения свойств компонента. Начало - {{, а конец - }}. Если мы поместим свойство между ними, оно будет отображено в DOM-дереве браузера. А знаете ли вы, что мы можем изменить стандартные начальные и конечные разделители интерполяции на свои? Это просто — укажите это в свойстве интерполяции декоратора Компонента.

   @Component({
       interpolation: ["((","))"]
   })
   export class AppComponent {}

Интерполяция для использования в шаблоне AppComponent теперь будет "(())", а не "{{}}".

   @Component({
       template: `
           <div>
               ((data))
           </div>
       `,
       interpolation: ["((","))"]
   })
   export class AppComponent {
       data: any = "dataVar"
   }

👉 @sWebDev