​Объясните разницу между методами 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

Magnetic

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

👉 @seniorFront

👉 @seniorFront

3D Cover Flow

Создано на React и стилизовано в SCSS. Логики поворота карточки и переключения слайдов реализованы в JS коде.

👉 @seniorFront

Notification Icon + Micro Interaction

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

👉 @seniorFront

Вакансии для тех, кто хочет работать на море 🌊

Приглашаем специалистов DevOps, Java, JavaScript на открытые вакансии IT-офиса Сбера в Сочи. Мы создаём и развиваем банковские продукты для компаний в Индии, внедряем лучшие практики банкинга на индийский рынок.

У тебя есть уникальная возможность поучаствовать в построении автоматизированной банковской системы с нуля. Система состоит из набора модулей:

✔️ Ядро
✔️ Бухучёт и отчетность
✔️ Интернет-банк и антифрод-система
✔️ Кредитные продукты и не только

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

Часть команды в России, часть в Индии. А это значит, что у тебя есть отличная возможность поработать в международной команде!

Откликайся на вакансии по ссылке 😉

Scroll Animation Effects for Website

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

👉 @seniorFront

Splashed Toast Notifications

Создано и анимировано на чистом CSS. Каждый элемент - это чекбокс, при активации которого задействуются определенные стили.

👉 @seniorFront

1's, 0's and wildcards

Вам дана строка, содержащая нули, единицы и один или более '?', где '?' - это подстановочный знак, который может быть 0 или 1.
Верните массив, содержащий все возможные значения, которые можно получить, заменяя '?' нулём или единицей.

Пример:
'101?' -> ['1010', '1011']
'1?1?' -> ['1010', '1110', '1011', '1111']

👉 @seniorFront

Полное краткое руководство по grammY — JS-библиотеке для создания Telegram-ботов

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

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

👉 @seniorFront

​.toSorted()

Метод массива toSorted() это копия метода sort(), но, в отличие от него, не мутирует исходный массив, а возвращает новый отсортированный массив. Все undefined элементы сортируются в конец массива.

Пример
Отсортируем массив с числами:
const numbers = [43, 6, 35, 1, 9, 7, 5, 75, 16];
const sortedNumbers = numbers.toSorted((a, b) => a - b);
console.log(numbers);
// [43, 6, 35, 1, 9, 7, 5, 75, 16];
console.log(sortedNumbers);
// [1, 5, 6, 7, 9, 16, 35, 43, 75]

При сортировке массива методом toSorted() возвращаемый массив будет содержать поверхностную копию (shallow copy) элементов, если эти элементы являются объектами. При изменении этих элементов в объекте, изменения будут видны и в исходном массиве.
const obj = {name: 'Scarlett'};
const names = [
'Kirill',
'Alex',
obj,
'Denis',
'Albert',
undefined,
'',
];
const sortedNames = names.toSorted();

console.log(sortedNames);
// ['', 'Albert', 'Alex', 'Denis', 'Kirill', { name: 'Scarlett' }, undefined]

obj.name = 'Dan'; // меняем объект

console.log(sortedNames)
// ['', 'Albert', 'Alex', 'Denis', 'Kirill', { name: 'Dan' }, undefined]
// в отсортированном массиве, объект также изменился.

👉 @seniorFront

Split Landing Page

При наведении изменяется Значение Width блока. Плавность достигается при помощи CSS transition.

👉 @seniorFront

​Как получать приглашения на собесы, если опыта минимум?

1. Добавьте максимальное количество навыков, которые вам подходят, чем больше навыков - тем лучше. Желательно выбирать навыки из списка, которые есть на сайте. Если нашли какую-нибудь очень интересную вакансию - возможно стоит на какое-то время изменить резюме, чтобы навыки на 100% подходили под вакансию, но это надо делать только в том случае, если этими навыками вы действительно обладаете. Чем больше соответствие навыков - тем выше вас видит работодатель

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

3. Уберите возраст из профиля. Мне это помогло, потому что только стукнуло 18, но, думаю, лучше от этой информации в профиле избавиться, у всех HR свои предпочтения. Если очень интересно будет - спросят на интервью (обычно спрашивают)

4. Добавьте контактные данные в раздел "Обо мне", поскольку для того, чтобы увидеть ваши контактные данные на сайте, работодателю нужно платить, а если вы дадите их бесплатно - будет чуть выше шанс, что с вами свяжутся. Также в этом разделе стоит указать GitHub и сайт-визитку, если есть

5. Попробуйте верифицировать хотя бы один навык, это хороший знак для работодателя

6. Не стоит добавлять сертификаты "Русского Медвежонка", которые вы получили за победу в олимпиаде во 2 классе. Фотографию брелка победителя еще можете прикрепить, но тоже опционально

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

👉 @seniorFront

Фрилансер и заказчик. Взаимодействие

Каждый, кто имеет дело с IT в той или иной форме, так или иначе сталкивался/слышал о том, что существует такое явление, как фриланс. Как может показаться на первый взгляд, фриланс несет в себе одни плюсы. Ни тебе работника в офисе, для которого надо организовать рабочее место, ни проблем с оформлением его по ТК и последующим увольнением (если нанимать на четко заданный объем работ). Так же стоимость фрилансера, как правило, оказывается от 2 до 20 раз меньше, чем у фирмы, предлагающей те же самые услуги.

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

👉 @seniorFront