Будни разработчика
14.7K subscribers
1.18K photos
334 videos
7 files
2.01K links
Блог Lead JS-разработчика из Хельсинки
Автор: @bekharsky

По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv

Чат: https://t.me/htmlshitchat

№5001017849, https://www.gosuslugi.ru/snet/679b74f8dad2d930d2eaa978
Download Telegram
#фишка дня

Я очень люблю, когда люди открывают для себя геометрию пятого класса. Особенно дизайнеры.

Посмотрите на картинку: наружный радиус двух вложенных блоков это радиус скругления внутреннего блока плюс поля.

Казалось бы, всё так очевидно. Но, похоже, не всем…

#design #border #бородач
👍41🤯14😁4
#статья дня

Точнее, целый лонгрид дня. А точнее, целых три. Ну, так получилось.

Итак, задумывались ли вы когда-нибудь о том, как происходит процесс создания дизайна интерфейсов или даже целой дизайн-системы? Что за этим стоит?

Я наткнулся на этот лонгрид Данилы Ковчия несколько лет назад, но периодически перечитываю. Материал просто огромный и, честно говоря, пытается покрыть всё разом. Этого бы хватило на несколько статей, уже не говоря о том, что его можно разобрать на посты и цитаты.

Очень грубо говоря — описан весь цикл создания дизайна продукта.

На vc.ru выходил переработанный материал в двух главах, возможно, так будет удобнее: раз и два.

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

В общем, рекомендую заварить чаю и погрузиться в чтение. Затягивает.

#design #ui #widgets
🔥82👍2👎1
This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня

Меня этим видео достали. Мне прислали его все: жена, несколько друзей, мемовник, оно попало в два рабочих чата и личку, в чат канала (раза три), оно лезло из всех твиттер-лент.

В какой-то момент я устал быть душнилой и отвечать всем: "Но... ведь... SVG..."

Не будь я таким ленивым, я бы попробовал найти исходник и что-то наваять, но душнить гораздо проще, чем что-то делать, не правда ли?

А вот уже достаточно хорошо известный вам бывший деврел Google Джей не поленился и таки сделал этот чёртов переключатель!

Смотрите: https://codepen.io/jh3y/pen/LYgjpYZ

Явно покруче чем наш с Киренковым трёхпозиционный... пора поднимать ставки, котаны :)

Кто пасхалку найдёт?

В общем, меня забавляют эти дуэли. Надо бы поучаствовать в какой-нибудь :)

#tiktok #switch #design #challenge
👍23🔥5😁4💩1
#статья дня

Не так давно мы все с вами узнали, что многие дизайнеры по миру открывают для себя геометрию для пятого класса с нескрываемым удивлением: https://t.me/htmlshit/1939

Но мы тут, конечно, не шеймингом заниматься пришли. А серьёзным делом. Поэтому глядите, чего я вам принёс: неожиданно хорошую статью с неожиданного ресурса!

Итак, на VC: Подбираете радиус скругления на глаз? Эти 5 правил помогут скруглять углы как сеньор

TL;DR

1. Внутренний угол связан с внешним: это правило буквально повторяет пост выше.

2. Кружок внутри, угол снаружи: тут немного об оптическом выравнивании (опять же, пост на эту тему).

3. Применяем сглаживание: это про яблочный squircle.

4. Радиус дружит с текстом.

5. Проверка обводкой: по факту, это визуальное доказательство правил 3 и 1.

Этой бы статье да иллюстрации от Шадида...

В любом случае, рекомендую. Сможете спорить с дизайнерами имея опору под ногами.

#css #design #radius
👍121
#статья дня

Точнее, целый лонгрид дня. А точнее, целых три. Ну, так получилось.

Итак, задумывались ли вы когда-нибудь о том, как происходит процесс создания дизайна интерфейсов или даже целой дизайн-системы? Что за этим стоит?

Я наткнулся на этот лонгрид Данилы Ковчия несколько лет назад, но периодически перечитываю. Материал просто огромный и, честно говоря, пытается покрыть всё разом. Этого бы хватило на несколько статей, уже не говоря о том, что его можно разобрать на посты и цитаты.

Очень грубо говоря — описан весь цикл создания дизайна продукта.

