gleb.sexy
417 subscribers
81 photos
19 videos
60 links
Download Telegram
Новый шрифт Kaliste от Antoine Brun в французской словолитне Lift Type. Выглядит очень fancy! Я не знаю, где бы я мог его использовать, но уже хочу! Стоит вполне терпимо: €50 за начертание или €100 за все три разом (лицензия сразу веб + графика). Оцени его полную красоту: https://www.lift-type.fr/shop/typography/kaliste/
This media is not supported in your browser
VIEW IN TELEGRAM
Ооочень интересный курс по Three.js: https://threejs-journey.xyz/

32 урока на 33 часа занятий. Всё от основ до постановки света, добавления физики и оптимизации законченной работы. От тебя требуется лишь знание основ JS (без это уж никак) и $95 — очень привлекательная цена для такого курса.

Сам аж захотел купить, но для меня основная проблема с 3D это не его сложность, а отсутствие фантазии — придумывать идеи и решать, что реализовывать, мне почему-то очень сложно. Я так уже купил курс 3D for Designers по Cinema 4D, и понял, что всё знаю/могу узнать легко, надо просто делать. А что делать?

Есть идеи, как развивать эту творческую мышцу? Может рисовать? У тебя как с этим обстоят дела?
Работаю над улучшениями плагина Master, узнаю много всего нового про API Figma, JavaScript и программирование в целом. Сначала я столкнулся с довольно странной проблемой медленного доступа к невидимым элементам — про неё писал в твиттере. А последнюю неделю боролся с прогресс баром для поиска всех компонентов по файлу: это довольно медленный процесс даже на файлах средней величины. При наличии 50 тысяч элементов на странице, на моём компьютере поиск занимал около 30 секунд. Поэтому я для начала попробовал написать примерный подсчёт количества элементов на странице.

Несколько дней назад, тестируя алгоритм на разных файлах, я заметил, что в одном документе, где содержится всего 17 тысяч элементов, поиск занимает более 50 секунд! Попытки выявить причину долгое время ни к чему не приводили и я обратился к друзьям за помощью. Мне рассказали, что рекурсия в принципе довольно дорогая, а ещё посоветовали оптимизировать мои циклы (я обычно использую стандартный for цикл). После того как я много раз переписал свои бедные 20 строчек кода, я обнаружил странный момент: если я копирую массив слоёв принадлежащих контейнеру в переменную — всё работает быстрее, хотя операция копирования массива должна быть довольно дорогой.

Оказалось, что дело в том, как JS работает с объектами. Если объекты занимают много памяти (а слои в Figma абсолютно точно это делают), то доступ к их полям может быть довольно дорогой операцией. В моём случае, я считывал элемент массива “детей” объекта в каждой итерации цикла. Но я не думал о том, что я также считываю и сам массив. А сохранив его в отдельную переменную (даже после цикла копирования), я неосознанно сделал его всегда доступным циклу, и не оставил необходимости считывать его в каждой итерации. В итоге оказалось, что копировать массив не нужно — достаточно просто сохранить его в переменную. И все необходимые действия уже делать с этой переменной.

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

for (var i = 0; i < node.children.length; i++) {
recursive(node.children[i]);
}

Мне удалось ускорить программу в 25 раз, просто переписав эти строчки! В двадцать пять раз! С 50 до 2 секунд! Мне до сих пор не верится. В улучшенной версии я считываю массив children всего один раз. Я не сразу додумался считывать длину из переменной, поэтому некоторое время моё улучшение работало только в пару раз быстрее, вместо двадцати пяти. Вот как выглядит “правильный” цикл:

let children = node.children;
let length = children.length;
for (var i = 0; i < children.length; i++) {
recursive(children[i]);
}

• Полный код и больше методов обхода дерева слоёв: https://gitlab.com/-/snippets/2074293
• Мой пост на форуме Figma на эту тему: https://forum.figma.com/t/estimating-the-size-of-the-search-tree/551/4
Не используй эти шрифты!

