Cards Dance

Это SVG картинки, анимируемые библиотекой gsap.

👉 @seniorFront

Transform To Prime

Задан список из n целых чисел, найдите минимальное число, которое нужно вставить в список, чтобы сумма всех элементов списка была равна ближайшему простому числу.

Пример:

 minimumNumber ([3,1,2]) = return (1)

👉 @seniorFront

10 принципов удобного интерфейса

В этой статье я расскажу про все 10 эвристик Нильсена с советами по применению и простыми примерами. Независимо от того, создаете ли вы продукт с нуля или проводите UX-аудит — эти принципы помогут вам принимать более обоснованные решения. Ведь хороший интерфейс — это не только про красивую картинку, но и про удобство, понятность и предсказуемость взаимодействия. Именно это делает продукт по-настоящему дружелюбным к пользователю.

👉 @seniorFront

​Боксинг в JavaScript: что это и зачем нужно?

Боксинг — это процесс преобразования примитивных типов данных (number, string, boolean) в их объектные обертки (Number, String, Boolean). В JavaScript это происходит автоматически, когда вы вызываете методы на примитивах, или явно, если создаете объект с помощью new. Но зачем это нужно?

Зачем нужен боксинг?

Доступ к методам объектов
Примитивы — легкие и быстрые, но у них нет методов. Хотите вызвать 42.toFixed(2)? JavaScript автоматически "оборачивает" примитив 42 в объект Number, чтобы метод сработал. Это и есть автобоксинг.

Гибкость
Иногда нужно работать с примитивами как с объектами, например, для хранения в структурах данных или передачи в функции, ожидающие объекты.

Совместимость
Боксинг позволяет использовать примитивы в контекстах, где требуются объекты, без лишнего кода.

Как это работает?

1. Автобоксинг
Когда вы вызываете метод на примитиве, JavaScript временно оборачивает его в соответствующий объект:

let num = 42;
console.log(num.toFixed(2)); // "42.00" — автобоксинг в Number

2. Явный боксинг
Можно вручную создать объект-обертку:

let primitive = 100;
let boxed = new Number(primitive);
console.log(typeof boxed); // "object"
console.log(boxed.valueOf()); // 100 — распаковка

3. Работа с коллекциями
В отличие от Java, в JavaScript массивы и объекты могут хранить примитивы напрямую, но автобоксинг всё равно происходит при вызове методов:

let numbers = [10, 20];
console.log(numbers[0].toString()); // "10" — автобоксинг

4. Распаковка
Обратный процесс (unboxing) происходит автоматически или с помощью методов, таких как valueOf():

let boxedNum = new Number(50);
let unboxed = boxedNum.valueOf(); // 50 (примитив)

👉 @seniorFront

Minimal envelope animation

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

👉 @seniorFront

​Суровый Русский IT

Наблюдая за венчурным и технологическим секторами России, можно прийти в ужас. В то время как телевизор рапортует об отсутствии экономических проблем, а фондовый рынок растёт на слухах о переговорах, никто не обращает внимания на реальное состояние внутренней экономики.

Как изменились технологический и финансовый секторы России?
Большинство практик найма и бизнес-процессов в российских технологических компаниях исторически пришли с Запада. Стартап-культура, основанная на креативности, высокой продуктивности, инновациях и быстром росте, долгие годы считалась стандартом. Взамен за риски сотрудники получали узнаваемость в индустрии и потенциально высокий доход.

Назовите хоть одну российскую компанию, готовую платить сотрудникам опционами на сумму от 1 до 3 миллионов долларов в год, при этом не урезая зарплату?
С уходом иностранных компаний рынок вернулся к высокой токсичности. Оставшиеся игроки, лишившись конкуренции, перестали соответствовать международным стандартам. Стартап-дух и мотивация уступили место режиму работы за минимальную оплату. Компании, некогда созданные сильными лидерами, превратились в квазигосударственные структуры с утраченной миссией.

