👉 @seniorFront

3D Glassmorphism Card

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

👉 @seniorFront

Focus Cards

Свёрстано на HTML и CSS. При наведении на карточку, для других карточек задаются CSS классы через JS.

👉 @seniorFront

Counting Change Combinations

Напишите функцию, которая подсчитывает, сколькими различными способами вы можете разменять определенную сумму денег, учитывая массив номиналов монет. Например, есть 3 способа сдачи на 4, если у вас есть монеты номиналом 1 и 2:

1+1+1+1, 1+1+2, 2+2.

Порядок монет не имеет значения:

1+1+2 == 2+1+1

Также предположим, что у вас бесконечное количество монет.

Ваша функция должна принимать сумму для изменения и массив уникальных номиналов монет

Пример:

countChange(4, [1,2]) // => 3
countChange(10, [5,2,3]) // => 4
countChange(11, [5,7]) //  => 0

👉 @seniorFront

Упс, что-то пошло не так. Как UX-редактору написать сообщение об ошибке?

А вы знали, что 70% пользователей покидают сайт или приложение, если сталкиваются с непонятными или неинформативными сообщениями об ошибках?

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

👉 @seniorFront

Деструктуризация

Деструктуризация — это синтаксис, позволяющий упростить присваивание переменным значений свойств объекта или элементов массива. Для краткости будем использовать общепринятый термин «деструктуризация», хотя в спецификации ECMAScript используется понятие деструктурирующее присваивание (Destructuring assignment).

Рассмотрим простой пример. Нужно извлечь из объекта person поля name и age.

const person = {name: 'Александр', age: '37'}

Это можно сделать так:

const name = person.name
const age = person.age

Используя деструктуризацию, можно сократить код до:

const {name, age} = person

А вот пример с массивом. Извлечём из массива planets три первых элемента.

const planets = ['Меркурий', 'Венера', 'Земля', 'Марс']

Это можно сделать, получая значения по индексу:

const first = planets[0]
const second = planets[1]
const third = planets[2] // Мы тут!

А можно, используя деструктуризацию:

const [first, second, third] = planets

👉 @seniorFront

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