Главная » Архив меток: JavaScript (страница 32)

Архив меток: JavaScript

Еженедельная подборка красивых эффектов на CSS/SVG/JS #75

Подборка свежих эффектов, интересных идей и полезных наработок. Солнечная система на CSS Переключаться между планетами можно навигацией слева или кликом на изображение. Под описанием планеты есть рабочая кнопка «Read more» («Подробнее»).Технологии: CSS, CSS-анимация, CSS-трансформации.Автор: Джейми Коултер (@jcoulterdesign) Посмотреть живой пример Дом с растущей крышей Трехмерная мозаика из шестиугольников Кнопка скрытия/отображения пароля на CSS Картины Мондриана на CSS-гридах Картины поворачиваются в зависимости ...

Читать далее »

Как не надо писать React: неправильные шаблоны и проблемы в React

От автора: что такое антишаблон? Антишаблоны – это определенные шаблоны в разработке ПО, считающиеся плохими практиками программирования. Некоторые React шаблоны могли считаться правильными в прошлом, но сейчас разработчики поняли, что они приносят больше проблем и багов в долгосрочной перспективе. React стал полноценной UI библиотекой, и за эти годы развилось множество лучших практик разработки. Мы извлечем уроки из коллективной мудрости тысяч ...

Читать далее »

Как меня задолбало противопоставление хренова const чертову let

Перевод статьи A f*cking rant about f*cking const vs f*cking let с сайта https://jamie.build/ для css-live.ru, автор — Джеймс Кайл Не хотел я быть автором этой заметки, но Крис меня вынудил, так что этот хмырь и есть главный виновник. А я просто попал под раздачу. Но вы все изрядно перебираете с const в своем JavaScript-коде, и меня это хоть самую чуточку, но бесит. 1. const ни ...

Читать далее »

Создание регистрации пользователя с помощью Node, React и Okta

От автора: сейчас пользователи интернета ожидают персонализированного подхода. Разработчики должны учиться строить сайты, которые предоставляют персонализированный опыт, сохраняя конфиденциальность информации о пользователе. Современные веб-приложения, как правило, обладают серверным API и клиентским интерфейсом. Довольно сложно дать понять обоим концам о том, что пользователь авторизовался. В этом уроке я расскажу вам про настройку Node API и создание React UI. У нас получится ...

Читать далее »

Детальная двухфакторная аутентификация React

От автора: как выполняется двухфакторная аутентификация (как SMS, так и TOTP) с использованием React, React Router и Amazon Cognito. В этом посте мы рассмотрим, как внедрить реальную регистрацию и авторизацию пользователя с двухфакторной аутентификацией параллельно с маршрутизацией и потоком аутентификации в веб-приложении React. Когда пользователь выйдет из системы, мы будем защищать определенные роуты, перенаправлять их для входа в систему и ...

Читать далее »

Работа с Context в React

От автора: React Context в настоящее время является экспериментальным API — но скоро он станет полноправным инструментом разработки! Есть много причин, по которым он представляет интерес, но, возможно, основные заключаются в том, что Context позволяет родительским компонентам неявно передавать данные своим потомкам, независимо от вложенности компонентов. Другими словами, данные могут быть добавлены к родительскому компоненту, а затем любой потомок может ...

Читать далее »

Webpack vs Parcel: если вы когда-нибудь настраивали первый, то со вторым все по-другому!

От автора: и как все же научиться работать с Parcel. В этом посте я расскажу об использовании Parcel, с Pug, Sass, Babel and PostCSS. С некоторыми сравнениями с Webpack, как наиболее популярным модулем. Итак, Webpack vs Parcel, начинаем! Проблема с Webpack — это его конфигурация. Это кошмар. И я не знаю, как вам, но мне не нравятся кошмары. Я предпочитаю ...

Читать далее »

Анимация контейнера с изображением при наведении мыши с использованием перспективы и преобразования

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

Читать далее »

Еженедельная подборка красивых эффектов на CSS/SVG/JS #74

Подборка свежих эффектов, интересных идей и полезных наработок. SVG-рисунок при прокрутке Необычный слайдер в стиле ползунка Многоугольники Удерживая курсором, фигуры можно перемещать. Обратите внимание, что их цвет меняется в зависимости от положения относительно друг друга (красный, зеленый, синий).Технологии: canvas, JS, Pixi.js.Автор: Блейк Боуэн (@osublake) Посмотреть живой пример Анимация «Старцы» по мотивам Лавкрафта Разворот книги на CSS Поворот карточек на CSS Эффект ...

Читать далее »

Аддитивная анимация с помощью Web Animations API

Перевод статьи Additive Animation with the Web Animations API с сайта css-tricks.com для CSS-live.ru, автор — Дэн Уилсон Эти возможности пока что не поддерживаются ни одним стабильным браузером. Однако, всё, о чем я сейчас расскажу, уже есть в Firefox Nightly, и ключевые части есть в Chrome Canary (при включенном флаге «Экспериментальные возможности веб-платформы»), поэтому во время чтения этой статьи я рекомендую использовать ...

Читать далее »