На vc.ru выходил переработанный материал в двух главах, возможно, так будет удобнее: раз и два.

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

В общем, рекомендую заварить чаю и погрузиться в чтение. Затягивает.

#design #ui #widgets #бородач
👍9
#такое дня

Ну что, котаны. Это случилось. Figma стала просить денег за DevMode.

Если вы жили последние месяцев 8 под камнем, то Figma перенесла специфичные для разработчиков фишечки в отдельный режим. Теперь режимы редактирования, просмотра и экспорта в код разнесены практически насовсем.

Что такое DevMode и какие преимущества он давал? Ну и даёт, для тех, кто платит.

1. Автоматическое отображение отступов и применённого лейаута прямо на холсте
2. Инспекция боксовой модели контейнеров
3. Автогенерация кода (CSS, iOS Swift/SwiftUI, Android Java/Kotlin и через плагины ещё с десяток платформ, включая Flutter)
4. Автоматическая генерация дизайн-токенов для выбранной платформы.
5. Сравнение версий дизайна
6. Именование слоёв
7. Более удобный экспорт ассетов и контента.

Что меня бесит больше всего, что Figma буквально пробила свой путь в наши сердца отображая CSS и отступы на холсте по-умолчанию. А теперь сделала такую себе кодогенерацию и хочет денег. Если ты учишься, это малость неудобно. Если зарабатываешь на фигме деньги — ну окей, возможно, стоит и заплатить.

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

1. Отступы на холсте всё так же отображаются по зажатой клавише Option/Alt.
2. Настройки эффектов никто не скрывал, они легко считываются.
3. Для сложных случаев, как минимум, в вебе, всегда можно установить расширение. Например, Inspect Styles (на скрине). Оно вернёт на место как CSS-переменные (из токенов), так и все нужные правила.

Напоминаю, что бездумно копировать отступы и координаты из генератора кода в Figma не надо. Вёрстка не про это. А вот настройки шрифта, фона и эффектов — да, очень уютно.

Делитесь вашими любимыми плагинами в комментариях, котаны!

А вообще, не забывайте о Pixso и PenPot! PenPot ещё и опенсорсный, можно у себя развернуть.

#figma #design #greed #money
👍206🤩1
This media is not supported in your browser
VIEW IN TELEGRAM
#видео дня

Я, конечно, не дизайнер, но Figma пользуюсь, естественно. И постоянно на связи с нашим штатным дизайнером команды.

Иногда мне кажется, что возможности Figma почти безграничны, а потом оказывается, что это и правда так.

Например, вы знали, что есть плагины, позволяющие синхронизировать ваши макеты с реальными данными? Например, из Google Sheets.

Вот и я не знал.

Пока не увидел это: https://www.youtube.com/watch?v=3nXbUH9YYgo

Ссылка на обучающий файл из презентации: https://www.figma.com/community/file/1207693268826001427

Сам плагин: https://www.figma.com/community/plugin/735770583268406934/google-sheets-sync

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

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

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

Пользуемся, котаны! И делитесь вашим мнением о расширенных прототипах.

#figma #design #prototype
👍8🤩4
#ссылка дня

Внимание, важный вопрос!

Что вам больше нравится: Volvo или Porsche?

Прежде чем отвечать, подумайте! Ведь речь идёт не об автомобилях, а о...

...дизайн-системах.

Вот это поворот

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

Давайте на них посмотрим.

Volvo: https://vcc-ui.vercel.app/docs

И их Storybook: https://developer.volvocars.com/design-system/web/?path=/docs/getting-started-1-introduction--docs

Porsche: https://designsystem.porsche.com/v3/

Ребята из Volvo даже блог свой ведут. Например, они ушли от CSS-in-JS назад к CSS ещё до того, как это стало модным: https://vcc-ui.vercel.app/blog/2022-11-23-future-css

Кто найдёт дизайн-систему BMW? :)

Кто использовал эти две?

#css #design #ui #storybook
👍13🤩2
#новость дня

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

8 лет назад мимо меня почему-то прошла тема, что ребята из Font Awesome собрали миллион долларов на разработку пятой версии своих иконочных шрифтов. Миллион, вместо планируемых 30 000. Этот рекорд, кстати, до сих пор держится.

