Senior Frontend - javascript, html, css
26.7K subscribers
1.29K photos
2.24K videos
713 links
Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи

Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront
Канал в реестре РКН https://rknn.link/bsU
Download Telegram
Почему в интерфейсах со сложной логикой недостаточно показать макеты в Figma?

В принципе, в меме всё честно. Но я всё же решила объяснить, почему не кидаю ссылку на Figma по первому запросу.

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

👉 @seniorFront
2
This media is not supported in your browser
VIEW IN TELEGRAM
To-do list

Оригинальный TO_DO list, на чистом JS. Стилизованный в SCSS.

👉 @seniorFront
3👍2🤔2
Media is too big
VIEW IN TELEGRAM
Navigation Tabs with Sliding Menu Indicator

В этом видео создаётся анимированное навигационное меню на чистом CSS.

👉 @seniorFront
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Твои разрабы пилят фичи пока ты ушел в отпуск

👉 @seniorFront
👍8🔥21
This media is not supported in your browser
VIEW IN TELEGRAM
Radio Button Tiles

Оригинальные радио кнопки, реализованные на HTML и SCSS.

👉 @seniorFront
👍51
This media is not supported in your browser
VIEW IN TELEGRAM
Vue JS Draw

Приложение для рисования, реализованное на Vue.

👉 @seniorFront
👍51
Media is too big
VIEW IN TELEGRAM
CSS Animation Effects

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

👉 @seniorFront
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Cards Dance

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

👉 @seniorFront
👍2
Transform To Prime

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

Пример:
 minimumNumber ([3,1,2]) = return (1)


👉 @seniorFront
👍3
10 принципов удобного интерфейса

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

👉 @seniorFront
👍3
Боксинг в 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
👍62🤔2
This media is not supported in your browser
VIEW IN TELEGRAM
Minimal envelope animation

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

👉 @seniorFront
👍3
Суровый Русский IT

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

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

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

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

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

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

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

👉 @seniorFront
👍123🔥1
Про IT в 2025 году

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

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

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

👉 @seniorFront
5👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Retro futuristic radio buttons

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

👉 @seniorFront
👍5
Media is too big
VIEW IN TELEGRAM
Animated Login Form

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

👉 @seniorFront
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Profile Card UI Design

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

👉 @seniorFront
👍6
This media is not supported in your browser
VIEW IN TELEGRAM
image stack cycle

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

👉 @seniorFront
👍31