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

Lightning Round Текстовая анимация, выполненная на Splitting.js. 👉 @sWebDev

Как защититься от внедрения вредоносных компонентов в React? Если есть компонент, который динамически импортирует и рендерит другой компонент на основе свойства, то есть шанс передачи вредоносного имени компонента в качестве свойства и его импортирования. Как обезопасить свое приложение в таком случае? 👉 @sWebDev

Настраиваем Angular Guards В материале обзор процесса создания настраиваемых Angular Guards: создание Guard, параметризация и использование для защиты маршрутов. 👉 @sWebDev

Rellax.js Инструмент для создания параллакс-эффектов с прокруткой. Библиотека позволяет создавать плавные анимации для элементов в зависимости от скорости прокрутки страницы. Rellax.js обладает минималистичным синтаксисом и простой настройкой. 👉 @sWebDev

Carousel Анимированная карусель, выполненная с применением React. 👉 @sWebDev

Изучение Vue.js в 2023 году: дорожная карта разработчика Если только начинаете знакомиться с Vue.js, то материал по ссылке будет очень кстати. В статье представлена не только дорожная карта, но и краткий очерк технологий, с которыми предстоит познакомиться. 👉 @sWebDev

Cytoscape.js Cytoscape.js - это мощный инструмент для визуализации и анализа графовых структур в веб-приложениях. С возможностью кастомизации, анимаций и интерактивности. Библиотека позволяет легко создавать визуально привлекательные графы для отображения связей, данных или сетей. Несмотря на свою небольшую известность, "Cytoscape.js" предоставляет множество расширений и плагинов для дополнительных функциональных возможностей. 👉 @sWebDev

Как я стал фронтендером 1. Смотрел уроки на ютубе 2. Делал портфолио на гитхаб 3. Начал читать Frontend || Vollex Frontend Vollex выжимает воду из курсов, книг, видеоуроков и заботливо делится самым главным. Гайды, готовый код, тесты и никакой копипасты. Вы знаете, что делать: @vollex_frontend

Angular Super Forms: подтверждение пароля Рассмотрим реализацию подтверждения пароля в форме на Angular. В статье объясняется почему подтверждение пароля является важным и предлагается руководство по созданию компонента, добавлению необходимых директив и логики валидации через Reactive Forms. 👉 @sWebDev

ScrollOut + Splitting.js Анимация текста, появляющаяся при скролле страницы. Выполнено на Splitting.js. 👉 @sWebDev

Задаем title из компонента Angular Знаете о том, что title для веб-страницы можно задавать из компонентов Angular? У Angular есть сервис Title в @angular/platform-browser. Мы внедряем сервис Title в наши компоненты и используем метод setTitle для установки заголовка.

   import { Component, OnInit } from '@angular/core';
   import { Title } from "@angular/platform-browser";

   @Component({
       ...
   })
   export class LoginComponent implements OnInit {
       constructor(private title: Title) {}
    
       ngOnInit() {
           this.title.setTitle("Login");
       }
   }

При переходе на LoginComponent, заголовок браузера будет установлен как "Login". 👉 @sWebDev

Planet Picker Анимированный планетарий, выполненный с помощью библиотеки Splitting.js. 👉 @sWebDev

Как защититься от CSRF-атак в React? Представьте, что у нас есть конечная точка /api/posts/delete, которая удаляет сообщение на основе идентификатора, указанного в теле запроса. Если мы будем проверять только cookie для аутентификации, то злоумышленник сможет создать вредоносный сайт со следующим скриптом, например:

  fetch('https://your-website.com/api/posts/delete', {
  method: 'POST',
  body: JSON.stringify({
  id: 'some-post-id',
  }),
  credentials: 'include',
  });

Как защитить свое приложение в таком случае? 👉 @sWebDev

CPC - GSAP Custom Bounce Анимация текста, выполненная с применением GSAP.js. 👉 @sWebDev

Ant Design Vue Ant Design Vue - библиотека компонентов для разработки пользовательских интерфейсов с использованием Vue.js. Предоставляет более 50 готовых компонентов, включая кнопки, формы, таблицы, навигацию и многое другое. Ant Design Vue следует дизайн-принципам Ant Design и Material Design, обеспечивая современный и стильный внешний вид. Библиотека предоставляет возможность настройки тем, адаптирования компонентов и управления состоянием приложения. 👉 @sWebDev

Аутентификация в Angular, почему это так сложно уложить в голове Рассмотрим сложности аутентификации Angular. Автор анализирует сложности и непредсказуемость процесса аутентификации в Angular, обсуждая причины, по которым могут возникать затруднения и предоставляет советы по обеспечению более понятной и надежной системы аутентификации. 👉 @sWebDev

🟡Тест по React JS от OTUS — Ответьте на 19 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js со скидкой! 👉🏻ПРОЙТИ ТЕСТ ОНЛАЙН-КУРСА ПО REACT.JS https://otus.pw/zVRM/ Курс доступен в рассрочку. 🎁 Пройдете успешно тест, получите доступ к открытым урокам курса. Нативная интеграция. Информация о продукте www.otus.ru

Создаем клон Twitter на NextJs и Supabase Пошаговый туториал по созданию собственного Твиттера на NextJs и Supabase. 👉 @sWebDev