React Smooth Section Navigator

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

👉 @seniorFront

Convert Hash To An Array

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

👉 @seniorFront

Как стать востребованным 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

Верстаешь?

Оцени 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

Button Hover Effects

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

👉 @seniorFront

​Айти. Войти или не войти?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

👉 @seniorFront

Как повысить удовлетворённость сотрудников

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

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

👉 @seniorFront

lapisCordis

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

👉 @seniorFront

Circular Progress Bar

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

👉 @seniorFront

Тот самый гаджет, который помогает протянуть до пятницы

👉 @seniorFront

Elastic Div

Логика изменения ширины контейнера реализована в JS, анимировано библиотекой gsap.

👉 @seniorFront

What's behind ?

Реализовано на canvas и THREE.js

👉 @seniorFront

👉 @seniorFront

Awesome Javascript Animated Switch

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

👉 @seniorFront

Canvas sprite-sheet bubbles

Пузыри генерируются и анимируются библиотекой gsap.

👉 @seniorFront

Sort the number sequence

Вам дан массив положительных чисел, разделенных нулями.
[3,2,1,0,5,6,4,0,1,5,3,0,4,2,8,0]

1. Сформируйте подмассивы, которые будут разделяться нулями
2. Отсортируйте числа в подмассивах по возрастанию
3. Отсортируйте подмассивы по суммам их элементов

Примеры:
sortSequence([3,2,1,0,5,6,4,0,1,5,3,0,4,2,8,0]) should return
[1,2,3,0,1,3,5,0,2,4,8,0,4,5,6,0]

sortSequence([3,2,1,0,5,6,4,0,1,5,3,0,2,2,2,0]) should return
[1,2,3,0,2,2,2,0,1,3,5,0,4,5,6,0]

sortSequence([2,2,2,0,5,6,4,0,1,5,3,0,3,2,1,0]) should return
[2,2,2,0,1,2,3,0,1,3,5,0,4,5,6,0]

👉 @seniorFront

​И снова о useCallback

Во время собеседования, когда меня спросили про хук useCallback, я ответил, что его использование имеет смысл только тогда, когда функция передаётся из родителя в дочерний компонент, а сам дочерний компонент обёрнут в memo. В таком случае ссылка на функцию из пропсов, обёрнутую в useCallback, останется неизменной, если родитель был перерисован, и мы избежим лишней перерисовки дочернего компонента. Собственно, данный вопрос даже на Хабре разбирался неоднократно, в том числе с залезанием в исходники (например, вот). Здесь следует понимать, что даже если мы всё сделали так, как написано выше, но дочерний компонент принимает прочие аргументы (помимо мемоизированной функции), и эти прочие аргументы изменились - всё, ваш useCallback из родителя официально бесполезен. Уже на таком этапе. И вроде бы двое собеседующих со мной согласились, но следом прозвучал вопрос "а вы использовали useCallback в проектах?", что говорит о том, что моя трактовка посчиталась ошибочной. Как оказалось, с пониманием использования этого хука проблемы куда глубже.

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

👉 @seniorFront

Атрибут novalidate

Атрибут отключает нативную валидацию формы со стороны браузера.

<form novalidate>...</form>

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

Например, поля с атрибутом required должны быть обязательно заполнены, и браузер укажет, если пользователь вдруг какое-нибудь из них пропустил.

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

👉 @seniorFront