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

Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront
Канал в реестре РКН https://rknn.link/bsU
Download Telegram
Собеседования в IT превратились в экзамены, которые с трудом проходят даже опытные разработчики

Я нанимаю людей 10+ лет и верю, что в людях можно разглядеть потенциал. Мои команды решают сложные задачи, и 9 из 10 наймов — успешны. Провал? Обычно из-за неучтённого бэкграунда или усталости кандидата.

Как было раньше
10 лет назад я стал тимлидом и участвовал в наймах. Техдиректор требовал фундаментальных знаний Computer Science: алгоритмы, задачки, лайвкодинг (да, на ноутбуке или даже бумаге!). Собеседования напоминали экзамены: кандидат отвечал, а "препод" оценивал. Люди краснели, терялись, диалог скатывался в "родитель–ребёнок". Мне это не нравилось, но казалось, что так "прощупывают" границы знаний.

Новый подход
Позже я изменил подход. Вместо олимпиадных задач и "круглых люков" начал говорить о реальных задачах компании и спрашивать, что интересно кандидату. Я делился, а не экзаменовал. Люди раскрывались, сами рассказывали о пробелах. Такой подход помогал собрать крутые команды. Позже я узнал про принцип "я нормальный — ты нормальный". Оказалось, "экзамены" часто идут от страха, что кандидат окажется "слишком скилловым".

Проблема современных собеседований
IT-индустрия изменилась. Собесы усложняют: лайвкодинг, задачи с LeetCode, вопросы, не связанные с реальными кейсами. Опытный разработчик может не пройти, если не решит задачу мгновенно. Это демотивирует. Коллега с 10+ годами опыта жаловался: его проекты игнорируют, а HR задают вопросы про RPS, не учитывая кейсы. Собесы стали экзаменами, где ошибка "обнуляет" опыт.

Что делать?
Фундамент важен, но важнее — живой ум и реальные результаты. Работодателям стоит:
- Чётко описывать требования в вакансиях (RPS, технологии, задачи).
- Сократить этапы до 1–2 встреч. Больше — трата времени.
- Смотреть на кейсы, а не на скорость решения задачек.

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

👉 @seniorFront
6
Следи за собой. Риски общения с ИИ

За последние пять лет ИИ прошел путь от интересных экспериментов избранных инженеров и ученых, до фактически универсального помощника в каждом доме и офисе.

К чему мы пришли:

- Теперь ИИ рабочий интерфейс почти для всего. Уже не стоит вопрос — справится ли, скорее заказчики спрашивают: а почему в этом проекте до сих пор нет ИИ?

- Мы получили возможность работать быстрее. ИИ выполняет роли программиста, писателя, творческого помощника, секретарь для формализации концепций и планов, ученый-энциклопедист, врач, художник, переводчик, эмпатичный собеседник, психотерапевт, специалист поддержки и многое другое.

- И как всегда ложка дегтя. Появился и всерьез обсуждается незаявленный побочный эффект — психокогнитивная зависимость.

Эту статью я написал на основе личного опыта и опыта общения с увлеченными пользователями ИИ. Большая часть указанных рисков подтверждается научными исследованиями.

👉 @seniorFront
5
This media is not supported in your browser
VIEW IN TELEGRAM
light and shadow

Положение курсора отслеживается в JS и исходя из него задаются значения CSS переменным.

👉 @seniorFront
🔥4👍2👎1
Media is too big
VIEW IN TELEGRAM
Password Strength Checker

В этом видео создается анимированное поле ввода пароля с проверкой на надежность на чистом JS.

👉 @seniorFront
🔥5👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Upload UI

Это карточки, сообщающие о состоянии загрузки файла, свёрстанные на HTML и SCSS.

👉 @seniorFront
3👍3🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Toast Catcher

Вся игра - это SVG картинка, анимированная в SCSS. Логика реализована на чистом JS.

👉 @seniorFront
👍32
Media is too big
VIEW IN TELEGRAM
Card Hover Effects

В этом видео создаются карточки с 3D эффектом при наведении на CSS.

👉 @seniorFront
🔥31
This media is not supported in your browser
VIEW IN TELEGRAM
Alphabet soup

Это анимация загрузки, реализованная при помощи библиотеки gsap.

👉 @seniorFront
👍51
Minimum Reduction

Пирамида чисел - это рекурсивная структура, в которой каждый следующий ряд строится путем сложения соседних значений текущего ряда. Учитывая первый ряд пирамиды чисел, найдите значение, хранящееся в ее последнем ряду.

Пример:
 reducePyramid([3n, 5n]) = 8n


👉 @seniorFront
1👍1🔥1
Выгорание в IT. Как распознать первые сигналы и не сгореть

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

Выгорание не миф, не слабость и не повод для шуток про «программисты не люди». И IT, с его бешеным темпом, постоянными изменениями, высокими ожиданиями и культурой «быть всегда на связи», – идеальная среда, чтобы жить в работе и сгорать.

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

👉 @seniorFront
1👍1👎1
Атрибут crossorigin

Атрибут crossorigin указывает браузеру, как обращаться с внешними (кроссдоменными) ресурсами, чтобы соблюсти политику Cross-Origin Resource Sharing. Используется, например, с изображениями, шрифтами, видео, аудио, скриптами и стилями, подключёнными с других доменов.

Пример
<!-- Подключаем шрифт с другого домена -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Manrope&display=swap"
crossorigin="anonymous"
>

<!-- Видео с другого домена, требующее авторизации -->
<video controls crossorigin="use-credentials">
<source src="https://example.com/secure/video.mp4" type="video/mp4">
</video>


