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

Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront
Канал в реестре РКН https://rknn.link/bsU
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Amazing Product transition

Создано и анимировано на HTML и CSS.

👉 @seniorFront
👍282🔥2👎1🤔1
Куда подевались ваши манеры? Коллеги в IT

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

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

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

Будь почтителен со своими родителями, родственниками и с менеджером Иваном из своей компании

Пришла ко мне очередная бизнес-задача, уже с подготовленной документацией и согласованным архитектурным решением от менеджеров. Казалось бы, просто взял, реализовал, протестировал и выпустил в релиз, но менеджер Иван решил продемонстрировать свою важность, и релиз затянулся на неопределенный срок.
Всё началось с согласования мердж-реквеста в релизную ветку. На просьбы посмотреть и согласовать изначально был игнор, потому что Иван был очень занят согласованием других мердж-реквестов.
Заказчики уже ожидают функционала на продакшене, а я все еще не могу получить согласование от нашего менеджера. Это заставляет меня поднять вопрос на ретроспективе: почему этот менеджер взял на себя обязанности по согласованию всех задач в релизе и не может выполнять свою работу вовремя? Возможно, он вообще лишнее звено в этой бюрократической цепи. Другие разработчики тоже сообщают о таких проблемах, и наш тимлид решает провести разговор с Иваном и ускорить процесс.
Результатом данного разговора стало то, что Иван отказывается согласовывать данные доработки, аргументируя тем, что ему не устраивает архитектурное решение, хотя ранее он уже его согласовывал. Он указывает мне, что я должен посмотреть его расписание в календаре и назначить встречу с моим тимлидом и аналитиком, причем я не упоминаюсь в этой встрече. И разговор проходит в тоне, как-будто я секретарша, а он мой начальник, хотя в юридической структуре мой руководитель, мой тимлид.

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

И тут возникает вопрос: зачем всё это нужно? Почему, когда некоторые становятся столпами бюрократии, они начинают не решать проблемы, а создавать новые? Мне кажется, всё это происходит потому, что нужно демонстрировать руководству, как сильно ты зависишь от этого и как много ты работаешь, даже если эта работа не имеет реального значения.

👉 @seniorFront
👍93👎1
Увольнять нельзя удерживать

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

В этой статье рассматривается такая ситуация с точки зрен6ия менеджера. Будет полезно прочитать тем, кто задумывается о принятии контроффера.

👉 @seniorFront
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Smooth 3d perspective slider

Свёрстано при помощи препроцессоров Pug и SCSS. Функционал слайдера и логика поворота карточки реализована на чистом JS.

👉 @seniorFront
👍103
Media is too big
VIEW IN TELEGRAM
Light & Shadow Text Shadow Animation

В этом видео создается тень текста, при помощи CSS text-shadow, затем в JS изменяются параметры этой тени.

👉 @seniorFront
🔥6👍32
This media is not supported in your browser
VIEW IN TELEGRAM
Proximity Glow Cards

Настройки стилей карточек реализованы при помощи библиотеки dat.gui. Стилизовано и анимировано в CSS.

👉 @seniorFront
🔥7👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Travel carousel

Функционал слайдера реализован библиотекой swiper. Стилизовано в SCSS.

👉 @seniorFront
👍5👎2
Media is too big
VIEW IN TELEGRAM
Soap & Bubbles

В этом видео создается анимация, частицы которой генерируются в JS, а затем анимируются в CSS.

👉 @seniorFront
🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
React Smooth Section Navigator

Создано на React и анимировано библиотекой gsap.

👉 @seniorFront
🔥12
Convert Hash To An Array

{name: 'Jeremy', age: 24, role: 'Software Engineer'}

должны быть преобразованы в
[["age", 24], ["name", "Jeremy"], ["role", "Software Engineer"]]
Примечание: Выходной массив должен быть отсортирован в алфавитном порядке по имени ключа.

👉 @seniorFront
9👍3🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Как стать востребованным DevOps-специалистом всего за полгода и увеличить свой доход минимум в 3 раза?

Самое перспективное направление в IT сейчас – DevOps. И пока одни его боятся и обходят стороной, другие снимают все сливки.

Реальный пример – автор канала «Devops за полгода» Марсель Ибраев, Senior system engineer в Core42 Cloud и спикер учебного центра Слёрм.

Совместно с ребятами из Честного Знака, Лаборатории Касперского, VK и Jetty Cloud, они запускают новый крутой проект для всех начинающих DevOps-специалистов.

В канале собраны все фишки о том, как:
Начать свой путь в DevOps
Освоить базовые компетенции DevOps-специалиста
– Стать Junior DevOps и повысить свою стоимость на рынке труда в 3 раза


Переходи и забирай бесплатную карту по базовым и основным компетенциям для всех, кто собирается в DevOps 👉 @devopsupgrade

Реклама. ИП Аердинов Никита Вадимович ИНН 638103515932 erid: LjN8K7zVy
Путь к потрясающему CSS Easing с помощью новой функции linear()

Перефразируя поговорку, которая всегда была со мной: "Лучшая анимация - это та, которая остается в тени". Одна из самых важных концепций моушн дизайна в вебе - сделать так, чтобы моушн "чувствовался правильно". В то же время CSS был довольно ограничен в создании анимации и переходов, которые выглядят естественно и ненавязчиво для пользователя.

