#заметка дня
Модераторы Apple отклонили мой пульт, соответственно, не приняв его в магазин.
Причина звучит обидно и стыдно: 4.3 Spam. И означать это может всё, что угодно: от того, что использованы чужие закопирайченные ассеты и до того, что я просто взял рандомное приложение с гитхаба и собрал его.
А я ведь им соточку занёс, и вовсе не рублей!
Каюсь, логотипы приложений были взяты с сайта Самсунга, было глупо их не менять. Единственная ли это причина — неизвестно. Возможно, слишком много пультов развелось.
Вот только проблема с теми пультами довольно прозаична: они все требуют подписку. 7 долларов в неделю за пользование посредственным приложением — а, каково?! Весь их бизнес построен либо на отмывании денег, либо на забывчивости людей (примерно как большое количество сервисов резюме).
Но Apple такая ситуация полностью устраивает, 15-30% капают же, почему нет.
Ладно, отбомбившись, я посмотрел ещё раз и решил реализовать некоторые вещи, которые хотел вынести в обновления: визард подключения, переключение между несколькими телевизорами, «умные» сцены вроде включить ТВ и нетфликс, или выключить ТВ через заданное количество минут. На подходе макросы.
Вся суть действий — превратить копию физического устройства в нечто большее, в подобие некоторого умного хаба. Во что-то, напоминающее сервис.
Пульт сейчас в TestFlight, если у кого есть дома телевизор Samsung или LG — отмечайтесь в комментариях, пришлю приглашение. Пульт никаких данных не собирает вообще, в том и была задумка.
Но даже подача приложения на ревью это отдельная история: то размеры скриншотов не те, то видео. Потому в последующих постах я выложу разные полезные сниппеты и подходы, которые помогли мне пройти подачу как минимум до модерации. Надеюсь, получится и дальше.
P. S. Если я всё верно понял, вот и ссылка на TestFlight: https://testflight.apple.com/join/XXPPYAHN
#apple #flutter
Модераторы Apple отклонили мой пульт, соответственно, не приняв его в магазин.
Причина звучит обидно и стыдно: 4.3 Spam. И означать это может всё, что угодно: от того, что использованы чужие закопирайченные ассеты и до того, что я просто взял рандомное приложение с гитхаба и собрал его.
А я ведь им соточку занёс, и вовсе не рублей!
Каюсь, логотипы приложений были взяты с сайта Самсунга, было глупо их не менять. Единственная ли это причина — неизвестно. Возможно, слишком много пультов развелось.
Вот только проблема с теми пультами довольно прозаична: они все требуют подписку. 7 долларов в неделю за пользование посредственным приложением — а, каково?! Весь их бизнес построен либо на отмывании денег, либо на забывчивости людей (примерно как большое количество сервисов резюме).
Но Apple такая ситуация полностью устраивает, 15-30% капают же, почему нет.
Ладно, отбомбившись, я посмотрел ещё раз и решил реализовать некоторые вещи, которые хотел вынести в обновления: визард подключения, переключение между несколькими телевизорами, «умные» сцены вроде включить ТВ и нетфликс, или выключить ТВ через заданное количество минут. На подходе макросы.
Вся суть действий — превратить копию физического устройства в нечто большее, в подобие некоторого умного хаба. Во что-то, напоминающее сервис.
Пульт сейчас в TestFlight, если у кого есть дома телевизор Samsung или LG — отмечайтесь в комментариях, пришлю приглашение. Пульт никаких данных не собирает вообще, в том и была задумка.
Но даже подача приложения на ревью это отдельная история: то размеры скриншотов не те, то видео. Потому в последующих постах я выложу разные полезные сниппеты и подходы, которые помогли мне пройти подачу как минимум до модерации. Надеюсь, получится и дальше.
P. S. Если я всё верно понял, вот и ссылка на TestFlight: https://testflight.apple.com/join/XXPPYAHN
#apple #flutter
👍18❤10
#статья дня
Разработчики Microsoft Edge очень любят доставать разные экспериментальные фишки и включать их. Чем и живут. Но в этот раз они пошли дальше!
Вашему вниманию представляется focusgroup: https://blogs.windows.com/msedgedev/2026/03/05/making-keyboard-navigation-effortless/
Что делает? А довольно крутую штуку: внутри группы фокус элементов можно будет передвигать клавиатурными стрелками, а не только табом. Захват фокуса произойдёт автоматически, не надо городить скрипты.
В блоге Chrome они тоже отметились: https://developer.chrome.com/blog/focusgroup-rfc
Потестировать можно уже сегодня в Chromium-браузерах: включаете Experimental Web Platform features в about://flags и дальше тут: https://microsoftedge.github.io/Demos/focusgroup/
Очень жду распространения, поддержка клавиатурной навигации штука сложная.
#focus #a11y
Разработчики Microsoft Edge очень любят доставать разные экспериментальные фишки и включать их. Чем и живут. Но в этот раз они пошли дальше!
Вашему вниманию представляется focusgroup: https://blogs.windows.com/msedgedev/2026/03/05/making-keyboard-navigation-effortless/
Что делает? А довольно крутую штуку: внутри группы фокус элементов можно будет передвигать клавиатурными стрелками, а не только табом. Захват фокуса произойдёт автоматически, не надо городить скрипты.
В блоге Chrome они тоже отметились: https://developer.chrome.com/blog/focusgroup-rfc
Потестировать можно уже сегодня в Chromium-браузерах: включаете Experimental Web Platform features в about://flags и дальше тут: https://microsoftedge.github.io/Demos/focusgroup/
Очень жду распространения, поддержка клавиатурной навигации штука сложная.
#focus #a11y
❤9👍3
#инструмент дня
YouTube в 4k в независимом браузере? Да!
Я уже давно посвящаю вас в процесс разработки браузера Ladybird — нового и независимого. Но что-то давно не присылал обновлений. А их полно!
Вот из апрельской рассылки: https://ladybird.org/newsletter/2026-03-31/
В мартовском апдейте Ladybird много простых, но важных вещей. За месяц замержили 352 PR’а от 49 контрибьюторов, причём 19 из них — это люди, которые раньше в проект не коммитили. В целом видно, что разработка идёт непрерывно и без провалов по активности.
Из заметного по движку — добавили AsmInt, свой байткод-интерпретатор на ассемблере для LibJS. Он берёт на себя операции вроде арифметики и сравнений, а в более сложных случаях уже уходит в C++. Параллельно его допиливали в течение месяца: убирали лишние проверки, использовали аппаратные флаги переполнения, кэшировали часто используемые значения. На этом фоне бенчмарки подросли: Kraken ~1.44×, Octane ~1.37×, SunSpider ~1.69×.
Добавили часть Media Source Extensions — теперь есть поддержка VP9 и Opus в WebM, за счёт чего начинает работать выбор качества на YouTube, вплоть до 4K. Пока это доступно только с флагом --expose-experimental-interfaces, и есть проблемы с памятью (буфер не очищается), но сама связка уже функционирует.
В остальном месяц прошёл в доработках и оптимизациях: продолжали шлифовать новый интерпретатор, подтягивали производительность в разных местах и постепенно расширяли поддержку веб-фич.
А главное, собрать его очень легко. Ну, если вы в принципе имеете C++ Toolchain на вашей машине. Главное, cmake поставить не забудьте :)
Ну или я могу скинуть билд под мак. Как раз собираю сейчас.
#ladybird #browser
YouTube в 4k в независимом браузере? Да!
Я уже давно посвящаю вас в процесс разработки браузера Ladybird — нового и независимого. Но что-то давно не присылал обновлений. А их полно!
Вот из апрельской рассылки: https://ladybird.org/newsletter/2026-03-31/
В мартовском апдейте Ladybird много простых, но важных вещей. За месяц замержили 352 PR’а от 49 контрибьюторов, причём 19 из них — это люди, которые раньше в проект не коммитили. В целом видно, что разработка идёт непрерывно и без провалов по активности.
Из заметного по движку — добавили AsmInt, свой байткод-интерпретатор на ассемблере для LibJS. Он берёт на себя операции вроде арифметики и сравнений, а в более сложных случаях уже уходит в C++. Параллельно его допиливали в течение месяца: убирали лишние проверки, использовали аппаратные флаги переполнения, кэшировали часто используемые значения. На этом фоне бенчмарки подросли: Kraken ~1.44×, Octane ~1.37×, SunSpider ~1.69×.
Добавили часть Media Source Extensions — теперь есть поддержка VP9 и Opus в WebM, за счёт чего начинает работать выбор качества на YouTube, вплоть до 4K. Пока это доступно только с флагом --expose-experimental-interfaces, и есть проблемы с памятью (буфер не очищается), но сама связка уже функционирует.
В остальном месяц прошёл в доработках и оптимизациях: продолжали шлифовать новый интерпретатор, подтягивали производительность в разных местах и постепенно расширяли поддержку веб-фич.
А главное, собрать его очень легко. Ну, если вы в принципе имеете C++ Toolchain на вашей машине. Главное, cmake поставить не забудьте :)
Ну или я могу скинуть билд под мак. Как раз собираю сейчас.
#ladybird #browser
❤3🫡2👍1
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
В CSS есть ключевое слово safe, которое используется вместе со значениями выравнивания и не даёт контенту «вылезать» за границы контейнера. Если элемент не помещается при обычном выравнивании, браузер автоматически смещает его так, чтобы он оставался видимым.
Это удобно в адаптивных интерфейсах, где размеры могут меняться и важно не терять доступ к содержимому. safe работает с flexbox, grid и свойствами вроде align-items, justify-content и другими.
Простой пример:
Здесь элементы будут центрироваться, но если не помещаются, выравнивание изменится так, чтобы их не обрезало.
Подробнее читать тут: https://iprodan.dev/l/safe-alignment/
#css #flex #safe
В CSS есть ключевое слово safe, которое используется вместе со значениями выравнивания и не даёт контенту «вылезать» за границы контейнера. Если элемент не помещается при обычном выравнивании, браузер автоматически смещает его так, чтобы он оставался видимым.
Это удобно в адаптивных интерфейсах, где размеры могут меняться и важно не терять доступ к содержимому. safe работает с flexbox, grid и свойствами вроде align-items, justify-content и другими.
Простой пример:
.container {
display: flex;
justify-content: safe center;
}
Здесь элементы будут центрироваться, но если не помещаются, выравнивание изменится так, чтобы их не обрезало.
Подробнее читать тут: https://iprodan.dev/l/safe-alignment/
#css #flex #safe
❤21
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
У скроллящегося сайдбара можно сделать fade по краям так, чтобы пункты меню как будто уходили под градиент сверху и снизу. И сделать это красиво.
Сразу пример со всем кодом и описанием: https://codepen.io/editor/alinaki/pen/019d954a-79e7-7e49-8653-181b0b67ad61
Для этого используется mask-image, а управляет всем scroll timeline: скролл контейнера становится прогрессом CSS-анимации. Дальше анимация меняет стопы градиента в маске, поэтому в начале верхний fade выключен, после начала прокрутки появляется, а в конце исчезает нижний.
Важный момент в том, что здесь не двигается сам градиент и не меняется opacity списка. Меняются именно стопы градиента, и из-за этого fade ведёт себя как часть скролла, а не как отдельный декоративный слой.
Если хочется понять глубже, смотреть стоит в сторону animation-timeline, scroll-timeline и обзора scroll-driven animations.
Upd. добавил светлую тему, чтобы разница была виднее.
#css #scroll
У скроллящегося сайдбара можно сделать fade по краям так, чтобы пункты меню как будто уходили под градиент сверху и снизу. И сделать это красиво.
Сразу пример со всем кодом и описанием: https://codepen.io/editor/alinaki/pen/019d954a-79e7-7e49-8653-181b0b67ad61
Для этого используется mask-image, а управляет всем scroll timeline: скролл контейнера становится прогрессом CSS-анимации. Дальше анимация меняет стопы градиента в маске, поэтому в начале верхний fade выключен, после начала прокрутки появляется, а в конце исчезает нижний.
@keyframes sidebar-fade-mask {
0% { --fade-top-end: 0%; --fade-bottom-start: 94%; --fade-bottom-end: 99%; }
8%, 92% { --fade-top-end: 6%; --fade-bottom-start: 94%; --fade-bottom-end: 99%; }
100% { --fade-top-end: 6%; --fade-bottom-start: 100%; --fade-bottom-end: 100%; }
}
.menu-scroll {
animation: sidebar-fade-mask auto linear both;
animation-timeline: scroll(self block);
mask-image: linear-gradient(
to bottom,
transparent 0%,
#000 var(--fade-top-end),
#000 var(--fade-bottom-start),
transparent var(--fade-bottom-end)
);
}
Важный момент в том, что здесь не двигается сам градиент и не меняется opacity списка. Меняются именно стопы градиента, и из-за этого fade ведёт себя как часть скролла, а не как отдельный декоративный слой.
Если хочется понять глубже, смотреть стоит в сторону animation-timeline, scroll-timeline и обзора scroll-driven animations.
Upd. добавил светлую тему, чтобы разница была виднее.
#css #scroll
👍20❤3🤩2
#фишка дня
Надоело угадывать высоту строки, чтобы текст стал высотой ровно в прописную букву? Say no more!
И вы великолепны.
P. S. ещё более вы великолепны, если Safari версии больше 17.2 включительно.
#css #бородач
Надоело угадывать высоту строки, чтобы текст стал высотой ровно в прописную букву? Say no more!
line-height: 1cap;
И вы великолепны.
P. S. ещё более вы великолепны, если Safari версии больше 17.2 включительно.
#css #бородач
❤16
Будни разработчика
#событие дня Я понятия не имею, как я пропустил! Итак, соревнование March MadCSS! 16 лучших фронтенд-разработчиков схлестнутся в жаркой битве по вёрстке интерфейсов. Ну, я надеюсь, вам что-то говорят имена Josh Cameau, Wes Bos, Kyle Cook, Chris Coyier...…
А у Mad CSS офигенский мерч оказался между прочим :)
❤17👍10🔥2
#статья дня
Когда пакет долго живёт, у него очень легко появляется один большой
В какой-то момент это начинает мешать: вроде бы импортируешь один маленький хелпер, а на практике инструменты идут через общий barrel-файл и поднимают гораздо больший граф модулей, чем реально нужен. На этом особенно быстро начинают болеть тесты и дев-среда, потому что Vitest и Vite очень чувствительны к размеру и связности module graph.
Статья Organize your library with subpath exports как раз про более аккуратный способ это организовать. Идея в том, чтобы не складывать весь публичный API в один вход, а объявлять несколько явных входов через
Снаружи это выглядит как импорт из подпапок, но на самом деле это не доступ внутрь пакета, а специально объявленные публичные entrypoint’ы.
За счёт этого API пакета становится понятнее, внутренности лучше инкапсулируются, а tooling меньше спотыкается о лишние реэкспорты и случайные зависимости. Хороший короткий разбор, если хочется быстро понять сам подход и зачем он нужен.
#vite #barrel #esm
Когда пакет долго живёт, у него очень легко появляется один большой
index.ts, который реэкспортит почти всё подряд.В какой-то момент это начинает мешать: вроде бы импортируешь один маленький хелпер, а на практике инструменты идут через общий barrel-файл и поднимают гораздо больший граф модулей, чем реально нужен. На этом особенно быстро начинают болеть тесты и дев-среда, потому что Vitest и Vite очень чувствительны к размеру и связности module graph.
Статья Organize your library with subpath exports как раз про более аккуратный способ это организовать. Идея в том, чтобы не складывать весь публичный API в один вход, а объявлять несколько явных входов через
exports в package.json. Тогда вместо условного import { bau, useWow } from 'mylib' можно сделать import { bau } from 'mylib/helpers' и import { useWow } from 'mylib/hooks'.Снаружи это выглядит как импорт из подпапок, но на самом деле это не доступ внутрь пакета, а специально объявленные публичные entrypoint’ы.
За счёт этого API пакета становится понятнее, внутренности лучше инкапсулируются, а tooling меньше спотыкается о лишние реэкспорты и случайные зависимости. Хороший короткий разбор, если хочется быстро понять сам подход и зачем он нужен.
#vite #barrel #esm
👍13👎1🫡1
Будни разработчика
#заметка дня Модераторы Apple отклонили мой пульт, соответственно, не приняв его в магазин. Причина звучит обидно и стыдно: 4.3 Spam. И означать это может всё, что угодно: от того, что использованы чужие закопирайченные ассеты и до того, что я просто взял…
Да, кстати! Я же совсем забыл написать обновление по пульту и магазину 🙂
Как вы видите из сообщения, следующего за этим — модерацию я победил. И даже выпустил первую версию сразу же! Но в чат сразу не скидывал, ибо занялся не менее важной вещью — названием!
Как оказалось — ну, и ожидалось — пультов в магазине многие десятки. И моё до глупости банальное Smart Remote Plus тупо не искалось (кто бы мог подумать).
Пришлось начинать искать. Захотелось что-то короткое. И необычное. Финское, эстонское или карельское слово — подошло бы идеально. И понеслась...
Koti, Koda, Sora, Vire, Lumi — занято. Havu тоже не прокатил.
В какой-то момент наткнулся на Ruum — эстонское «комната», калька очевидна. На этом и остановился. Ruum Hub — идеально.
Итак, встречайте: Ruum Hub! Теперь шарить намного проще 🙂
https://apps.apple.com/fi/app/ruum-hub-smart-remote/id6761381793
Пока для iOS. Выделенная версия под macOS и на Android на подходе. Все, кто ставил из TestFlight — можете обновляться, я как раз починил интеграцию с последней webOS 25 и начал рабоду над LG NetCast. Google TV тоже на подходе.
Спасибо за поддержку!
Как вы видите из сообщения, следующего за этим — модерацию я победил. И даже выпустил первую версию сразу же! Но в чат сразу не скидывал, ибо занялся не менее важной вещью — названием!
Как оказалось — ну, и ожидалось — пультов в магазине многие десятки. И моё до глупости банальное Smart Remote Plus тупо не искалось (кто бы мог подумать).
Пришлось начинать искать. Захотелось что-то короткое. И необычное. Финское, эстонское или карельское слово — подошло бы идеально. И понеслась...
Koti, Koda, Sora, Vire, Lumi — занято. Havu тоже не прокатил.
В какой-то момент наткнулся на Ruum — эстонское «комната», калька очевидна. На этом и остановился. Ruum Hub — идеально.
Итак, встречайте: Ruum Hub! Теперь шарить намного проще 🙂
https://apps.apple.com/fi/app/ruum-hub-smart-remote/id6761381793
Пока для iOS. Выделенная версия под macOS и на Android на подходе. Все, кто ставил из TestFlight — можете обновляться, я как раз починил интеграцию с последней webOS 25 и начал рабоду над LG NetCast. Google TV тоже на подходе.
Спасибо за поддержку!
App Store
Ruum Hub: Smart Remote App - App Store
Download Ruum Hub: Smart Remote by Sergey Bekharskiy on the App Store. See screenshots, ratings and reviews, user tips and more games like Ruum Hub: Smart…
❤14👍7
#статья дня
Злые Марсиане в очередной раз хвастаются!
Ладно, на самом деле — крайне забавный кейс. Заказчик сидел-сидел, пилил чота с Клодом, в итоге решился на заказную разработку. И ему выкинуло, что, мол, Злые Марсиане отлично подходят.
Как вам такое SEO, а? Сразу ссылка: https://evilmartians.com/chronicles/how-to-make-your-website-visible-to-llms
На самом деле, статья большая, с историческими экскурсами и подробностями обсуждений, но сводится всё к одному: LLM-ки любят простой текст и чёткие направления.
А кто-нибудь застал этот максимально дурацкий бред от SEO-оптимизаторов?
Помните же, как они ломали всю крутую семантику, не давали использовать заголовки, не давали прописывать strong, заставляя упихивать все стили в CSS и писать на дивах?
В моей карьере был случай, когда нас заставляли в каждую статью вносить грамматическую опечатку, просто чтобы поймать людей, ищущих с ошибками🤦♂️
Да, Google и прочие в итоге, конечно, стали ранжировать нормальные проекты выше, но ущерб уже был нанесён.
А что же теперь? Как добиться от AI такой же эффективности как у марсиан?
А теперь заполняете llms.txt, вводите отдельные роуты на Markdown-файлы — и вы великолепны.
Зачем Markdown? Ну потому что все SEO потуги по добавлению в статьи смысла, которого нет, для LLM-ок являются просто HTML-мусором. А текст они любят.
Статью всё равно почитайте, там хорошо.
#llm #ai #seo
Злые Марсиане в очередной раз хвастаются!
Making your site visible to LLMs: 6 techniques that work, 8 that don't
Ладно, на самом деле — крайне забавный кейс. Заказчик сидел-сидел, пилил чота с Клодом, в итоге решился на заказную разработку. И ему выкинуло, что, мол, Злые Марсиане отлично подходят.
Как вам такое SEO, а? Сразу ссылка: https://evilmartians.com/chronicles/how-to-make-your-website-visible-to-llms
На самом деле, статья большая, с историческими экскурсами и подробностями обсуждений, но сводится всё к одному: LLM-ки любят простой текст и чёткие направления.
А кто-нибудь застал этот максимально дурацкий бред от SEO-оптимизаторов?
Помните же, как они ломали всю крутую семантику, не давали использовать заголовки, не давали прописывать strong, заставляя упихивать все стили в CSS и писать на дивах?
В моей карьере был случай, когда нас заставляли в каждую статью вносить грамматическую опечатку, просто чтобы поймать людей, ищущих с ошибками
Да, Google и прочие в итоге, конечно, стали ранжировать нормальные проекты выше, но ущерб уже был нанесён.
А что же теперь? Как добиться от AI такой же эффективности как у марсиан?
А теперь заполняете llms.txt, вводите отдельные роуты на Markdown-файлы — и вы великолепны.
Зачем Markdown? Ну потому что все SEO потуги по добавлению в статьи смысла, которого нет, для LLM-ок являются просто HTML-мусором. А текст они любят.
Статью всё равно почитайте, там хорошо.
#llm #ai #seo
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9❤6
#инструмент дня
Наткнулся на шрифт Datatype.
Это вариативный шрифт, который превращает текст в… графики. Прямо через лигатуры. Пишешь что-то вроде:
{l:15,45,90,30,75,20,85,95} → получаешь линейный график
{b:30,70,50,90} → столбики
{p:65} → круговую диаграмму
То есть никакого SVG, canvas и прочего.
Сделано это через OpenType-лигатуры + вариативные оси. По сути, шрифт парсит жисон и подменяет символы на нужные глифы. Выглядит интересно.
Где это может быть полезно:
— быстрые прототипы графиков прямо в тексте
— документация
— демки и презентации
Минусы:
— копирование: вставится исходный текст, но не график (логично)
— доступность: скринридеры будут читать это как
— кастомизация сильно ограничена
Хотя как концепт — очень круто.
Пощупать можно тут:
https://franktisellano.github.io/datatype/
Где используем, котаны?
#font #diagram
Наткнулся на шрифт Datatype.
Это вариативный шрифт, который превращает текст в… графики. Прямо через лигатуры. Пишешь что-то вроде:
{l:15,45,90,30,75,20,85,95} → получаешь линейный график
{b:30,70,50,90} → столбики
{p:65} → круговую диаграмму
То есть никакого SVG, canvas и прочего.
Сделано это через OpenType-лигатуры + вариативные оси. По сути, шрифт парсит жисон и подменяет символы на нужные глифы. Выглядит интересно.
Где это может быть полезно:
— быстрые прототипы графиков прямо в тексте
— документация
— демки и презентации
Минусы:
— копирование: вставится исходный текст, но не график (логично)
— доступность: скринридеры будут читать это как
{l:15,45…}, а не как график (решаемо)— кастомизация сильно ограничена
Хотя как концепт — очень круто.
Пощупать можно тут:
https://franktisellano.github.io/datatype/
Где используем, котаны?
#font #diagram
👍16
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
Кажется странным, что сначала в браузерах (браузере?) появились переходы между страницами aka View Transitions, и только сейчас — между элементами.
В Chrome 147, наконец, добавили element-scoped view transitions.
До этого если хотелось анимировать, например, сортировку списка, приходилось запускать document.startViewTransition() — даже если менялся один маленький блок.
Выглядело это примерно так:
Теперь можно запустить переход прямо на контейнере списка:
И в этот момент браузер работает только с этим куском DOM.
На практике это означает, что можно спокойно:
— анимировать список
— параллельно обновить, например, сайдбар
— и одно не будет цеплять другое
Сплошные плюсы.
Собственно, статья:
https://developer.chrome.com/blog/element-scoped-view-transitions
Что ещё в Chrome 147:
https://developer.chrome.com/blog/new-in-chrome-147
#chrome #view #transitions
Кажется странным, что сначала в браузерах (браузере?) появились переходы между страницами aka View Transitions, и только сейчас — между элементами.
В Chrome 147, наконец, добавили element-scoped view transitions.
До этого если хотелось анимировать, например, сортировку списка, приходилось запускать document.startViewTransition() — даже если менялся один маленький блок.
Выглядело это примерно так:
document.startViewTransition(() => {
list.sort(...)
render()
})
Теперь можно запустить переход прямо на контейнере списка:
listElement.startViewTransition(() => {
list.sort(...)
render()
})
И в этот момент браузер работает только с этим куском DOM.
На практике это означает, что можно спокойно:
— анимировать список
— параллельно обновить, например, сайдбар
— и одно не будет цеплять другое
Сплошные плюсы.
Собственно, статья:
https://developer.chrome.com/blog/element-scoped-view-transitions
Что ещё в Chrome 147:
https://developer.chrome.com/blog/new-in-chrome-147
#chrome #view #transitions
❤18
This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня
Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с
Итак, смотрим на пример от Джона Кантнера: https://codepen.io/alinaki/pen/ExMXbqz
1. Для начала, обнуляем все браузерные стили и предположения браузера об внешнем виде радиокнопок вообще через
2. Я вам этого не говорил, но, технически, уже давно можно на поля ввода накладывать псевдоэлементы. Но не на select. Я всё хочу написать большой пост про реализацию select, пока вот так.
Благодаря этой возможности, собственно, можно стилизовать чекбокс как душе угодно:
3. Освободившиеся ресурсы мозга и тот факт, что теперь все элементы красиво вложены в label (как минимум, не нужны for и id), можно отправить на реализацию разных эффектов.
Например, проверить, есть ли лейбл с выделенным чекбоксом и подвинуть к нему рамку:
Обратите внимание, рамка — отдельный элемент, к ней обращаемся через селектор низлежащих соседей ~.
Не знаю, что меня больше впечатляет. Псевдоэлементы на полях ввода или :has.
И да, поддерживается везде.
#css #has #appearance #бородач
Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с
input:checked+i. Это освобождает мозг и руки для более приятных вещей.Итак, смотрим на пример от Джона Кантнера: https://codepen.io/alinaki/pen/ExMXbqz
1. Для начала, обнуляем все браузерные стили и предположения браузера об внешнем виде радиокнопок вообще через
appearance: none.2. Я вам этого не говорил, но, технически, уже давно можно на поля ввода накладывать псевдоэлементы. Но не на select. Я всё хочу написать большой пост про реализацию select, пока вот так.
Благодаря этой возможности, собственно, можно стилизовать чекбокс как душе угодно:
::before, ::after, :checked::before, :checked::after... В целом, лично я бы обошёлся радиальным градиентом и одним псевдоэлементом.3. Освободившиеся ресурсы мозга и тот факт, что теперь все элементы красиво вложены в label (как минимум, не нужны for и id), можно отправить на реализацию разных эффектов.
Например, проверить, есть ли лейбл с выделенным чекбоксом и подвинуть к нему рамку:
label:nth-of-type(2):has(input[type="radio"]:checked) ~ .selection {
transform: translateY(100%);
}
Обратите внимание, рамка — отдельный элемент, к ней обращаемся через селектор низлежащих соседей ~.
Не знаю, что меня больше впечатляет. Псевдоэлементы на полях ввода или :has.
И да, поддерживается везде.
#css #has #appearance #бородач
👍15
#такое дня
Кто хочет поорать на монитор?
На меня не смотрите, я уже поорал.
Итак, насколько хорошо ты понимаешь даты в JavaScript?
Кто сказал Temporal API? Выйди вон из класса, дедушки разговаривают.
Итак, вашему вниманию квиз на пограничные условия в JS Date API.
Вперёд, делитесь результатами: https://jsdate.wtf/
У меня всё очень плохо🫠
#js #date #wtf #бородач
Кто хочет поорать на монитор?
На меня не смотрите, я уже поорал.
Итак, насколько хорошо ты понимаешь даты в JavaScript?
Кто сказал Temporal API? Выйди вон из класса, дедушки разговаривают.
Итак, вашему вниманию квиз на пограничные условия в JS Date API.
Вперёд, делитесь результатами: https://jsdate.wtf/
У меня всё очень плохо
#js #date #wtf #бородач
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4❤2
#статья дня
Висящие промисы как простой способ оборвать async-функцию
Зачем так делать?
Отмена через throw ненадёжна — её легко случайно поймать в try/catch, и код поедет дальше.
С висящим же промисом выполнение гарантированно останавливается.
Где это используется?
В пошаговых workflow, где функция должна завершиться на середине и продолжиться позже.
Оркестратор сохраняет прогресс и потом запускает её заново, пропуская выполненные шаги.
Минусы:
— такой код легко сломать случайно: забытый await или лишний Promise — и функция зависнет навсегда
— трудно дебажить: нет ошибки, нет стека, просто «ничего не происходит»
— не подходит для обычного приложения без оркестратора (сам по себе это тупик)
— может путать других разработчиков: выглядит как баг, а не как намеренное поведение
В общем, это способ явно остановить выполнение без исключений, но он требует дисциплины и инфраструктуры вокруг.
А, ну да. Сама статья: https://www.inngest.com/blog/hanging-promises-for-control-flow
#js #promise #halt
Висящие промисы как простой способ оборвать async-функцию
await new Promise(() => {})
Зачем так делать?
Отмена через throw ненадёжна — её легко случайно поймать в try/catch, и код поедет дальше.
try {
await handler()
} catch (e) {}
С висящим же промисом выполнение гарантированно останавливается.
Где это используется?
В пошаговых workflow, где функция должна завершиться на середине и продолжиться позже.
async function signup(user) {
await step("create-user", user)
if (!user.emailVerified) {
await new Promise(() => {}) // закончили здесь
}
await step("send-email", user)
}
Оркестратор сохраняет прогресс и потом запускает её заново, пропуская выполненные шаги.
Минусы:
— такой код легко сломать случайно: забытый await или лишний Promise — и функция зависнет навсегда
— трудно дебажить: нет ошибки, нет стека, просто «ничего не происходит»
— не подходит для обычного приложения без оркестратора (сам по себе это тупик)
— может путать других разработчиков: выглядит как баг, а не как намеренное поведение
В общем, это способ явно остановить выполнение без исключений, но он требует дисциплины и инфраструктуры вокруг.
А, ну да. Сама статья: https://www.inngest.com/blog/hanging-promises-for-control-flow
#js #promise #halt
👍5🫡2
#фишка дня
А вы знали, что в GitHub Markdown не надо списки нумеровать самому?
будет буквально преобразовано в
И не надо париться, когда редактируешь.
P. S. оказывается, есть такая штука, как mdlint, и она на самостоятельную нумерацию очень даже ругается.
А вы знали, что в GitHub Markdown не надо списки нумеровать самому?
1. Раз
1. Два
1. Три
будет буквально преобразовано в
1. Раз
2. Два
3. Три
И не надо париться, когда редактируешь.
P. S. оказывается, есть такая штука, как mdlint, и она на самостоятельную нумерацию очень даже ругается.
🤩9👍3❤1🫡1
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
Scroll-driven animations уже давно есть в Chrome, и за последний год вокруг них накопилось много примеров — у того же Bramus Van Damme были подробные демки с
Как всегда, это интерактивная документация по
Посмею себе напомнить ключевую идею процесса: прогресс анимации берётся не из времени (`animation-duration`), а из положения элемента относительно viewport или scroll-контейнера. В статье это сразу показывается на примере с progress bar, где значение анимации напрямую связано со скроллом страницы.
Дальше он последовательно вводит
Отдельно разбирается
Есть демонстрации с несколькими timeline’ами и синхронизацией анимаций, где один scroll-прогресс управляет сразу несколькими свойствами.
Практически в каждом блоке есть интерактив: можно скроллить вложенные контейнеры и сразу видеть, как меняется поведение.
Документация: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline
Примеры от Google: https://developer.chrome.com/docs/css-ui/scroll-driven-animations/
Из нюансов — Safari всё ещё отстаёт: часть API отсутствует или работает неполно, так что без фоллбеков пока не обойтись.
#css #scroll
Scroll-driven animations уже давно есть в Chrome, и за последний год вокруг них накопилось много примеров — у того же Bramus Van Damme были подробные демки с
view-timeline и разными вариантами ranges. Теперь появился ещё один большой разбор от самого Джоша Комо: https://www.joshwcomeau.com/animation/scroll-driven-animations/Как всегда, это интерактивная документация по
animation-timeline.Посмею себе напомнить ключевую идею процесса: прогресс анимации берётся не из времени (`animation-duration`), а из положения элемента относительно viewport или scroll-контейнера. В статье это сразу показывается на примере с progress bar, где значение анимации напрямую связано со скроллом страницы.
Дальше он последовательно вводит
scroll-timeline и view-timeline. Первый вариант привязывается к прокрутке контейнера, второй — к тому, как конкретный элемент входит и выходит из viewport. Есть наглядные демо, где один и тот же @keyframes ведёт себя по-разному в зависимости от выбранного таймлайна.Отдельно разбирается
animation-range. На интерактивных примерах видно, как entry, exit, cover, contain влияют на диапазон, в котором проигрывается анимация.Есть демонстрации с несколькими timeline’ами и синхронизацией анимаций, где один scroll-прогресс управляет сразу несколькими свойствами.
Практически в каждом блоке есть интерактив: можно скроллить вложенные контейнеры и сразу видеть, как меняется поведение.
Документация: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline
Примеры от Google: https://developer.chrome.com/docs/css-ui/scroll-driven-animations/
Из нюансов — Safari всё ещё отстаёт: часть API отсутствует или работает неполно, так что без фоллбеков пока не обойтись.
#css #scroll
👍6