Card Hover Effects

В этом видео создаются карточки с 3D эффектом при наведении на CSS.

👉 @seniorFront

Alphabet soup

Это анимация загрузки, реализованная при помощи библиотеки gsap.

👉 @seniorFront

Minimum Reduction

Пирамида чисел - это рекурсивная структура, в которой каждый следующий ряд строится путем сложения соседних значений текущего ряда. Учитывая первый ряд пирамиды чисел, найдите значение, хранящееся в ее последнем ряду.

Пример:

 reducePyramid([3n, 5n]) = 8n

👉 @seniorFront

Выгорание в IT. Как распознать первые сигналы и не сгореть

Давай поговорим о том, о чем все знают, но предпочитают молчать, пока не прижмет — о профессиональном выгорании.

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

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

👉 @seniorFront

​Атрибут crossorigin

Атрибут crossorigin указывает браузеру, как обращаться с внешними (кроссдоменными) ресурсами, чтобы соблюсти политику Cross-Origin Resource Sharing. Используется, например, с изображениями, шрифтами, видео, аудио, скриптами и стилями, подключёнными с других доменов.

Пример

<!-- Подключаем шрифт с другого домена -->
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Manrope&display=swap"
  crossorigin="anonymous"
>

<!-- Видео с другого домена, требующее авторизации -->
<video controls crossorigin="use-credentials">
  <source src="https://example.com/secure/video.mp4" type="video/mp4">
</video>

Атрибут crossorigin может принимать несколько значений:

- anonymous (значение по умолчанию) — отправляет запрос без учётных данных (куки, заголовков авторизации, клиентских сертификатов). Ответ должен содержать заголовок Access-Control-Allow-Origin.
- use-credentials — отправляет запрос с учётными данными.
В случае использования use-credentials ответ от сервера должен включать:

Access-Control-Allow-Origin: [точный домен]
Access-Control-Allow-Credentials: true

Применяется в таких тегах, как: <img>, <script>, <link>, <audio>, <video>, <iframe>, <use> (в SVG).

Подсказки
💡 Если вы подключаете ресурсы из CDN (сети доставки содержимого) и они не загружаются, попробуйте добавить crossorigin="anonymous".
💡 Без crossorigin некоторые теги работают, но доступа к данным ресурса через JavaScript не будет. К примеру, скрипт для анализа аудио.
💡 Неправильное ключевое слово или пустая строка, будет обработано как anonymous.
💡 Проверяйте консоль браузера: она подскажет, если нарушена политика CORS.

👉 @seniorFront

Parallax Bake Shop Card

Карточка с эффектом параллакс, реализованная на HTML, CSS и чистом JS.

👉 @seniorFront

Начальник следил за всем: отчёты по часам, скрины экрана и даже походы в туалет

В 18:45 ко мне подошла HR с планшетом: "Что ты сегодня сделал?" Это был третий допрос за день, чтобы доказать, что я не просто грею стул. Зарисовка из одной известной компании, где я работал.

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

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

Самые абсурдные формы отчётности
Собрал кейсы из своего опыта и историй знакомых. Плюс — как их заменить.

Таблицы с отчётами
Жёсткий эксель: часы с 9:00 до 18:00, каждая клетка — что делал ("11:00 — созвонился с шефом"). Пустых не бывает. HR или стажёр ходили по офису: "Занесите в таблицу!" Бывший коллега отзывался так: "Это не работа, а тюрьма с Excel-рамками. Каждый час — как допрос".

Чем заменить: Такие таблицы — перебор. Руководители хотят прозрачности по проектам. Лучше сводки в YouGile: отчёты на доске, собирающие задачи по критериям.

Я смотрю:
- Задачи с горящим дедлайном;
- Требующие срочного вмешательства;
- По конкретному сотруднику;
- С активным обсуждением (много комментов — признак проблем).

Это мониторинг в реальном времени, без лишнего контроля. Отказался от всех "бесящих" отчётов.

Отчётные зумы всей команды
По пятницам 30 человек в зуме "для инфополя". Каждый пересказывал неделю — к середине все забыли, что делали. Плюс, половина — про чужие задачи. Отзыв из той компании: "Зумы — это час зря, все зевают и ждут конца".

Чем заменить:

- Короткие созвоны внутри команды (15–30 мин): по незакрытым задачам, статусам, вопросам.
- Демо раз в месяц для других отделов: спикеры от команд, 10 мин на речь с результатами. Синхронизация без марафона.

Видеодневники
Раз в неделю — кружок в чат "Чего я достиг". Джуны старались серьёзно, лиды стебались. Я записал 16 видео — никто не посмотрел. Идея: научиться коротко рассказывать о результатах.Чем заменить: Перенести в one-to-one: там сотрудник расскажет о новом, трудностях. Лично и полезно.

