Baraw.web

Математическая разработка и визитки из металла: как мы создавали дизайн для магазина премиальных часов.

Помните, мы недавно рассказывали о создании сайта Rotormine? Так вот сегодня мы опубликовали статью, в которой рассказали в деталях как проходил процесс разработки. Данный сайт — отличный пример нестандартного подхода к представлению классического интернет-магазина и креативного проморешения. Желаем приятного чтения.

https://vc.ru/design/1603019-matematicheskaya-razrabotka-i-vizitki-iz-metalla-kak-my-sozdavali-dizain-dlya-magazina-premialnyh-chasov

А вот и статья, про сайт, который я разрабатывал. На самом деле в процессе разработки два раза выступал с докладом, очень крутой проект получился, читайте, задавайте вопросы - постараюсь ответить

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

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

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

Всем кто поможет - 🤗

На нашем третьем митапе Creative Frontend Developer из компании Chipsa Роман Баранов рассказал, как наладить общение дизайнеров и разработчиков и создавать крутые креативные проекты 🕶 Если вы пропустили его доклад или хотите пересмотреть его — вот вам видео:

— на ютуб-канале https://youtu.be/j5YWb8SPR94;
— в VK https://vk.com/video-201158955_456239047.

Дизайн, креативная разработка, сложности в процессе и впечатляющий результат в конце — все это есть в выступлении Романа. Смотрим, применяем, общаемся в комментариях здесь или на ютубе! 😏🔥

А вот и видео с доклада подъехало

Блин, все вокруг болеют, сезон простуд, так что не могу не поделиться рецептом адского пойла. Вычитал его лет 15 назад в газете а-ля «здоровье», лечил им маму, жену, себя, а на днях вылечил своего лида. Сейчас пойду готовить сам кста.

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

Надеюсь пригодится, делитесь, распространяйте, ставьте колокольчик.

Ребята с митапа просили список ссылок с полезной информацией для начинающих (и не только) креативных разработчиков. Делюсь и с вами:

1. Для всех, кто хочет начать свой путь в three.js крайне рекомендую курс (https://threejs-journey.com/) от Bruno Simon. Курс стоит сущие копейки, доступ дается на всю жизнь, при этом контент обновляется. В данном курсе Бруно разбирает работу с 3д по полочкам с нуля и до достаточно продвинутого уровня (есть отдельная секция про шейдеры, где всё очень понятно, есть уроки где реализуются игры с использованием движков для физики)

2. Многие фронтендеры в начале пути хотят найти какие-то видеокурсы и прочее по React. На этот счёт у меня есть две отличных ссылки: документация реакта (https://react.dev/learn) и документация некста (https://nextjs.org/learn), так как скорее всего в коммерческих проектах, вы не будете использовать реакт без фреймворка. Ну и здесь обязательно должно быть это - https://t.me/temaProg , ищите его доклады на HolyJS, они просто имбище

3. Для работы с JS-анимациями есть два отличных ресурса, в зависимости от того используете ли вы React. Если не используете — документация gsap (https://gsap.com/docs/v3/). Если используете, как по мне, удобнее framer-motion (https://www.framer.com/motion/). И там и там есть разделы с примерами кода, прочитанной документации. Данных примеров хватает, чтобы создавать мощные анимации.

4. К позору на мою седую голову, забыл канал главного вдохновителя, где можно посмотреть на всякие шейдеры, включая реализацию! Всем подписаться https://t.me/mazhugagl

Получил фидбэк, что интересно бы посмотреть в лайве сайты, которые я показывал на митапе, держите:
Виза центр
Rotormine
Биотех
Certus finance
Энтузиаст
Чипса
БКК
0101
Заграница
Премонт
Дары малиновки
Спортэкс
Промит
Опора Сибири

Так же задавайте свои вопросы по проектам - будет контент для канала

Выступил на митапе KozhinDev, вайб бешеный, все за что-то хвалят, было круто

а вот и обещанная ссылка на презентацию

Так же открыл комменты, спрашивайте🥸

завтра выступаю с докладом в юшине, но кто не записался - не попадет

Новый интересный баг в сафари, если у фиксированного элемента (например попап) высота будет 100%, при скриншоте скроллящийся блок внутри будет проскроллен вверх D:

Решение (мой кейс) задать фиксированному элементу размер в абсолютном значении (например height: 100vh; height: 100dvh;), а на внутренний height: inherit;

Если вы используете в формах для номеров телефонов маску, скорее всего это будет imask, хорошая библиотека, но если пользователь вводит номер с 8 - получится +7 (8, и номер телефона съедет, последний символ не поместится, заявка будет потеряна, ранее для этого было решение, с передачей коллбэка в prepare, но как оказалось оно не работало с автозаполнением, поэтому я написал небольшой фикс, и делюсь с вами

Микропостик, в очередной раз столкнулся с тем, что сафари на ios не подставляет превью для видео. Вспомнил хак с #t=0.001

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

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

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

Ссылка на реализацию

Разработка — Роман Баранов

Столкнулся в работе с интересным багом, если в сафари в якорную ссылку/посещённую ранее ссылки вложить SVG-элемент, на нём перестанет работать transition, в поисках решения отмёл несколько вариантов, и решил сразу сваять codepen со встреченными вариантами, и со своим вариантом решения проблемы

Channel created