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

Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront
Канал в реестре РКН https://rknn.link/bsU
Download Telegram
«Кем Вы видите себя через 5 лет», или HRско-русский разговорник

Вас спрашивали «Кем Вы видите себя через 5 лет»? Меня тоже. За двадцать пять лет в IT я понял, зачем они так делают. Понял – это значит, что я «привык и научился пользоваться» (С). Но «неприятно удивлять» они меня не перестали.

Публикую свой личный русско-HRский разговорник. Он вряд ли поменяет ваше отношение к HRскому языку, но проходить собеседования вы будете проще и эффективнее.

👉 @seniorFront
This media is not supported in your browser
VIEW IN TELEGRAM
Living Words

Сцена реализована на HTML и CSS. Слова добавляются через JS.

👉 @seniorFront
👍64🔥2
Media is too big
VIEW IN TELEGRAM
Responsive Conatct Info Section

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

👉 @seniorFront
This media is not supported in your browser
VIEW IN TELEGRAM
Да, да, конечно, все именно так...

👉 @seniorFront
🤔41
This media is not supported in your browser
VIEW IN TELEGRAM
Retro futuristic radio buttons

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

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

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

👉 @seniorFront
👍41
Какой протокол используется для двустороннего обмена данными в реальном времени, например, в чатах?
Anonymous Quiz
7%
FTP
3%
IMAP
84%
WebSocket
6%
SMTP
2👍2
Media is too big
VIEW IN TELEGRAM
60 Seconds Timer

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

👉 @seniorFront
🔥21
This media is not supported in your browser
VIEW IN TELEGRAM
Toggle Pill

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

👉 @seniorFront
👍6
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
👍1
Откуда растут переработки и прочая корпоративная шиза?

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

👉 @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
👍83
This media is not supported in your browser
VIEW IN TELEGRAM
Make the web less boring

Свёрстано на HTML и SCSS. Анимация реализована при помощи библиотеки Splitting.

👉 @seniorFront
👍3👎1🔥1
Когда разработчик тебе врёт: прокрастинация, отмазки и что с этим делать

Бро, если ты хоть раз руководил командой — ты это проходил. На стендапе всё звучит красиво: «делаю задачу, осталось чуть‑чуть», «почти готово», «просто баг странный». А потом проходит неделя, ты заглядываешь в код — и там либо ничего, либо половина сделано, либо вообще не туда копали.

Нет, это не обязательно саботаж. Иногда это банальная прокрастинация, страх ошибиться, потеря мотивации, или просто неумение сказать: «я застрял». Но проблема‑то реальная. Если не ловить и не разруливать — команда тонет в самообмане, а ты — в вечных переносах.

Что с этим делать (без угроз и тотального контроля)

1. Перевести коммуникацию в честный режим
Объясни, что красиво — не значит правильно. Лучше знать о залипании на старте, чем потом спасать сроки всей командой. Разработчик должен понимать, что от его темпа зависят не только задачи в трекере, но и работа коллег, планирование, демо, интеграции. Поделись кейсом, где сам застревал, ошибался, или делал что‑то неэффективно.

2. Ввести демо
Показывать прогресс не в конце спринта, а каждые 2–3 дня. Даже если это мок, даже если недоделано. Смысл — в процессе. Когда человек знает, что будет показ — он меньше залипает и раньше поднимает флаг, если что‑то не так.

3. Работать с мотивацией
Если кто‑то тупит — не значит, что он лентяй. Иногда у человека в жизни творится трэш. Иногда он просто перегорел. Иногда он не понимает, зачем делает задачу.
Не лечи всех одинаково. Один залип — потому что скучно. Другой — потому что боится. Третий — потому что его никто не слушает. И каждому нужен свой подход.

4. Использовать таймбоксинг
Не «сделай, когда сделаешь», а «поработай 2 часа — и скажи, зашло или нет». Это снижает тревожность, даёт точку выхода, и позволяет вовремя вытащить человека из тупика, а не после трёх дней молчания.