Не в смысле рекорд кикстартера вообще, а в смысле рекорд среди поддержки софтовых проектов.

В чём отличие подобного сбора средств от простого инвестирования или бизнес-планов? Это свобода не только произвести некий платный продукт, но и вернуть что-то сообществу. И уж Font Awesome сложно упрекнуть в том, что они жадные.

Ну ладно, разве что чуток.

Так вот, к чему это я. Они вернулись!

Пару лет назад ребята взяли под своё крыло открытый проект UI-кита, основанного на веб-компонентах — Shoelace. И потихоньку его пилили. Почему потихоньку? Потому что путь веб-компонентов ко всеобщей поддержке и стандартизации весьма тернист. Одни только битвы YouTube с Firefox чего стоят.

И вот они решили повторить свой успех и резко собрать денег на выпуск третьей версии набора, превратив его в полновесную и конкурентоспособную дизайн-систему! Под таким скучным названием Web Awesome.

Естественно, обещан достаточно жирный бесплатный пакет, а в платном — плюшки вроде конструктора раскладок, тем, шаблонов... Причём, на каждые собранные 50к увеличивается число бесплатных плюшек.

Я это пишу в тот момент, когда сбор кончается. Как и 8 лет назад, прошло мимо моих радаров. Рекорда не случилось, но 700 000 собранных — это потрясающий результат.

Ну что, веб-компоненты захватят мир, или как обычно? :)

#ui #design #awesome
👍12
#ссылка дня

Хотите флагов? Их есть у меня!

https://flagpack.xyz/

Больше 250 флагов в комплекте с исходниками в Figma и Sketch. Ну и, понятное дело, компоненты для React, Vue и Svelte. PNG и SVG.

Присутствуют забавные модификаторы в виде разного вида градиентов, если основного стиля недостаточно.

Лицензированы по MIT.

#flags #icons #design
👍18
This media is not supported in your browser
VIEW IN TELEGRAM
#расширения дня

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

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

Но выход есть! И это — расширение Designgui от Джеймса Четвуда.

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

А ещё в ней заложена работа с UI-китами и дизайн системами. Пока только Shadcn UI и Daisy UI, но начало положено: все токены на местах.

Думаю, надо делать такое же расширение, но для анимаций... А то вытаскивать их всё сложнее, обмажутся тейлвиндами... ну да ладно.

Ссылка на вебстор Хрома: https://chromewebstore.google.com/detail/design-gui/ldhbojdgokammocadfgbidodgffnimfj?pli=1

#css #var #color #design
👍261
#видео дня

Где-то с 2012 года я работал на диджитал-агентства. Если кто не в курсе, диджитал агентства — они про рекламу в интернете. Про сайты, лендинги, рекламные кампании — вот это вот всё.

Если ты работаешь верстальщиком, начинающим или уже продвинутым, то, чаще всего, работа на подобные агенства, по подряду или напрямую, это твой единственный шанс проявить себя и сделать что-то действительно интересное.

Да-да Awwwards — они тоже про это самое и из того же и выросли.

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

Отвечает доклад моего товарища Романа Баранова «Дизайн глазами креативного разработчика».

Ссылка на посмотреть:
https://www.youtube.com/watch?v=j5YWb8SPR94

Делитесь своим опытом вёрстки чего-то необычного.

#video #design #markup
🤩6👍2
#такое дня

Оптические иллюзии:
Существуют
Несовершенство восприятия:
Существует
Заказчики:
«Я просил половину круга, а не три четверти!»

Ну… как бы… мне даже добавить нечего: https://observablehq.com/@mizinov/area-comparison (на русском)

#optical #illusion #perception #design #бородач
13👍2👎1
This media is not supported in your browser
VIEW IN TELEGRAM
#такое дня

На правах субботнего бреда, не более того.

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

Нет? Ну вот, напомню: https://www.reddit.com/r/ProgrammerHumor/comments/vqb2l2/responsive_snake/

Дизайнеру Анатолию Зенкову этого показалось мало! И... вашему вниманию — адаптивный доллар!

Вот: https://anatolyzenkov.com/resizabill

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

#adaptive #design
👍357🤩4