#такое дня
Я тут взялся оптимизировать один проект на 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
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Кому адекватной современной виртуализации списков?
Как-то так повелось, что задача отрисовки десятков, и даже сотен тысяч строк или ячеек на экране решается... волнами. Появляется решение, принимается всеми, а потом — буквально забрасывается. И вот мы годами ждём обновления того же react-window просто чтобы получить возможность рендерить строки разной высоты из коробки. А react-window сам по себе был и является рекомендованной заменой react-virtualized.
В других фреймворках и ванильных средах ситуация ещё веселее.
При этом разработчики, например, мобильных приложений на тех же Flutter и SwiftUI в принципе лишены этой проблемы, просто потому что им надо заботиться о рендере элементов самостоятельно, заранее объявляя, что тут должен быть скролл. Насильная виртуализация, так сказать.
Если вы были застигнуты врасплох моими утверждениями и не понимаете вообще, о чём я, то вкратце поясню: чтобы дать возможность человеку поскроллить тысячи и сотни тысяч объектов на экране, совсем не обязательно отрисовывать их все разом. Можно отрисовать штук 10-20 строк, заполнив экран, и просто переиспользовать эти элементы раз за разом. Виртуальные списки, буквально.
Итак, для чего я всё это пишу? А вот: вашему вниманию предъявляется универсальная библиотека виртуализации списков virtua.
GitHub: https://github.com/inokawa/virtua
Умеет в динамические высоты строк из коробки! Умеет в бесконечный скролл. Умеет занимать всю высоту окна. Умеет в RSC.
Ну и не ограничивается одним только React: Vue, Solid и Svelte тоже поддерживаются.
Отличное современное решение.
#scroll #virtual
Кому адекватной современной виртуализации списков?
Как-то так повелось, что задача отрисовки десятков, и даже сотен тысяч строк или ячеек на экране решается... волнами. Появляется решение, принимается всеми, а потом — буквально забрасывается. И вот мы годами ждём обновления того же react-window просто чтобы получить возможность рендерить строки разной высоты из коробки. А react-window сам по себе был и является рекомендованной заменой react-virtualized.
В других фреймворках и ванильных средах ситуация ещё веселее.
При этом разработчики, например, мобильных приложений на тех же Flutter и SwiftUI в принципе лишены этой проблемы, просто потому что им надо заботиться о рендере элементов самостоятельно, заранее объявляя, что тут должен быть скролл. Насильная виртуализация, так сказать.
Если вы были застигнуты врасплох моими утверждениями и не понимаете вообще, о чём я, то вкратце поясню: чтобы дать возможность человеку поскроллить тысячи и сотни тысяч объектов на экране, совсем не обязательно отрисовывать их все разом. Можно отрисовать штук 10-20 строк, заполнив экран, и просто переиспользовать эти элементы раз за разом. Виртуальные списки, буквально.
Итак, для чего я всё это пишу? А вот: вашему вниманию предъявляется универсальная библиотека виртуализации списков virtua.
GitHub: https://github.com/inokawa/virtua
Умеет в динамические высоты строк из коробки! Умеет в бесконечный скролл. Умеет занимать всю высоту окна. Умеет в RSC.
Ну и не ограничивается одним только React: Vue, Solid и Svelte тоже поддерживаются.
Отличное современное решение.
#scroll #virtual
This media is not supported in your browser
VIEW IN TELEGRAM
#красивое дня
Угадайте, что красиво летит по небу и укладывается в 249 символов?
Правильно, SpaceX Starship!
Не, ну правда:
Это валидный код шейдера на GLSL для приложения Twigl: https://twigl.app/?ol=true&ss=-OGqcXbWDIJun2QTR4Cm
Они буквально конкуренты Shadertoy, и тот и другой — онлайн-инструменты для мгновенной проверки и рисования шейдеров на языке GLSL.
Вот, кстати, пример на Shadertoy: https://www.shadertoy.com/view/XX3fDH
В этом варианте ещё и камера дрожит.
Красиво? Не то слово!
#shader #glsl #3d
Угадайте, что красиво летит по небу и укладывается в 249 символов?
Правильно, SpaceX Starship!
Не, ну правда:
vec2 p=(FC.xy-r*.5)/r.y*mat2(8,-6,6,8),v;for(float i,f=3.+snoise2D(p+vec2(t*7.,0));i++<50.;o+=(cos(sin(i)*vec4(1,2,3,1))+1.)*exp(sin(i*i+t))/length(max(v,vec2(v.x*f*.02,v.y))))v=p+cos(i*i+(t+p.x*.1)*.03+i*vec2(11,9))*5.;o=tanh(pow(o/1e2,vec4(1.5)));
Это валидный код шейдера на GLSL для приложения Twigl: https://twigl.app/?ol=true&ss=-OGqcXbWDIJun2QTR4Cm
Они буквально конкуренты Shadertoy, и тот и другой — онлайн-инструменты для мгновенной проверки и рисования шейдеров на языке GLSL.
Вот, кстати, пример на Shadertoy: https://www.shadertoy.com/view/XX3fDH
В этом варианте ещё и камера дрожит.
Красиво? Не то слово!
#shader #glsl #3d
#инструмент дня
Вы знаете мою любовь к странным браузерам. Мы с вами запускали и Midori, чтобы отлаживать баги Safari/WebKit в Linux и Windows, и Ladybird, и Servo.
И если последние два сравнительно современные проекты, которые заодно ещё и получают мощное финансирование со стороны разных организаций, хотелось бы напомнить, что есть ещё смелые люди.
Например — браузер Dillo, которому недавно исполнилось 25 лет. Наверное, за 25 лет его научили всем трюкам?
Ну, вообще, нет. Да и цели такой не стояло. Пишется он по большей части для развлечения и некого... гуманитарного аспекта. Чтобы люди со слабыми машинами и соединением могли ту же википедию почитать. Ну или в виртуалке запустить документацию, в условиях ограниченных ресурсов.
Тем не менее, в честь 25 летия автор выпустил обновление — Dillo 3.2, в котором браузер научили поддержке webp, SVG, MathML, зуму через Ctrl+. И даже CSS-единицам вроде ch, rem, vw, vh, vmin, vmax.
С одной стороны, конечно, возникает логичный вопрос: «Кому это нужно-то вообще?», с другой — какое-то сообщество вокруг браузера сфомировано, люди пробуют свои силы в чём-то новом. Патч в Chrome вряд ли просто так зашлёшь, а в Dillo или Ladybird — почему бы и нет. Отличный дипломный проект, в том числе.
Ваши мнения, котаны?
#browser #engine #dillo
Вы знаете мою любовь к странным браузерам. Мы с вами запускали и Midori, чтобы отлаживать баги Safari/WebKit в Linux и Windows, и Ladybird, и Servo.
И если последние два сравнительно современные проекты, которые заодно ещё и получают мощное финансирование со стороны разных организаций, хотелось бы напомнить, что есть ещё смелые люди.
Например — браузер Dillo, которому недавно исполнилось 25 лет. Наверное, за 25 лет его научили всем трюкам?
Ну, вообще, нет. Да и цели такой не стояло. Пишется он по большей части для развлечения и некого... гуманитарного аспекта. Чтобы люди со слабыми машинами и соединением могли ту же википедию почитать. Ну или в виртуалке запустить документацию, в условиях ограниченных ресурсов.
Тем не менее, в честь 25 летия автор выпустил обновление — Dillo 3.2, в котором браузер научили поддержке webp, SVG, MathML, зуму через Ctrl+. И даже CSS-единицам вроде ch, rem, vw, vh, vmin, vmax.
С одной стороны, конечно, возникает логичный вопрос: «Кому это нужно-то вообще?», с другой — какое-то сообщество вокруг браузера сфомировано, люди пробуют свои силы в чём-то новом. Патч в Chrome вряд ли просто так зашлёшь, а в Dillo или Ladybird — почему бы и нет. Отличный дипломный проект, в том числе.
Ваши мнения, котаны?
#browser #engine #dillo
#расширение дня
Писать e2e-тесты — важная часть разработки. Но иногда кажется, что бакенд специально делает все, чтобы их невозможно было подготовить:
😡 спека меняется на лету
🤬 методы недописаны
👿 половина API не работает или вообще отсутствует.
В итоге время тратится не на разработку, а на попытки договориться с сервером.
Чтобы не зависеть от нестабильного бекенда и вообще спокойно продолжать разработку, можно использовать такие инструменты, как Requestly.
Это расширение для браузера, которое позволяет подменять запросы и ответы, редактировать заголовки или даже подгружать локальные данные вместо серверных.
Например, можно настроить подмену API-ответов на заранее подготовленные JSON’ы. Это помогает проверить логику приложения и писать тесты, даже если реальный сервер недоступен или работает нестабильно.
Обратите внимание, что расширение работает на подмене ответа уже после выполнения запроса, поэтому во вкладке Network структура останется неизменной.
Инструмент полезен не только для тестирования, но и в повседневной разработке — особенно когда работаешь с командой, где бакенд часто не успевает за фронтом.
А какие у вас способы справляться с подобными проблемами?
#api #extention #chrome
Писать e2e-тесты — важная часть разработки. Но иногда кажется, что бакенд специально делает все, чтобы их невозможно было подготовить:
😡 спека меняется на лету
🤬 методы недописаны
👿 половина API не работает или вообще отсутствует.
В итоге время тратится не на разработку, а на попытки договориться с сервером.
Чтобы не зависеть от нестабильного бекенда и вообще спокойно продолжать разработку, можно использовать такие инструменты, как Requestly.
Это расширение для браузера, которое позволяет подменять запросы и ответы, редактировать заголовки или даже подгружать локальные данные вместо серверных.
Например, можно настроить подмену API-ответов на заранее подготовленные JSON’ы. Это помогает проверить логику приложения и писать тесты, даже если реальный сервер недоступен или работает нестабильно.
Обратите внимание, что расширение работает на подмене ответа уже после выполнения запроса, поэтому во вкладке Network структура останется неизменной.
Инструмент полезен не только для тестирования, но и в повседневной разработке — особенно когда работаешь с командой, где бакенд часто не успевает за фронтом.
А какие у вас способы справляться с подобными проблемами?
#api #extention #chrome
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Не понимаешь гриды? Не проблема!
Ведь есть конструкторы. Например, https://cssgridgenerator.io/
Задал начальные условия, поперетаскивал мышкой блоки — и готово! Забирай CSS.
А для любителей Tailwind — присутствует аналогичный проект https://www.tailwindgen.com/, он просто распихает нужные классы по блокам. Ноль забот.
Кстати, о Tailwind. На днях вышла его четвёртая версия. Ещё меньше конфигурации (ну, буквально не нужна для старта), новые утилиты для работы с transform, поддержка контейнерных запросов и интеграция с Vite.
#css #grid #tailwind
Не понимаешь гриды? Не проблема!
Ведь есть конструкторы. Например, https://cssgridgenerator.io/
Задал начальные условия, поперетаскивал мышкой блоки — и готово! Забирай CSS.
А для любителей Tailwind — присутствует аналогичный проект https://www.tailwindgen.com/, он просто распихает нужные классы по блокам. Ноль забот.
Кстати, о Tailwind. На днях вышла его четвёртая версия. Ещё меньше конфигурации (ну, буквально не нужна для старта), новые утилиты для работы с transform, поддержка контейнерных запросов и интеграция с Vite.
#css #grid #tailwind
#инструмент дня
Типичная айтишная история: кто-то на митинге шарит сверхширокий экран. Или вроде бы шарит окно, но забывается и растягивает его до невообразимого размера.
А коллеги с ноутбуками и телефонами страдают! Всё мелко, картинка сыпется.
Конечно, можно шарить с ноутбука, но я могу понять неудобство.
Есть сумасшедшие, кто с десктопа вообще сидит!
Поэтому, предлагаю решение! Виртуальный монитор, буквально.
Для macOS, например, это будет DeskPad: https://github.com/Stengo/DeskPad
Как работает? Создаёт окошко, которое будет работать как виртуальный монитор заранее заданного разрешения. Туда просто перетаскивается нужное приложение и шарится.
Для других ОС наверняка есть аналогичные решения. Если кто-то знает — накидайте в комментариях, я попозже и сам принесу.
Пошарил — и никаких проблем, работай как работается. И коллегам приятно.
#macos #display #remote
Типичная айтишная история: кто-то на митинге шарит сверхширокий экран. Или вроде бы шарит окно, но забывается и растягивает его до невообразимого размера.
А коллеги с ноутбуками и телефонами страдают! Всё мелко, картинка сыпется.
Конечно, можно шарить с ноутбука, но я могу понять неудобство.
Есть сумасшедшие, кто с десктопа вообще сидит!
Поэтому, предлагаю решение! Виртуальный монитор, буквально.
Для macOS, например, это будет DeskPad: https://github.com/Stengo/DeskPad
Как работает? Создаёт окошко, которое будет работать как виртуальный монитор заранее заданного разрешения. Туда просто перетаскивается нужное приложение и шарится.
Для других ОС наверняка есть аналогичные решения. Если кто-то знает — накидайте в комментариях, я попозже и сам принесу.
Пошарил — и никаких проблем, работай как работается. И коллегам приятно.
#macos #display #remote
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Вот как вы чаще всего распространяете свои компоненты для всякого рода тулбаров? Наверняка, группы кнопок или, например, кнопка и текстовое поле будут в своём контейнере.
Вставляете этот контейнер в какой-нибудь флекс или грид и получаете... херню получаете, потому что содержимое вашего контейнера подчиняться внешнему флексу или гриду и не собирается.
Но есть решение! Правило
Демо: https://codepen.io/alinaki/pen/abeOjKw
Статья на тему от Ахмада Шадида: https://ishadeed.com/article/display-contents/
Пугаться данных на caniuse.com не надо: смотрите сноску о доступности.
Не рекомендую разворачивать таким способом значащие элементы вроде кнопок, таблиц, заголовков. А вот дивы — милое дело.
Да, ваш любимый TailwindCSS тоже в курсе: https://tailwindcss.com/docs/display#contents
Спасибо Весу Босу за напоминание об этом.
#css #display #contents #бородач
Вот как вы чаще всего распространяете свои компоненты для всякого рода тулбаров? Наверняка, группы кнопок или, например, кнопка и текстовое поле будут в своём контейнере.
Вставляете этот контейнер в какой-нибудь флекс или грид и получаете... херню получаете, потому что содержимое вашего контейнера подчиняться внешнему флексу или гриду и не собирается.
Но есть решение! Правило
display: contents буквально развернёт контейнер и предоставит внешнему потоку полный контроль над компонентами внутри. Это реально самая мозговзрывающая вещь на сегодня.Демо: https://codepen.io/alinaki/pen/abeOjKw
Статья на тему от Ахмада Шадида: https://ishadeed.com/article/display-contents/
Пугаться данных на caniuse.com не надо: смотрите сноску о доступности.
Не рекомендую разворачивать таким способом значащие элементы вроде кнопок, таблиц, заголовков. А вот дивы — милое дело.
Да, ваш любимый TailwindCSS тоже в курсе: https://tailwindcss.com/docs/display#contents
Спасибо Весу Босу за напоминание об этом.
#css #display #contents #бородач
Forwarded from Дмитрий Раздобудько
Важно дополнить, что не стоит использовать contents на интерактивных элементах: кнопки и пр. Т.к. их банально не будет видно, в фокус не поймаешь, табом не поймаешь, ридеры тоже, скорее всего, не прочитают.
Также не стоит вешать на элемент с таким свойством что-то, что определяет его позицию для каких-либо действий (например, Intersection Observer) - тоже не сработает
Также не стоит вешать на элемент с таким свойством что-то, что определяет его позицию для каких-либо действий (например, Intersection Observer) - тоже не сработает
Живете в Европе, а работаете на компанию из России удалённо? Тогда вам уже знакомы две самые частые проблемы при выводе денежных выплат:
1️⃣ Как заключить контракт с заказчиком без упоминания РФ? За привязку к России в Европе сегодня не похвалят.
2️⃣ Как правильно платить налоги, в России или в стране проживания? Можно потерять значительные суммы, если отсутствует соглашение о двойном налогообложении.
Для всего этого есть одно удобное решение — сервис Stape. Оформляем контракт с юрлицом из США — никаких опасных связей с РФ в официальных документах.
А также Stape помогает быстро, а главное — легально переводить деньги, отправленные из стран со сложностями с классическими банковскими переводами, на свой счёт в банке или криптокошелёк. Вы сможете:
📍свободно распоряжаться заработанными средствами,
📍выгодно платить налоги,
📍закрывать операции официальными документами.
📍Все функции сервиса доступны онлайн.
Переходите в Телеграм-канал сервиса, чтобы узнать больше о Stape — максимум пользы для тех, кто работает с зарубежными заказчиками.
Для всего этого есть одно удобное решение — сервис Stape. Оформляем контракт с юрлицом из США — никаких опасных связей с РФ в официальных документах.
А также Stape помогает быстро, а главное — легально переводить деньги, отправленные из стран со сложностями с классическими банковскими переводами, на свой счёт в банке или криптокошелёк. Вы сможете:
📍свободно распоряжаться заработанными средствами,
📍выгодно платить налоги,
📍закрывать операции официальными документами.
📍Все функции сервиса доступны онлайн.
Переходите в Телеграм-канал сервиса, чтобы узнать больше о Stape — максимум пользы для тех, кто работает с зарубежными заказчиками.
Please open Telegram to view this post
VIEW IN TELEGRAM
#инструмент дня
Что-то я насмотрелся на мучения семьи и коллег в отношении составления резюме, и решил поискать, а нет ли готовых бесплатных решений?
Кроме экспорта из линкедина, конечно.
Кругом какие-то скрытые подписки, ограниченные платные скачивания, дурацкие шаблоны...
С одной стороны, можно и Google Docs обойтись. С другой, процесс оттачивания резюме в процессе поиска работы может, мягко говоря, раздражать. HR'ы нынче капризные, хотят опыт и баззворды только под нужную вакансию, а больше ничего не хотят.
И такой инструмент нашёлся! Reactive Resume: https://github.com/AmruthPillai/Reactive-Resume
Открытый проект на React и Nest.js на бакенде. Можно запустить локально, можно захостить. А можно воспользоваться и сайтом: https://rxresu.me/
Сайт работает на донатах, потому, возможно, запустить локально будет более разумным решением.
В общем, счастье соискателя — вот оно, рядом. Да и к контрибушенам проект открыт :)
#nestjs #react #resume
Что-то я насмотрелся на мучения семьи и коллег в отношении составления резюме, и решил поискать, а нет ли готовых бесплатных решений?
Кроме экспорта из линкедина, конечно.
Кругом какие-то скрытые подписки, ограниченные платные скачивания, дурацкие шаблоны...
С одной стороны, можно и Google Docs обойтись. С другой, процесс оттачивания резюме в процессе поиска работы может, мягко говоря, раздражать. HR'ы нынче капризные, хотят опыт и баззворды только под нужную вакансию, а больше ничего не хотят.
И такой инструмент нашёлся! Reactive Resume: https://github.com/AmruthPillai/Reactive-Resume
Открытый проект на React и Nest.js на бакенде. Можно запустить локально, можно захостить. А можно воспользоваться и сайтом: https://rxresu.me/
Сайт работает на донатах, потому, возможно, запустить локально будет более разумным решением.
В общем, счастье соискателя — вот оно, рядом. Да и к контрибушенам проект открыт :)
#nestjs #react #resume
This media is not supported in your browser
VIEW IN TELEGRAM
#заметка дня
Автор прекрасной борды tldraw.com выложил вопрос-демонстрацию: «Как же отличить мышь от тачпада?» Ведь они, по мнению браузера, вроде как одно устройство ввода.
И на видео чётко видно, что на тачпаде скроллить во всех направлениях получается точнее, сильно точнее, чем мышью.
И ответ-то на самом деле кроется в вопросе: тачпад действительно отдаёт браузеру гораздо меньшее значение дельты (разницу в скролле между двумя опросами состояния), чем мышь.
И ему вроде даже дали ответ на StackOverflow: https://stackoverflow.com/questions/10744645/detect-touchpad-vs-mouse-in-javascript
Приложу сюда кратчайший сниппет:
И пример: https://jsfiddle.net/ucLe3hLa/
Вот только из мышей у меня имеется Logitech MX Master 3 и её колёсико... слишком плавное. Даже в дискретном режим. Браузер опять же определяет её как тачпад :)
В общем, счастья нет. Действительно рабочего способа отличить мышь от тачпада — не существует.
Потому предлагайте пользователям мыши другие способы взаимодействия с холстом, если речь о борде или вращении камеры. Кликнуть-и-потянуть на мышке всё ещё удобнее, чем скроллить в разные стороны.
#mouse #touchpad #event
Автор прекрасной борды tldraw.com выложил вопрос-демонстрацию: «Как же отличить мышь от тачпада?» Ведь они, по мнению браузера, вроде как одно устройство ввода.
И на видео чётко видно, что на тачпаде скроллить во всех направлениях получается точнее, сильно точнее, чем мышью.
И ответ-то на самом деле кроется в вопросе: тачпад действительно отдаёт браузеру гораздо меньшее значение дельты (разницу в скролле между двумя опросами состояния), чем мышь.
И ему вроде даже дали ответ на StackOverflow: https://stackoverflow.com/questions/10744645/detect-touchpad-vs-mouse-in-javascript
Приложу сюда кратчайший сниппет:
var isTrackpad = false;
if (e.wheelDeltaY) {
if (e.wheelDeltaY === (e.deltaY * -3)) {
isTrackpad = true;
}
}
else if (e.deltaMode === 0) {
isTrackpad = true;
}
console.log(isTrackpad ? "Trackpad detected" : "Mousewheel detected");
}
document.addEventListener("mousewheel", detectTrackPad, false);
document.addEventListener("DOMMouseScroll", detectTrackPad, false);
И пример: https://jsfiddle.net/ucLe3hLa/
Вот только из мышей у меня имеется Logitech MX Master 3 и её колёсико... слишком плавное. Даже в дискретном режим. Браузер опять же определяет её как тачпад :)
В общем, счастья нет. Действительно рабочего способа отличить мышь от тачпада — не существует.
Потому предлагайте пользователям мыши другие способы взаимодействия с холстом, если речь о борде или вращении камеры. Кликнуть-и-потянуть на мышке всё ещё удобнее, чем скроллить в разные стороны.
#mouse #touchpad #event
#инструмент дня
AI-парсинг (скрейпинг, скраппинг) сайтов набирает обороты, но классические утилиты никто не отменял.
И среди таких утилит очень выделяется pipet: https://github.com/bjesus/pipet
Создаем pipet-файл:
Ну и запускаем:
pipet hackernews.pipet
Красота? Не то слово. Более того, утилита умеет рендерить сразу в шаблоны, напоминающие Mustache:
Ясное дело, никто не отменяет и ИИ прикрутить, если так надо :) Ну а вообще, поддерживаются пайпы, потому результат любой строки конфигурации можно пропустить через что угодно вообще. Да и запуск возможен не только curl-ом, но и Playwright.
В общем, я впечатлен. Надо брать.
#go #parser #scraping
AI-парсинг (скрейпинг, скраппинг) сайтов набирает обороты, но классические утилиты никто не отменял.
И среди таких утилит очень выделяется pipet: https://github.com/bjesus/pipet
Создаем pipet-файл:
curl https://news.ycombinator.com/
.title .titleline
span > a
.sitebit aНу и запускаем:
pipet hackernews.pipet
Красота? Не то слово. Более того, утилита умеет рендерить сразу в шаблоны, напоминающие Mustache:
<ul>
{{range $index, $item := index (index . 0) 0}}
<li>{{index $item 0}} ({{index $item 1}})</li>
{{end}}
</ul>
Ясное дело, никто не отменяет и ИИ прикрутить, если так надо :) Ну а вообще, поддерживаются пайпы, потому результат любой строки конфигурации можно пропустить через что угодно вообще. Да и запуск возможен не только curl-ом, но и Playwright.
В общем, я впечатлен. Надо брать.
#go #parser #scraping