К счастью, ситуация меняется. В этой статье рассмотриваются новые возможности анимации, появившиеся в CSS. В частности, демонстрируются супер возможности linear() - новой функции для анимации, которая в настоящее время определена в спецификации CSS Easing Level 2 в редакции Editor's Draft. Изучается ее способность создавать кастомные анимации, которые приводят к естественному движению пользовательского интерфейса.

👉 @seniorFront
1
Верстаешь?

Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:

1. Ты сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Добавишь в портфолио 1 качественный проект;
7. Получишь в подарок чек-лист «45 мест для поиска работы».

А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова.

👉 Проскочить на интенсив бесплатно

Начинаем 14 мая.

Реклама. ИП Чернова О. А., ИНН:771399721044
.scrollTo()

Метод scrollTo() позволяет программно прокрутить элемент до некоторой точки координат на странице.
window.scrollTo(x, y)
Где x и y — это координаты левого верхнего угла экрана.

Для скролла внутри элемента (например, в <div>) нужно сначала получить этот элемент. Прокрутим первый на странице <div> на 100 пикселей вниз (этот блок должен содержать достаточно контента, чтобы появилась полоса прокрутки):
const div = document.querySelector('div')
div.scrollTo(0, 100)


Вместо координат в scrollTo() можно передать объект с тремя параметрами:
- top задаёт количество пикселей для прокрутки по оси y;
- left то же самое, но по оси x;
- behavior определяет поведение прокрутки. По умолчанию резкое auto, но можно указать плавный smooth.
window.scrollTo({
top: 100,
left: 0,
behavior: 'smooth'
})


scrollTo() необходим в случае, когда прокрутку нужно совершить до определённых координат на экране. В случае прокрутки относительно текущего положения лучше воспользоваться scrollBy(), а в случае прокрутки до конкретного элемента — методом scrollIntoView().

👉 @seniorFront
👍23
This media is not supported in your browser
VIEW IN TELEGRAM
Button Hover Effects

Подборка кнопок, стилизованных и анимированных в SCSS.

👉 @seniorFront
👍15🔥4
Айти. Войти или не войти?

Пост для тех, кто из-за рекламы онлайн-курсов загорелся идеей войти в айти.

1. Курсов достаточно
Вы думаете, курсы построены таким образом, что в них содержится вся информация, необходимая для того, чтобы освоить профессию? Это не так. Там нет и половины.

Проведем аналогию с айсбергом. Маленькая верхушка – это тот объем знаний, которые дадут вам курсы. Глыба, скрытая под водой, - это то, что вам нужно знать, чтобы иметь шанс пройти собеседование.

Придется регулярно гуглить, чтобы вы просто смогли сделать домашнее задание. Не говоря уже о каких-то сложных проектах и самой работе. Вам постоянно нужно будет искать информацию, зачастую на английском языке. А для того, чтобы составить интересное для работодателя портфолио с пет-проектами, придется самостоятельно изучать новые технологии.

2. Гарантия трудоустройства
Как бы сложно вам не было выучиться азам профессии, это будет самая простая часть. Настоящие трудности начнутся тогда, когда вы начнете искать работу. И здесь вам не стоит надеяться на «Центры трудоустройства» и «Министерства карьеры», которые обещаются при продаже курсов.

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

На своем примере могу сказать, что за время поиска позиции python-разработчика в период с июня по декабрь 2022 года я активно откликалась на все возможные стартовые позиции и стажировки. Угадайте, сколько я получила приглашений на собеседование? Ноль.

В этот момент меня накрыло отчаяние, и я решила перейти на менее популярный язык – golang – в надежде, что там конкуренция будет меньше и у меня будет больше шансов найти работу. За полугодовой временной интервал у меня было 3 собеседования на должность golang-разработчика, одно из которых завершилось оффером.

3. Много денег на старте
Ждете шестизначную цифру на руки на стартовой позиции? Не факт, что она у вас будет. Возможно, ради опыта и дальнейшего трудоустройства вам придется работать за маленькие деньги или вообще бесплатно в течение нескольких месяцев. Скорее всего вы потеряете в деньгах относительно той цифры, которую получали на старом месте работы, где были уже зарекомендовавшим себя специалистом.

У меня получилось исключение из правил, и я не потеряла в зарплате после смены профессии. Но тут надо сказать, что в течение двух лет до устройства на позицию разработчика я была в декрете. Фактически мой карьерный рост и зарплата были заморожены. Я точно знаю, что одна из моих коллег со старого места работы, с которой мы шли вровень до моего ухода в декрет, сейчас получает больше меня.

4. Идти в айти только из-за денег
Если ваша единственная мотивация в деньгах, вам не нужно в ай ти. Вы выгорите еще до трудоустройства. Вам должно быть в кайф учиться чему-то новому, решать логические задачи, ломать голову над куском кода, искать и отлавливать ошибки, изучать новую технологию.

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

5. Только интересные задачи, нет рутины
Задачи будут разные, в том числе скучные. Особенно на старте, потому что джуны и стажеры - относительно дешевая рабочая сила.

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

👉 @seniorFront
🔥15👍101👎1
Как повысить удовлетворённость сотрудников

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

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

👉 @seniorFront
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
lapisCordis

Вёрстка создана на Pug и CSS. В JS реализована логика раскрытия карточки.

👉 @seniorFront
👍6
Media is too big
VIEW IN TELEGRAM
Circular Progress Bar

В этом видео создаётся анимированный индикатор на HTML, CSS и JS.

👉 @seniorFront
👍21