Как бывший сотрудник Google, который провёл много времени в московском офисе, я вижу, что нынешний технологический рынок пугает. Яндекс, VK, HeadHunter и им подобные компании непригодны для создания инноваций и новых продуктов. Они не смогли сохранить ни основателей, ни адекватную бизнес-культуру.

«ЧБД»
Из-за «купола» и нерыночных условий российские компании теряют гибкость, что не даёт им конкурировать с международными гигантами. Чтобы выжить, они становятся государственными или около государственными. Яркие примеры — Яндекс и VK. Они не могут развиваться без административного ресурса, занимая долю рынка только там, где подавлена конкуренция. Например, проект VK Max был бы незаметен без медиаподдержки, потому что он не нужен ни аудитории, ни свободному рынку.

Чтобы усилить интернет‑суверенитет, нужны адекватные условия труда и оплата. Пока же происходит возврат к «смуте». Мой личный опыт тому подтверждение: чтобы нормально зарабатывать, мне пришлось создать свою компанию и затем выйти из неё. Отсутствие нормальных условий приводит к желанию создавать рабочие места самому.

Если цель рынка — заставить специалистов уезжать и создавать бизнесы за рубежом, то она выполняется отлично.

👉 @seniorFront

Про IT в 2025 году

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

Если вы работаете в ИТ или думаете туда пойти (а может, даже отдать туда своих детей), в этой статье разберём, что сейчас происходит на рынке, и как это отразится на зарплатах, требованиях и шансах устроиться на работу.

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

👉 @seniorFront

Retro futuristic radio buttons

Кнопки свёрстаны на HTML И SCSS. Анимация реализована библиотекой gsap.

👉 @seniorFront

Animated Login Form

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

👉 @seniorFront

Ожидание – реальность

👉 @seniorFront

Profile Card UI Design

Карточки с эффектом при наведении, свёрстанные на HTML и CSS.

👉 @seniorFront

image stack cycle

Карусель картинок, реализованная с использованием препроцессоров Pug и SCSS. Логика переключения реализована в JS.

👉 @seniorFront

CSS Curve Outside Card

В этом видео создаются карточки необычной формы на чистом CSS.

👉 @seniorFront

Soccer Preloader

Загрузчик - SVG картинка в футбольном стиле.

👉 @seniorFront

Two fighters, one winner.

Создайте функцию, которая возвращает имя победителя в бою между двумя бойцами. Каждый боец по очереди атакует другого, и побеждает тот, кто первым убьет другого. Смерть определяется как health <= 0.

Каждый боец будет объектом/экземпляром Fighter.

health и damagePerAttack за атаку будут целыми числами, большими 0. Вы можете мутировать объекты Fighter.

Ваша функция также получает третий аргумент - строку с именем бойца, который атакует первым.

Пример:

declare_winner(Fighter("Lew", 10, 2), Fighter("Harry", 5, 4), "Lew") => "Lew"
  
Lew attacks Harry; Harry now has 3 health.
Harry attacks Lew; Lew now has 6 health.
Lew attacks Harry; Harry now has 1 health.
Harry attacks Lew; Lew now has 2 health.
Lew attacks Harry: Harry now has -1 health and is dead. Lew wins.

function Fighter(name, health, damagePerAttack) {
       this.name = name;
       this.health = health;
       this.damagePerAttack = damagePerAttack;
       this.toString = function() { return this.name; }
}

Структуры данных для frontend-разработчиков с реальными примерами

В мире frontend есть проблема: многие разработчики плохо ориентируются в структурах данных и не умеют их грамотно применять, чтобы получать эффективные и производительные решения своих задач.

Хотим поделиться своим опытом и на реальных примерах показать, что даёт правильное использование структур данных.

👉 @seniorFront

​outline

Что-то вроде border на стероидах. Не влияет на размеры элемента, можно отодвинуть от границ на любое расстояние.
Присутствует в стандартных стилях браузера для акцента на сфокусированных интерактивных элементах. Типа размеры не меняются, вёрстка страницы не ломается, но пользователь наглядно видит, какой элемент в фокусе.