Атрибут crossorigin может принимать несколько значений:

- anonymous (значение по умолчанию) — отправляет запрос без учётных данных (куки, заголовков авторизации, клиентских сертификатов). Ответ должен содержать заголовок Access-Control-Allow-Origin.
- use-credentials — отправляет запрос с учётными данными.
В случае использования use-credentials ответ от сервера должен включать:
Access-Control-Allow-Origin: [точный домен]
Access-Control-Allow-Credentials: true


Применяется в таких тегах, как: <img>, <script>, <link>, <audio>, <video>, <iframe>, <use> (в SVG).

Подсказки
💡 Если вы подключаете ресурсы из CDN (сети доставки содержимого) и они не загружаются, попробуйте добавить crossorigin="anonymous".
💡 Без crossorigin некоторые теги работают, но доступа к данным ресурса через JavaScript не будет. К примеру, скрипт для анализа аудио.
💡 Неправильное ключевое слово или пустая строка, будет обработано как anonymous.
💡 Проверяйте консоль браузера: она подскажет, если нарушена политика CORS.

👉 @seniorFront
5👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Parallax Bake Shop Card

Карточка с эффектом параллакс, реализованная на HTML, CSS и чистом JS.

👉 @seniorFront
3👍1
Начальник следил за всем: отчёты по часам, скрины экрана и даже походы в туалет

В 18:45 ко мне подошла HR с планшетом: "Что ты сегодня сделал?" Это был третий допрос за день, чтобы доказать, что я не просто грею стул. Зарисовка из одной известной компании, где я работал.

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

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

Самые абсурдные формы отчётности
Собрал кейсы из своего опыта и историй знакомых. Плюс — как их заменить.

Таблицы с отчётами
Жёсткий эксель: часы с 9:00 до 18:00, каждая клетка — что делал ("11:00 — созвонился с шефом"). Пустых не бывает. HR или стажёр ходили по офису: "Занесите в таблицу!" Бывший коллега отзывался так: "Это не работа, а тюрьма с Excel-рамками. Каждый час — как допрос".

Чем заменить: Такие таблицы — перебор. Руководители хотят прозрачности по проектам. Лучше сводки в YouGile: отчёты на доске, собирающие задачи по критериям.

Я смотрю:
- Задачи с горящим дедлайном;
- Требующие срочного вмешательства;
- По конкретному сотруднику;
- С активным обсуждением (много комментов — признак проблем).

Это мониторинг в реальном времени, без лишнего контроля. Отказался от всех "бесящих" отчётов.

Отчётные зумы всей команды
По пятницам 30 человек в зуме "для инфополя". Каждый пересказывал неделю — к середине все забыли, что делали. Плюс, половина — про чужие задачи. Отзыв из той компании: "Зумы — это час зря, все зевают и ждут конца".

Чем заменить:

- Короткие созвоны внутри команды (15–30 мин): по незакрытым задачам, статусам, вопросам.
- Демо раз в месяц для других отделов: спикеры от команд, 10 мин на речь с результатами. Синхронизация без марафона.

Видеодневники
Раз в неделю — кружок в чат "Чего я достиг". Джуны старались серьёзно, лиды стебались. Я записал 16 видео — никто не посмотрел. Идея: научиться коротко рассказывать о результатах.Чем заменить: Перенести в one-to-one: там сотрудник расскажет о новом, трудностях. Лично и полезно.

Стихийные срочные отчёты
Фаундер видит, что ты долго пьёшь кофе — и требует отчёт за неделю. Или, как на форуме: заметил "не ту позу" — пиши, что делал месяц. Один парень жаловался: "Босс увидел, как я стою у окна, и велел отчитаться за весь месяц. Как в комедии".

Чем заменить: Искоренить. Недоверие хуже любого формата — демотивирует.

Квартальные отчёты
Друг из консалтинга готовит с первого дня квартала: для премии, бюджета, "насолить" другим. Отчёт — главный результат.

Чем заменить: Для операционки — выгрузка из трекера (закрыто/просрочено). Для руководителей — по KPI: цель, сделано, не получилось (почему), планы. В YouGile — автоматически. P.S. В госе — специфика, смириться.

Чаты с фоллоуапами
Ежедневные апдейты после встреч — одно и то же из дня в день. Руководитель лайкал, половина команды выдумывала "координацию".

Чем заменить: Канбан-доска в трекере: видно задачи, ответственных, статусы. Фильтры по параметрам. Смотрим данные, уточняем только при вопросах.

Вместо вывода
Отчёты нужны для контроля, но цель — здоровая прозрачность, не идеальная отчётность.Мои идеи — опора в управлении. Надеюсь, пригодятся.А вы что думаете про отчёты? Писали "рассказы о дне"? Делитесь в комментах!

👉 @seniorFront
4👍3
Что изменилось на рынке труда в IT: исследование на выборке из 128 специалистов

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

👉 @seniorFront
👎3
This media is not supported in your browser
VIEW IN TELEGRAM
Animated Easter SVG

Подборка SVG иконок, анимированных библиотекой anime.js

👉 @seniorFront
👍4
Media is too big
VIEW IN TELEGRAM
Glowing Corner Hover Effects

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

👉 @seniorFront
👍21
This media is not supported in your browser
VIEW IN TELEGRAM
Шок: в «Гарри Поттере» давно выдали всю базу про возвращение удалёнщиков в офис

👉 @seniorFront
🔥11👎31👍1🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
Preloading Space Animation

Оригинальный загрузчик, реализованный с использованием препроцессоров Pug и SCSS.

👉 @seniorFront
👍4