Будни разработчика
14.5K subscribers
1.29K photos
382 videos
8 files
2.18K links
Блог Lead JS-разработчика
Автор: @bekharsky

По рекламе: https://telepost.pro/ch/id2415 или https://t.me/it_adv

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

№5001017849, https://www.gosuslugi.ru/snet/679b74f8dad2d930d2eaa978
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня

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

А для этого о них надо как-то договориться, продемонстрировать, выявить возможные проблемы и нестыковки. К примеру, стрелки не работают там, где должны.

Ну или, как вариант, показать кому-то как эффективно можно управлять текстовым или графическим редактором, девтулзами. Стать настоящим хоткей-ниндзей!

Что ж, по крайней мере для маководов у меня есть решение! Keycastr — https://github.com/keycastr/keycastr

Задача этой маленькой утилиты буквально вывести на экран нажатые клавиши. Конечно, есть выбор — показывать все, или только модификаторы.

Очень круто было наблюдать, как наш техлид джирой манипулирует :)

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

Upd.

Альтернатива для Windows: http://carnackeys.com/

Для Linux:
https://github.com/bm-mit/key-caster
https://www.thregr.org/wavexx/software/screenkey/
https://github.com/critiqjo/key-mon

#hotkey #a11y #record #бородач
6🫡1
🎮 Хочешь зарабатывать на играх, а не только играть?

Игровая индустрия растёт каждый год — и ей нужны специалисты.

В XYZ School обучают профессиям, без которых не создаётся ни одна игра:

🧠 Гейм-дизайнер
🖌 Концепт художник
📱 Тестировщик мобильных игр
🎬 Специалист по визуальным эффектам
💻 Разработчик игр (Unity, Unreal Engine, C#, C++)
🎨 Художник трехмерных моделей (3D-художник)

На курсах ты не просто смотришь лекции — выполняешь практические задания, собираешь портфолио и работаешь под руководством специалистов, которые участвовали в проектах вроде Doom, Fortnite и Metro.

🚀 Начать можно без опыта.
👉🏻 Посмотреть курс

Erid: 2SDnjdMg8n5
Название: ООО "ИКС ВАЙ ЗЕТ НЕТВОРК"
ИНН: 9705150153
🤡6
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня

Я искренне радуюсь способности разных людей создавать хайп вокруг своих продуктов. Умению создать продукт, попадающий в нерв миллионов людей. И сегодня такой продукт — Pretext от Шен Лу.

Собственно, заявка прям сильная: дать людям чёткий, быстрый и всеобъемлющий алгоритм подсчёта размерности текстовых нод на чистом TypeScript.

Как звучит, а?!

Зачем это нужно? Ну, яркий пример прямо на скриншоте: рассчитать, в каких местах разорвать текст, чтобы вставить туда фигуру. Или раскладка masonry. Или ASCII-арт. Или аккордионы с конкретным числом строк. Или редакторы текста. Примеров-то прям много: https://chenglou.me/pretext/

Правда — и вот проблема хайпа — подаётся это на потрясающем соусе вроде: «На CSS это сделать невозможно или очень сложно, все проблемы решены, никакого рефлоу, много лет этого никто не делал, мы прошли сквозь ад, пока писали это, никаких больше расчётов через DOM, работает с корейским и японскими языками» и так далее и тому подобное.

Я ни в коей мере не преуменьшаю объём работы и возможности библиотеки. Но...

Но даже если мы оставить за рамками то, что CSS в целом давно решает как минимум половину заявленных вещей и даже гораздо проще, вся красота решения лежит в стандартном методе canvas.measureText. Эта штука с нами чуть ли не с IE9 и — естественно — на ней писалось множество решений в последние лет 10. Так что половина заявлений о крутости библиотеки ну... как минимум, слишком сильная.

Главное — уметь попасть в нерв, да :)

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

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

#css #js #measureText #text
111
Media is too big
VIEW IN TELEGRAM
#codepen дня

Наткнулся на приятный и эффектный пример 3D-интерфейса — Painting Wheel.

Выглядит и ощущается как Three.js, но это CSS-преобразования.

По сути, берётся набор карточек и раскладывается по окружности. У каждой есть свой угол и одно и то же расстояние от центра. За счёт этого из обычного списка получается кольцо. Дальше вся сцена чуть наклоняется и добавляется перспектива.

JavaScript используется только чтобы поменять перспективу.

Ну а чтобы показать, что это всё совсем не запредельно сложно, я решил вытащить непосредственно реализацию кольца в отдельный кодпен: https://codepen.io/editor/alinaki/pen/019d2f65-9738-7ea5-a667-524ee1a68bef