outline на самом деле шорткат — короткое свойство для записи сразу нескольких значений. Внутри себя оно содержит свойства outline-width, outline-style и outline-color.
Разберём доступные значения для каждого из свойств, а потом соберём всё в одну коробку:

outline-width
Ключевые слова thin, medium, thick — задают тонкую, среднюю или толстую ширину. Значения в пикселях на усмотрение браузера, но обычно соответствует 1, 3 и 6 пикселям соответственно.
Конкретный размер — размер в любых единицах измерения, доступных в вебе. Например, 10px или 0.2em.

outline-style
none — обводка не отображается, даже если задано значение для outline-width.
dotted — обводка будет состоять из точек. Круглых точек, вроде такого •••••
dashed — обводка будет в виде пунктирной линии.
solid — значение по умолчанию, если не задано иное. Сплошная линия.
double — двойная сплошная линия.
groove — обводка будет отображаться так, будто рамка объёмная, с вдавленной серединой и подсвечена. Цвет обводки (если он отличен от чёрного) станет двухцветным.
ridge — обводка отобразится объёмной, её центр будет приподнят. Противоположно groove.
inset — объёмная рамка, края направлены внутрь элемента.
outset — объёмная рамка, края направлены наружу элемента, противоположно inset.

outline-color
любое доступное значение цвета в вебе, включая ключевые слова transparent, currentColor
invert — ключевое слово, устанавливающее противоположный цвету фона элемента цвет обводки. Удобно для достижения максимальной контрастности.

👉 @seniorFront

Slider Animations

Оригинальный слайдер, созданный и анимированный на чистом JS.

👉 @seniorFront

​Рынок найма: взгляд инженера

Процесс найма в IT часто разочаровывает. Компании тратят время на многоэтапные собеседования (бывало и 9 этапов!), а лучшие программисты, включая мейнтейнеров Rust, не могут найти работу из-за стресса или бюрократии. Рекрутёры порой не отличают профессионалов от LLM и месяцами держат кандидатов в подвешенном состоянии.

Проблемы текущих подходов:
- Live-coding (LeetCode): не отражает реальных задач, не оценивает долгосрочную ценность сотрудника, игнорирует вкус и отпугивает опытных специалистов.
- Задания «на дом»: легко обойти с помощью ChatGPT, требуют от кандидата больше времени, чем от компании.
- Проектирование архитектуры: лучше, но не показывает код и может переоценивать знание конкретной области.
- Знакомство с командой: подходит для оценки личности, но не навыков.
- Эссе и примеры работы (как в Oxide): эффективно, но слишком времязатратно (5–15 часов).

Как должно выглядеть идеальное собеседование?
1. Дифференцирует senior-разработчиков от новичков.
2. Прозрачно — отражает реальные задачи (код, архитектура, ревью, документация).
3. Смотрит вперёд — ищет гибких специалистов, а не узких знатоков стека.
4. Экономит время обеих сторон.
5. Уважает кандидата — не заставляет чувствовать себя униженным.
6. Оценивает вкус — умение писать чистый код и улучшать работу команды.

Моё предложение:
Комбинация код-ревью и обсуждения примера работы.

- Код-ревью: рекрутёр готовит код, кандидат его улучшает. Это прозрачно, экономит время и показывает вкус.
- Пример работы: кандидат предоставляет код заранее, а на встрече объясняет свои решения. Это исключает вайбкодеров и снижает стресс.
- Обязательно: беседа с будущим руководителем, чтобы избежать проблем в будущем.

Такой подход сбалансирован, уважает кандидата и оценивает реальные навыки. Давайте менять найм к лучшему!

👉 @seniorFront

Card Carousel

Логика работы карусели реализована на чистом JS. Свёрстано на HTML и CSS.

👉 @seniorFront