Senior Frontend - javascript, html, css

Было? 👉 @seniorFront

Получи грант до 1,2 млн руб. на обучение в магистратуре 4 офлайн программы, онлайн-магистратура по ML. Гранты до 1,2 млн руб. Стажировки, диплом гос. образца и фокус на твоей карьере в ЦУ Подать заявку #реклама 16+ apply.centraluniversity.ru О рекламодателе

Creative CSS Round Out Corners Cards В этом видео создаются карточки со скругленными углами на HTML и CSS 👉 @seniorFront

CPC - Spotlight/Highlight (TMNT) 🐢 Реализовано на HTML и CSS. Логика переключения между картинками реализована в JS. 👉 @seniorFront

Человек-клей: как я нашел самого неэффективного сотрудника, чуть не уволил, а оказалось, что на нем все держится Рано или поздно любой хороший продакт начинает покрывать метриками свою команду. В одной из продуктовых групп так и случилось: продакт ввел метрики, постепенно вычислил самого неэффективного сотрудника — назовем его Петя — и уже готовил бумаги на увольнение. Но во время этого веселого процесса вдруг выяснилось, что общие высокие показатели команды, это заслуга совсем не продакта (опаньки!), а именно «неэффективного» Пети. Потому что Петя оказался «человек-клей». Тот самый парень (или девушка), ради общения с которым собирается команда, который умеет поддержать, вдохновить, снять негатив и вообще настроить команду на продуктивный лад. При этом он вполне может быть распоследним раздолбаем. 👉 @seniorFront

Frontend + Летний митап + Суббота = Я.Субботник по разработке интерфейсов 💛 7 июня в Москве Яндекс Go проводит Я.Субботник по разработке интерфейсов. В программе 4 доклада и воркшоп:  👉 Артемий Карпов расскажет,  как команда выстраивает взаимодействие между разработкой и тестированием при написании автотестов и улучшении семантики приложения 👉 Миша Колосовский покажет, как сделать статические схемы интерактивными и причем тут SVG 👉 Давид Давыдов объяснит, что мы сделали с серверным API и как пришли к одной строчке кода вместо сотни 👉 Серёжа Алейников поделится опытом портирования нативного BDUI в вебе На воркшопе участники в командах будут исправлять некорректные интерфейсы, стараясь учесть требования дизайнеров, бэкенд-разработчиков и тестировщиков. Вместе обсудим варианты решений, а коллеги из Яндекса помогут найти самое оптимальное.  Регистрируйтесь и зовите друзей! Мероприятие бесплатное. Количество мест в офлайне ограничено — пожалуйста, дождитесь нашего подтверждения.

​Когда разработчик тебе врёт: прокрастинация, отмазки и что с этим делать Бро, если ты хоть раз руководил командой — ты это проходил. На стендапе всё звучит красиво: «делаю задачу, осталось чуть‑чуть», «почти готово», «просто баг странный». А потом проходит неделя, ты заглядываешь в код — и там либо ничего, либо половина сделано, либо вообще не туда копали. Нет, это не обязательно саботаж. Иногда это банальная прокрастинация, страх ошибиться, потеря мотивации, или просто неумение сказать: «я застрял». Но проблема‑то реальная. Если не ловить и не разруливать — команда тонет в самообмане, а ты — в вечных переносах. Что с этим делать (без угроз и тотального контроля) 1. Перевести коммуникацию в честный режим Объясни, что красиво — не значит правильно. Лучше знать о залипании на старте, чем потом спасать сроки всей командой. Разработчик должен понимать, что от его темпа зависят не только задачи в трекере, но и работа коллег, планирование, демо, интеграции. Поделись кейсом, где сам застревал, ошибался, или делал что‑то неэффективно. 2. Ввести демо Показывать прогресс не в конце спринта, а каждые 2–3 дня. Даже если это мок, даже если недоделано. Смысл — в процессе. Когда человек знает, что будет показ — он меньше залипает и раньше поднимает флаг, если что‑то не так. 3. Работать с мотивацией Если кто‑то тупит — не значит, что он лентяй. Иногда у человека в жизни творится трэш. Иногда он просто перегорел. Иногда он не понимает, зачем делает задачу. Не лечи всех одинаково. Один залип — потому что скучно. Другой — потому что боится. Третий — потому что его никто не слушает. И каждому нужен свой подход. 4. Использовать таймбоксинг Не «сделай, когда сделаешь», а «поработай 2 часа — и скажи, зашло или нет». Это снижает тревожность, даёт точку выхода, и позволяет вовремя вытащить человека из тупика, а не после трёх дней молчания. 5. 1:1 как точка перехвата Раз в неделю/две — короткая личная встреча. Без контроля. Просто поговорить. Часто люди на стендапе играют уверенность, а на 1:1 выдыхают и говорят, как есть. Слушай, не перебивай, не лечи. Иногда просто выговориться — уже половина решения. 6. Немного чайки - иногда работает Да, чайка‑менеджмент — зло. Но иногда подлететь, пингануть и улететь — это встряска. Главное — не делать это стилем управления, а применять осознанно и дозировано как лекарства. Иногда это позволяет разбудить команду. 7. Парное программирование Если задача критична — подключи второго. Даже если это джун. Когда работает пара, залипнуть труднее. А если один решит уйти в закат — второй хотя бы будет в курсе, что происходит. 8. Регулярное ревью кода и процессов Не формальное, а живое. С разбором решений, обсуждением сложностей, поиском альтернатив. Часто человек тянет, потому что не уверен. А ревью снимает это напряжение и не даёт уйти в глухую оборону. 👉 @seniorFront