Чтобы стало совсем понятно, я добавил панель управления: можете прощёлкать чекбоксы в верхнем правом углу и настроить любой аспект карусели.

Можно вообще сделать простую бесконечную прокрутку!

Из наворотов — только зум колесом, чтобы было проще рассматривать и понимать происходящее. Понятное дело, ваш ИИ-агент с лёгкостью вытащит код и из оригинального примера, но из упрощённого это делать сподручнее, не правда ли? :)

#css
6
#инструмент дня

Как узнать, верный ли JSON тебе передали, или нет?

Ну, общепринято как-то так:


function tryParseJSONObject (jsonString){
try {
const o = JSON.parse(jsonString);
if (o && typeof o === "object") {
return o;
}
}
catch (e) { }

return false;
};


Зачем проверка на объект? Ну потому что попытки распарсить 1234 и false к ошибке не приведут. Да и передача null просто вернёт null, который ещё и объект... ну вы поняли.

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

Ну, во-первых, определиться, что лучше: упасть или попробовать вернуть хоть что-то? Но это утверждение верно и без проблем с JSON.

Мне когда-то опытный Java-разработчик возвращал самодельный JSON с одиночными кавычками. Такое видение было у человека.

Если хоть что-то, вашему вниманию jsonrepair: https://github.com/josdejong/jsonrepair

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

А ещё иногда модели этим грешат, просто не досылают стрим.

Плохой JSON ближе, чем кажется, котаны :)

#json #repair #fix #бородач
👍31
#молния дня

Обнаружена supply chain-атака на axios. Скомпрометированы версии 1.14.1 и 0.30.4, опубликованные через взломанный аккаунт мейнтейнера.

Что происходит:
— в зависимости добавлен вредоносный пакет
— он выполняется через postinstall без участия пользователя
— скачивает payload с C2 и запускает его (macOS / Windows / Linux)

Под угрозой:
— проекты с axios@^1.14.0 или ^0.30.0 (обновятся автоматически)

Что делать:
— зафиксировать версию на 1.14.0 / 0.30.3
— проверить системы, где делали npm install сегодня
— при необходимости ротировать креды

Подробный разбор:
https://safedep.io/axios-npm-supply-chain-compromise/
🫡2
#книга дня

Невозможно было пройти мимо, обязательно к прочтению!
17🤩10🫡1
#такое дня

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

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

#optical #illusion #perception #design #бородач
👍102
#заметка дня

Чем отличаются auto-fit и auto-fill в гридах?

Отвечает Александр Друзь.

Функцию repeat используют чтобы не писать повторяющиеся определения колонок или строк. Помимо конкретного их числа, можно задать и автоматическое их заполнение при помощи пресловутых auto-fit и auto-fill, сравните на иллюстрации. Тут можно было бы и закончить :)

Так в чем же разница, словами? :)

При использовании repeat движок гридов создает столько колонок или строк, сколько вообще может уместиться в заданные рамки. Отличие fit от fill буквально в том, что fill задаст контенту минимально возможный размер, сохранив "фантомные", незаполненные, в примере, колонки. А fit — заполнит (впишет) контент, схлопнув те самые фантомные колонки.

В общем, всё довольно просто.

#css #grid #repeat #бородач
6👍3
#такое дня

Олды тут?

#бородач
🫡17🤩2
#заметка дня

Модераторы Apple отклонили мой пульт, соответственно, не приняв его в магазин.

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

А я ведь им соточку занёс, и вовсе не рублей!

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

Вот только проблема с теми пультами довольно прозаична: они все требуют подписку. 7 долларов в неделю за пользование посредственным приложением — а, каково?! Весь их бизнес построен либо на отмывании денег, либо на забывчивости людей (примерно как большое количество сервисов резюме).

Но Apple такая ситуация полностью устраивает, 15-30% капают же, почему нет.

Ладно, отбомбившись, я посмотрел ещё раз и решил реализовать некоторые вещи, которые хотел вынести в обновления: визард подключения, переключение между несколькими телевизорами, «умные» сцены вроде включить ТВ и нетфликс, или выключить ТВ через заданное количество минут. На подходе макросы.

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

Пульт сейчас в TestFlight, если у кого есть дома телевизор Samsung или LG — отмечайтесь в комментариях, пришлю приглашение. Пульт никаких данных не собирает вообще, в том и была задумка.

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

P. S. Если я всё верно понял, вот и ссылка на TestFlight: https://testflight.apple.com/join/XXPPYAHN

#apple #flutter
👍1710