Привет! 👋
Я Никита, тружусь разработчиком в компании Nestle и живу в мире JavaScript.
На этом канале буду делиться тем, что реально интересно: необычные скрипты, мини‑проекты, модели и всякие фишки, которые делают код чуть веселее.

Почему я это делаю?
Просто люблю экспериментировать с кодом и хочу, чтобы вы видели, как это происходит на практике - со всеми факапами, победами и странными багами 😄

Что здесь будет:

👾 крутые и необычные скрипты

👾 полезные фишки для начинающих

👾 мини‑разборы инструментов

👾 немного IT‑юмора и наблюдений из жизни джуна


Короче, если вы любите мир разработки, эксперименты и забавные находки - добро пожаловать!

Форма логина, которая стесняется смотреть пароль👀

На днях сделал форму логина, которая буквально стесняется смотреть ваш пароль

Когда нажимаешь на поле password - персонаж закрывает глаза руками. А если пароль неправильный, то ещё и смотрит с осуждением))

Хотел просто потренировать CSS-анимации, а в итоге 💀:

- 2 часа на позиционирование рук

- 40 минут на transform-origin

- existential crisis из-за z-index

Но зато выглядит кайфово

Frontend - это когда ты тратишь вечер не на полезную функцию, а на то, чтобы монстрик комфортно прикрывал глаза))

Как это выглядит?
Идея анимации:
🔺 Персонаж смотрит на пользователя
🔺 При focus на password руки плавно поднимаются и закрывают глаза
🔺 При blur руки опускаются обратно
🔺 Если пароль неверный можно добавить shake-анимацию или грустное лицо

Такие мелкие UI-детали - это именно то, что делает сайт живым.
Не просто форма логина, а маленькая, но очень приятная эмоция для пользователя 🥰

Как это реализуется?

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #111;
  font-family: sans-serif;
}

.login-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 260px;
}

input {
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: #1e1e1e;
  color: white;
  outline: none;
}

.face {
  position: relative;
  width: 120px;
  height: 120px;
  background: #ffcc66;
  border-radius: 50%;
  margin: 0 auto 20px;
}

.eyes {
  position: absolute;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
}

.eye {
  width: 14px;
  height: 14px;
  background: #222;
  border-radius: 50%;
}

.hand {
  position: absolute;
  width: 42px;
  height: 18px;
  background: #ffb84d;
  border-radius: 20px;
  top: 80px;
  transition: 0.4s ease;
}

.left {
  left: 10px;
  transform: rotate(0deg);
}

.right {
  right: 10px;
  transform: rotate(0deg);
}

.login-box:focus-within .left {
  top: 35px;
  left: 18px;
  transform: rotate(-35deg);
}

.login-box:focus-within .right {
  top: 35px;
  right: 18px;
  transform: rotate(35deg);
}

const password = document.getElementById('password');

password.addEventListener('focus', () => {
  document.body.classList.add('hide-eyes');
});

password.addEventListener('blur', () => {
  document.body.classList.remove('hide-eyes');
});

CSS, который выглядит как магия 🌌

Одна из самых недооценённых фишек современного CSS - "backdrop-filter".

С его помощью можно сделать эффект матового стекла буквально в несколько строк:

.card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

И вместо обычного блока получаем тот самый glassmorphism, который используют в интерфейсах Apple, банковских приложениях и современных дашбордах.

Но самое интересное не в этом. Многие до сих пор тянут тяжёлые библиотеки или делают скриншоты фона для размытия, хотя современные браузеры уже умеют это нативно.

Иногда одна CSS-строчка заменяет десятки строк JavaScript🔥

Один div. Ни одной картинки.🥲

Недавно наткнулся на челлендж среди фронтендеров - сделать известный логотип, персонажа или предмет используя только один div и CSS.

👎 Без SVG.

👎 Без Canvas.

👎 Без картинок.

👎 Без псевдоэлементов.

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

<div>...</div>

А дальше начинается магия из "box-shadow", "border-radius", градиентов и трансформаций.

В какой-то момент перестаёшь понимать, где заканчивается CSS и начинается цифровое искусство.

Иногда кажется, что разработчики изучают CSS не для работы, а чтобы проверить, насколько далеко можно зайти с одним тегом 😸

P.s. вот что получилось у меня