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

Hidden Search Widget

Логика раскрытия реализована в JS. Плавность достигается использованием CSS transition.

👉 @seniorFront

Dot Map

Вся сцена - это SVG картинка, анимируемая при помощи тегов <animate>

👉 @seniorFront

Magnetic Link Hover Effect

В этом видео создаётся эффект при наведении на иконку при помощи JS. В зависимости от положения курсора пользователя задается смещение.

👉 @seniorFront

Elastic Toggle

Создано на чистых HTML и CSS.

👉 @seniorFront

N-th Fibonacci

Напишите функцию, которая при задании числа (n) возвращает n-е число в последовательности Фибоначчи.

Пример:
nthFibo(4) == 2

Потому что 2 - это четвертое число в последовательности Фибоначчи.

Для справки, первые два числа в последовательности Фибоначчи - это 0 и 1, а каждое последующее число - это сумма двух предыдущих.

👉 @seniorFront

Хочешь освоить или улучшить свои навыки во фронтенде?

В канале Frontend Developer есть всё необходимое — бесплатные курсы по фронтенду(HTML, CSS, JS , React и др.), готовый код, полезные ресурсы и статьи. А также чат, где мы помогаем друг другу и делимся опытом

Обучайтесь бесплатно вместе с @byFrontDeveloper

Может рухнуть при первой атаке. Почему компаниям важно прокачивать киберграмотность

Авторы этой статьи провели опрос среди IT-специалистов, сотрудников ИБ, топ-менеджеров и руководителей компаний на тему кибербезопасности.
Опрос показал, что растёт спрос на повышение знаний. Многие считают, что компании недостаточно защищены; при этом мы видим рост успешных атак на бизнес и появление новых уловок, которые помогают злоумышленникам просочиться в инфраструктуру организаций через корпоративные почты сотрудников. Это говорит о том, что преступники не стоят на месте, ищут новые способы и инструменты для взлома. Следовательно, персонал нужно обучать регулярно. Фактически же такое обучение часто ограничивается рассылкой раз в полгода, которую никто не читает.

В конце статьи представлен чек-лист: как обеспечить достаточное информирование

👉 @seniorFront

​Объясните разницу между методами forEach() и map().

Методы forEach() и map() определены на нескольких структурах данных. Мы рассмотрим чем отличаются эти методы для массивов.

Оба метода принимают колбэк, который вызывается для каждого элемента. Разница в том, что метод forEach() ничего не возвращает, а метод map() возвращает новый массив с результатами вызова колбэка на каждом исходном элементе. Если переданный колбэк ничего не возвращает в новом массиве появится undefined

Вы можете вернуть значение и из колбэка для forEach() но оно никак не будет использоваться дальше.

 [1,2,3].forEach(a => a + 3);

Используя map() вы можете создавать цепочки вызовов. Если же вы будете использовать forEach() так сделать не получится.

 const myArray = [4, 2, 8, 7, 3, 1, 0];
 const myArray2 = myArray.map(item => item * 2).sort((a, b) => a - b);

 console.log(myArray); // [4, 2, 8, 7, 3, 1, 0]
 console.log(myArray2); // [0, 2, 4, 6, 8, 14, 16]

В примере выше изменился только myArray2.

Для закрепления, реализуем ту же самую логику при помощи forEach().
const myArray = [4, 2, 8, 7, 3, 1, 0];
let myArray2 = [];

myArray.forEach(item => {
myArray2.push(item * 2);
});

myArray2 = myArray2.sort((a, b) => a - b);

console.log(myArray); // [4, 2, 8, 7, 3, 1, 0]
console.log(myArray2); // [0, 2, 4, 6, 8, 14, 16]

👉 @seniorFront

💿 Song Selector

Реализовано на HTML и SCSS. Анимация реализована при помощи библиотеки Flipping.

👉 @seniorFront

​Кодер умеет в пыху. Какие словечки бесят айтишников

Автор статьи провел опрос и узнал, какие слова, словечки и высказывания раздражают IT‑специалистов. Среди ответов есть неожиданные, но лидер вряд ли кого‑то удивит. Как к этому всему относиться? Как к профессиональному жаргону, который есть в каждой специальности. Обычного человека, скорее всего, покоробят профессионализмы юристов и врачей, но для нас всех короткое и ёмкое слово — формулировка короткой и точной мысли. По крайней мере, очень хочется так думать;‑)

Не буду тянуть, вот список
Комментарии, в основном, автора статьи, цитаты — участников опроса. В скобках — количество упоминаний.

айтишечка (2) — никакого уважения к нашей IT‑сфере!
айтишник (5) — а это мы как‑то расспрашивали в отдельном порядке, вроде большинству нормально, но кто‑то и обижается
андрюша (2) — Android. И правда, так себе звучит
апи, апишка (2) — вместо Эй‑Пи‑Ай (API)
бага (3) — ну «баг» же, что за неоправданные феминитивы
жаба (2) — Java, но тоже душит
закостылил (2) — залил на прод код со странной логикой и опасными временными решениями, обычно закостыливается навеки
интервью, интервьюер (3) — «ты чего помылся, интервью брать будут?»
история (3) — в контексте IT и правда звучит не очень
кейс (3) — к истории его, в кейс чемодан
кресты (3) — С++ (кто‑то видит плюсы там, где остальные видят только кресты)
лайвкодинг (2) — да и занятие странное
мускуль (3) — MySQL, уважительнее, плиз
постгря (2) — тут аж целую статью написали, не до шуток!
пых пых, пыха (3) — любимый всеми PHP
рефактОринг (2) — говорите правильно
ручка (5) — топовый триггер гнева. Он же API endpoint. Употребляется в российских компаниях исключительно.
уметь в... (6) — адский лидер, который достал всё IT
яваскрипт (он вам не остров, не мотоцикл, не принцесса!)

Пишите в коменты ваши "любимые" словечки.

👉 @seniorFront

​С какими проблемами можно столкнуться тимлид?

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

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

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

Не видно результатов работы
Бывает, приходишь в компанию, разрабатываешь стратегию, строишь планы, горишь работой, но время идет, а ничего не меняется. Здесь недолго и приуныть: «Да кому все это нужно». В таком случае можно провести ретроспективный анализ, чтобы понять, почему проект не развивается. Спросить себя: «Может, я не туда бью, не те проблемы решаю?»

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

Доступ к бизнесу
Чтобы развивать продукт и решать текущие проблемы команды, тимлид должен быть в постоянном контакте с лицами, принимающими решения. Если доступ к «верхушке» закрыт, проблемы так и останутся нерешенными, перспективные стратегии развития — неозвученными, и мотивация работать потеряется. Чтобы не выгореть, лучше сменить компанию, если наладить отношения с руководством не выходит.

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

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

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

Заключение
Умение решать проблемы — важное качество тимлида. Но получается, увы, не всегда. Но если чувствуете, что уже год или два топчетесь на месте и никак не можете на это повлиять, а расти хочется, сменить компанию — неплохая идея. Не стоит бояться перемен. Менять работу — это нормально.

👉 @seniorFront

Circular Mask

Переходы созданы при помощи CSS mask-image и mask-position. Плавность достигается благодаря CSS transition.

👉 @seniorFront