Liquid Distortion Effect

Создано и анимировано на canvas и чистом JS с использованием возможностей WebGL.

👉 @seniorFront

​Как победить хаос в команде и управлять ожиданиями заказчиков с помощью Kanban

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

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

Принципы Kanban, которые стоит применить:

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

2. Установите очередь задач
Пусть заказчики внутренние или внешние сами договариваются о приоритетах.
Используйте простую формулу:
влияние на бизнес × уверенность ÷ трудоемкость.

Например, если у вас есть 10 задач от внутренних заказчиков, они должны решить, какие из них пойдут первыми в работу. Это создаст прозрачность и дисциплину. Чтобы помочь заказчикам необходимо выработать общий показатель влияния на бизнес чтобы любую задачу можно было оценить через эту призму. Также создайте правила как работать с задачами качественных проектов, которые не несут прямого импакта на бизнес ценность, однако необходимы. Так в одной компании у нас было правило, что такие задачи мы берем как минимум в 1 из 5 случаев.

3. Ограничьте количество задач в работе (WIP‑лимиты)
Если не контролировать work in progress — это приводит к накоплению работы в процессе, а также часть ее начинает простаивать и среднее время выполнения задач растет (закон Литтла). Установите ограничения на каждом этапе. Например, в колонке тестирования одновременно может быть не более трех задач. Это позволяет сфокусироваться на завершении работы нежели взятию новой.

Визуализируйте процесс
Создайте доску Kanban: она поможет вам видеть, где находятся задачи, какие из них задерживаются и почему. Ежедневно собирайтесь с командой и обсуждайте:
- Что подвисло?
- Где нужна помощь?
- Какие задачи приносят максимальную ценность?

Измеряйте метрики поставки
Kanban предоставляет мощные инструменты для анализа, такие как время выполнения задач и пропускная способность. Эти метрики позволят прогнозировать сроки выполнения с 90% вероятностью. Главные метрики — это Lead time (время выполнения), throughput — пропускная способность.

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

👉 @seniorFront

Начало работы с тестированием производительности на TypeScript с использованием K6

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

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

👉 @seniorFront

Day and Night

Свёрстано на HTML и SCSS. Анимировано библиотекой TweenMax.

👉 @seniorFront

Custom Checkbox Design

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

👉 @seniorFront

Ответ был найден быстро

👉 @seniorFront

Navigation Cursor Effect

Логика перемещения курсора реализована в JS. Стилизовано в CSS.

👉 @seniorFront

Switch Day and Night - Cat

Реализовано на чистом CSS. При активации переключателя задаются стили по псевдо-классу :checked

👉 @seniorFront

Simple Radial Menu

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

👉 @seniorFront

Swiper

Логика работы карусели реализована библиотекой Swiper. Анимации созданы библиотекой gsap.

👉 @seniorFront

Найдите гласные

Мы хотим узнать индекс гласных в заданном слове, например, в слове super есть две гласные (вторая и четвертая буквы).

Пример:

Mmmm  => []
Super => [2,4]
Apple => [1,5]
YoMama -> [1,2,4,6]

👉 @seniorFront

JavaScript-фреймворки и библиотеки, на которые стоит обратить внимание в 2025 году

Сегодня поделюсь подборкой фреймворков и библиотек, которые могут быть полезны JavaScript-разработчику. О самых известных, вроде React, Vue.js, Next.js, говорить не буду, о них и так все знают. Вместо этого предлагаю посмотреть менее популярные инструменты. Если вы пользуетесь другими фреймворками и библиотеками, которые не вошли в подборку — пишите о них в комментариях. Поехали!

👉 @seniorFront

​Что такое цепочка прототипов?

Это механизм в JavaScript, с помощью которого объекты могут наследовать свойства и методы друг у друга. Этот механизм лежит в основе объектно-ориентированной модели JavaScript.

Основные концепции:

Прототипы
Каждый объект в JavaScript имеет свойство __proto__ (или скрытое свойство [[Prototype]]), которое указывает на его прототип. Прототип — это другой объект, от которого объект наследует свойства и методы. Объекты могут быть созданы с использованием конструктора, и все объекты, созданные одним и тем же конструктором, наследуют от одного и того же прототипа.

Цепочка прототипов
Если свойство или метод не найдено у объекта, JavaScript будет искать его в прототипе объекта. Этот процесс продолжается вверх по цепочке прототипов до тех пор, пока не будет найдено свойство или не будет достигнут конец цепочки (обычно это Object.prototype). Если свойство не найдено в цепочке прототипов, результатом будет undefined.

Рассмотрим простой пример, чтобы проиллюстрировать, как работает цепочка прототипов: В этом примере myDog наследует метод speak от Animal.prototype и метод bark от Dog.prototype. Когда вызывается myDog.speak(), JavaScript сначала ищет метод speak в myDog. Поскольку его там нет, он переходит к Dog.prototype, где тоже его не находит, и затем переходит к Animal.prototype, где метод speak найден и выполняется.

