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

Сanvas slider GSAP parallax Слайдер изображений, выполненный на GSAP.js. 👉 @sWebDev

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

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

Как перетаскивать в Vue? Vue.js отлично подходит для создания не только простых пользовательских интерфейсов, но и для разработки продвинутого функционала для пользователей. Например, Drag'n'Drop (перетаскивание элементов), который может быть полезен для сортировки или группировки элементов. 👉 @sWebDev

Руководитель группы фронтенд-разработки IT-инфраструктуры Яндекс #Москва #гибрид #TeamLead Мы создаём и поддерживаем продукты, которые позволяют сотрудникам Яндекса общаться с IT- и HR-отделами и помогают сконцентрироваться на непосредственных рабочих задачах, не отвлекаясь на бытовые. Отвечаем за внутренний и внешний портал Service Desk, вендинговые аппараты для получения компьютерных аксессуаров, внутренние чат-боты, электронные очереди для сервисных подразделений и многое другое. Мы ищем руководителя команды, который поможет нам управлять группой и процессами фронтенд-разработки IТ-инфраструктуры, запускать новые продукты для тысяч сотрудников Яндекса и совершенствовать существующие. Если вы любите автоматизировать работу и решать сложные задачи, готовы отвечать за команду, изучать и внедрять самые последние технологии, вам у нас точно понравится. Подробнее о вакансии и отклики: https://goo.su/UPuz0nE Связаться с рекрутером: @alfed28

Sassy Search Bar Анимированная строка поиска с подсказками, реализованная на SCSS и TypeScript. 👉 @sWebDev

Защита от XSS атак в React Распространенной угрозой безопасности в веб-приложениях является межсайтовый скриптинг (XSS), который возникает, когда злоумышленник внедряет вредоносные скрипты на веб-страницы, потенциально нанося ущерб или компрометируя пользовательские данные.

   function Comment({ text }) {
     return <div dangerouslySetInnerHTML={{ __html: text }} />;
   }

В компоненте мы используем dangerouslySetInnerHTML для рендеринга текста пользователя, если пользователь пишет HTML, он будет отображен как есть, что дает выполнять произвольный JavaScript (включая вредоносный). Для предотвращения атак XSS, стоит избегать dangerouslySetInnerHTML. JSX React отлично справляется с экранированием потенциально опасных строк по умолчанию. Когда нужно отобразить предоставленный пользователем текст, просто вставьте его в качестве дочерних элементов, например:

   function Comment({ text }) {
     return <div>{text}</div>;
   }

👉 @sWebDev

Angular получает новый синтаксис шаблона Знакомимся с новым синтаксисом шаблонов, который будет введен в Angular. Автор объясняет, что новый синтаксис позволит разработчикам писать более компактный и выразительный код шаблонов, упрощая разработку и повышая читаемость. В материале описаны основные изменения, такие как новые структурные директивы, измененные способы привязки данных и улучшенная поддержка условной логики. 👉 @sWebDev

Какую директиву использовать для двусторонней привязки данных в Angular? В вашем Angular приложении необходимо выполнить синхронизацию между значением элемента формы и свойством компонента. Какую директиву использовать для решения этой задачи? 👉 @sWebDev

TS Particles Создавайте детализированные настройки для частиц и анимаций конфетти и фейерверков, используя их в качестве анимированных фонов для вашего сайта. Готовые компоненты доступны для React, Angular, Svelte, и Web Components. У TS Particles более 5 500 звезд на GitHub и 54 000 еженедельных загрузок NPM. 👉 @sWebDev

Анимация React Move Анимация, реагирующая на действия пользователя: при клике элементы меняют свое положение на странице. Выполнено на React. 👉 @sWebDev

Гармонизация внешнего Frontend и Backend: глубокое погружение в сотрудничество Angular и .NET Рассмотрим эффективное взаимодействие между фронтендом на Angular и бэкендом на платформе .NET. Автор рассматривает основные аспекты этого взаимодействия, включая межплатформенную коммуникацию, обработку ошибок, аутентификацию и авторизацию. Он также предлагает подход к организации кода и общей архитектуре приложения. 👉 @sWebDev

Hex/RGB Auto Color Converter in Vue Преобразователь цвета из HEX в RGB. Выполнено с помощью SCSS и Vue.js. 👉 @sWebDev

React Move React Move позволяет разработчикам создавать привлекательные анимации на основе данных. Это легковесная библиотека, которая отображает события жизненного цикла при загрузках страниц. 👉 @sWebDev

Самый безопасный способ скрыть ключи API при использовании React Изучим безопасные подходы для скрытия ключей API в приложениях React. Автор рассматривает проблему хранения API-ключей в клиентском коде и предлагает использовать переменные окружения и специальные пакеты, такие как dotenv и webpack.DefinePlugin, для обеспечения безопасности и защиты ключей от публичного доступа. 👉 @sWebDev

Magic area on hover/focus Один из вариантов оформления портфолио на сайте, выполненный с использованием SCSS и GSAP.js. 👉 @sWebDev

Отображение массива элементов Vue.js Используйте директиву v-for для отрисовки списка элементов на основе массива данных. У директивы v-for особый синтаксис записи: item in items, где items — исходный массив, а item — ссылка на текущий элемент массива:

   <ul>
       <li v-for="item in items" :key="item.id">
          {{ item.name }}
       </li>
    </ul>

Код отобразит каждый элемент массива items в виде элемента списка <li>. Директива v-for автоматически создает элементы на основе данных. :key используется для определения уникального ключа элемента. Это обеспечивает оптимальную производительность и помогает Vue отслеживать изменения. v-for работает и с объектами и допускает использование (value, key) для итерации по парам ключ-значение. 👉 @sWebDev

Прекрати мечтать и стань мидлом за 50 дней Опытные Frontend-разработчики создали несколько бесплатных каналов, в которых регулярно выходят топовые посты для начинающих. Полезная вËрстка — канал с готовыми решениями повседневных задач: слайдеры, анимация, навигация и т.д. JavaScript заметки — образовательный канал с ежедневными практическими заметками по языку. JavaScript тесты — канал с тестами и задачами, который прокачает твои навыки во Frontend-разработке. CSS доширак — готовые анимации, hover-эффекты и прелоадеры, которые можно вставить в свой проект и настроить пока заваривается Доширак. Войти в IT — канал с видеуроками и курсами, который научит тебя кодить с нуля за месяц. Развивайся с нами, ведь так проще!

Resolver в Angular: обзор В материале обзор использования Resolver в Angular. Рассмотрим руководство по созданию Resolver'ов и их применению для предварительной загрузки данных перед отображением компонентов. 👉 @sWebDev