Всё под контролем: сила useRef и forwardRef в React

Начнем с небольшой истории. Как-то раз я с размахом накинулся на проект — в духе нынешних фреймворков всё было обложено компонентами, декларативный стиль царил, все шло идеально… ну почти. Дошел я, значит, до нужды контролировать DOM-узлы напрямую. И что вы думаете? Прямого доступа нет, React закрыл от меня этот мир, сидит и ухмыляется: мол, мы тут за производительность боремся, зачем тебе что-то трогать руками?

Но мы не из тех, кто сдаётся, верно? React предлагает своё решение — рефы, и именно о них сегодня пойдет речь.

👉 @seniorFront

​Чем HTTP/2 лучше HTTP/1?

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

Минусы
- HTTP/1.1 позволяет использовать несколько одновременных соединений для загрузки ресурсов с одного домена, но это число ограничено (обычно 6-8 соединений). Это приводит к значительным задержкам, особенно при загрузке большого количества ресурсов (изображений, скриптов, стилей) на современных веб-страницах.

- В HTTP/1.x заголовки передаются в каждом запросе и ответе, что увеличивает накладные расходы, особенно при использовании длинных куки-файлов и других данных заголовков.

- HTTP/1.x не поддерживает отправку нескольких запросов и ответов одновременно по одному соединению, что приводит к блокировке при медленных запросах или больших ресурсах.

- В HTTP/1.x соединения часто закрываются после завершения передачи данных, что требует повторного установления соединений для последующих запросов, увеличивая задержки.

Плюсы
- HTTP/2 использует бинарное кодирование вместо текстового в HTTP/1.x, что упрощает анализ и обработку данных, а также снижает вероятность ошибок.

- HTTP/2 позволяет отправлять несколько запросов и получать несколько ответов одновременно по одному TCP-соединению, устраняя блокировку и повышая эффективность передачи данных.

- HTTP/2 использует эффективное сжатие заголовков, что значительно уменьшает накладные расходы при передаче заголовков.

- HTTP/2 поддерживает установку приоритетов для отдельных потоков данных, что позволяет более эффективно управлять передачей важных ресурсов.

- HTTP/2 поддерживает длительные соединения, что уменьшает количество повторных установлений соединений и улучшает производительность.

- HTTP/2 позволяет серверу отправлять ресурсы клиенту до того, как они будут запрошены, что ускоряет загрузку страниц.

👉 @seniorFront

Sphere Packing

Создано и анимировано на canvas при помощи библиотеки Three.js

👉 @seniorFront

​Тренды в дизайне и сайтах на 2025-й год

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

1. Искусственный интеллект
ИИ уже привычен, но он глобально меняет работу дизайнеров: креативы становятся сложнее, интереснее и ярче. В 2025-ом году все так и останется: специалисты будут чаще обращаться к нейросетям, за счет чего будут ценнее смыслы и идеи, и умение правильно интерпретировать их в визуале.

2. Эксперименты с технологиями
Технологии продолжат проникать в брендинг и коммуникацию, особенно с развитием инструментов дополненной реальности. Они откроют новые возможности для взаимодействия с потребителями, позволяя создавать иммерсивность и погружать аудиторию в мир бренда.
Дополненная реальность станет не только инструментом для презентации продуктов, но и средством формирования уникальных переживаний, усиливающих эмоциональную связь с брендом. В будущем эти технологии изменят коммуникацию, сделав ее более интерактивной и персонализированной.

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

4. Неразрывность эмоциональности и практичности
Зачастую эмоциональность и практичность разделяются. Студии брендинга и дизайна фокусируются на визуале и эмоциях. А UX- и UI-дизайн акцентирует внимание на функциональности. В 2025-ом году будет важно создавать решения, которые не только красиво выглядят, но и удобны в использовании вопреки устоявшимся подходам.

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

👉 @seniorFront

Глубинные интервью в UX-исследованиях VS тактика проведения допроса

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

Давайте примерим на себя маску Шерлока Холмса и погрузимся в сравнительный анализ между тактикой проведения допроса и правилами проведения глубинного интервью.

👉 @seniorFront

Carousel-new

Оригинальная карусель реализованная на чистом JS.

👉 @seniorFront

Liquid Loader Animation Effects

В этом видео создается загрузчик на HTML и CSS. Эффект жидкости достигается наложением svg картинки на другие HTML элементы свойством filter.

👉 @seniorFront

Было?

👉 @seniorFront

Broken Glass Effect

При нажатии запускается WebGL анимация, реализованная на canvas и чистом JS.

👉 @seniorFront

Navigation Hover Effect

Реализовано на чистом CSS при помощи трансформаций и свойства -webkit-text-stroke.

👉 @seniorFront

👉 @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