CSS Scroll-Driven Glow Cards

Анимация реализована при помощи gsap. Запуск осуществляется плагином ScrollTrigger.

👉 @seniorFront

Animated Card

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

👉 @seniorFront

Javascript Scroll Animation

В этом видео создаётся анимация, которая активируется при скроле. Для этого создаётся обработчик события scroll, в котором изменяется значение CSS свойства clip-path целевого элемента

👉 @seniorFront

Encrypted Password Reveal

Вёрстка реализована на HTML и CSS. Анимировано библиотекой gsap.

👉 @seniorFront

RGB → Hex

Необходимо написать функцию, которая принимает десятичные значения RGB кода цвета и возвращает этот код цвета в формате HEX. Допустимыми десятичными значениями RGB являются 0-255. Любые значения, которые выходят за этот диапазон, должны быть округлены до ближайшего допустимого значения.
Обратите внимание: ваш ответ должен быть всегда 6 символов длиной, сокращенный вариант с 3 символами здесь не будет работать.

Примеры:
rgb(255, 255, 255) должна возвращать FFFFFF
rgb(255, 255, 300) должна возвращать FFFFFF
rgb(0, 0, 0) должна возвращать 000000
rgb(148, 0, 211) должна возвращать 9400D3

👉 @seniorFront

SVG Calculator Dial

Вся сцена - это svg картинка, стилизованная в SCSS и анимированная библиотекой gsap.

👉 @seniorFront

​Как определить наличие свойства в объекте?

В JavaScript есть несколько способов определить наличие свойства в объекте.

Оператор in: Можно использовать оператор in, чтобы проверить наличие свойства в объекте или его прототипе.

 const obj = { name: 'John', age: 30 };
 console.log('name' in obj); // true
 console.log('city' in obj); // false

Метод hasOwnProperty(): Метод hasOwnProperty() проверяет, содержит ли объект указанное свойство и не учитывает свойства в прототипе объекта.

 const obj = { name: 'John', age: 30 };
 console.log(obj.hasOwnProperty('name')); // true
 console.log(obj.hasOwnProperty('city')); // false

Сравнение со значением undefined: Можно сравнить значение свойства с undefined, чтобы определить его наличие.

 const obj = { name: 'John', age: 30 };
 console.log(obj.name !== undefined); // true
 console.log(obj.city !== undefined); // false

Использование Object.keys(): Можно использовать метод Object.keys() для получения массива всех свойств объекта и затем проверить наличие свойства в этом массиве.
const obj = { name: 'John', age: 30 };
console.log(Object.keys(obj).includes('name')); // true
console.log(Object.keys(obj).includes('city')); // false

👉 @seniorFront

Процесс заказной разработки можно унифицировать так, что качество продукта не пострадает, а developer experience улучшится. Об этом в своей статье пишет Тимофей Устьянцев 一 фронт-тимлид крупного веб-продакшена ДАЛЕЕ. Тимофей уже несколько лет работает над проектами Kaspersky, X5, IQOS и СБЕР, и теперь делится опытом в цикле статей.

Читайте первую статью на Хабре и переходите на канал ДАЛЕЕ 一 там посты с полезными приемами и инструментами для специалистов диджитала, советы по карьерному развитию и свежие вакансии каждый понедельник 🤟

Реклама. Erid LjN8KEPBB

Infinitely drawing icons

Вся сцена - это svg картинка, анимируемая библиотекой anime.js

👉 @seniorFront

​Что делает фронтенд-разработку интересным и сложным процессом, требующим постоянного обучения и развития?

Рост технологий. С каждым годом появляется всё больше новых технологий, фреймворков, библиотек и инструментов для разработки фронтенда. Это создаёт огромное разнообразие выбора, но и требует от разработчиков постоянного изучения и адаптации к новым решениям.

Развитие веб-стандартов. Стандарты веб-разработки тоже постоянно совершенствуются, чтобы обеспечить более безопасные, производительные и доступные веб-приложения. Следование этим стандартам становится обязательным, что повышает сложность в разработке.

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

Комплексность приложений. Современные веб-приложения становятся всё сложнее и масштабнее. Они должны обеспечивать богатый пользовательский опыт (UX — user experience), взаимодействие с сервером, обработку данных и множество других функций, что требует более сложных архитектурных решений.

Кроссбраузерность. Разные браузеры могут по-разному интерпретировать и поддерживать стандарты, что создаёт дополнительные сложности в обеспечении единообразного отображения и функциональности приложения в разных браузерах.

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

👉 @seniorFront

React Glow Cards – Minimal

Реализовано на React. Кастомный хук usePointerGlow отслеживает положение курсора пользователя и устанавливает значения CSS переменным.

👉 @seniorFront

Bouncy Balloon

Создано и анимировано библиотекой THREE.js

👉 @seniorFront

Simple Scroll Animation

В этом видео создается анимация на JS, которая запускается при скроле.

👉 @seniorFront

👉 @seniorFront

All-but-me query

Создано с использованием CSS селектора :has()

👉 @seniorFront

CSS scroll-driven animation timer

Реализовано на чистом CSS при помощи animation-timeline: scroll().

👉 @seniorFront

How to Make Responsive Portfolio Website

В этом видео с нуля создается сайт-портфолио на HTML, CSS и JS.

👉 @seniorFront

CSS Responsive Scroll-Driven Text Reveals

Реализовано на чистом CSS, а также добавлена дополнительная реализация на JS, если ваш браузер не поддерживает CSS свойство animation-timeline со значением scroll().

👉 @seniorFront

Square Every Digit

Необходимо возвести в квадрат каждую цифру числа и объединить их.
Например, если пропустить 9119 через функцию, то получится 811181, так как 9^2 равно 81, а 1^2 равно 1.
Примечание: функция принимает целое число и возвращает целое число.

👉 @seniorFront