Стихийные срочные отчёты
Фаундер видит, что ты долго пьёшь кофе — и требует отчёт за неделю. Или, как на форуме: заметил "не ту позу" — пиши, что делал месяц. Один парень жаловался: "Босс увидел, как я стою у окна, и велел отчитаться за весь месяц. Как в комедии".

Чем заменить: Искоренить. Недоверие хуже любого формата — демотивирует.

Квартальные отчёты
Друг из консалтинга готовит с первого дня квартала: для премии, бюджета, "насолить" другим. Отчёт — главный результат.

Чем заменить: Для операционки — выгрузка из трекера (закрыто/просрочено). Для руководителей — по KPI: цель, сделано, не получилось (почему), планы. В YouGile — автоматически. P.S. В госе — специфика, смириться.

Чаты с фоллоуапами
Ежедневные апдейты после встреч — одно и то же из дня в день. Руководитель лайкал, половина команды выдумывала "координацию".

Чем заменить: Канбан-доска в трекере: видно задачи, ответственных, статусы. Фильтры по параметрам. Смотрим данные, уточняем только при вопросах.

Вместо вывода
Отчёты нужны для контроля, но цель — здоровая прозрачность, не идеальная отчётность.Мои идеи — опора в управлении. Надеюсь, пригодятся.А вы что думаете про отчёты? Писали "рассказы о дне"? Делитесь в комментах!

👉 @seniorFront

Что изменилось на рынке труда в IT: исследование на выборке из 128 специалистов

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

👉 @seniorFront

Animated Easter SVG

Подборка SVG иконок, анимированных библиотекой anime.js

👉 @seniorFront

Glowing Corner Hover Effects

В этом видео создаются карточки с эффектом свечения на CSS и JS.

👉 @seniorFront

Шок: в «Гарри Поттере» давно выдали всю базу про возвращение удалёнщиков в офис

👉 @seniorFront

Preloading Space Animation

Оригинальный загрузчик, реализованный с использованием препроцессоров Pug и SCSS.

👉 @seniorFront

Interactive Form

Оригинальная форма регистрации, свёрстанная на HTML и SCSS.

👉 @seniorFront

Amazing Rain & Lightning Animation Effects

В этом видео создаются анимации дождя и молнии на чистых CSS и JS.

👉 @seniorFront

Outlined Mobile Cards

Карточки созданы и анимированы на чистом CSS.

👉 @seniorFront

Lazy Repeater

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

Пример:

 var abc = makeLooper('abc');
 abc(); // should return 'a' on this first call
 abc(); // should return 'b' on this second call
 abc(); // should return 'c' on this third call
 abc(); // should return 'a' again on this fourth call

👉 @seniorFront

Мощь Intl API: подробное руководство по встроенной в браузер интернационализации

В двух словах: интернационализация — это не только перевод текста. Она включает в себя форматирование дат, правильное образование множественного числа, сортировку имен и многое другое с учетом конкретных локалей. Вместо тяжелых сторонних библиотек современный JavaScript предлагает Intl API — мощный встроенный инструмент для работы с i18n. Еще одно напоминание о том, что веб действительно глобален.

👉 @seniorFront

​Зачем нужны дженерики?

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

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

Безопасность типов
Использование дженериков позволяет избежать ошибок, связанных с типами, поскольку компилятор TypeScript может проверять типы на этапе компиляции.

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

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

function identity<T>(value: T): T {
  return value;
}

const numberIdentity = identity(42); // T is inferred as number
const stringIdentity = identity("Hello"); // T is inferred as string

Классы
Классы могут использовать дженерики для работы с различными типами данных:

class Box<T> {
  contents: T;
  
  constructor(value: T) {
    this.contents = value;
  }
  
  getContents(): T {
    return this.contents;
  }
}

const numberBox = new Box<number>(123);
console.log(numberBox.getContents()); // 123

const stringBox = new Box<string>("Hello");
console.log(stringBox.getContents()); // Hello

Интерфейсы
Интерфейсы могут использовать дженерики для описания структур данных, которые могут содержать различные типы:

interface Pair<T, U> {
  first: T;
  second: U;
}

const numberStringPair: Pair<number, string> = {
  first: 42,
  second: "Answer"
};

const booleanArrayPair: Pair<boolean, boolean[]> = {
  first: true,
  second: [true, false, true]
};

Ограничения дженериков
Иногда требуется ограничить типы, которые могут быть переданы дженерикам. Для этого используются ограничения (extends). В этом примере функция logLength принимает только те типы, у которых есть свойство length.

function logLength<T extends { length: number }>(value: T): void {
  console.log(value.length);
}

logLength("Hello"); // 5
logLength([1, 2, 3]); // 3
logLength({ length: 10, value: "example" }); // 10

👉 @seniorFront