// Создаем объект Animal
function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(`${this.name} издает звук.`);
};

// Создаем объект Dog, который наследует от Animal
function Dog(name, breed) {
  Animal.call(this, name); // Вызов конструктора Animal
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype); // Наследование прототипа Animal
Dog.prototype.constructor = Dog; // Восстановление конструктора Dog

Dog.prototype.bark = function() {
  console.log(`${this.name} лает.`);
};

const myDog = new Dog('Рекс', 'Лабрадор');

myDog.speak(); // Рекс издает звук.
myDog.bark(); // Рекс лает.

Особенности

Прототипы по умолчанию
Все объекты, созданные с использованием литерала объекта {}, имеют в качестве прототипа Object.prototype. Все функции, включая функции-конструкторы, имеют свойство prototype, которое указывает на прототип объектов, созданных этой функцией.

Изменение прототипа объекта
Прототип объекта можно изменить с помощью метода Object.setPrototypeOf(), но это не рекомендуется из-за потенциальных проблем с производительностью.

const cat = {
  meow() {
    console.log('Мяу!');
  }
};

const myCat = Object.create(cat);
myCat.name = 'Мурка';
myCat.meow(); // Мурка мяукает.

Object.setPrototypeOf(myCat, {});
myCat.meow(); // Ошибка, так как метод больше не существует в цепочке прототипов

👉 @seniorFront

Interactive sunny-side pattern

Реализовано на canvas, анимировано библиотекой gsap.

👉 @seniorFront

​Карьера в ИТ: выгорание, потолок и ожидания рынка

Где потолок развития в IT?
Для IT-специалистов момент, когда становится сложно понять, куда расти дальше, наступает довольно часто. Потолок развития ощущается, когда специалист перестает видеть четкую траекторию дальнейшего роста или не знает, какие именно навыки нужно развивать для перехода на следующий уровень.
На практике потолок чаще всего не внешний, а внутренний. Люди боятся брать на себя новые задачи, которые требуют навыков, выходящих за рамки их опыта. Это как шаг в неизвестность: никогда не знаешь, насколько успешно ты справишься, пока не попробуешь. Но именно это испытание позволяет по-настоящему расти.

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

Главные вызовы IT-специалистов сегодня
Для IT-специалистов сегодня особенно актуальны два вызова.

1. Быстрое обучение. Технологии меняются настолько стремительно, что навыки, актуальные год назад, могут устареть уже сегодня. Чтобы оставаться на гребне волны, нужно не просто учиться, но делать это осмысленно: понимать, как применять новые знания в реальных проектах.
2, Умение оптимизировать свою работу. Современный рынок не терпит неэффективности. Сегодня важно минимизировать рутину, грамотно использовать готовые инструменты, будь то open-source решения или платформа low-code.

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

Что будет с IT-рынком в обозримом будущем?
В ближайшие годы IT-рынок будет развиваться под влиянием трех ключевых трендов:

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

2. Суперприложения. Продукты, объединяющие разные функции в одном интерфейсе, становятся все популярнее. Сегодня есть потребность в «палочка-выручалочке» – одном приложении, которое саккумулировало бы в себе максимум сервисов. Спрос стоит на гибкость — клиенты ожидают универсального решения на стыке технологий, бизнеса и психологии.

Создание таких приложений требует высокой гибкости в проектировании и интеграции технологий.

3. Искусственный интеллект. AI станет не просто инструментом, а неотъемлемой частью большинства процессов. Умение интегрировать его в рабочие процессы будет ключевым навыком.

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

👉 @seniorFront

Хотели узнать больше про инженерную команду Selectel?
Спешим познакомить вас с новым проектом ребят!

На этой страничке вы найдете:

— Ключевые принципы, на которые инженеры Selectel опираются в работе
— Подробную информацию о жизни ребят в компании: как устроены процессы и какие технологии используются
— Чем живут технические комьюнити

А также познакомитесь с базой знаний инженеров: докладами и статьями на Хабре!

Скорее переходите и читайте😉

Реклама, АО «Селектел», ИНН: 7810962785, ERID: 2VtzqwiYM4W

Подробный гайд: как создать резюме, которое привлечет внимание рекрутера + готовые шаблоны

Хотите создать резюме, которое не только выделится среди сотен других, но и успешно пройдёт ATS-системы, приведя вас к собеседованиям и лучшим офферам? Эта статья покажет, как раскрыть ваши сильные стороны и уверенно преодолеть этап скоринга. А в завершение вас ждут полезные бонусы — готовые шаблоны!

👉 @seniorFront

<pixel-canvas>

При наведении отображается Web Component, реализованный на чистом JS.

👉 @seniorFront

Stack Card Hover Effect

В этом видео создается эффект стопки карт на чистом CSS при помощи свойства box-shadow с множеством значений.

👉 @seniorFront

Любой проджект, объясняющий задачу

👉 @seniorFront