Senior Frontend - javascript, html, css

👩‍💻 Всем программистам посвящается! Вот 17 авторских обучающих IT каналов по самым востребованным областям программирования: Выбирай своё направление: 👩‍💻 Frontend — t.me/frontend_ready 📱 JavaScript — t.me/javascript_ready 👩‍💻 Backend — t.me/backend_ready 📱 GitHub & Git — t.me/github_ready 👩‍💻 Python — t.me/python_ready 🤔 InfoSec & Хакинг — t.me/hacking_ready 🖥 SQL & Базы Данных — t.me/sql_ready 🤖 Нейросети — t.me/neuro_ready 👩‍💻 C/C++ — https://t.me/cpp_ready 👩‍💻 C# & Unity — t.me/csharp_ready 👩‍💻 Java — t.me/java_ready 👩‍💻 Linux — t.me/linux_ready 🖼️ DevOps — t.me/devops_ready 📖 IT Книги — t.me/books_ready 👩‍💻 Весь IT — t.me/it_ready 👩‍💻 Bash & Shell — t.me/bash_ready 🖥 Design — t.me/design_ready 📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!

Animated Text Trail Effects В этом видео создается анимированный текст, следующий за курсором на CSS и JS. 👉 @seniorFront

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

​Рынок найма: взгляд инженера Процесс найма в IT часто разочаровывает. Компании тратят время на многоэтапные собеседования (бывало и 9 этапов!), а лучшие программисты, включая мейнтейнеров Rust, не могут найти работу из-за стресса или бюрократии. Рекрутёры порой не отличают профессионалов от LLM и месяцами держат кандидатов в подвешенном состоянии. Проблемы текущих подходов: - Live-coding (LeetCode): не отражает реальных задач, не оценивает долгосрочную ценность сотрудника, игнорирует вкус и отпугивает опытных специалистов. - Задания «на дом»: легко обойти с помощью ChatGPT, требуют от кандидата больше времени, чем от компании. - Проектирование архитектуры: лучше, но не показывает код и может переоценивать знание конкретной области. - Знакомство с командой: подходит для оценки личности, но не навыков. - Эссе и примеры работы (как в Oxide): эффективно, но слишком времязатратно (5–15 часов). Как должно выглядеть идеальное собеседование? 1. Дифференцирует senior-разработчиков от новичков. 2. Прозрачно — отражает реальные задачи (код, архитектура, ревью, документация). 3. Смотрит вперёд — ищет гибких специалистов, а не узких знатоков стека. 4. Экономит время обеих сторон. 5. Уважает кандидата — не заставляет чувствовать себя униженным. 6. Оценивает вкус — умение писать чистый код и улучшать работу команды. Моё предложение: Комбинация код-ревью и обсуждения примера работы. - Код-ревью: рекрутёр готовит код, кандидат его улучшает. Это прозрачно, экономит время и показывает вкус. - Пример работы: кандидат предоставляет код заранее, а на встрече объясняет свои решения. Это исключает вайбкодеров и снижает стресс. - Обязательно: беседа с будущим руководителем, чтобы избежать проблем в будущем. Такой подход сбалансирован, уважает кандидата и оценивает реальные навыки. Давайте менять найм к лучшему! 👉 @seniorFront

Slider Animations Оригинальный слайдер, созданный и анимированный на чистом JS. 👉 @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

Структуры данных для frontend-разработчиков с реальными примерами В мире frontend есть проблема: многие разработчики плохо ориентируются в структурах данных и не умеют их грамотно применять, чтобы получать эффективные и производительные решения своих задач. Хотим поделиться своим опытом и на реальных примерах показать, что даёт правильное использование структур данных. 👉 @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; }
}

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

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

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

Profile Card UI Design Карточки с эффектом при наведении, свёрстанные на HTML и CSS. 👉 @seniorFront

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

Animated Login Form В этом видео создается анимированная форма входа на чистых HTML и CSS. 👉 @seniorFront

Retro futuristic radio buttons Кнопки свёрстаны на HTML И SCSS. Анимация реализована библиотекой gsap. 👉 @seniorFront

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе

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

​Суровый Русский IT Наблюдая за венчурным и технологическим секторами России, можно прийти в ужас. В то время как телевизор рапортует об отсутствии экономических проблем, а фондовый рынок растёт на слухах о переговорах, никто не обращает внимания на реальное состояние внутренней экономики. Как изменились технологический и финансовый секторы России? Большинство практик найма и бизнес-процессов в российских технологических компаниях исторически пришли с Запада. Стартап-культура, основанная на креативности, высокой продуктивности, инновациях и быстром росте, долгие годы считалась стандартом. Взамен за риски сотрудники получали узнаваемость в индустрии и потенциально высокий доход. Назовите хоть одну российскую компанию, готовую платить сотрудникам опционами на сумму от 1 до 3 миллионов долларов в год, при этом не урезая зарплату? С уходом иностранных компаний рынок вернулся к высокой токсичности. Оставшиеся игроки, лишившись конкуренции, перестали соответствовать международным стандартам. Стартап-дух и мотивация уступили место режиму работы за минимальную оплату. Компании, некогда созданные сильными лидерами, превратились в квазигосударственные структуры с утраченной миссией. Как бывший сотрудник Google, который провёл много времени в московском офисе, я вижу, что нынешний технологический рынок пугает. Яндекс, VK, HeadHunter и им подобные компании непригодны для создания инноваций и новых продуктов. Они не смогли сохранить ни основателей, ни адекватную бизнес-культуру. «ЧБД» Из-за «купола» и нерыночных условий российские компании теряют гибкость, что не даёт им конкурировать с международными гигантами. Чтобы выжить, они становятся государственными или около государственными. Яркие примеры — Яндекс и VK. Они не могут развиваться без административного ресурса, занимая долю рынка только там, где подавлена конкуренция. Например, проект VK Max был бы незаметен без медиаподдержки, потому что он не нужен ни аудитории, ни свободному рынку. Чтобы усилить интернет‑суверенитет, нужны адекватные условия труда и оплата. Пока же происходит возврат к «смуте». Мой личный опыт тому подтверждение: чтобы нормально зарабатывать, мне пришлось создать свою компанию и затем выйти из неё. Отсутствие нормальных условий приводит к желанию создавать рабочие места самому. Если цель рынка — заставить специалистов уезжать и создавать бизнесы за рубежом, то она выполняется отлично. 👉 @seniorFront

Дарим подписку на Яндекс Музыку Ответьте на 1 вопрос и Яндекс Музыка ваша для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже в подписке. Попробуйте бесплатно❤️ Попробовать #реклама 18+ music.yandex.ru О рекламодателе Реклама на Яндексе