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

Курс «Английский для разработчиков» Яндекс Практикума Для тех, кто хочет изменить свою профессиональную жизнь и работать в международной команде. Обучение построено не вокруг абстрактной теории, а вокруг рабочих ситуаций и полезных для карьеры навыков: ✋ Стендапы. Подготовитесь обсуждать задачи, задавать вопросы и просить о помощи. 👨‍💻 Работа с заказчиками. Научитесь презентовать решения, говорить про баги и фичи. 📣 Митапы. Сможете понимать на слух доклады и выступать сами. 😎 Собеседования. Научитесь рассказывать про свой опыт, понимать вопросы и тактично переспрашивать. 👯 Неформальное общение с коллегами. Сможете рассказать о своих интересах, опыте, планах на будущее. 💻 Код-ревью. Сможете описать сделанное, дать обратную связь, тактично отстоять своё мнение. Запишитесь на бесплатную консультацию. Кураторы определят ваш уровень языка и расскажут подробнее про обучение.

AngularFire AngularFire - это интеграция Firebase в Angular. Мощное сочетание, позволяющее удобно создавать веб-приложения, используя функциональность Firebase: базу данных в реальном времени, аутентификацию, хостинг и другие сервисы. 👉 @sWebDev

React + Signals = Vue 3 В статье сравнение подходов для обработки сигналов React и Vue3. Рассмотрим различия между двумя фреймворками на примере паттерна "сигналов". Изучив материал, вы сможете выбрать наиболее подходящий инструмент в зависимости от вашего проекта. 👉 @sWebDev

3D Globe Three.js with location pointer Анимированный глобус, выполненный на CSS и библиотеке Three.js. 👉 @sWebDev

Защита от открытых редиректов React Открытые редиректы возникают, когда приложение включает в целевой URL пользовательский ввод без предварительной проверки. Это может обмануть пользователей и привести к краже данных. Для защиты мы можем проверять URL перенаправления перед его использованием. Один из способов сделать это - поддерживать список разрешенных URL:

   const ALLOWED_REDIRECTS = ['/home', '/profile', /* ... */];

   function Login() {
     const [redirectTo, setRedirectTo] = useState('');

     const login = async () => {
       // Предположим, что эта функция выполняет вход пользователя...
       await loginUser();

       if (ALLOWED_REDIRECTS.includes(redirectTo)) {
         window.location.href = redirectTo;
       }
     };

     // Отрисовываем форму входа...
   }

👉 @sWebDev

Angular - Обработка ошибок 101 Руководство по обработке ошибок в Angular приложениях. Рассмотрим базовые методы обработки ошибок, такие как использование оператора catchError и создание специализированных сервисов для обработки ошибок. Статья также описывает, как настроить глобальный обработчик ошибок. Автор уделяет внимание важности уведомления пользователей об ошибках и предоставляет примеры кода для наглядности. 👉 @sWebDev

Какой вариант защиты от уязвимости IDOR применен в коде? Недавно мы рассказывали об уязвимости Insecure Direct Object References (IDOR) и рассматривали один из вариантов защиты:

    UserDetails() {
     const [user, setUser] = useState(null);

     useEffect(() => {
       fetch('/api/user', {
         headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`
         }
       })
         .then(response => response.json())
         .then(setUser);
     }, []);
     // Рендер деталей пользователя...
  }

Что это за вариант? 👉 @sWebDev

Anime js Hero banner Анимированный баннер, выполненный с применением библиотеки Anime.js. 👉 @sWebDev

Shave.js JS библиотека для обрезки текста в блоках с фиксированными размерами. Если у вас есть ограничение по высоте или ширине элемента и текст не помещается полностью, Shave.js автоматически обрежет его и добавит многоточие в конец. Библиотека легка в использовании, поддерживает анимацию и обрабатывает изменение размеров окна браузера. 👉 @sWebDev

Как использовать Axios с Vue.js Рассмотрим интеграцию библиотеки Axios во Vue.js для управления HTTP-запросами. Руководство предоставляет простой, но краткий синтаксис Axios для выполнения GET и POST запросов, а также обработку ошибок. Объяснения и примеры понятны, что облегчает понимание даже для новичков. Статья подчеркивает преимущества Axios, такие как поддержка отмены запросов. Однако, некоторые дополнительные примеры и сценарии использования могли бы обогатить материал. 👉 @sWebDev

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

PComm Ghost | Anime JS Анимированное приведение, выполненное на Anime.js. 👉 @sWebDev

Fitty Fitty - небольшая библиотека для автоматической подгонки размера текста под размер его контейнера. Она помогает автоматически масштабировать текст, чтобы он полностью вписывался в заданный блок, сохраняя при этом читаемость. 👉 @sWebDev

Сервис для обнаружения типа устройства пользователя на TypeScript и Vue 3 Туториал для разработки собственного сервиса, способного определять способ взаимодействия с веб-приложением (touchscreen, мышка), ориентацию экрана (горизонтальная, вертикальная), тип устройства (desktop, tab, phone). 👉 @sWebDev

⚡️За месяц обучения стать сотрудником Яндекса? Легко! В Course Finder каждый день публикуют лучшие курсы и видеоуроки из IT сферы. Хотите закрепить свои знания или изучить что-то новое? Переходите и подписывайтесь: @kurs_finder

Moon Reflection on Sea - Anime js Анимация смены времени суток, выполненная на Anime.js. 👉 @sWebDev

Защита от внедрения компонентов в React Если есть компонент, который динамически импортирует и рендерит другой компонент на основе свойства, то есть шанс передачи вредоносного имени компонента в качестве свойства и его импортирования. Хороший способ обезопасить себя - это ограничить количество компонентов, которые можно динамически импортировать и рендерить. Импортируя только тот, чье имя есть в списке:

   const COMPONENTS = {
   Home: () => import('./Home'),
   Profile: () => import('./Profile'),
   // ...
   };

   function DynamicComponent({ componentName }) {
   const [Component, setComponent] = useState(null);

   useEffect(() => {
   const loadComponent = COMPONENTS[componentName];
   if (loadComponent) {
   loadComponent()
   .then(setComponent)
   .catch(console.error);
   }
   }, [componentName]);

   return Component ? <Component /> : null;
   }

👉 @sWebDev

Horizontal Scroll Gallery Галерея c горизонтальным скроллом, выполненная при помощи Less и библиотеки Babel.js 👉 @sWebDev