Shattering Cursor

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

👉 @seniorFront

Awesome Cursor Trails Animation

В этом видео создаются частицы, следующие за курсором при помощи библиотеки gsap.

👉 @seniorFront

Как легально свалить с созвона

👉 @seniorFront

Hopefully accessible smooth dropdown

Оригинальный раскрывающийся список, реализованный с использованием препроцессоров Pug и SCSS.

👉 @seniorFront

Bookmark

Реалистичная закладка, реализованная на HTML и SCSS.

👉 @seniorFront

Modern Button Design for 2025

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

👉 @seniorFront

Flip Cards

Карточки, реализованные на HTML и SCSS.

👉 @seniorFront

Count the photos!

Вам дана строка, представляющая собой дорогу. На ней есть камеры, обозначенные символом ".", а также машины, которые двигаются вправо - ">", и машины, которые двигаются влево - "<". Камера делает фотографию, если машины двигается в её сторону. Создайте функцию, которая вернет количество сделанных фото.

Примеры:
For ">>." -> 2 photos were taken
For ".>>" -> 0 photos were taken
For ">.<." -> 3 photos were taken
For ".><.>>.<<" -> 11 photos were taken

👉 @seniorFront

Вы не знаете CSS. Мои вопросы о CSS с ответами

При составлении вопросов я хотел проверить понимание базовых моментов, которые есть в вёрстке любого проекта. Ещё будут вопросы на знание более редких аспектов и «новинок» в CSS. В общем, я хочу вас завалить, чтобы казаться супер умным! (здесь ирония).

Пожалуйста, не воспринимайте мои вопросы серьёзно. Давайте просто весело проведём время. Плюс попробуем узнать что-то новое. Ведь у каждого вопроса будет мой ответ. И вы тоже можете оставить свой в комментариях. Я обязательно буду их читать.

👉 @seniorFront

​Зачем нужен Nginx?

Nginx — это мощный веб-сервер, который используется для раздачи статических файлов, балансировки нагрузки, проксирования запросов и обеспечения безопасности.

Как Nginx раздаёт фронтенд-приложение?
Когда мы билдим SPA-приложение (например, React/Vue/Angular), в папке dist появляются статические файлы (index.html, app.js, styles.css).

server {
    listen 80;
    server_name myapp.com;
    root /var/www/myapp/dist;
    index index.html;
    
    location / {
        try_files $uri /index.html;
    }
}

Как Nginx проксирует запросы к бэкенду?
Если фронтенд (myapp.com) и бэкенд (api.myapp.com) находятся на разных серверах, Nginx может перенаправлять запросы на API.

server {
    listen 80;
    server_name myapp.com;
    root /var/www/myapp/dist;
    index index.html;

    location / {
        try_files $uri /index.html;
    }

    # Проксирование API-запросов
    location /api/ {
        proxy_pass http://localhost:5000/; # Node.js, Python, PHP и т. д.
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Как Nginx балансирует нагрузку?
Если у нас несколько бэкенд-серверов, Nginx может распределять нагрузку между ними.

upstream backend {
    server backend1.myapp.com;
    server backend2.myapp.com;
}

server {
    listen 80;
    server_name api.myapp.com;

    location / {
        proxy_pass http://backend;
    }
}

Как Nginx ускоряет сайт с кэшем?
Кэширование уменьшает нагрузку на сервер и ускоряет загрузку страниц.

location /static/ {
    expires 7d; # Кэшировать файлы на 7 дней
    add_header Cache-Control "public, max-age=604800";
}

👉 @seniorFront

Responsive app switcher

Создано на HTML и CSS. Анимация запускается при попадании элемента во viewport. Это реализовано с помощью CSS view().

👉 @seniorFront

​Гореть, но не сгорать: практические советы по борьбе с burnout’ом

Важно понять: выгорание — это не ваш личный факап или ошибка. Это сигнал всей системы — целого организма — что что-то идет не так. Бороться с выгоранием через «затыкание дыр» не выйдет. Если вы наконец-то полноценно отдохнете в эту субботу и даже воскресенье, а потом вернетесь к привычному режиму, проблема никуда не уйдет. И если ее игнорировать, тоже.

Что на самом деле нужно делать?
Только системный подход, только хардкор — смена личных и рабочих привычек, выстраивание нового подхода к рабочему процессу. Ниже — несколько советов.

Отказываемся от перфекционизма
Перфекционизм в ИТ не только бесполезен, но даже опасен. Код не обязан быть идеальным с первой попытки, а технический долг — это нормальная история. Можно попробовать упражнение «достаточно хорошо»: установить четкие критерии завершения задачи и не позволять себе бесконечно её улучшать. Никаких больше «Нет предела совершенству».

Меняем отношение к ошибкам и достижениям
Теперь баг — это не не доказательство некомпетентности, а часть нормального рабочего процесса. Параллельно с этим переводим фокус на позитив. Можно отдельно записывать собственные достижения, например, решенные задачи, положительный фидбек от коллег или пользователей. Перечитываем, когда накатывает.

Беремся за физическое восстановление
Здоровье у вас одно, стимуляторы из Fallout у нас пока не изобрели, а бионические протезы не так доступны, как в Cyberpunk 2077. Поэтому беремся за восстановление организма. Учимся замечать усталость. В глазах рябит от кода, в голове туман — идем отдыхать, а не терпим. Можно попробовать внедрить правило 90/30 (30-минутный отдых каждые полчаса) или другой формат перерывов. Естественно, во время отдыха не скроллим ленты и стараемся вообще не смотреть в экран. Обедаем где-нибудь вдали от клавиатуры, если на удаленке — тем более.

Если новые привычки внедрять сложно, делаем это постепенно. Например, сначала учимся по-настоящему уходить на перерыв от работы. Потом отказываемся от гаджетов во время отдыха.

Главное — помните. К этому состоянию вы пришли не за один месяц, а значит, восстановление тоже займет какое-то время. Не ждите, что после недельки в новом режиме или отпуска сразу все наладится.

👉 @seniorFront

5 способов повышения эффективности команды

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

👉 @seniorFront

Sphere Packing

Реализовано и анимировано на canvas при помощи библиотеки Three.js

👉 @seniorFront

Stunning Particle Background Effect

В этом видео создается эффект для фона в виде частиц, генерируемых в JS и анимируемых в CSS.

👉 @seniorFront

— То, что быстренько поднял, то как будто не ронял.
— Девопс из вас так себе

👉 @seniorFront

Variable Fonts

Текст анимируется в JS. Параметры анимации можно изменять при помощи интерфейса, созданного библиотекой dat.gui.

👉 @seniorFront

🔒Устали от использования сложных библиотек для автосохранения данных в проектах? Пора использовать Vue.js и локальное хранилище!

На открытом вебинаре 14 апреля в 20:00 мск мы покажем, как работать с локальным хранилищем, включая LocalStorage, SessionStorage и базовые операции с IndexedDB. Вы увидите, как данные остаются, даже если вы перезагрузите страницу, и узнаете, как легко работать с ними через Composition API.

Научитесь добавлять автосохранение в реальный проект без лишнего кода и сторонних инструментов!

⚡️Зарегистрируйтесь и получите скидку на большое обучение «Vue.js-разработчик»: https://otus.pw/tblH/

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 erid 2SDnjdV874g

day and night

Переключатель день-ночь, реализованный на чистых HTML и CSS.

👉 @seniorFront