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

Hi-Tech Notification Button

Внутри кнопки находится анимированная SVG картинка.

👉 @seniorFront

Infinite Animation

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

👉 @seniorFront

Обучение джуна тестировщика

👉 @seniorFront

View transitions (Chrome 115+)

Анимация создана при помощи CSS view transitions.

👉 @seniorFront

Tailwind - Notifications and Messages

Небольшой компонент с сообщениями и уведомлениями, стилизованный при помощи Tailwind.

👉 @seniorFront

Hover to Affect Sibling Elements

В этом видео создаётся эффект при наведении на элемент, а также создаются эффекты для соседних элементов. Для задания стилей соседним элементам используются свойства previousElementSibling и nextElementSibling.

👉 @seniorFront

Star trails

Частицы генерируются и анимируются в JS.

👉 @seniorFront

Find Count of Most Frequent Item in an Array

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

Пример:
input array: [3, -1, -1, -1, 2, -1, 3, -1, 2, 9, 3]
ouptut: 5
Самое частое число в массиве это -1, оно встречается 5 раз.

👉 @seniorFront

Реактивность в React и Vue

В этой статье автор сравнивает реактивности данных в таких библиотеках: React.js и Vue.js. Проводит сравнение процессов ре-рендеринга страниц. Данная статья хорошо подойдёт для новичков.

👉 @seniorFront

​Synthetic events в React

В React, "синтетические события" (synthetic events) - это система обработки событий, которая предоставляет кросс-браузерную и кросс-платформенную абстракцию над нативными событиями браузера. Они создаются и управляются React и обеспечивают более единообразное поведение обработки событий в различных браузерах.

Синтетические события предоставляются компонентам React как аргументы обработчиков событий и имеют схожий интерфейс с нативными событиями браузера, но с некоторыми различиями и улучшениями.

Пример использования синтетических событий:
import React from 'react';

class Button extends React.Component {
handleClick = (event) => {
event.preventDefault();
console.log('Button clicked!');
};

render() {
return <button onClick={this.handleClick}>Click me</button>;
}
}

В этом примере, event является синтетическим событием, передаваемым в обработчик handleClick. Вы можете вызывать методы такие как preventDefault(), stopPropagation(), и другие, а также получать информацию о событии (например, event.target, event.clientX, и др.).

Синтетические события также имеют дополнительные преимущества, такие как автоматический пулинг (для оптимизации работы с памятью), нормализация различий между разными браузерами и поддержка делегирования событий.

👉 @seniorFront

Blurry Text Reveal

Анимировано библиотекой gsap. Анимация запускается при прокрутке страницы.

👉 @seniorFront

​Этот опасный рефакторинг (Как снизить риски?)

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

Некоторые задачи рефакторинга подразумевают крупные изменения и затрагивают несколько подсистем. Другие при этом ограничиваются одним компонентом, но могут непредвиденно повлиять на другие части системы и вызвать поломку важнейших бизнес-операций. В этом случае речь может идти о действующем потоке приобретения товара. Третья категория – это доработки, позволяющие внести новые возможности – например, изменение потока приобретения одного товара для поддержки большего числа его единиц и добавление ещё одного потока после.
Объединяет все эти сценарии то, что они сопряжены с высоким риском.
1. В случае ошибки такие доработки навредят бизнесу (потеря прибыли, недовольство клиентов), команде (подорвут доверие, мотивацию) или другим связанным функциям (разработка встанет).
2. Причём реализация этих изменений весьма затратна, так как требует повышенного внимания, усилий и времени. Предпочтительнее для таких задач задействовать опытных разработчиков, хорошо разбирающихся в этой области.

Как снизить риски
Рекомендую использовать чек-лист:
- Определите ограничения. Как далеко можно зайти?
- Изолируйте доработки от функциональности. Не применяйте их вместе.
- Напишите обширные тесты, более высокоуровневые (интеграционные) с меньшим числом деталей реализации, и сопровождайте ими внесение изменений.
- Проверьте всё наглядно. Запустите браузер.
- Не пропускайте тесты. Не ленитесь.
- Не полагайтесь слишком сильно на код-ревью и контроль качества (QA). Люди ошибаются.
- Не смешивайте масштабные зачистки с другими изменениями. Это можно делать в случае небольших доработок.

👉 @seniorFront

​Как защитить PROD от багов и себя от стресса

Эта статья - взгляд QA на проблему возникновения багов на ПРОДе. Он выделил пять основных рисков:

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

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

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

Часто встречается и такая модель разработки - когда ответственность падает только на разработчика, минуя владельца продукта и аналитику. Это грустно и в таком случае помогут DOR и DOD.
Definition of Ready - это критерии готовности взять задачу в разработку, то есть DOR это условия, при выполнении которых задача может упасть в спринт. Команда сама выбирает критерии и придерживается их. Например: аналитика написана, есть точные тех.требования и т.д.
Definition of Done - это критерии завершения задачи, то есть условия после которых выполненная задача переходит в тестирование к QA.

3. Frontend и Backend выполняют задачи не синхронно
Под синхронным выполнением задачи я подразумеваю, что задачи на фронте и на бэке будут выполняться как минимум в одном спринте. Почему это критично? Тех.требования имеют свойства корректироваться на этапе разработки и если один разработчик взял задачу в одном спринте и подкорректировал реализацию на своей стороне, то второй разработчик может выполнить задачу по устаревшим требованиям.

4. Тестирование
Само тестирование может быть некачественным из-за человеческого фактора. Пропустил ошибку т.к. не написал тест-кейс по этой функциональности или не проверил негативные тесты. Недостаточно времени было на тестирование. Не было документации вовсе.
Данный риск зависит от самого инженера по тестированию, но описанные выше риски могу напрямую влиять на качество тестирования и ответственность ложится уже на вас.
Защитить себя и ваше время помогут вышеупомянутые DOR и DOD.

5. Релиз (Поддержка)
Данный риск зависит от четвертого, т.к. вы можете обнаружить ошибку только при регресс тестировании, а это значит мало времени уделено тестированию. В этот риск я бы добавил момент, когда вы выкатились на прод, но заказчику не нравится что-либо.

👉 @seniorFront