Playful

При нажатии кнопки изменяется CSS свойство transform. Плавность достигается заданием CSS transition.

👉 @seniorFront

CSS Transforming Loader

В этом видео создаётся простой анимированный loader на HTML и CSS.

👉 @seniorFront

👉 @seniorFront

Custom Accessible Emoji Slider

Создано на Vue, стилизовано в SCSS.

👉 @seniorFront

Hologram effect Button 3D Icon

Создано без использования JS, при помощи возможностей препроцессоров Pug и SCSS.

👉 @seniorFront

👉 @seniorFront

Animated Login Page

В этом видео создаётся анимированная форма входа на HTML и CSS.

👉 @seniorFront

Hover Effect

Оригинальные анимированные карточки на HTML и CSS.

👉 @seniorFront

Persistent Bugger

Напишите функцию persistence, которая принимает положительный параметр num и возвращает его мультипликативную стойкость, то есть количество раз, которое нужно перемножить цифры в num, пока не получится одна цифра.

Пример:
39 --> 3
(because 3*9 = 27, 2*7 = 14, 1*4 = 4 )

999 --> 4
(because 9*9*9 = 729, 7*2*9 = 126, 1*2*6 = 12, 1*2 = 2)

👉 @seniorFront

Timed Cards Opening

Свёрстано на HTML и SCSS. Анимировано при помощи библиотеки gsap.

👉 @seniorFront

​Какие архитектурные решения для React вы знаете?

Существует несколько архитектурных решений и паттернов для построения React-проектов. Вот некоторые из них:
MVC (Model-View-Controller) — это традиционный архитектурный шаблон, который разделяет приложение на три основных компонента — модель, представление и контроллер. React можно использовать на уровне View для рендеринга пользовательского интерфейса, в то время как другие библиотеки или фреймворки могут быть использованы для уровней Model и Controller.

Flux — это архитектура приложений, представленная специально для приложений React. Он следует однонаправленному потоку данных, в котором данные передаются в одном направлении, что упрощает понимание и отладку изменений состояния приложения.

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

Шаблон контейнера и компонента — отделяет представление (Component) от логики и управления состоянием (Container). Компоненты отвечают за рендеринг пользовательского интерфейса, в то время как контейнеры обрабатывают бизнес-логику и управление состоянием.

Feature-Sliced Design — Это современный архитектурный подход, используемый для организации и структурирования приложений React. Он направлен на решение проблем масштабируемости, удобства обслуживания и повторного использования путем разделения кодовой базы приложения на основе функций или модулей.

👉 @seniorFront

Image slider ripple effect

Создано и анимировано при помощи TweenMax.

👉 @seniorFront

​Простой саботаж в мире ПО

В кульминационный момент Второй мировой войны ЦРУ выпустило потрясающую книгу Simple Sabotage. В ней изложены различные способы, которыми диверсанты могут снижать продуктивность компании. Некоторые из этих советов не стареют, например, раздел «Общие помехи организациям и производству»:

1. Настаивайте на том, чтобы всё выполнялось через «каналы». Не допускайте того, чтобы для ускорения реализации решений выбирались кратчайшие пути.

2. Делайте «доклады». Говорите как можно чаще и пространнее. Иллюстрируйте свои «идеи» долгими историями из жизни и ссылайтесь на личный опыт. С готовностью делайте «патриотические» комментарии.

3. По возможности отправляйте все вопросы в комитеты для «более глубокого изучения и рассмотрения». Стремитесь собирать комитеты как можно больше, не менее чем из пяти членов.

4. Как можно чаще поднимайте вопросы о несущественных проблемах.

5. Спорьте о чётких формулировках в общении, протоколах, резолюциях.

6. Возвращайтесь к темам, по которым было принято решение на последнем совещании, и пытайтесь повторно открыть вопрос о целесообразности этого решения.

7. Советуйте «быть аккуратными». Будьте «разумны» и подталкивайте других участников совещаний к «разумности», к тому, чтобы они избегали спешки, которая может в будущем вызвать неудобства или сложности.

8. Беспокойтесь о правильности каждого решения, поднимайте вопрос о том, будет ли рассматриваемое действие относиться к юрисдикции группы или оно может вызвать конфликт с политикой какого-то более высокого эшелона.

👉 @seniorFront

Electrified button

Внутри кнопки находится svg картинка, анимируемая библиотекой gsap.

👉 @seniorFront

border animation on hover

Создано на HTML и CSS. Граница сделана при помощи псевдо-элементов.

👉 @seniorFront

Water Wave

В этом видео создаётся анимация текста на HTML и CSS.

👉 @seniorFront

👉 @seniorFront

button hover animation

Анимация реализована при помощи библиотеки gsap.

👉 @seniorFront

Animated Atom Logo

Создано и анимировано на HTML и SCSS.

👉 @seniorFront