This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Ну что, вы уже сделали свой сервис для удаления фона с изображения?
Нет? А почему?
Даже Эдди Османи не удержался: https://bg.addy.ie/
Ведь, как мы уже писали, с помощью библиотеки Transformers.js можно с лёгкостью реализовать множество применений ИИ-моделей прямо в браузере! Да, без отправки на сервер. Пусть комп клиента старается :)
Гитхаб: https://github.com/addyosmani/bg-remove
Больше сервисов богу сервисов!
#ai #webgpu #image
Ну что, вы уже сделали свой сервис для удаления фона с изображения?
Нет? А почему?
Даже Эдди Османи не удержался: https://bg.addy.ie/
Ведь, как мы уже писали, с помощью библиотеки Transformers.js можно с лёгкостью реализовать множество применений ИИ-моделей прямо в браузере! Да, без отправки на сервер. Пусть комп клиента старается :)
Гитхаб: https://github.com/addyosmani/bg-remove
Больше сервисов богу сервисов!
#ai #webgpu #image
This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня
Итак, вашему вниманию самый популярный в октябре кодпен небезызвестной Аны Тюдор.
Переливающийся всеми цветами радуги светящийся текст!
Вот: https://codepen.io/thebabydino/pen/rNPOpJK
Реализовано на SVG-фильтре gaussian blur: фон обрезается по контенту текста через -webkit-background-clip: text и размывается.
Жаль, я не знал об этой технике когда много лет назад делал сайт школе стриптиза. Там было много эффектов а-ля неоновое свечение. Фоток не будет.
#css #svg #filter #бородач
Итак, вашему вниманию самый популярный в октябре кодпен небезызвестной Аны Тюдор.
Переливающийся всеми цветами радуги светящийся текст!
Вот: https://codepen.io/thebabydino/pen/rNPOpJK
Реализовано на SVG-фильтре gaussian blur: фон обрезается по контенту текста через -webkit-background-clip: text и размывается.
Жаль, я не знал об этой технике когда много лет назад делал сайт школе стриптиза. Там было много эффектов а-ля неоновое свечение. Фоток не будет.
#css #svg #filter #бородач
#фишка дня
Надоело читать это: «To push the current branch and set the remote as upstream, use
А всё потому что git на сервере не знает ничего о ветках на вашей машине. Нужно явно указать: «Хочу создать ветку на удаленном сервере с указанным названием и связать её с локальной». Названия даже могут отличаться, но чаще всего — совпадают. Ну, у меня, во всяком случае.
Поэтому, глядите чо: https://git-scm.com/docs/git-config#Documentation/git-config.txt-pushautoSetupRemote
Ну или просто взгляните на КДПВ.
Завезли с версии 2.37.0, так что проверьте сначала. Спасибо за уточнение подписчику :)
#git #remote #бородач
Надоело читать это: «To push the current branch and set the remote as upstream, use
git push --set-upstream origin fix/bug-1359»?А всё потому что git на сервере не знает ничего о ветках на вашей машине. Нужно явно указать: «Хочу создать ветку на удаленном сервере с указанным названием и связать её с локальной». Названия даже могут отличаться, но чаще всего — совпадают. Ну, у меня, во всяком случае.
Поэтому, глядите чо: https://git-scm.com/docs/git-config#Documentation/git-config.txt-pushautoSetupRemote
Ну или просто взгляните на КДПВ.
Завезли с версии 2.37.0, так что проверьте сначала. Спасибо за уточнение подписчику :)
#git #remote #бородач
#баг дня
Если вы тут утром решили развернуть новый проект на Vite, и у вас ничего не вышло, это нормально.
esuild, на котором Vite и основана, в версии 0.24.1 принёс ломающее конфиги изменение.
И на данный момент лучшее решение — запинить зависимость esbuild на 0.24.0: https://github.com/vitejs/vite/issues/19018
Ну или использовать пятую ветку Vite.
Повторяется на всех пакетных менеджерах: и npm, и pnpm и bun и, прости господи, yarn.
Осторожнее там, котаны :)
#vite #esbuild #bug
Если вы тут утром решили развернуть новый проект на Vite, и у вас ничего не вышло, это нормально.
esuild, на котором Vite и основана, в версии 0.24.1 принёс ломающее конфиги изменение.
И на данный момент лучшее решение — запинить зависимость esbuild на 0.24.0: https://github.com/vitejs/vite/issues/19018
Ну или использовать пятую ветку Vite.
Повторяется на всех пакетных менеджерах: и npm, и pnpm и bun и, прости господи, yarn.
Осторожнее там, котаны :)
#vite #esbuild #bug
#инструмент дня
Помните, как на Новый год нужно было срочно найти подарок для младшего брата, и вы отдали ему пылившийся на полке DVD с фильмом, который вы даже не смотрели?
Возможно, он до сих пор это помнит... А вы с тех пор понимаете, что такое повторное использование.
А вот ребята из Material UI aka MUI решили переработать подход к таким ситуациям.
Они только что выпустили публичную альфу Base UI 1.0 — библиотеку нестилизованных React-компонентов, выделенных из большого пакета Material UI и доступных теперь как отдельный продукт.
Помимо готовых компонентов в ней есть и низкоуровневые хуки, дающие всю мощь Material UI, но без необходимости реализовывать Material Design в приложении.
Полная свобода в стилях
Base UI не навязывает собственное решение для CSS. Вы сами выбираете, как работать: Tailwind, CSS-in-JS или любой другой способ.
Доступность (A11Y) по умолчанию
Компоненты соблюдают лучшие практики доступности. Это значит, что ваш проект будет удобен для всех, и никто не скажет, что вы плохой человек (кроме младшего брата).
Композиция
API компонентов открыто полностью. У вас есть доступ к каждому узлу, что позволяет легко добавлять, удалять или оборачивать элементы под свои нужды.
Base UI сохраняет лучшие части Material UI, не привязывая вас к "гугловскому" дизайну.
Вот это переиспользование, за которое не стыдно, котаны. Можно и младшему брату оставить.
Лучший подарок на Новый год!
#react #mui #ui #widgets
Помните, как на Новый год нужно было срочно найти подарок для младшего брата, и вы отдали ему пылившийся на полке DVD с фильмом, который вы даже не смотрели?
Возможно, он до сих пор это помнит... А вы с тех пор понимаете, что такое повторное использование.
А вот ребята из Material UI aka MUI решили переработать подход к таким ситуациям.
Они только что выпустили публичную альфу Base UI 1.0 — библиотеку нестилизованных React-компонентов, выделенных из большого пакета Material UI и доступных теперь как отдельный продукт.
Помимо готовых компонентов в ней есть и низкоуровневые хуки, дающие всю мощь Material UI, но без необходимости реализовывать Material Design в приложении.
Полная свобода в стилях
Base UI не навязывает собственное решение для CSS. Вы сами выбираете, как работать: Tailwind, CSS-in-JS или любой другой способ.
Доступность (A11Y) по умолчанию
Компоненты соблюдают лучшие практики доступности. Это значит, что ваш проект будет удобен для всех, и никто не скажет, что вы плохой человек (кроме младшего брата).
Композиция
API компонентов открыто полностью. У вас есть доступ к каждому узлу, что позволяет легко добавлять, удалять или оборачивать элементы под свои нужды.
Base UI сохраняет лучшие части Material UI, не привязывая вас к "гугловскому" дизайну.
Вот это переиспользование, за которое не стыдно, котаны. Можно и младшему брату оставить.
Лучший подарок на Новый год!
#react #mui #ui #widgets
#инструмент дня
Лучший API — это тот, который не пришлось писать самому! Потому так популярны и фреймворки, и сервисы вроде Firebase.
Но если охота чуть больше контроля над базой данных и своими ресурсами вообще, а писать код всё ещё неохота, рекомендую взглянуть на PostgREST. Это инструмент, который превращает вашу базу данных в полноценный REST API.
Почему это круто?
Мгновенный API Не нужно писать кучу эндпоинтов — PostgREST автоматически генерирует их на основе структуры вашей базы данных.
SQL вместо ORM Работаете напрямую с SQL-запросами, что дает максимальную гибкость и контроль над данными.
Авторизация и безопасность PostgREST использует роли PostgreSQL для управления доступом, избавляя от необходимости вручную прописывать логику авторизации. А процессы аутентификации и авторизации выстроены вокруг JWT.
Производительность Оптимизирован для работы с большими объемами данных, включая фильтрацию, пагинацию и сортировку.
Легкая интеграция
Подходит как для простых CRUD-операций, так и для сложной бизнес-логики через SQL-вьюхи или хранимые процедуры.
Возможно, он не решит всех проблем, но уж точно можно будет сильно сократить время разработки.
#postgres #api #service
Лучший API — это тот, который не пришлось писать самому! Потому так популярны и фреймворки, и сервисы вроде Firebase.
Но если охота чуть больше контроля над базой данных и своими ресурсами вообще, а писать код всё ещё неохота, рекомендую взглянуть на PostgREST. Это инструмент, который превращает вашу базу данных в полноценный REST API.
Почему это круто?
Мгновенный API Не нужно писать кучу эндпоинтов — PostgREST автоматически генерирует их на основе структуры вашей базы данных.
SQL вместо ORM Работаете напрямую с SQL-запросами, что дает максимальную гибкость и контроль над данными.
Авторизация и безопасность PostgREST использует роли PostgreSQL для управления доступом, избавляя от необходимости вручную прописывать логику авторизации. А процессы аутентификации и авторизации выстроены вокруг JWT.
Производительность Оптимизирован для работы с большими объемами данных, включая фильтрацию, пагинацию и сортировку.
Легкая интеграция
Подходит как для простых CRUD-операций, так и для сложной бизнес-логики через SQL-вьюхи или хранимые процедуры.
Возможно, он не решит всех проблем, но уж точно можно будет сильно сократить время разработки.
#postgres #api #service
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Сейчас в CSS присутствует 54 разных единицы измерения (units).
Пятьдесят четыре!
А ты до сих пор используешь одни только пиксели aka px.
Так вот, используя единицу измерения
Прям как тут: https://codepen.io/alinaki/pen/xxMJXaV
Поиграйтесь с настройками и шириной блока, получается очень интересно. Автор красоты — Jhey.
А чтобы не запутаться — есть прекрасный ресурс https://whatunit.com/
На нём имеется диаграмма принятия решений, когда какую единицу брать. Если всё ещё непонятно, посмотрите видео от Kevin Powell: https://www.youtube.com/watch?v=Utc_uhvTluk
Он, кстати, автор диаграммы.
В общем, просыпаемся, котаны. Будущее здесь.
#css #rem #lh #vh #measure #бородач
Сейчас в CSS присутствует 54 разных единицы измерения (units).
Пятьдесят четыре!
А ты до сих пор используешь одни только пиксели aka px.
Так вот, используя единицу измерения
lh — привязанную к line-height — и свойство background-clip, можно, например, красиво подсветить нужное число строк в любом тексте.Прям как тут: https://codepen.io/alinaki/pen/xxMJXaV
Поиграйтесь с настройками и шириной блока, получается очень интересно. Автор красоты — Jhey.
А чтобы не запутаться — есть прекрасный ресурс https://whatunit.com/
На нём имеется диаграмма принятия решений, когда какую единицу брать. Если всё ещё непонятно, посмотрите видео от Kevin Powell: https://www.youtube.com/watch?v=Utc_uhvTluk
Он, кстати, автор диаграммы.
В общем, просыпаемся, котаны. Будущее здесь.
#css #rem #lh #vh #measure #бородач
Что ж, котаны. Пока я тут устраиваю себе некоторый отпуск, пришло время поблагодарить всех вас за то, что вы со мной и были со мной всё это время.
Особенно тех, кто посты читает
С наступающим Новым годом! Больше постов совсем скоро :)
К слову, вот тот самый популярный пост: https://www.tg-me.com/htmlshit/3049
Особенно тех, кто посты читает
С наступающим Новым годом! Больше постов совсем скоро :)
К слову, вот тот самый популярный пост: https://www.tg-me.com/htmlshit/3049
#статья дня
Так получилось, что я использовал матрицы преобразований — осмысленно — всего раз в жизни. Правда, в итоге перешёл на решение попроще: https://www.tg-me.com/htmlshit/1580
Но это не значит, что они не нужны :) Просто не у всех есть под них задачи.
А вот у Ивана Шубина — автора редактора диаграмм Schemio — такая задача возникла. Правда, осознал он это не сразу :)
Ну кто бы мог подумать, что тебе понадобятся матрицы преобразований, когда ты разрабатываешь векторный редактор, правда?
Прекрасная статья для тех, кто говорит, что программисту математика не нужна: https://itnext.io/how-i-used-linear-algebra-to-build-an-interactive-diagramming-editor-and-why-matrix-math-is-d5bd552f2e8d
Ну, точнее, линейная алгебра.
Есть перевод на русский: https://habr.com/ru/articles/870462/
Не, кроме шуток, просто шикарнейшая статья, после которой очень многое в работе с векторной (и не только) графикой станет понятно.
#svg #math #matrix #transform
Так получилось, что я использовал матрицы преобразований — осмысленно — всего раз в жизни. Правда, в итоге перешёл на решение попроще: https://www.tg-me.com/htmlshit/1580
Но это не значит, что они не нужны :) Просто не у всех есть под них задачи.
А вот у Ивана Шубина — автора редактора диаграмм Schemio — такая задача возникла. Правда, осознал он это не сразу :)
Ну кто бы мог подумать, что тебе понадобятся матрицы преобразований, когда ты разрабатываешь векторный редактор, правда?
Прекрасная статья для тех, кто говорит, что программисту математика не нужна: https://itnext.io/how-i-used-linear-algebra-to-build-an-interactive-diagramming-editor-and-why-matrix-math-is-d5bd552f2e8d
Ну, точнее, линейная алгебра.
Есть перевод на русский: https://habr.com/ru/articles/870462/
Не, кроме шуток, просто шикарнейшая статья, после которой очень многое в работе с векторной (и не только) графикой станет понятно.
#svg #math #matrix #transform
This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня
Что-то у меня чувство, что я с линейной алгеброй да на 29 декабря малость переборщил...
Давайте я вам две новогодние ёлочки, а вы мне всё простите?
🎄 Ксения Кондрашова подарила нам интерактивную ёлку на Three.js, вынесена в иллюстрацию: https://codepen.io/ksenia-k/pen/yyBYVyd
🎄 А Ана Тюдор — на чистом CSS: https://codepen.io/thebabydino/pen/bGwYVOm
На стороне какой ёлки вы?
#3d #threejs
Что-то у меня чувство, что я с линейной алгеброй да на 29 декабря малость переборщил...
Давайте я вам две новогодние ёлочки, а вы мне всё простите?
На стороне какой ёлки вы?
#3d #threejs
Please open Telegram to view this post
VIEW IN TELEGRAM
#инструмент дня
Когда вы последний раз дизассемблировали React Native приложение?
А я вчера.
Вот так вот решил закончить череду постов этото года лёгким хардкором. На полшишечки.
Давайте по порядку. Как вы все, должно быть, помните, я уже довольно давно пишу свой пульт для телевизора Samsung на Flutter.
Почему Samsung? Ну потому что он дома стоит.
И да, хоть это всё и происходит крайне медленно, минимальный набор функций имеется. Я постоянно им пользуюсь, когда нужно что-то переключить ребёнку или мне, а настоящий пульт искать лень.
Но у пары конкурентных приложений были функции, которые кажутся весьма уместными. И речь даже не о DLNA-стриминге фотографий и видео с телефона на телевизор, это-то как раз понятно и хорошо документированно.
А вот, например, такая простая штука, как получение списка всех приложений. Ну или, например, иные методы поиска телевизоров. В моём-то приложении список приложений и иконок к ним тупо захардкожен.
И не сказать, что я их не знаю — в начале разработки провёл огромную работу по поиску нужных API, но руки всё равно чесались.
И тут очень к месту пришлась возможность использования приложений для iPhone на макбуках с м-процессорами. Запускаешь приложение параллельно с Wireshark и мониторишь запросы. Очень удобно (на иллюстрации).
Но я не учёл такой простой вещи, как шифрование.
Да-да, практически все вебсокет-запросы оказались зашифрованы протоколом TLS 1.2 (
Кто бы мог подумать, а. Ведь я сам обходил это в своей имплементации: сертификаты на телевизорах свои, и, зачастую, протухшие давно.
Пусть это и не самый надёжный в 2024 году протокол, но всё же опыта расшифровки у меня нет. На самом-то деле в телевизорах есть и несекьюрные API, позволяющие даже запустить приложение, но они не всегда доступны без dev-режима. Да и нужного среди них не оказалось. А я так надеялся, что есть что-то простое.
Впрочем, строки поиска SSDP я себе выписал. LG, ты следующий.
Итак, но приложение же вот оно, лежит в каталоге Applications. А это что значит?
А это значит, можно посмотреть содержимое пакета! Да, если вы не знали, приложения в macOS и iOS (и на Android) это, по факту, просто архив.
Распаковав, я обнаружил подозрительный каталог node_modules и нечто под названием main.jsbundle.
Надо же, самый крутой конкурент оказался ни чем иным, как приложением на React Native!
А что я с ним делал дальше — напишу через несколько часов, иначе как-то длинно получается. Оставайтесь на связи :)
#remote #flutter #reactnative
Когда вы последний раз дизассемблировали React Native приложение?
А я вчера.
Вот так вот решил закончить череду постов этото года лёгким хардкором. На полшишечки.
Давайте по порядку. Как вы все, должно быть, помните, я уже довольно давно пишу свой пульт для телевизора Samsung на Flutter.
Почему Samsung? Ну потому что он дома стоит.
И да, хоть это всё и происходит крайне медленно, минимальный набор функций имеется. Я постоянно им пользуюсь, когда нужно что-то переключить ребёнку или мне, а настоящий пульт искать лень.
Но у пары конкурентных приложений были функции, которые кажутся весьма уместными. И речь даже не о DLNA-стриминге фотографий и видео с телефона на телевизор, это-то как раз понятно и хорошо документированно.
А вот, например, такая простая штука, как получение списка всех приложений. Ну или, например, иные методы поиска телевизоров. В моём-то приложении список приложений и иконок к ним тупо захардкожен.
И не сказать, что я их не знаю — в начале разработки провёл огромную работу по поиску нужных API, но руки всё равно чесались.
И тут очень к месту пришлась возможность использования приложений для iPhone на макбуках с м-процессорами. Запускаешь приложение параллельно с Wireshark и мониторишь запросы. Очень удобно (на иллюстрации).
Но я не учёл такой простой вещи, как шифрование.
Да-да, практически все вебсокет-запросы оказались зашифрованы протоколом TLS 1.2 (
wss://).Кто бы мог подумать, а. Ведь я сам обходил это в своей имплементации: сертификаты на телевизорах свои, и, зачастую, протухшие давно.
Пусть это и не самый надёжный в 2024 году протокол, но всё же опыта расшифровки у меня нет. На самом-то деле в телевизорах есть и несекьюрные API, позволяющие даже запустить приложение, но они не всегда доступны без dev-режима. Да и нужного среди них не оказалось. А я так надеялся, что есть что-то простое.
Впрочем, строки поиска SSDP я себе выписал. LG, ты следующий.
Итак, но приложение же вот оно, лежит в каталоге Applications. А это что значит?
А это значит, можно посмотреть содержимое пакета! Да, если вы не знали, приложения в macOS и iOS (и на Android) это, по факту, просто архив.
Распаковав, я обнаружил подозрительный каталог node_modules и нечто под названием main.jsbundle.
Надо же, самый крутой конкурент оказался ни чем иным, как приложением на React Native!
А что я с ним делал дальше — напишу через несколько часов, иначе как-то длинно получается. Оставайтесь на связи :)
#remote #flutter #reactnative
#инструмент дня
Несколько часов превратились в пару дней. Новый год, а что вы хотели.
Итак, мы остановились на том что конкуренты писали свой проект на React Native, с говорящим за себя файлом
И тут начинается самое интересное: этот бандл может оказаться как просто минифицированным JS-кодом, так и... байт-кодом Hermes!
Немного истории: React Native начинался с движка JSC aka JavaScriptCore. Но в Facebook решили, что производительности его JIT для замены нативных приложений явно недостаточно, и с 2019 года предложили альтернативу: виртуальную машину Hermes, в код которой и собирается ваш JavaScript.
Это ускоряет запуск приложений, особенно больших. В статье по ссылке много интересных подробностей.
Первым делом убеждаемся, что это именно Hermes:
Поиск по строкам внутри бинарника, прямо в mc, даёт нам искомое sendGetInstalledApps. Пришло время для дизассемблирования!
Идём в гугл, наверняка кто-то уже озадачился вопросом. И таки да! Встречайте: hermes-dec. Буквально, описание: «A reverse engineering tool for decompiling and disassembling the React Native Hermes bytecode». Звучит как нечто, нужное нам.
Забираем, пробуем установить:
...и получаем отлуп по
$ python3 hbc_disassembler.py ../../main.jsbundle bundle.hasm
И вот, красиво оформленный вывод ассемблера HASM, в котором все строковые данные и названия функций разнесены по блокам и расшифрованы!
И что же мы (внимание на иллюстрацию к посту) можем увидеть из такого вывода, даже не зная ассемблера?
Ну, достаточно много. Например, что тут формируется JSON для отправки телевизору, в котором присутствует метод
Не то, чтоб я об этом не знал! Но все эти API достаются обходными путями. Например, из SDK Tizen или из официальных приложений от Samsung и вендоров. Зачастую, очень важен формат: где-то
Что же дальше? А дальше я обратил внимание на метод
Впрочем, всегда можно просто бандлить иконки с собой.
Но давайте попробуем воспользоваться ещё одной возможностью hermes-dec: декомпиляцией. Ага, получаем JS-код обратно:
Ну и на самом деле что-то получили, вот только, выглядит оно как-то так:
Не сильно больше информации, чем в дизассемблированной версии :( Всё дело в том, что утилита пока не продвинулась дальше «плоских» вызовов и не разворачивает не то, что замыкания, но даже циклы. Впрочем, не мне жаловаться!
Итак, выводы: у разработчиков неофициальных клиентов под телевизоры не больше информации чем у меня или любого из вас, потому любое начинание — стоит того. Как минимум, это интересно! Иногда брутфорс реально рабочий метод, и его применение не должно вас смущать так, как смутило когда-то меня настолько, что я решил использовать захардкоженный список приложений.
Дерзайте, котаны! С Новым годом :)
Несколько часов превратились в пару дней. Новый год, а что вы хотели.
Итак, мы остановились на том что конкуренты писали свой проект на React Native, с говорящим за себя файлом
main.jsbundle.И тут начинается самое интересное: этот бандл может оказаться как просто минифицированным JS-кодом, так и... байт-кодом Hermes!
Немного истории: React Native начинался с движка JSC aka JavaScriptCore. Но в Facebook решили, что производительности его JIT для замены нативных приложений явно недостаточно, и с 2019 года предложили альтернативу: виртуальную машину Hermes, в код которой и собирается ваш JavaScript.
Это ускоряет запуск приложений, особенно больших. В статье по ссылке много интересных подробностей.
Первым делом убеждаемся, что это именно Hermes:
$ file main.jsbundle
main.jsbundle: Hermes JavaScript bytecode, version 96
Поиск по строкам внутри бинарника, прямо в mc, даёт нам искомое sendGetInstalledApps. Пришло время для дизассемблирования!
Идём в гугл, наверняка кто-то уже озадачился вопросом. И таки да! Встречайте: hermes-dec. Буквально, описание: «A reverse engineering tool for decompiling and disassembling the React Native Hermes bytecode». Звучит как нечто, нужное нам.
Забираем, пробуем установить:
$ git clone [email protected]:P1sec/hermes-dec.git
$ cd hermes-dec/
$ python3 setup.py install
...и получаем отлуп по
python-installtools. Впрочем, это быстро решается через brew. Едем дальше, дизассемблируем:$ python3 hbc_disassembler.py ../../main.jsbundle bundle.hasm
И вот, красиво оформленный вывод ассемблера HASM, в котором все строковые данные и названия функций разнесены по блокам и расшифрованы!
И что же мы (внимание на иллюстрацию к посту) можем увидеть из такого вывода, даже не зная ассемблера?
Ну, достаточно много. Например, что тут формируется JSON для отправки телевизору, в котором присутствует метод
ms.channel.emit и передаются данные: {'data': '', 'event': 'ed.installedApp.get', 'to': 'host'}.Не то, чтоб я об этом не знал! Но все эти API достаются обходными путями. Например, из SDK Tizen или из официальных приложений от Samsung и вендоров. Зачастую, очень важен формат: где-то
data должна быть null, где-то — пустой объект или строка. Поиски нужных комбинаций откровенно раздражают.Что же дальше? А дальше я обратил внимание на метод
sendGetAppIcon, который тоже виден на скриншоте. И до меня дошло: они реально отправляют запрос на список всех приложений, а потом — бомбят телевизор запросами об иконках. Не самый оптимальный способ получения информации, но другого нет. Впрочем, всегда можно просто бандлить иконки с собой.
Но давайте попробуем воспользоваться ещё одной возможностью hermes-dec: декомпиляцией. Ага, получаем JS-код обратно:
$ python3 hbc_decompiler.py ../../main.jsbundle main.jsНу и на самом деле что-то получили, вот только, выглядит оно как-то так:
r4 = function() { // Original name: sendGetInstalledApps, environment: r3
r0 = global;
r2 = r0.JSON;
r1 = r2.stringify;
r0 = {};
r3 = 'ms.channel.emit';
r0['method'] = r3;
r3 = {'data': '', 'event': 'ed.installedApp.get', 'to': 'host'};
r0['params'] = r3;
r2 = r1.bind(r2)(r0);
r1 = _closure1_slot4;
r0 = r1.send;
r0 = r0.bind(r1)(r2);
r0 = undefined;
return r0;
};
Не сильно больше информации, чем в дизассемблированной версии :( Всё дело в том, что утилита пока не продвинулась дальше «плоских» вызовов и не разворачивает не то, что замыкания, но даже циклы. Впрочем, не мне жаловаться!
Итак, выводы: у разработчиков неофициальных клиентов под телевизоры не больше информации чем у меня или любого из вас, потому любое начинание — стоит того. Как минимум, это интересно! Иногда брутфорс реально рабочий метод, и его применение не должно вас смущать так, как смутило когда-то меня настолько, что я решил использовать захардкоженный список приложений.
Дерзайте, котаны! С Новым годом :)
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Я вот просто оставлю это здесь и не буду говорить, сколько попыток у меня заняло прохождение, ок? :)
Вообще, конечно, максимально угарная тема. DOOM-Captcha! Когда хорошему разработчику делать нечего — он DOOM портирует.
Сразу ссылка для нетерпеливых: https://doom-captcha.vercel.app/
Ну и на GitHub: https://github.com/rauchg/doom-captcha
Скомпилировано из C в WebAssembly с помощью Emscripten. Ну, кто первый добавит возможность управления не только стрелочками, но и WASD, котаны?
#doom
Я вот просто оставлю это здесь и не буду говорить, сколько попыток у меня заняло прохождение, ок? :)
Вообще, конечно, максимально угарная тема. DOOM-Captcha! Когда хорошему разработчику делать нечего — он DOOM портирует.
Сразу ссылка для нетерпеливых: https://doom-captcha.vercel.app/
Ну и на GitHub: https://github.com/rauchg/doom-captcha
Скомпилировано из C в WebAssembly с помощью Emscripten. Ну, кто первый добавит возможность управления не только стрелочками, но и WASD, котаны?
#doom
#такое дня
Я тут взялся оптимизировать один проект на Wordpress, с целью вывести его в зелёную зону производительности по Lighthouse. Ну и попутно гляжу, а что там в остальных пунктах, включая доступность.
И вот увиденное меня, конечно, выбесило страшно. Давайте посмотрим на иллюстрации: даже на маленьком превью я вижу, что белый текст на оранжевом фоне прекрасно читается, а чёрный на оранжевом — нет.
При этом, алгоритмы Lighthouse считают строго наоборот! А ведь по ним ещё и сайты ранжируются!
Итак, что и где пошло не так?
Всё это тянется с тех времён, когда в 2008 году был принят стандарт WCAG 2.0. Его алгоритм расчёта контраста строится на математике 70-х годов, где главную роль играет относительная яркость цветов (luminance). Тогда это было шагом вперёд: хоть какие-то правила, чтобы шрифт не «терялся» на фоне.
Но время шло, мониторы и технологии развивались, а WCAG остался в прошлом. Он игнорирует такие вещи, как:
• Как мы реально воспринимаем цвета, а не просто их яркость.
• Контрастность цветных пар (жёлтый на чёрном и жёлтый на белом — это не одно и то же для глаз).
• Размер шрифта и его жирность.
В результате мы получаем абсурдные ситуации, когда по формуле WCAG «хороший» текст читается хуже «плохого».
Что же делать?
APCA (Advanced Perceptual Contrast Algorithm) — это новый подход, разработанный Эндрю Соммерсом, чтобы учитывать, как цвета воспринимаются глазами и мозгом. Вместо абстрактных чисел яркости он опирается на физиологию зрения:
• Фон влияет сильнее, чем текст, особенно при высокой яркости.
• Тонкие шрифты требуют большего контраста, чем жирные.
• Цвета воспринимаются по-разному в зависимости от их оттенков.
Пример с оранжевым фоном тут показателен. APCA понимает, что белый текст будет лучше читаться, потому что яркость фона создаёт комфортный контраст. А вот чёрный на оранжевом — слишком резкий, утомляет глаза.
Зачем нам это?
Если мы хотим делать интерфейсы, которые действительно удобны для пользователей, пора перестать слепо следовать устаревшим стандартам. Да, WCAG 2.x пока является нормой, но APCA — это будущее, и уже сейчас его можно использовать, чтобы проекты выглядели лучше и удобнее.
Ну и, конечно, здравый смысл никто не отменял. Алгоритмы алгоритмами, а если текст читается плохо — значит, что-то идёт не так.
Ваши мысли? Что для вас важнее: пройти проверку или сделать текст комфортным для глаз? 👀👇
#a11y
Я тут взялся оптимизировать один проект на Wordpress, с целью вывести его в зелёную зону производительности по Lighthouse. Ну и попутно гляжу, а что там в остальных пунктах, включая доступность.
И вот увиденное меня, конечно, выбесило страшно. Давайте посмотрим на иллюстрации: даже на маленьком превью я вижу, что белый текст на оранжевом фоне прекрасно читается, а чёрный на оранжевом — нет.
При этом, алгоритмы Lighthouse считают строго наоборот! А ведь по ним ещё и сайты ранжируются!
Итак, что и где пошло не так?
Всё это тянется с тех времён, когда в 2008 году был принят стандарт WCAG 2.0. Его алгоритм расчёта контраста строится на математике 70-х годов, где главную роль играет относительная яркость цветов (luminance). Тогда это было шагом вперёд: хоть какие-то правила, чтобы шрифт не «терялся» на фоне.
Но время шло, мониторы и технологии развивались, а WCAG остался в прошлом. Он игнорирует такие вещи, как:
• Как мы реально воспринимаем цвета, а не просто их яркость.
• Контрастность цветных пар (жёлтый на чёрном и жёлтый на белом — это не одно и то же для глаз).
• Размер шрифта и его жирность.
В результате мы получаем абсурдные ситуации, когда по формуле WCAG «хороший» текст читается хуже «плохого».
Что же делать?
APCA (Advanced Perceptual Contrast Algorithm) — это новый подход, разработанный Эндрю Соммерсом, чтобы учитывать, как цвета воспринимаются глазами и мозгом. Вместо абстрактных чисел яркости он опирается на физиологию зрения:
• Фон влияет сильнее, чем текст, особенно при высокой яркости.
• Тонкие шрифты требуют большего контраста, чем жирные.
• Цвета воспринимаются по-разному в зависимости от их оттенков.
Пример с оранжевым фоном тут показателен. APCA понимает, что белый текст будет лучше читаться, потому что яркость фона создаёт комфортный контраст. А вот чёрный на оранжевом — слишком резкий, утомляет глаза.
Зачем нам это?
Если мы хотим делать интерфейсы, которые действительно удобны для пользователей, пора перестать слепо следовать устаревшим стандартам. Да, WCAG 2.x пока является нормой, но APCA — это будущее, и уже сейчас его можно использовать, чтобы проекты выглядели лучше и удобнее.
Ну и, конечно, здравый смысл никто не отменял. Алгоритмы алгоритмами, а если текст читается плохо — значит, что-то идёт не так.
Ваши мысли? Что для вас важнее: пройти проверку или сделать текст комфортным для глаз? 👀👇
#a11y
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
На правах субботнего бреда, не более того.
Помните, когда только начали появляться первые принципы адаптивного дизайна, ходил популярный мем про адаптивную змею?
Нет? Ну вот, напомню: https://www.reddit.com/r/ProgrammerHumor/comments/vqb2l2/responsive_snake/
Дизайнеру Анатолию Зенкову этого показалось мало! И... вашему вниманию — адаптивный доллар!
Вот: https://anatolyzenkov.com/resizabill
Максимально ненужно, но в этом же и суть! Да и, на самом деле, это отличный пример для многих разработчиков и дизайнеров, которые плохо понимают, что и как вообще можно адаптировать.
#adaptive #design
#инструмент дня
Устал подбирать фавиконку для проекта? Постоянно забываешь, что нужно прописать миллион строк под каждое устройство?
Say no more! Просто используй эмодзи!
Вашему вниманию, проект emojico: https://github.com/threepointone/emojico
Запускаем
Вот так вот легко и просто. Ну это при условии, конечно, что вас не раздражают эмодзи :)
А всем остальным могу напомнить, что так-то обязательно иметь только favicon.ico, который на самом деле может быть замаскированным PNG. Не всем сайтам нужна поддержка PWA и красивые закладки.
Но вдруг.
P. S. Ну или использовать сервисы вроде https://favicomatic.com/, с любой картинкой.
#favicon #emoji
Устал подбирать фавиконку для проекта? Постоянно забываешь, что нужно прописать миллион строк под каждое устройство?
Say no more! Просто используй эмодзи!
Вашему вниманию, проект emojico: https://github.com/threepointone/emojico
Запускаем
npx emojico 🚀 --out ./icons и на выходе получаем все нужные размеры под все возможные устройства. Вот так вот легко и просто. Ну это при условии, конечно, что вас не раздражают эмодзи :)
А всем остальным могу напомнить, что так-то обязательно иметь только favicon.ico, который на самом деле может быть замаскированным PNG. Не всем сайтам нужна поддержка PWA и красивые закладки.
Но вдруг.
P. S. Ну или использовать сервисы вроде https://favicomatic.com/, с любой картинкой.
#favicon #emoji
#штука дня
Я тут случайно купил... робота :)
Зашел с ребенком в комиссионный магазин (мы тут их называем кирпушниками) в поисках интересных компакт-дисков и запчастей к конструктору дочки, а вышел с роботом. За десятку евро.
Называется Edison.
Естественно, это достаточно простой робот для обучения в школах. На борту датчики света, звука, столкновения, пара колес, детектор линии.
Музыку может играть, простым синтезатором мелодий. Присутствует ИК-приёмопередатчик, чтобы телевизор включать, или управлять роботом с пульта от того же телевизора.
Программируется или в Scratch-подобной среде программирования, или на Python.
Протестировали демки обхода препятствий, дочь в восторге. В её три года она, конечно же, пока не может понять, как его программировать. Но много ли надо, чтобы впечатлить? :)
Заодно, совместим с Лего! Можно построить башенный кран... А самые крутые применения начинаются с объединения двух и более роботов.
В общем, норм улов, я считаю. Для ознакомления просто идеально.
Я тут случайно купил... робота :)
Зашел с ребенком в комиссионный магазин (мы тут их называем кирпушниками) в поисках интересных компакт-дисков и запчастей к конструктору дочки, а вышел с роботом. За десятку евро.
Называется Edison.
Естественно, это достаточно простой робот для обучения в школах. На борту датчики света, звука, столкновения, пара колес, детектор линии.
Музыку может играть, простым синтезатором мелодий. Присутствует ИК-приёмопередатчик, чтобы телевизор включать, или управлять роботом с пульта от того же телевизора.
Программируется или в Scratch-подобной среде программирования, или на Python.
Протестировали демки обхода препятствий, дочь в восторге. В её три года она, конечно же, пока не может понять, как его программировать. Но много ли надо, чтобы впечатлить? :)
Заодно, совместим с Лего! Можно построить башенный кран... А самые крутые применения начинаются с объединения двух и более роботов.
В общем, норм улов, я считаю. Для ознакомления просто идеально.
#заметка дня
Electron.js, Tauri, ProtonShell, да сотни их. Всё это — средства разработки desktop-приложений на JavaScript/TypeScript и иже с ними. Где-то справедливо, где-то — не очень — критикуемы. Какие-то из них используют биндинги к нативным виджетам системы, какие-то — к Wx, Qt или GTK.
А что если я вам скажу, что есть среда, в которой JavaScript приложения — новая норма?
И это, внезапно, GNOME. Тот самый, что по дефолту в Ubuntu, Fedora, openSUSE Linux.
Изначально, движок JavaScript в GNOME — GJS — задумывался для расширений GNOME Shell, собственно, среды рабочего стола. Основан он на SpiderMonkey, движке из Firefox.
Путь GJS как движка для разработки приложений, а не только расширений, был достаточно тернист, но в итоге мы получили мощное средство разработки UI, вытесняющее даже изначально придуманный для этого язык Vala.
Естественно, интерфейс рисуется не веб-технологиями. Присутстсвуют биндинги к GTK и, естественно, libadwaita.
Последнее это не просто библиотека, содержащая дефолтную тему GTK для GNOME, но целая определяющая поведение виджетов среда. Что-то, что делает гном — гномом, пусть многим это и не всегда нравится.
И вот одним из последних приобретений списка дефолтных приложений GNOME стал аудиоплеер Decibels: https://gitlab.gnome.org/GNOME/decibels
Если вам хочется вообще выйти за рамки веба, оторваться от React и попробовать свои силы в чём-то максимально близком к нативной разработке, при этом, без изучения нового языка, то разработка приложений для GNOME вполне может стать началом чего-то интересного.
Вот, например, шаблон: https://gitlab.gnome.org/World/javascript/gnome-typescript-template
А тут есть история разработчика, который портировал приложение Диктофон: https://blogs.gnome.org/christopherdavis/2022/08/25/trying-typescript-for-gnome-apps/
Иногда бывает полезно выскочить из привычной среды. Пробуем, котаны?
#gtk #linux #gnome
Electron.js, Tauri, ProtonShell, да сотни их. Всё это — средства разработки desktop-приложений на JavaScript/TypeScript и иже с ними. Где-то справедливо, где-то — не очень — критикуемы. Какие-то из них используют биндинги к нативным виджетам системы, какие-то — к Wx, Qt или GTK.
А что если я вам скажу, что есть среда, в которой JavaScript приложения — новая норма?
И это, внезапно, GNOME. Тот самый, что по дефолту в Ubuntu, Fedora, openSUSE Linux.
Изначально, движок JavaScript в GNOME — GJS — задумывался для расширений GNOME Shell, собственно, среды рабочего стола. Основан он на SpiderMonkey, движке из Firefox.
Путь GJS как движка для разработки приложений, а не только расширений, был достаточно тернист, но в итоге мы получили мощное средство разработки UI, вытесняющее даже изначально придуманный для этого язык Vala.
Естественно, интерфейс рисуется не веб-технологиями. Присутстсвуют биндинги к GTK и, естественно, libadwaita.
Последнее это не просто библиотека, содержащая дефолтную тему GTK для GNOME, но целая определяющая поведение виджетов среда. Что-то, что делает гном — гномом, пусть многим это и не всегда нравится.
И вот одним из последних приобретений списка дефолтных приложений GNOME стал аудиоплеер Decibels: https://gitlab.gnome.org/GNOME/decibels
Если вам хочется вообще выйти за рамки веба, оторваться от React и попробовать свои силы в чём-то максимально близком к нативной разработке, при этом, без изучения нового языка, то разработка приложений для GNOME вполне может стать началом чего-то интересного.
Вот, например, шаблон: https://gitlab.gnome.org/World/javascript/gnome-typescript-template
А тут есть история разработчика, который портировал приложение Диктофон: https://blogs.gnome.org/christopherdavis/2022/08/25/trying-typescript-for-gnome-apps/
Иногда бывает полезно выскочить из привычной среды. Пробуем, котаны?
#gtk #linux #gnome