Список тех гарнитур, которые я советую избегать, иначе ты как минимум покажешься новичком, а может быть твои творения будут выглядеть просто отвратительно. Естественно это только моё мнение. Мне было бы интересно услышать, какие шрифты нравятся или не нравятся тебе.

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

Comfortaa
Ничто больше не говорит о том, что ты первый день открыл(-а) Figma и Google Fonts, чем использование шрифта Comfortaa. Ты пытаешься сделать мило, гладко, современно, округло — получается вычурно. Шрифт не должен брать на себя обязанность вытянуть всю композицию. У Comfortaa очень ярко-выраженный характер, и я бы сказал немного противоречивый, поэтому использовать его стоит только в акциденции, и то очень осторожно. Я пока не видел примеров хорошего использования этого шрифта. Везде он смотрится слишком инородно.

Manrope
Новый гротеск, близкий к геометрическому. Многие новички используют Manrope как замену Montserrat, ведь он уже выходит из моды, так как все его используют. Но в итоге получается так, что Manrope тоже уже слишком много используется, и в отличие от нейтральных шрифтов, он бросается в глаза при использовании, подобно Monsterrat. При этом Montserrat хотя-бы обладает неплохой кириллицей, когда Manrope в целом имеет слабое исполнение. Почитай детальный обзор от type.today.

Raleway
Начинающим дизайнерам нравятся всякие декоративные элементы, им кажется, что именно какие-то нестандартные визуальные решения делают работу лучше. И увидев необычную букву W в Raleway, они сразу начинают его везде использовать. Добавив этот шрифт, они, наверное, думают, что добавляют “больше дизайна”, но это так-себе майндсет.
Веб браузеры — очень странные программы. Во-первых, они очень гибкие: в них можно делать всё, от чтения простого текста, до общения с тысячами людей в разных уголках планеты, до супер интерактивных программ типа Figma. Но они и очень ограниченные: весь браузер это просто много прямоугольников в отдельных вкладках, где каждый прямоугольник — отдельный сайт. Во-вторых, браузеры дают нам возможность заходить на миллионы сайтов, и каждый день мы открываем какие-то новые сайты на 10 секунд. При этом большую часть времени мы проводим на каких-нибудь семи наиболее важных для нас сайтах. И те рандомные 100 сайтов, на которые мы попадаем ежедневно, имеют такой же доступ ко всем фичам браузера и нашей информации, как и те важные для нас единицы сайтов. Браузеры сделаны одновременно для всего и для ничего конкретного.

Браузеры могли бы быть более тесно интегрированы в операционную систему, что дало бы важным сайтам больше возможностей и пользователю больше удобства. Но естественно надо не забывать о механизмах, которые позволят пользователю защищать свои данные, блокировать нежелательный контент, и в целом больше кастомизации. Например, мне надоели трекеры мыши на сайтах, где при попытке закрыть вкладку выскакивает окно “НЕ УХОДИ!!!” Из-за этого я отключил JavaScript везде. К моему удивлению, многие сайты без джаваскрипта в принципе отказываются работать, показывая белый экран. Даже на простых сайтах с минимумом интерактива рендеринг происходит на клиенте с помощью JavaScript!

Это наводит меня на пару мыслей. Во-первых, JS имеет миллион применений, и у пользователя есть маленький выбор: или все функции, или никакие. У меня нет возможности отключить трекеры мыши отдельно, оставив остальную функциональность как есть. Или всё, или ничего! Во-вторых, JS, CSS, HTML и браузеры не дают разработчикам удобства работы, поэтому многие предпочитают использовать фреймворки, основанные на JS, чтобы даже просто отображать статичный контент. Считаю, что вебу пора переходить на новые стандарты, новые языки и парадигмы, которые будут тщательно спроектированы специально для этой неимоверно сложной быстрорастущей и разнообразной среды.
Всё чаще у меня возникает желание создать свой собственный браузер. Да, текущий порядок вещей с HTML, JS и CSS вполне неплох, но его можно было бы сделать в миллион раз лучше, если создать новые стандарты, продуманные до мелочей. К слову Figma — это практически браузер, который работает внутри браузера. У них есть свои внутренние стандарты и устройство, но всё это построено на веб платформе. Это платформа для созидания, как и сам веб, просто она использует свои собственные механики: визуальное передвижение блоков и настройка, вместо написания кода.

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

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