5. 1:1 как точка перехвата
Раз в неделю/две — короткая личная встреча. Без контроля. Просто поговорить. Часто люди на стендапе играют уверенность, а на 1:1 выдыхают и говорят, как есть. Слушай, не перебивай, не лечи. Иногда просто выговориться — уже половина решения.

6. Немного чайки - иногда работает
Да, чайка‑менеджмент — зло. Но иногда подлететь, пингануть и улететь — это встряска. Главное — не делать это стилем управления, а применять осознанно и дозировано как лекарства. Иногда это позволяет разбудить команду.

7. Парное программирование
Если задача критична — подключи второго. Даже если это джун. Когда работает пара, залипнуть труднее. А если один решит уйти в закат — второй хотя бы будет в курсе, что происходит.

8. Регулярное ревью кода и процессов
Не формальное, а живое. С разбором решений, обсуждением сложностей, поиском альтернатив. Часто человек тянет, потому что не уверен. А ревью снимает это напряжение и не даёт уйти в глухую оборону.

👉 @seniorFront
10👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Frontend + Летний митап + Суббота = Я.Субботник по разработке интерфейсов 💛

7 июня в Москве Яндекс Go проводит Я.Субботник по разработке интерфейсов. В программе 4 доклада и воркшоп: 

👉 Артемий Карпов расскажет,  как команда выстраивает взаимодействие между разработкой и тестированием при написании автотестов и улучшении семантики приложения
👉 Миша Колосовский покажет, как сделать статические схемы интерактивными и причем тут SVG
👉 Давид Давыдов объяснит, что мы сделали с серверным API и как пришли к одной строчке кода вместо сотни
👉 Серёжа Алейников поделится опытом портирования нативного BDUI в вебе

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

Регистрируйтесь и зовите друзей!

Мероприятие бесплатное. Количество мест в офлайне ограничено — пожалуйста, дождитесь нашего подтверждения.
Человек-клей: как я нашел самого неэффективного сотрудника, чуть не уволил, а оказалось, что на нем все держится

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

👉 @seniorFront
🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
CPC - Spotlight/Highlight (TMNT) 🐢

Реализовано на HTML и CSS. Логика переключения между картинками реализована в JS.

👉 @seniorFront
2👍2
Media is too big
VIEW IN TELEGRAM
Creative CSS Round Out Corners Cards

В этом видео создаются карточки со скругленными углами на HTML и CSS

👉 @seniorFront
3
This media is not supported in your browser
VIEW IN TELEGRAM
Media Player Widget

Анимации реализованы при помощи библиотеки TweenMax.

👉 @seniorFront
👍5
Ты IT-специалист и застрял на уровне Junior+/Middle и не знаешь, что делать дальше?

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

10 июня с 14:00 до 18:00 пройдет оффлайн-нетворкинг «Карьерный хакатон: ВЗЛОМ УРОВНЯ MIDDLE», на котором разберём как тебе с текущими ресурсами пробить свой потолок и сделать рывок!

Что тебя ждёт:
🚀 Один день — один карьерный скачок
Ты не просто слушаешь. Ты разбираешься в себе, получаешь идеи от команды и собираешь прототип своей новой стратегии. Всё — за один день.

🧠 Мастер-майнды с трекерами
Реальная работа в мини-группах, где каждый получает фокус внимания и поддержку от трекера и команды. Выйдешь с понятным карьерным вектором.

🎤 Выступление Владилена
Как пробить потолок уровня Middle, перестать буксовать и выстроить карьеру осознанно — через личный опыт и практику.

👥 Тот самый нетворкинг
Тут будут айтишники, у которых такие же вопросы, как у тебя. Разговоры, которые действительно цепляют. А не просто small talk за кофе

🎙Спикер: Владилен Минин
На рынке IT с 2013 года, более 6 лет обучает IT-специалистов. 40 000+ человек прошло онлайн-курсы, 76% выпускников устраиваются в течение трех месяцев. Общая аудитория: 300к+

Стоимость: 1990₽
Длительность: 4 часа
Дата и время: 10 июня с 14:00 до 18:00
Место: г. Москва, Москва-Сити Башня Федерация

Для участия в мероприятии переходи по ссылке
👎4🔥1🤔1