Super charger

Реализовано и анимировано на HTML и SCSS.

👉 @seniorFront

Checkout Form

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

👉 @seniorFront

Tab Bar Interaction

Создано на HTML и CSS. Логика переключения табов реализована в JS.

👉 @seniorFront

Запишите число в развернутом виде

Вам будет дан номер, и вам нужно будет вернуть его в виде строки в расширенной форме
Все числа будут целыми числами больше 0

Пример:

expandedForm(12); //  '10 + 2'
expandedForm(42); //  '40 + 2'
expandedForm(70304); //  '70000 + 300 + 4'

👉 @seniorFront

Всё под контролем: сила 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