Прогресс!

Как назвать плагин?

Подарок тебе на новый год от меня! Знакомься: это Pixel Princess, мой новый плагин — твоя помощница для создания пиксель арта в Figma. ❤️ Довёл алгоритм до ума и успел опубликовать до нового года! Пока принцесса умеет только переводить векторы в пиксели заданного размера, но планируется и поддержка заливок, а также улучшения производительности. 🎨

Устанавливай → https://pixxxel.art/

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

→ https://teletype.in/@gleb.sexy/creative-platform

Инструмент для создания и экспорта анимаций просто при помощи мыши. 🏃‍♂️

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

→ https://animatize.com/

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

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

А познакомился с заметками Энди я по этому посту. В нём Энди говорит, что для эффективного проектирования систем, проектировщики сами должны быть активными пользователями этих систем. Многие ключевые инсайты приходят именно в процессе использования продукта. И не просто использования ради тестирования, а профессионального глубокого использования. Это намекает, что я на верном пути: активно пользуюсь системой (Figma) и разрабатываю улучшения, основываясь на опыте.

Впечатления и наблюдения от первых дней работы на клавиатуре Afternoon Breeze: низкопрофильной раздельной клавиатуре. Собрал пока только основную часть, а боковые стороны оставил, чтобы попользоваться и определиться, нужны ли они вообще, и если да, то какая нужнее. Ненужную можно просто отломать — так задумано.

Мне намного приятнее и легче на ней печатать, отсутствие необходимости много перемещать пальцы чувствуется. Разведённые руки более расслабленны и удобнее лежат на столе. И в целом есть ощущение, что эта клавиатура сделана для людей. Ей удобно пользоваться! Но удобно — не значит легко. Хотя скорость печати обычных букв не пострадала.

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

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

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

В целом интересно, осваиваюсь потихоньку. Фото клавиатуры есть тут: https://teletype.in/@gleb.sexy/less-keys-better

Можно ли отказаться от HTML и JS в вебе? Да! Наверное... Это звучит странно, но Google Docs и Figma тому пример. Но зачем?

Ни для кого не секрет, что JS — не слишком быстрый созданный за 10 дней одним человеком язык, дизайн которого оставляет желать лучшего. HTML тоже не подарок, особенно в динамичных интерфейсах. Чтобы его как-то оживлять приходится писать много JS. Я говорил, что JavaScript — медленный язык с плохим дизайном? Так вот, в добавок к этому он ещё и плохо дружит с HTML: они такие разные и браузерам приходится буквально склеивать два несовместимых концепта. А ещё JS медленный.

На самом деле он не такой уж медленный, но в связке с HTML любые попытки оптимизации будут тщетны. Для удобства разработки стали появляться фреймворки типа React. HTML можно писать прямо в JS! Ура, решение! Нет. Фреймворки обычно создают дополнительные сложности и замедляют интерфейсы ещё больше, в частности React становится дополнительной прослойкой между браузером и твоим кодом (отступление: поэтому я выбираю Svelte). Костыль на костыле — так сейчас выглядят для меня изнутри многие веб-приложения.

Ещё отступление: я говорю именно про корпоративные веб-приложения для работы с большими объёмами данных. В таких сложных продуктах больших компаний возникает потребность в оптимизации. И кто-то в твиттере сказал, что веб был изначально создан не для них: «Large companies find HTML & CSS frustrating “at scale” because the web is a fundamentally anti-capitalist mashup art experiment, designed to give consumers all the power.» Интересная точка зрения! Не знаю насколько всё так, но веб действительно является отличной площадкой для самовыражения и экспериментов. Даже код всех сайтов открыт по дефолту — разве не рай?

Так к чему это всё? В веб разработке сейчас наблюдается одно занятное явление. Пока оно не слишком популярно, но я думаю, что за этим будущее. Редактор и режим прототипа в Figma не используют HTML. Google Docs тоже в прошлом году заявили, что планируют отказаться от HTML и продемонстрировали, как они собираются это сделать.

Как? Ответ прост: <canvas>. В то время как JS и HTML сами по себе неплохи, их связка убивает всю производительность. Большие интерактивные документы заставляют даже самые мощные машины кряхтеть и нагреваться добела. И чтобы обеспечить беспрецедентную производительность для документов почти любого размера (в пределах разумного), Figma и Google Docs используют кастомный рендеринг на канвасе вместо использования HTML + JS. Система получается более низкоуровневой, работает на практически прямой связи с железом без лишних слоёв, поэтому всё очень быстро

Много вопросов при этом остаются открытыми, в частности общедоступность (accessibility). Но если прикладывать усилия, это возможно решить. Да и чистый HTML без намеренных усилий не сильно более доступен, чем сырой канвас. Также это всё можно назвать ещё одним костылём: да, но зато он очень быстрый! И он будет работать, пока веб не перейдёт на другие технологии и языки.

Я создал свою клавиатуру с нуля. Мне давно приглянулась идея использовать в работе крутилки (энкодеры), и это стало основной мотивацией для погружения в электронику и ремесло создания клавиатур.

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

