💸 Апгрейд твоей карьеры - Начни зарабатывать или получи в x3 текущего дохода в Web3

🔝@TopSelectionWeb3 раскроет секреты, как кратно увеличить свой доход, работая в Web3/блокчейн-проектах.

👤 Кто проведет? Тина🦄 — CTO и Product Owner в TopSel, победитель хакатона Binance

Почему стоит прийти на эфир:

• Ты узнаешь, что такое Web3 и блокчейн-проекты, и какое разнообразие они предлагают
• Раскроем мифы и реальные факты о блокчейне и криптовалютах
• Поймешь, подходит ли тебе карьера в Web3, и как сделать первый шаг в этом направлении
• Откроем для тебя новые тренды и технологии, а также подарим порцию мотивации для старта твоей карьеры в мире Web3
• Бонус 🎁: в конце поделимся подробностями про старт нашего карьерного Буткампа и Web3-хакатона!

📆 Сохраните дату: 14 марта в 19:00 мск

Увидимся на эфире!🚀
@TopSelectionWeb3
#Эфир #web3 #буткамп #хакатон

CSS Javascript Animation Effects

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

👉 @seniorFront

Когда учил алгоритмы вместо вёрстки, чтобы устроиться на работу

👉 @seniorFront

Skeuomorphic Range Slider

Поверх элемента input создано несколько вспомогательных элементов, зависящих от значений CSS переменных. Эти значения изменяются в JS при срабатывании события input.

👉 @seniorFront

Eletric Spinner

Размытие реализовано при помощи svg картинки. Всё остальное свёрстано и анимировано на HTML и SCSS.

👉 @seniorFront

CSS Animation Effects

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

👉 @seniorFront

Are the numbers in order?

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

Пример:
inAscOrder([1,2,4,7,19]); // true
inAscOrder([1,2,3,4,5]); // true
inAscOrder([1,6,10,18,2,4,20]); // false

👉 @seniorFront

Насколько потолстел JavaScript к 2024 году?

В этой статье автор статьи решил проанализировать популярные сайты и сервисы на предмет объема загружаемого JS кода. И пришел к неутешительным выводам: Например, Gitlab требуется 13 МБ кода, а именно 500К строк JS, просто для отображения статичного лендинга.

Ставь 🔥, если твой лендинг подгружает меньше 1 МБ.

👉 @seniorFront

​​Element.closest()

Метод Element.closest() ищет и возвращает ближайший (начиная с самого элемента) родительский элемент, соответствующий указанному CSS-селектору. Если ни один элемент не соответствует указанному CSS-селектору, возвращается null.

Типичный пример использования Element.closest() — определение области действия при клике. Допустим у нас есть множество кнопок, находящихся во вложенных контейнерах. Необходимо найти ближайший к нажатой кнопке контейнер.
<div class="container main-container">
   <button id="1">Кнопка 1</button>
   <div class="container parent-container">
     <button id="2">Кнопка 2</button>
     <div class="container child-container">
       <button id="3">Кнопка 3</button>
     </div>
   </div>
</div>

Для решения задачи достаточно добавить только один обработчик события click:
const mainContainer = document.querySelector('.main-container')

mainContainer.addEventListener('click', function (e) {
   const targetElem = e.target

   if (targetElem.tagName !== 'BUTTON') {
     // Eсли клик выполнен не на кнопке ничего не делаем
     e.stopPropagation()
     return
   }

   const containerElem = targetElem.closest('.container')
   // Выводим в консоль контейнер, содержащий нажатую кнопку
   console.log(containerElem)
})

👉 @seniorFront

Animated Covers

Здесь реализовано множество простых анимаций при наведении на блок.

👉 @seniorFront

​Что выбрать опытному разработчику? Фриланс vs агентство

Существует миф, что на фрилансе разработчику можно заработать больше, чем работая на агентство. Может быть, это бы и было так, если бы разработчики умели себя продавать. По статистике, если взять двух специалистов с абсолютно одинаковыми hard- и soft-скиллами, но один из них работает на крупного интегратора, а другой - на фрилансе, стоимость их часа будет отличаться как минимум в два раза. Причем не в пользу “свободного плаванья”. Итак, почему же на интегратора работать выгоднее?

Умение продавать
Это, пожалуй, первое и основное. В крупном агентстве работает целый штат маркетологов, которые могут донести ценность услуг своих сотрудников до нужной аудитории. И эту ценность крупный интегратор добавляет к стоимости часа. Здесь уже не придется бороться со своим “синдромом самозванца”, мучиться на тему “дорого или не дорого беру” и других психологических загонов. Просто читаешь свою анкету на сайте и понимаешь, насколько ты крут.
Ценность, которую необходимо создать, делится на два показателя:
1. Выгода: помощь вашему клиенту в увеличении дохода, прибыли, узнаваемости, репутации.
2. Боль: помощь вашему клиенту в снижении затрат, рисков, проблем.

Сложности общения с клиентом
Знаем по опыту, что разработчики часто интроверты и им сложно много общаться с людьми. Особенно со “сложными” клиентами. С этим часто связано и достижение потолка чистой прибыли на фрилансе. Ведь важно не только качественно предоставлять услуги и выполнять «объемы работы», но и решать проблемы заказчиков, заниматься исследованием, задавать много вопросов и анализировать.

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

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

👉 @seniorFront

Как минимизировать конфликты между разработчиками и тестировщиками

1. Минимизируй конфликтные ситуации, результаты тестирования необходимо представлять в максимально нейтральном виде, ориентированном на факты, а не на критику автора.

2. Цели и задачи работы должны быть ясны. Не ленитесь лишний раз убедиться, что достигли взаимопонимания, спрашивай себя, верно ли тебя понял визави.

3. Обе стороны должны помнить о единой цели – максимально качественно работающая система.

4. Необходимо координировать механизмы трудового процесса с обеих сторон, учитывая мнение как разработчика, так и тестировщика.

5. Подключай эмпатию, старайся учитывать чувства коллеги.

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

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

👉 @seniorFront

Curved Range Slider

Это input type="range", стилизованный в CSS.

👉 @seniorFront

Javascript Scroll Animation

В этом видео создается анимация при прокрутке страницы при помощи библиотеки gsap.

👉 @seniorFront

🔥 Это база с 1400 вопросами с собеседований на Frontend разработчика. Фишка в том, что просчитана вероятность с которой вопрос буден задан и есть примеры ответов. Теперь можно легко получить оффер, подготовившись к самым популярным вопросам 😏

Тот самый сотрудник у которого на созвонах вечно какой-то посторонний шум в микрофоне

👉 @seniorFront