Во-вторых, нужен сам браузер. Это нативное приложение, которое желательно должно работать на разных платформах, чтобы доступ к новому стандарту был у всех. Так как нативное приложение практически не имеет ограничений по функциям, можно придумать очень много интересных оригинальных идей, как такое приложение будет интегрироваться с разными операционными системами.
Интернет браузер будущего — каким ты себе его представляешь? В заключительной третьей части этой цепочки моих мыслей про браузеры я расскажу несколько идей для браузера моей мечты. Если бы я делал свой браузер, эти вещи вполне вероятно в нём бы были.

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

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

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

Офлайн > Онлайн. Браузер офлайн? Да, многие вещи могли бы происходить в офлайне или как минимум кэшироваться. Современные браузеры хорошо умеют кэшировать файлы, и это можно улучшать. Также в офлайне можно сохранять и читать статьи, работать в открытых приложениях.

Модульность и гибкость — не одно окно, а приложение с разными окнами. Тебя интересует только определённый кусок сайта? Закрепи его виджетом на рабочий стол. Хочешь вынести боковые панели Figma на отдельные мониторы? Пожалуйста! Вкладки и одно окно — устаревший концепт, от которого мне бы хотелось полностью отойти.

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

Уверен, что эти предложения довольно поверхностны, и настоящий браузер будущего будет намного более сложным и интересным. А каким ты видишь его?
This media is not supported in your browser
VIEW IN TELEGRAM
Тёмная тема в Figma уже почти тут! Я получил доступ к закрытой бете, она невероятно приятная для глаз. 🖤 Слухи о её разработке были уже давно, но теперь это реальность! Внизу небольшая видео демонстрация, записывал её на английском для твиттера, напишу вкратце суть. Эта бета закрыта (пригласили только несколько десятков людей) и никто больше не получит доступ, но уже очень скоро это обновление станет доступно всем!

Но есть ещё кое-что... Розовая тема? В бете можно создавать кастомные темы и очень легко полностью поменять внешний стиль Figma за буквально полчаса! Так я сделал тему своей мечты — розовую с фиолетовым, во второй половине видео показываю её.
Мне посчастливилось поучаствовать в роли спикера в Config — огромной ежегодной конференции Figma, которую в этот раз смотрели более 55 тысяч человек онлайн. Кто не пришёл — на того я обиделся! (Но запись будет через месяц.) В статье собрал ссылки и другие хайлайты с выступления и вообще: https://teletype.in/@gleb.sexy/config2021
Как нагнуть систему и использовать Figma бесплатно? Встретил новость с подобным посылом и стрёмным способом с использованием одного аккаунта на всех участников команды. Это прямой путь к полной неразберихе, хотя даже до того как Figma “стала платной” некоторые этим способом пользовались. Так вот, рассказываю легальный и безопасный метод! Покупаешь Professional подписку на себя и делишься какими угодно файлами... Ой, не то. Вот:

Создаёшь обычную маленькую Starter команду, приглашаешь туда всех нужных редакторов. Если вы ещё не зарабатываете деньги, чтобы накопить на Professional подписку, то вряд ли одновременно вам надо будет редактировать больше трёх файлов, поэтому все нужные файлы держишь в черновиках, а когда придёт время их редактировать — переносишь нужные в команду и редактируешь совместно. Если очень уж не хватает трёх файлов, можно создать ещё парочку команд.
Просто брось монетку: я создал интерактивный прототип в Figma, который поможет в принятии сложных решений!

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