Так родился Sexypad. Над дизайном, как и названием, долго не думал, он максимально прост: три энкодера, две кнопки — получилось очень удачно. Энкодеры удобно использовать для повторяющихся нажатий кнопок: стрелочки, перелистывание вкладок, отмена/повтор действия, зум и т.п. А кнопки для переключения слоёв (один энкодер может выполнять разные действия в зависимости от слоя).

Изучил как и куда присоединять энкодеры и кнопки к пинам микроконтроллера: это оказалось довольно просто в теории. Вырезал и покрасил корпус из листа ПВХ, прикрепил компоненты. Время припаивать, но оказалось, что рисунка с пинами покрашенными в разный цвет в Figma недостаточно. Нарисовал схему, чтоб понять, куда какой провод должен идти. Припаял, работает! Длины некоторых проводов не рассчитал. Заметка на будущее: лушче лишнее отрезать, чем слишком короткий провод. В целом мне очень понравился процесс и результат. Есть также идеи для улучшения — как раз сейчас над ними работаю и публикую в @sexy_keyboards.

Фотографии процесса и готового творения в статье: https://teletype.in/@gleb.sexy/sexypad-v1

Любишь играть с данными? Встретился такой проект для работы с данными и их интерактивной презентации: https://www.decipad.com/

Интерфейс похож на Notion, но с фокусом на таблицы и разные подсчёты, как в Excel. А также интерактив: можно вставлять поля ввода и создавать таким образом интерактивные модели. Пример: https://alpha.decipad.com/n/The-Perfect-Coffee-Drip-Brew-%3Aqi0EWqpCXpIq5b95aP1uj?secret=Jq6MiKBXqUk8vUN0BVTOG

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

Наконец-то могу в любой момент точно узнать, сколько времени сейчас в Саратове! 😆 Часы Ракета 24 часа «Города».

Сайты могут отслеживать твой цифровой след по установленным расширениям в браузере, если другие методы типа Cookies недоступны, или в комбинации с ними: https://www.ghacks.net/2022/06/19/your-installed-browser-extension-may-be-used-to-fingerprint-you/

Тут можно посмотреть, насколько твои расширения тебя «выдают»: https://z0ccc.github.io/extension-fingerprints/ — чем меньше процент пользователей с таким же набором расширений, тем легче тебя отследить.

Сделал мини-клавиатуру для Figma с быстрым доступом к основным горячим клавишам. ✨

Figmapad состоит из трёх обычных кнопок, двух энкодеров и джойстика — переключателя с пятью направлениями. Для последнего я вырезал и покрасил насадку в виде курсора мыши из Figma. Также на него установлен монохромный OLED экран, на котором показаны подсказки о том, какие действия доступны на текущем активном слое. Пиксель-арт для него я конечно же сделал своим плагином Pixel Princes.

Основные из доступных действий: копирование и вставка объектов и их свойств, перемещение объектов, изменение размеров, перемещение слоёв, навигация по иерархии слоёв, страницам и файлам, undo/redo, выравнивание объектов, объединение во фрейм и разгруппировка. А какие действия пригодились бы в твоём рабочем процессе?

Закончил первую полноразмерную клавиатуру! Не красота ли? 😍🌈

Корпус спроектирован в Figma (да, теперь это официально CAD инструмент) и вырезан лазером из 3 мм прозрачного акрила. 38 клавиш, 4 энкодера (куда же без них), новейший микроконтроллер RP2040 Zero, поддержка RGB подсветки в будущем — всё соединено вместе эмалированным медным проводом 1 мм (лучше было бы тоньше). Больше технических подробностей: https://gitlab.com/zyumbik/keyboard-1/-/tree/main

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

Результат превзошёл все ожидания! Только вот название ещё не придумал — есть идеи?

О моём творении написали в новостях — конечно же клавиатурных новостях! Keyboard Builders’ Digest это еженедельный журнал о новинках и событиях в сфере кастомных и самодельных клавиатур.

https://kbd.news/Gleb-s-handwired-one-1562.html

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

А что осталось закончить? Сейчас я разрабатываю прошивку под неё. Да, чтобы клавиатура работала, надо её ещё закодить... А так как чип, который я использовал для неё — новинка в области клавиатур и вообще, я не могу просто взять и использовать уже готовые движки. Надо плясать с бубном.

Сначала я собирался использовать популярный фреймворк для таких чипов под названием KMK. Запустить его не составило труда. Благодаря тому, что он работает на Питоне (а Питон я знаю, в отличие от типично используемого Си), я даже пофиксил в нём пару багов и улучшил код для поддержки энкодеров. Но в самый ответственный момент — во время набора текста, оказалось, что Питон слишком медленный и отправляет нажатия с задержкой. Я уже бросился пытался оптимизировать код, и тут мне пишет создатель ZMK — немного более популярного движка. Говорит, у меня тут экспериментальная ветка с поддержкой RP2040 (тот самый новый чип) — не хочешь попробовать? И вот спустя половину недели работы я почти закончил прошивку на ZMK. Осталось протестировать... Держим кулачки!

Небольшое мемное видео про мою любовь к эргономичным клавиатурам:

https://youtu.be/0bqVMONZ6Y0

Приятного просмотра!