Ооочень интересный курс по 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 на отдельные мониторы? Пожалуйста! Вкладки и одно окно — устаревший концепт, от которого мне бы хотелось полностью отойти.

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

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

Тёмная тема в Figma уже почти тут! Я получил доступ к закрытой бете, она невероятно приятная для глаз. 🖤 Слухи о её разработке были уже давно, но теперь это реальность! Внизу небольшая видео демонстрация, записывал её на английском для твиттера, напишу вкратце суть. Эта бета закрыта (пригласили только несколько десятков людей) и никто больше не получит доступ, но уже очень скоро это обновление станет доступно всем!

Но есть ещё кое-что... Розовая тема? В бете можно создавать кастомные темы и очень легко полностью поменять внешний стиль Figma за буквально полчаса! Так я сделал тему своей мечты — розовую с фиолетовым, во второй половине видео показываю её.

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

Как нагнуть систему и использовать Figma бесплатно? Встретил новость с подобным посылом и стрёмным способом с использованием одного аккаунта на всех участников команды. Это прямой путь к полной неразберихе, хотя даже до того как Figma “стала платной” некоторые этим способом пользовались. Так вот, рассказываю легальный и безопасный метод! Покупаешь Professional подписку на себя и делишься какими угодно файлами... Ой, не то. Вот:

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

Просто брось монетку: я создал интерактивный прототип в Figma, который поможет в принятии сложных решений!

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

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

→ https://figma.fun/xi7UJO