Make the web less boring Свёрстано на HTML и SCSS. Анимация реализована при помощи библиотеки Splitting. 👉 @seniorFront

​Что такое селектор атрибутов? Позволяют выбирать элементы HTML на основе наличия, значения или частичного соответствия атрибутов. Это мощный инструмент, который делает стилизацию элементов более гибкой и точной. Селектор по наличию атрибута Выбирает элементы, которые содержат указанный атрибут, независимо от его значения.

/* Выбирает все элементы с атрибутом title */
[title] {
    color: blue;
}

Селектор по точному значению атрибута Выбирает элементы, атрибут которых имеет точное указанное значение.

/* Выбирает все элементы с атрибутом type, равным "submit" */
input[type="submit"] {
    background-color: green;
}

Селектор по наличию значения в списке значений атрибута Выбирает элементы, атрибут которых содержит указанное значение в списке, разделенном пробелами.

/* Выбирает все элементы с классом, включающим "btn" */
[class~="btn"] {
    font-weight: bold;
}

Селектор по начальной части значения атрибута Выбирает элементы, атрибут которых начинается с указанного значения.

/* Выбирает все элементы, значение атрибута href которых начинается с "https" */
a[href^="https"] {
    color: red;
}

Селектор по конечной части значения атрибута Выбирает элементы, атрибут которых заканчивается на указанное значение.

/* Выбирает все элементы, значение атрибута href которых заканчивается на ".pdf" */
a[href$=".pdf"] {
    text-decoration: underline;
}

Селектор по вхождению значения в атрибут Выбирает элементы, атрибут которых содержит указанное значение в любом месте.

/* Выбирает все элементы, значение атрибута href которых содержит "example" */
a[href*="example"] {
    color: orange;
}

Примеры использования селекторов атрибутов Стилизация всех изображений с атрибутом alt

img[alt] {
    border: 2px solid blue;
}

Стилизация ссылок, ведущих на внешние сайты

a[href^="http"] {
    color: red;
}

Стилизация полей ввода с определенным типом

input[type="text"] {
    border: 1px solid gray;
}

Стилизация элементов с определенным классом

[class~="button"] {
    padding: 10px;
    background-color: lightgray;
}

Комбинированные селекторы Селекторы атрибутов можно комбинировать с другими типами селекторов для создания более специфичных правил.

/* Выбирает все кнопки с классом btn и типом submit */
button.btn[type="submit"] {
    background-color: green;
    color: white;
}

👉 @seniorFront

Откуда растут переработки и прочая корпоративная шиза? Почему в современном менеджменте столько глупости? Почему руководители верят в переработки, садистское отношение к сотрудникам и не умеют думать на 2 шага вперёд? Разберем в статье. 👉 @seniorFront

Sum of a sequence Ваша задача - написать функцию, которая возвращает сумму последовательности целых чисел. Последовательность задается 3 неотрицательными значениями: begin, end, step. Если значение begin больше end, то ваша функция должна вернуть 0. Если end не является результатом целого числа шагов, то не добавляйте его к сумме. Смотрите 4-й пример ниже. Примеры

2,2,2 --> 2
2,6,2 --> 12 (2 + 4 + 6)
1,5,1 --> 15 (1 + 2 + 3 + 4 + 5)
1,5,3  --> 5 (1 + 4)

👉 @seniorFront

Toggle Pill Подборка переключателей с разными анимациями, реализованные на HTML и CSS. 👉 @seniorFront

60 Seconds Timer В этом видео создается анимированный таймер на чистых HTML и CSS. 👉 @seniorFront

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

Стань частью масштабного ИТ-события от МТС True Tech Day 2025 — третья технологическая конференция МТС для профессионалов ИТ‑индустрии. Одна из главных тем в этом году — тренды и практики искусственного интеллекта. В программе: — Доклады от ученых и зарубежных спикеров с индексом Хирша более 50. — Кейсы применения современных ИИ‑решений — от AI‑агентов, тестов LLM и бенчмарков до вопросов регулирования. — AI-интерактивы и технологические квесты. — Пространство для нетворкинга, …а еще after-party со звездным лайн-апом. Когда: 6 июня Где: Москва, МТС Live Холл и онлайн Участие бесплатное, но мест мало. Регистрируйся по ссылке.

Flip Cards Карточки, переворачивающиеся при наведении, реализованные на HTML и SCSS. 👉 @seniorFront

Retro futuristic radio buttons Кнопки созданы на HTML и CSS. При нажатии запускается анимация, реализованная с использованием библиотеки gsap. 👉 @seniorFront

Да, да, конечно, все именно так... 👉 @seniorFront

Responsive Conatct Info Section В этом видео создаются карточки контактов, анимируемые при наведении на них. 👉 @seniorFront