Процесс заказной разработки можно унифицировать так, что качество продукта не пострадает, а 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

Real particle blob

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

👉 @seniorFront

Что такое SSL и TLS?

SSL (secure sockets layer — уровень защищённых cокетов) представляет собой криптографический протокол для безопасной связи. С версии 3.0 SSL заменили на TLS (transport layer security — безопасность транспортного уровня), но название предыдущей версии прижилось, поэтому сегодня под SSL чаще всего подразумевают TLS.

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

👉 @seniorFront

Gradient Borders w/ Translucent Backdrops using container queries

Создано на HTML и CSS. Панель настроек реализована библиотекой dat.gui

👉 @seniorFront