​.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

Neuomorphic Checkboxes

Подборка оригинальных чекбоксов с иконками font-awesome.

👉 @seniorFront

​Как провести первую ретроспективу и не облажаться?

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

С чего стоит начать подготовку и о чем необходимо задуматься заранее?

1. Определитесь с целью проведения ретроспективы. Что вы хотите обсудить с командой? К примеру: проанализировать спринт, подвести итоги года? Или же вы хотите выявить причины проблем, которые происходили в течении определенного периода времени.

2. Подготовьте презентацию, в которой отобразите вводную информацию для участников ретро: пояснение, что такое ретроспектива; цели; правила, повестку. Это буквально несколько слайдов, но благодаря этой презентации команда будет понимать, что ее ждет. Также, не мало, важно донести ценность мероприятия.

3. Важно определиться с форматом ретроспективы онлайн или оффлайн, а также предусмотреть соответствующие инструменты для комфортного проведения ретро. Если онлайн, то рекомендую популярную платформу Miro, в которой вы найдете шаблоны для ретроспективы на любой вкус, начиная от классических шаблонов Agile ретроспективы заканчивая тематическими (в стиле: стартрека; мультиков, путешествия) Есть и другие платформы: trello, confluence, retrius.

4. Мне очень помогает смоделировать возможные варианты введения мероприятия. Конечно, Вы не сможете предусмотреть все ситуации и кейсы, НО вы проработаете свой формат введения. Заранее продумайте введение ретроспективы; проблемы, которые Вы видите, используйте правильные вопросы: Что у нас получилось хорошо? Что Вас демотивировало? Что мы могли бы улучшить или сделать для более успешного результата?

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

6. По результатам проведенной ретроспективы сформируйте документ, который отобразит вскрытые проблемы и недовольства, позитивные моменты, а также договоренности. Результаты ретро – это план, как избежать тех ошибок/проблем, которые возникли у вас в рамках работы.

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

👉 @seniorFront

​Отрицание, торг и принятие работы над проектом без документации

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

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

С таким мощным стимулом автор статьи и решила приступить к делу:

1. Разработка шаблонов для стандартизации: Начнем с того, что создадим набор шаблонов, которые помогут нам описывать каждый аспект проекта в едином стиле и формате. Это не только облегчит процесс документирования, но и сделает его более удобным и понятным для всей команды.

2. Анализ базы данных: База данных является краеугольным камнем любого проекта. Без глубокого понимания ее структуры невозможно построить четкую картину всего проекта. Поэтому мы начнем с детального анализа базы данных, чтобы убедиться, что мы имеем полное представление о ее структуре и связях между данными.

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

4. Документация процесса тестирования: Четко описанный процесс тестирования - это ключевой элемент успешного проекта. Он не только помогает нам обеспечить качество продукта, но и повышает эффективность работы всей команды. Поэтому мы обязательно займемся созданием подробной документации по процессу тестирования, чтобы у нас была ясная стратегия и план действий на каждом этапе разработки.

5. Описание сценариев использования (use case): Представим себя в роли пользователя и опишем типичные сценарии использования нашего продукта. Это поможет нам лучше понять его функционал и потребности пользователей, а также выявить возможные улучшения и дополнительные функциональные требования.

6. Документация API с использованием Swagger: Документация API - это неотъемлемая часть любого современного проекта. Она позволяет другим разработчикам легко и эффективно взаимодействовать с нашим продуктом, используя наши API.

👉 @seniorFront

Direction-aware 3D hover effect

В JS создана логика определения стороны, с которой приходит курсор пользователя и установки соответствующего CSS класса.

👉 @seniorFront

Image Slider

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

👉 @seniorFront