Пользовательские директивы во Vue

Во Vue директивы представляют собой специальные html-атрибуты, позволяющие манипулировать DOM-элементами. Все директивы обычно начинаются с буквы v, а затем через дефис идет название директивы.

Помимо встроенных директив (таких как v-model и v-show), Vue также позволяет регистрировать ваши собственные пользовательские директивы. Подробнее о том, как можно создать свои директивы, вы сможете узнать в этом подробном уроке.

#js #vue #веб #фронтенд

Визуализация работы токена, сессии, JWT, SSO, OAuth2 и QR-кода на одной диаграмме

Зачастую при ходе на сайт, возникает необходимость управления вашей учетной записью.

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

JWT — веб-токены JSON стандартизируют токены идентификации, используя цифровые подписи для проверки подлинности. Подпись содержится в токене, поэтому сеанс сервера не требуется.

Токен — учетная запись закодирована в токене, отправленном в браузер. Браузер отправляет этот токен при будущих запросах аутентификации. Требуется шифрование и дешифрование.

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

OAuth2 — разрешает ограниченный доступ к вашим данным на одном сайте другому сайту без разглашения паролей.

#bigdata #веб

React Router: что это и как использовать

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

А узнать, как её установить и создать свои первые простые и вложенные маршруты вы сможете узнать в этой полезной статье.

#js #веб #react

​​Микрофронтенд: что это такое и зачем он нужен?

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

Применение микрофронтов позволяет:
— увеличить эффективность разработки: так как проект разделён на небольшие части, это позволит сконцентрироваться на конкретной задаче и выполнить её быстрее;
— более эффективно планировать время разработки;
— обрести большую гибкость: проще изменять UI и логику небольших частей проекта;
— улучшить качество проекта: разделение на небольшие части помогает легче концентрироваться на них и более качественно прорабатывать.

Узнать о микрофронтендах подробнее, посмотреть пример их реализации и инструменты, применяемые для работы с ними, а кроме того, сравнить их основные преимущества и недостатки вы сможете здесь.

#frontend #js #ts #веб

Как устроена сеть и что такое сокеты

Это видео — база для бэкенд-разработчиков и всех, кто планирует работать с сетью.

Вы узнаете про:
— базовые понятия, связанные с сетью;
— сокеты, что это такое и как с ними подружиться;
— базовые протоколы TCP / UDP и чем они отличаются;
— прикладные протоколы HTTP/SMTP/POP3/IMAP/FTP/SSH/SFTP и другие;
— пулы соединений и таймаутов.

Подробнее: https://youtu.be/8to_I2fMg9Y

#веб #сеть #бэкенд

Детальный справочник для веб-разработчиков от А до Я

Если вы искали ресурс, где в одном месте собрано всё, что нужно знать по фронтенд-разработке, то рекомендуем вам Дока. Здесь собрана информация как по основам вёрстки, так и по фреймворкам, JS и TS. Абсолютно бесплатно!

https://doka.guide/

#шпаргалка #веб #javascript #html #css

Руководство по Webpack для начинающих

Webpack — это статический сборщик модулей. Его основная задача — пакетирование файлов JavaScript для использования в браузере, но он также способен преобразовывать, связывать и упаковывать практически любые ресурсы.

Про основные возможности, пользу и использование в статье:

https://nuancesprog.ru/p/14841/

#webpack #веб

Разработка и деплой сайта с нуля и анимацией

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

Вы научитесь работать с компонентами, используя библиотеку ReactJS, познакомитесь с Framer motion, организуете хранилище с Redux Toolkit (RTK), добавите контент через платформу Contentful и с помощью Graphql получите реальные данные на вашем сайте.

#видео #туториал #веб #react

Что такое сайт, CMS, БД, хостинг, домен?

Полезный ролик для тех, кто хочет лучше понимать суть терминов, которыми богата сфера IT. Как это все устроено и взаимодействует друг с другом?

Здесь простыми словами рассказывают для начинающих о самых важных понятиях в веб-разработке.

❤️ — наконец-то понятным языком
🥱 — слишком просто. Админ, давай что-то посложнее

#видео #веб