3D анимация выполнена полностью в Figma при помощи зеркальных отражений и масок. Я бы не выдержал всех этих часов страданий без поддержки моих замечательных интернет друзей, которые ломали голову вместе со мной.

→ https://figma.fun/xi7UJO
Вышел подкаст со мной: поговорили с ребятами активными в области open source дизайна про моё виденье того, что такое open design и каким открытым и совместным дизайн будет в будущем, а также про мои текущие разработки, плагины и сообщество Figma. (на английском)

https://sosdesign.sustainoss.org/6
Наткнулся на очень милую и полезную организацию, которая занимается UX исследованиями и публикует много образовательных статей на эту тему. Изучай плодотворные способы улучшения своих исследований с Apple & Banana.

https://www.appleandbanana.org/
Сделал новый плагин: FigJam Custom Colors. Он позволяет расширить доступные в джеме по дефолту цвета и даже использовать свои библиотеки стилей при необходимости. В Jam не нужна полная панель выбора любого цвета, но небольшая кастомизация не помешает.

Вчера потратил на него три часа и записал процесс разработки на видео — как думаешь, стоит ли его показывать?

https://youtu.be/sLTeombJub0
This media is not supported in your browser
VIEW IN TELEGRAM
У моего нового плагина FigJam Custom Colors появился компаньон! Конечно хорошо иметь под рукой обширную палитру цветов, но иногда всё, что тебе нужно — это розовый. 🎨 Как раз для таких случаев я создал плагин Pink. Всё, что он делает, это красит выбранные объекты в FigJam в мой #FF5386 розовый цвет.

Плагины в FigJam будут доступны всем этой осенью. А пока мне нужно придумать хорошую стандартную палитру для первого плагина. Если хочешь помочь, залетай в файл, предлагай свои варианты: https://figma.fun/zQdF1u
Переделал “гостевую книгу” на своём сайте. До этого она была сделана встроенным на сайт напрямую Figma файлом через iframe. Так как она довольно сильно разрослась со временем, файл начал заметно грузить страницу.

Теперь гостевая книга является простым изображением. Оно автоматически обновляется на сервере каждые 12 часов 15 минут — новая версия загружается из Figma через REST API.
1. Собираю и отправляю запрос на экспорт изображения: ключ доступа + ссылка на файл + ID страницы для экспорта + формат и размер экспорта.
2. Figma выдаёт ссылку на картинку.
3. Если ссылка отличается от предыдущей (что значит, что картинка изменилась), нужно скачать новую картинку, идём дальше.
4. Создаю новый запрос на эту ссылку и скачиваю изображение на сервер, заменяя старую. Также сохраняю ссылку.

Оно хранится в папке статичными ресурсами, так что практически не нагружает сервер, и весит всего около 100 Кбайт без сжатия. Это намного меньше, чем целый Figma-файл! Кстати, если твоего следа ещё нет в истории — самое время зайти и написать что-нибудь в гостевой книге!

https://gleb.sexy/#guest-book
This media is not supported in your browser
VIEW IN TELEGRAM
Починил старый фотик: получил невероятный опыт! 📸 Так приятно, когда что-то совсем новое получается и работает, особенно когда чинишь что-то своими руками. Кратко о самом интересном:

• Сейчас мало такой техники, которую можно разобрать одной отвёрткой. Это удивительно круто! Apple, учитесь.

• Оказалось, что самолётный мотор за 70 рублей из местного магазина может заменить оригинальный, который стоит 700 на али. В видео показываю как он классно жужжит-бесится! 🔥 А камера теперь делает не только «щёлк-щёлк», но и «жж-жж».

• В электромоторах есть щётки??? Узнал немного больше про электронику. И про себя — что паять не умею. Практики надо больше!

• У меня теперь есть ещё один самолётный двигатель, есть идеи, что с ним собрать?

Написал статью с подробностями, вдруг кому-то в будущем будет полезно: https://teletype.in/@gleb.sexy/sony-a55-fix
Лучше создать что-то неидеальное, чем ничего не создать.

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

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