Одно PWA, чтобы править всеми
Вчера на HolyJS читал доклад про то самое приложение для генерации картинок-токенов, про которое писал выше. Цель доклада в том, чтобы убедить разработчиков, что PWA вполне себе могут заменить нативные приложения в каких-то случаях. Не во всех, это точно, но во многих. На самом деле не так уж и часто нативные приложения нуждаются в каких-то редких низкоуровневых API, при этом под капотом часто у них WebView, из которого уже можно сделать PWA меньшими усилиями.
Самую большую дискуссию вызвал вопрос безопасности PWA: «Можно ли написать что-то банковское и безопасное фронтенд-инструментами?» На мой взгляд, здесь между нативным и PWA разница очень маленькая:
— Да, нативное сложнее ломать, потому что нужна экспертиза. Но если она есть и вся логика по безопасности у вас зашита на клиенте — приложение дырявое. На фронтенде посмотреть логику гораздо проще, но имея под рукой хороший прокси (аналог вкладки Network в Dev Tools) можно расковырять почти любые запросы-ответы.
— Любой клиент, как фронтенд, так и нативный, не должен содержать в себе какой-то сложной логики по безопасности. Клиент — это вьюшка, которой должен управлять бэкенд. И именно бэкенд должен давать или не давать доступ к тем или иным действиям на сайте.
— На фронтенде есть множество решений про то, как готовить приложения безопасно. Это требует погружения в область, изучения новых знаний, но на самом деле опыт поколений там колоссальный, вам вряд ли придётся придумывать что-то уникальное.
— Банковские приложения внезапно начали писать на PWA. А у банков аудиты безопасности обычно очень даже серьёзные.
Дискуссия интересная, на конференциях явно нужен доклад про безопасность в PWA, будет полезно.
Видео доклада пока нет, но слайдами уже могу поделиться: https://mefody.github.io/talks/pwa-2023/
Вчера на HolyJS читал доклад про то самое приложение для генерации картинок-токенов, про которое писал выше. Цель доклада в том, чтобы убедить разработчиков, что PWA вполне себе могут заменить нативные приложения в каких-то случаях. Не во всех, это точно, но во многих. На самом деле не так уж и часто нативные приложения нуждаются в каких-то редких низкоуровневых API, при этом под капотом часто у них WebView, из которого уже можно сделать PWA меньшими усилиями.
Самую большую дискуссию вызвал вопрос безопасности PWA: «Можно ли написать что-то банковское и безопасное фронтенд-инструментами?» На мой взгляд, здесь между нативным и PWA разница очень маленькая:
— Да, нативное сложнее ломать, потому что нужна экспертиза. Но если она есть и вся логика по безопасности у вас зашита на клиенте — приложение дырявое. На фронтенде посмотреть логику гораздо проще, но имея под рукой хороший прокси (аналог вкладки Network в Dev Tools) можно расковырять почти любые запросы-ответы.
— Любой клиент, как фронтенд, так и нативный, не должен содержать в себе какой-то сложной логики по безопасности. Клиент — это вьюшка, которой должен управлять бэкенд. И именно бэкенд должен давать или не давать доступ к тем или иным действиям на сайте.
— На фронтенде есть множество решений про то, как готовить приложения безопасно. Это требует погружения в область, изучения новых знаний, но на самом деле опыт поколений там колоссальный, вам вряд ли придётся придумывать что-то уникальное.
— Банковские приложения внезапно начали писать на PWA. А у банков аудиты безопасности обычно очень даже серьёзные.
Дискуссия интересная, на конференциях явно нужен доклад про безопасность в PWA, будет полезно.
Видео доклада пока нет, но слайдами уже могу поделиться: https://mefody.github.io/talks/pwa-2023/
mefody.github.io
Одно PWA, чтоб править всеми
Термин PWA появился еще в 2015 году, но из-за браузерных разногласий долгое время был лишь красивой идеей. В 2023 году появилась надежда, что на iOS появятся альтернативные браузерные движки, а это может привести к тому, что для создания почти полноценных…
👍26🔥6❤3
MinskJS #10
Кто давно со мной знаком, знают, что когда-то я был в составе организаторов минских сообществ MinskJS и MinskCSS. У нас были крутые оффлайн-митапы с трансляциями, полные залы на площадке Space в Минске.
Недавно вернулся в мои любимые сообщества, помогаю Саше Шинкевич и Глаше Жур делать классные онлайн-митапы: искать спикеров, прогонять доклады, делать минский движ ярче. MinskCSS #10 вообще транслировали из моей квартиры.
Завтра (31 мая) в 19:00 у нас как раз состоится онлайн-митап MinskJS #10, где поговорим про путь браузера от ввода урла в адресную строку до отрендеренной страницы, «толстые клиенты» и расширение круга знакомств в индустрии, если ты интроверт. Всех приглашаю, заваривайте пельмешки, зовите коллег и задавайте вопросы в чате. Увидимся!
https://minskjs.timepad.ru/event/2406669/
Кто давно со мной знаком, знают, что когда-то я был в составе организаторов минских сообществ MinskJS и MinskCSS. У нас были крутые оффлайн-митапы с трансляциями, полные залы на площадке Space в Минске.
Недавно вернулся в мои любимые сообщества, помогаю Саше Шинкевич и Глаше Жур делать классные онлайн-митапы: искать спикеров, прогонять доклады, делать минский движ ярче. MinskCSS #10 вообще транслировали из моей квартиры.
Завтра (31 мая) в 19:00 у нас как раз состоится онлайн-митап MinskJS #10, где поговорим про путь браузера от ввода урла в адресную строку до отрендеренной страницы, «толстые клиенты» и расширение круга знакомств в индустрии, если ты интроверт. Всех приглашаю, заваривайте пельмешки, зовите коллег и задавайте вопросы в чате. Увидимся!
https://minskjs.timepad.ru/event/2406669/
🔥30👍6🥴1
Стратегия оптимизации перфоманса веб-страницы
Давно хотел собрать чеклист, по которому можно проходить при аудите перфоманса веб-приложений. Разумеется, магистр чеклистоведения Виталий Фридман сделал это раньше и с большим количеством ссылок.
Шаг 0. Настройте инструменты, измерьте текущее состояние страницы.
Шаг 1. Правильно поместите всё самое важное внутрь
Шаг 2. Настройте загрузку критического CSS.
Шаг 3. Поиграйтесь со шрифтами.
Шаг 4. Позаботьтесь о метрике LCP.
Шаг 5. Разберитесь с загрузкой JavaScript.
https://smashed.by/perf-strategy
Давно хотел собрать чеклист, по которому можно проходить при аудите перфоманса веб-приложений. Разумеется, магистр чеклистоведения Виталий Фридман сделал это раньше и с большим количеством ссылок.
Шаг 0. Настройте инструменты, измерьте текущее состояние страницы.
Шаг 1. Правильно поместите всё самое важное внутрь
<head>.Шаг 2. Настройте загрузку критического CSS.
Шаг 3. Поиграйтесь со шрифтами.
Шаг 4. Позаботьтесь о метрике LCP.
Шаг 5. Разберитесь с загрузкой JavaScript.
https://smashed.by/perf-strategy
Dropbox
Login or Sign Up - Dropbox
Login to Dropbox. Bring your photos, docs, and videos anywhere and keep your files safe.
👏13👍8🔥3❤2
Sunday CSS
У Юли Миоцен на канале раз в неделю выходят ролики о том, как при помощи CSS рисовать. Не верстать страницы, а именно рисовать. Кинематографичные анимации, иллюстрации, псевдо-3D псевдоигры. Юля объясняет и показывает, из чего состоят такие иллюстрации и как из одного HTML-элемента на странице извлечь максимум пользы на «холсте».
Вдохновиться готовыми демками Юли можно здесь: https://codepen.io/miocene
https://youtube.com/playlist?list=PLbNASFXzvzeaS5ELuPN4imYOuETjxX_x_
У Юли Миоцен на канале раз в неделю выходят ролики о том, как при помощи CSS рисовать. Не верстать страницы, а именно рисовать. Кинематографичные анимации, иллюстрации, псевдо-3D псевдоигры. Юля объясняет и показывает, из чего состоят такие иллюстрации и как из одного HTML-элемента на странице извлечь максимум пользы на «холсте».
Вдохновиться готовыми демками Юли можно здесь: https://codepen.io/miocene
https://youtube.com/playlist?list=PLbNASFXzvzeaS5ELuPN4imYOuETjxX_x_
🔥26🤩1
Forwarded from UfoStation
Анонс Frontend CTF 2023
На канале была небольшая пауза, потому что мы с ребятами готовили Frontend CTF 2023 — игровой фронтендерский турнир с элементами взлома
Запуск квеста состоится завтра 14 июня в 19:00
😎
На канале была небольшая пауза, потому что мы с ребятами готовили Frontend CTF 2023 — игровой фронтендерский турнир с элементами взлома
Запуск квеста состоится завтра 14 июня в 19:00
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥10❤3💯2
Техника появления из жёлтого
Некоторые сайты используют интересный эффект: когда на странице появляется что-то новое, оно сначала имеет какой-то цветной фон, обычно желтоватый, который потом переходит в прозрачный. Это довольно старая техника, но она всё ещё живее всех живых. Где-то вместо цвета используется прозрачность, где-то — увеличение элемента.
Раньше для подобных трюков мы задавали новому элементу какой-то класс с привлекающими внимание стилями, дожидались окончания анимации появления в JavaScript, а потом убирали класс.
Сейчас всё ещё нужно делать так же, но скоро появится новый способ делать это исключительно средствами CSS. У Брамуса есть хороший пример, с которым всё становится понятнее.
В этом примере сначала у дива будет жёлтый фон, потом за 0.5 секунды он станет прозрачным. Никакого JavaScript, исключительно магия CSS.
Пока что эта возможность доступна только пользователям Chrome Canary 115+ с включёнными экспериментальными флагами веб-платформы. Правило настолько свежее, что caniuse про него просто не знает, а в спецификации CSS Transitions даже в черновике пока про такую возможность ещё ничего не написано. Но раз Chrome потихоньку внедряет, скоро появится и спецификация.
https://www.bram.us/2023/05/24/the-yellow-fade-technique-with-modern-css-using-starting-style/
Некоторые сайты используют интересный эффект: когда на странице появляется что-то новое, оно сначала имеет какой-то цветной фон, обычно желтоватый, который потом переходит в прозрачный. Это довольно старая техника, но она всё ещё живее всех живых. Где-то вместо цвета используется прозрачность, где-то — увеличение элемента.
Раньше для подобных трюков мы задавали новому элементу какой-то класс с привлекающими внимание стилями, дожидались окончания анимации появления в JavaScript, а потом убирали класс.
Сейчас всё ещё нужно делать так же, но скоро появится новый способ делать это исключительно средствами CSS. У Брамуса есть хороший пример, с которым всё становится понятнее.
div {
transition: background-color 0.5s;
background-color: transparent;
@starting-style {
background-color: yellow;
}
}
В этом примере сначала у дива будет жёлтый фон, потом за 0.5 секунды он станет прозрачным. Никакого JavaScript, исключительно магия CSS.
Пока что эта возможность доступна только пользователям Chrome Canary 115+ с включёнными экспериментальными флагами веб-платформы. Правило настолько свежее, что caniuse про него просто не знает, а в спецификации CSS Transitions даже в черновике пока про такую возможность ещё ничего не написано. Но раз Chrome потихоньку внедряет, скоро появится и спецификация.
https://www.bram.us/2023/05/24/the-yellow-fade-technique-with-modern-css-using-starting-style/
Bram.us
The Yellow Fade Technique with Modern CSS using @starting-style
Remember the “Yellow Fade Technique” from back in the day? With Modern CSS this is now SUPER EASY to recreate!
👍21🔥8❤1
Новые возможности CSS, которые меняют взгляд на вёрстку (видео)
Чуть выше в канале делился слайдами с доклада, который прочитал на конференции Dump 2023, и обещал скинуть вам видео, когда оно появится.
Скидываю: https://youtu.be/_JB-wXwryhw
Чуть выше в канале делился слайдами с доклада, который прочитал на конференции Dump 2023, и обещал скинуть вам видео, когда оно появится.
Скидываю: https://youtu.be/_JB-wXwryhw
YouTube
Никита Дубко. Новые возможности CSS, которые меняют взгляд на вёрстку
Никита Дубко
Руководитель службы разработки, Яндекс
Новые возможности CSS, которые меняют взгляд на вёрстку
Благодаря инициативе Interop спецификации CSS не только быстро пишутся, но и внедряются в браузеры. Выражения от контейнера, новый синтаксис медиа…
Руководитель службы разработки, Яндекс
Новые возможности CSS, которые меняют взгляд на вёрстку
Благодаря инициативе Interop спецификации CSS не только быстро пишутся, но и внедряются в браузеры. Выражения от контейнера, новый синтаксис медиа…
❤30🔥16
AI Explain: postmortem
Если вы вдруг пропустили, в MDN произошёл интересный случай с тем, как chatGPT внедрили в документацию, а через два дня его выключили.
27 июня появился анонс новой функции AI Help — эдакого помощника для подписчиков MDN Plus, в котором можно было спросить chatGPT 3.5 про всякое вроде «как центрировать div по вертикали», «как наложить маску на картинку» и так далее. Команда, на самом деле, проделала хорошую работу, чтобы обучить модель контексту: скормили модельке статьи на MDN, которые вышле после 2021 года (ограничение модели 3.5), протестировали, даже автотестами покрыли.
Рядом с этой функцией появился AI Explain — возможность попросить AI объяснить какой-то код на странице. В статьях на MDN часто есть сниппеты кода с примерами, но в них помимо объясняемого в статье свойства бывают и другие сложные для восприятия новичками особенности. Цель инструмента, как говорит команда MDN, была как раз в помощи новичкам.
30 июня на гитхабе появилось ишью про то, что MDN теперь врёт пользователям автоматизированно. Комьюнити собрало много примеров, где AI не просто не справлялся с задачей, но ещё и выдавал ложные сведения. Мы в подкасте тоже обсуждали этот инцидент, можете послушать, если хотите подробностей. В ишью выяснилось, что фичу катнули в принципе мимо согласования с MDN Core Team. И тем самым сильно подорвали доверие к MDN как источнику корректной технической информации.
1 июля AI Explain выключили для всех пользователей сайта.
На самом деле здорово, что MDN не просто провели какую-то рефлексию внутри команды, но и поделились ей с сообществом. Для меня MDN всегда был важным источником информации, я многие доклады готовлю, опираясь на их статьи. И то, что они признают свои ошибки и делятся их анализом с комьюнити, полезно всем.
Мораль:
- Применяйте AI осторожно. Он может помогать в вашей работе, но всё ещё не гарантирует валидности выдаваемой информации.
- Продумывайте UX. Если бы где-то на сайте была огромная плашка «Это ответ AI, он может врать, проверяйте за ботом», комьюнити, возможно, не так сильно бы и злилось.
- Не тащите AI бездумно в проект, лишь бы усидеть на паровозике хайпа.
https://developer.mozilla.org/en-US/blog/ai-explain-postmortem/
Если вы вдруг пропустили, в MDN произошёл интересный случай с тем, как chatGPT внедрили в документацию, а через два дня его выключили.
27 июня появился анонс новой функции AI Help — эдакого помощника для подписчиков MDN Plus, в котором можно было спросить chatGPT 3.5 про всякое вроде «как центрировать div по вертикали», «как наложить маску на картинку» и так далее. Команда, на самом деле, проделала хорошую работу, чтобы обучить модель контексту: скормили модельке статьи на MDN, которые вышле после 2021 года (ограничение модели 3.5), протестировали, даже автотестами покрыли.
Рядом с этой функцией появился AI Explain — возможность попросить AI объяснить какой-то код на странице. В статьях на MDN часто есть сниппеты кода с примерами, но в них помимо объясняемого в статье свойства бывают и другие сложные для восприятия новичками особенности. Цель инструмента, как говорит команда MDN, была как раз в помощи новичкам.
30 июня на гитхабе появилось ишью про то, что MDN теперь врёт пользователям автоматизированно. Комьюнити собрало много примеров, где AI не просто не справлялся с задачей, но ещё и выдавал ложные сведения. Мы в подкасте тоже обсуждали этот инцидент, можете послушать, если хотите подробностей. В ишью выяснилось, что фичу катнули в принципе мимо согласования с MDN Core Team. И тем самым сильно подорвали доверие к MDN как источнику корректной технической информации.
1 июля AI Explain выключили для всех пользователей сайта.
На самом деле здорово, что MDN не просто провели какую-то рефлексию внутри команды, но и поделились ей с сообществом. Для меня MDN всегда был важным источником информации, я многие доклады готовлю, опираясь на их статьи. И то, что они признают свои ошибки и делятся их анализом с комьюнити, полезно всем.
Мораль:
- Применяйте AI осторожно. Он может помогать в вашей работе, но всё ещё не гарантирует валидности выдаваемой информации.
- Продумывайте UX. Если бы где-то на сайте была огромная плашка «Это ответ AI, он может врать, проверяйте за ботом», комьюнити, возможно, не так сильно бы и злилось.
- Не тащите AI бездумно в проект, лишь бы усидеть на паровозике хайпа.
https://developer.mozilla.org/en-US/blog/ai-explain-postmortem/
MDN Web Docs
Reflections on AI Explain: A postmortem | MDN Blog
We recently launched a feature called AI Explain, but we have rolled this back for now. In this post, we look into the story behind AI Explain: its development, launch, and the reasons that led us to press the pause button.
👍37🤔1
Доклады JS Nation 2023
Конференция JS Nation опубликовала записи докладов 2023 года. Там есть про перфоманс, доступность, веб-компоненты, TypeScript. Много крутых экспертов. Добавляйте в закладки, чтобы посмотреть на досуге, пока ваш проект собирается.
Себе в закладки добавил:
- доклад Вани Акулова про то, как некоторые общие советы по загрузке веб-приложений в конкретных случаях скорее вредят, чем помогают;
- доклад Максима Сальникова про веб-пуши — с их появлением в Safari тема как никогда актуальная;
- доклад Зака Лезермана про веб-компоненты — интересно посмотреть, как он их реализует совместимо с 11ty, который очень хорош по перфомансу из коробки.
https://portal.gitnation.org/events/jsnation-2023/talks
Конференция JS Nation опубликовала записи докладов 2023 года. Там есть про перфоманс, доступность, веб-компоненты, TypeScript. Много крутых экспертов. Добавляйте в закладки, чтобы посмотреть на досуге, пока ваш проект собирается.
Себе в закладки добавил:
- доклад Вани Акулова про то, как некоторые общие советы по загрузке веб-приложений в конкретных случаях скорее вредят, чем помогают;
- доклад Максима Сальникова про веб-пуши — с их появлением в Safari тема как никогда актуальная;
- доклад Зака Лезермана про веб-компоненты — интересно посмотреть, как он их реализует совместимо с 11ty, который очень хорош по перфомансу из коробки.
https://portal.gitnation.org/events/jsnation-2023/talks
Gitnation
JSNation 2023 - The main JavaScript conference of the year
JSNation 2023 talks, workshops, videos, speakers and partners
❤🔥20👍3
Better full screen mode with the Keyboard Lock API
Томас Штайнер делится хорошим примером, когда можно сделать пользовательский опыт лучше очень коротким сниппетом кода. Представьте, что вы открылы браузер в fullscreen-режиме, открыли модалку на сайте, пытаетесь её закрыть при помощи
Так вот, есть Keyboard Lock API, который позволяет заблокировать какие-то кнопки или вообще все. В случае с Escape нужно будет не нажать кнопку, а зажать, чтобы выйти из fullscreen-режима.
Я периодически пользуюсь веб-приложениями, которые для моего лучшего пользовательского опыта на любое нажатие клавиши на клавиатуре пытается что-нибудь сделать. Не через
Эта апишка работает только в Chromium-браузерах, но довольно давно. Как прогрессивное улучшение — почему бы и не да.
https://developer.chrome.com/blog/better-full-screen-mode/
Томас Штайнер делится хорошим примером, когда можно сделать пользовательский опыт лучше очень коротким сниппетом кода. Представьте, что вы открылы браузер в fullscreen-режиме, открыли модалку на сайте, пытаетесь её закрыть при помощи
Esc — что произойдёт? Правильно, браузер выйдет из fullscreen-режима, потому что в ОС по умолчанию так сделано. Я на macOS постоянно из-за этого страдаю.Так вот, есть Keyboard Lock API, который позволяет заблокировать какие-то кнопки или вообще все. В случае с Escape нужно будет не нажать кнопку, а зажать, чтобы выйти из fullscreen-режима.
// блокируем
await navigator.keyboard.lock(['Escape']);
// разблокируем
navigator.keyboard.unlock();
Я периодически пользуюсь веб-приложениями, которые для моего лучшего пользовательского опыта на любое нажатие клавиши на клавиатуре пытается что-нибудь сделать. Не через
Alt+F, например, а через просто F, K, S и так далее. Беда в том, что я никогда этими шорткатами не пользуюсь, они мне не нужны, но в настройках выключить не могу. Если бы были нужны, то лучше через какие-то комбинации клавиш. И вот заполняю я форму на этом сайте, нечаянно фокус не выставил, начал набирать текст — а сайт в этом время заполнил форму, завёл тикет в саппорт, приготовил глазунью и включил тёмную тему. Теперь могу сделать себе через браузерные расширения или закладки отключение этой ненужной мне функции.Эта апишка работает только в Chromium-браузерах, но довольно давно. Как прогрессивное улучшение — почему бы и не да.
https://developer.chrome.com/blog/better-full-screen-mode/
👍11❤5
Браузер Arc
Свершилось. Сегодня браузер Arc вышел в версии v1.0 и отключил лист ожидания. Это значит, что его может установить каждый без инвайт-кодов.
Я им пользуюсь уже давно, хоть и не постоянно. Основные фичи, которые мне нравятся:
- Сплит-вью. Можно разместить вкладки в одном окне рядом. Незаменимая фича для подготовки докладов.
- Всё на комбинациях клавиш. К тачпаду тянусь довольно редко, причём комбинации можно переназначать под себя.
- Пользовательские стили. Раньше в такое умели все браузеры, а теперь как будто только в Arc это осталось без расширений. В твиттере у меня всё ещё птичка в качестве лого :)
- Разделение на пространства. Завёл себе группу вкладок для записи подкастов, для игр в D&D и для подготовки докладов.
- Вкладки закрываются сами, если не открывать их в течение суток.
- Список вкладок — горизонтальный список, а не табики. Просто нравится, экран ведь широкий.
- По умолчанию можно скрыть весь интерфейс. Больше от сайтов ничего не отвлекает.
- Режим превью. Любую ссылку можно открыть в окне предпросмотра, и если уже надо, то тогда открыть как полноценную вкладку.
Ничего лишнего. Настраиваемое. Удобное. Попробуйте.
Да, работу работаю я всё ещё в Chrome. Потому что там удобнее с инструментами разработчика играться. Но пользоваться интернетом пока приятнее в Arc. Плюс у них классная работа с сообществом, на мои багрепорты отвечали очень быстро. В общем, хорошо, когда на рынке появляется что-то новое, пусть под капотом там всё тот же Chromium.
https://arc.net/
Свершилось. Сегодня браузер Arc вышел в версии v1.0 и отключил лист ожидания. Это значит, что его может установить каждый без инвайт-кодов.
Я им пользуюсь уже давно, хоть и не постоянно. Основные фичи, которые мне нравятся:
- Сплит-вью. Можно разместить вкладки в одном окне рядом. Незаменимая фича для подготовки докладов.
- Всё на комбинациях клавиш. К тачпаду тянусь довольно редко, причём комбинации можно переназначать под себя.
- Пользовательские стили. Раньше в такое умели все браузеры, а теперь как будто только в Arc это осталось без расширений. В твиттере у меня всё ещё птичка в качестве лого :)
- Разделение на пространства. Завёл себе группу вкладок для записи подкастов, для игр в D&D и для подготовки докладов.
- Вкладки закрываются сами, если не открывать их в течение суток.
- Список вкладок — горизонтальный список, а не табики. Просто нравится, экран ведь широкий.
- По умолчанию можно скрыть весь интерфейс. Больше от сайтов ничего не отвлекает.
- Режим превью. Любую ссылку можно открыть в окне предпросмотра, и если уже надо, то тогда открыть как полноценную вкладку.
Ничего лишнего. Настраиваемое. Удобное. Попробуйте.
Да, работу работаю я всё ещё в Chrome. Потому что там удобнее с инструментами разработчика играться. Но пользоваться интернетом пока приятнее в Arc. Плюс у них классная работа с сообществом, на мои багрепорты отвечали очень быстро. В общем, хорошо, когда на рынке появляется что-то новое, пусть под капотом там всё тот же Chromium.
https://arc.net/
arc.net
Arc from The Browser Company
Experience a calmer, more personal internet in this browser designed for you. Let go of the clicks, the clutter, the distractions.
🔥33😐10👍4
Стилизуй свой RSS
Дэрек Кэй предлагает интересное. Если у вас есть блог, или вы делаете новостной сайт, или сайт с какой-то обновляемой базой знаний, то скорее всего вы уже прикрутили RSS-ленту. Я, например, RSS пользуюсь постоянно, подписан много на кого через Feedly.
И вот пользователь переходит по прямой ссылке на RSS-ленту. Скорее всего он увидит месиво из XML-тегов и их содержимого. Казалось бы, ну и ладно, это же для автоматики страница, а не для людей.
Но у нас ведь есть древний способ стилизовать XML-документы — XSLT. В прошедшем недавно ЯЛФ CTF как раз было задание, где нужно было в XML-документе поиграться со стилями и получить нужный для ответа флаг.
Как это работает:
1. Вы заводите XML-документ с данными. RSS — это подмножество XML.
2. К нему прикрепляете XSL-стили.
3. Внутри XSL описываете шаблон представления данных. По сути — HTML с дополнительными возможностями шаблонизации, среди которых циклы, фильтрация, работа с «объектами», условия и прочее.
4. Туда же добавляете обычные CSS-стили, потому что уже есть привычный HTML-шаблон с тегами и классами, если нужно.
5. Если в RSS-ленту зайдёт робот, он не будет ничего делать со стилями и просто распарсит вашу ленту, как ему надо. То есть ничего не меняется.
6. Если зайдёт по прямой ссылке реальный пользователь, он увидит красивую ленту в стиле вашего сайта. Можно, например, приделать инструкцию, как подписаться на эту ленту.
XSLT сейчас скорее мёртв, чем жив, и хорошо — с ним мороки было очень много, не самый DX-приятный способ писать сайты. Но браузеры всё ещё его поддерживают, чтобы не сломались сайты, которые писали в древности. Поэтому можно использовать эту древнюю технологию для таких вот интересных экспериментов.
https://darekkay.com/blog/rss-styling/
Дэрек Кэй предлагает интересное. Если у вас есть блог, или вы делаете новостной сайт, или сайт с какой-то обновляемой базой знаний, то скорее всего вы уже прикрутили RSS-ленту. Я, например, RSS пользуюсь постоянно, подписан много на кого через Feedly.
И вот пользователь переходит по прямой ссылке на RSS-ленту. Скорее всего он увидит месиво из XML-тегов и их содержимого. Казалось бы, ну и ладно, это же для автоматики страница, а не для людей.
Но у нас ведь есть древний способ стилизовать XML-документы — XSLT. В прошедшем недавно ЯЛФ CTF как раз было задание, где нужно было в XML-документе поиграться со стилями и получить нужный для ответа флаг.
Как это работает:
1. Вы заводите XML-документ с данными. RSS — это подмножество XML.
2. К нему прикрепляете XSL-стили.
<?xml-stylesheet href="/rss.xsl" type="text/xsl"?>.3. Внутри XSL описываете шаблон представления данных. По сути — HTML с дополнительными возможностями шаблонизации, среди которых циклы, фильтрация, работа с «объектами», условия и прочее.
4. Туда же добавляете обычные CSS-стили, потому что уже есть привычный HTML-шаблон с тегами и классами, если нужно.
5. Если в RSS-ленту зайдёт робот, он не будет ничего делать со стилями и просто распарсит вашу ленту, как ему надо. То есть ничего не меняется.
6. Если зайдёт по прямой ссылке реальный пользователь, он увидит красивую ленту в стиле вашего сайта. Можно, например, приделать инструкцию, как подписаться на эту ленту.
XSLT сейчас скорее мёртв, чем жив, и хорошо — с ним мороки было очень много, не самый DX-приятный способ писать сайты. Но браузеры всё ещё его поддерживают, чтобы не сломались сайты, которые писали в древности. Поэтому можно использовать эту древнюю технологию для таких вот интересных экспериментов.
https://darekkay.com/blog/rss-styling/
Darek Kay
Style your RSS feed
How to make your RSS feed look nice and provide useful information at the same time.
👍11🤯8🤔3🤩1
О порядке применения трансформаций
София Валитова проверила по спецификации, в каком порядке применяются CSS-свойства
Напомню, теперь во всех основных браузерах есть индивидуальные свойства трансформации, то есть вместо
Кстати, у Софии есть свой канал, где она делится похожими находками из мира CSS, подписывайтесь: https://news.1rj.ru/str/css_mind.
https://ru.ariarzer.dev/2023/notes/transformation_order/index.html
София Валитова проверила по спецификации, в каком порядке применяются CSS-свойства
transform, transform-origin, translate, rotate и scale, и на примерах показывает, чем задание индивидуальных свойств отличается от задания частей свойства transform.Напомню, теперь во всех основных браузерах есть индивидуальные свойства трансформации, то есть вместо
transform: scale(1.2) можно писать scale: 1.2. Помню, в чатике Веб-стандартов была заруба, что чаще всего нет разницы, как писать эти трансформации, потому что редко мы используем сложные трансформации, где подряд несколько translate, например. А я недавно как раз наткнулся на такой случай, где трансформации из библиотеки мешали трансформациям из дизайн-системы. В общем, однозначно полезная заметка от Софии, которая поможет не путаться.Кстати, у Софии есть свой канал, где она делится похожими находками из мира CSS, подписывайтесь: https://news.1rj.ru/str/css_mind.
https://ru.ariarzer.dev/2023/notes/transformation_order/index.html
❤11👍3🔥3😍1
Кладезь полезных докладов по доступности!
В своё время мой мир перевернуло видео, где Анатолий Попко, незрячий, пришёл в гости в Вилсакому и показал, как он пользуется техникой. Теперь у меня язык не поворачивается сказать «доступность не нужна».
Лера Курмак делает важное дело, помогая разработчикам думать об интерфейсах по-другому. Если вам тоже приходится верстать интерфейсы, обязательно подпишитесь на канал «Не исключение», там много полезных материалов про a11y.
В своё время мой мир перевернуло видео, где Анатолий Попко, незрячий, пришёл в гости в Вилсакому и показал, как он пользуется техникой. Теперь у меня язык не поворачивается сказать «доступность не нужна».
Лера Курмак делает важное дело, помогая разработчикам думать об интерфейсах по-другому. Если вам тоже приходится верстать интерфейсы, обязательно подпишитесь на канал «Не исключение», там много полезных материалов про a11y.
🔥1
Forwarded from Не исключение: об инклюзии в цифровом и физическом мире
В преддверие курса по цифровой доступности A11y Unity, мы решили провести уже четвертую конференцию по доступности.
Пишите в комментариях, какие темы, вы бы хотели послушать. А также, если у вас уже есть доклад, с которым вы бы хотели выступить, тоже пишите в комментариях. Ну а если вы пропустили предыдущие конференции, ловите несколько ссылок на доклады:
Даты конференции мы пока финализируем, а вот с датами курса уже определились. Он стартует 23 сентября и до 12 августа действует скидка, присоединяйтесь accessibilityunity.com !
Пишите в комментариях, какие темы, вы бы хотели послушать. А также, если у вас уже есть доклад, с которым вы бы хотели выступить, тоже пишите в комментариях. Ну а если вы пропустили предыдущие конференции, ловите несколько ссылок на доклады:
• Доступные фичи и где они обитают, Таня Фокина• Дизайн система — доступность через ограничения, Ник Лопин• Встреча с незрячим пользователем программ экранного доступа (скринридеров). Женя Арнапольский• Как задокументировать дизайн и не облажаться. Кай Катонина• Встреча с пользователем с астеническим синдромом. Паша Любецкий• Доступность физического и цифрового пространства на выставках и в Музеях. Мария Щекочихина• Встреча с пользователем с нарушением моторики, Денис Редькин• Как искусственный интеллект и другие технологии меняют доступностьДаты конференции мы пока финализируем, а вот с датами курса уже определились. Он стартует 23 сентября и до 12 августа действует скидка, присоединяйтесь accessibilityunity.com !
YouTube
Конференция по цифровой доступности - Доступные фичи и где они обитают
Конференция по цифровой доступности
С 18 января и до 8 февраля мы будем говорить об очень разных аспектах доступности: что YouTube, Spotify, TikTok, Instagram, Microsoft и другие компании делают для инклюзии, как интегрировать доступность через дизайн-систему…
С 18 января и до 8 февраля мы будем говорить об очень разных аспектах доступности: что YouTube, Spotify, TikTok, Instagram, Microsoft и другие компании делают для инклюзии, как интегрировать доступность через дизайн-систему…
❤6🔥1
INP Debugger
Нашёл интересный инструмент для замеров метрики INP. Расшифровывается она как Interaction To Next Paint и в 2024 году станет частью Core Web Vitals. Если коротко, то INP равняется количеству миллисекунд, прошедших от пользовательского действия до визуального обновления на странице. Например, пользователь нажимает кнопку, вы обрабатываете клик, шлёте запрос на сервер, ждёте ответа, показываете сообщение на странице. Так вот INP — это значение самой большой задержки после пользовательского ввода на странице. Подробнее можно почитать вот здесь.
Так вот, в INP Debugger вы указываете вашу страницу, автоматика гуляет по ней (есть как десктопная, так и мобильная проверка), кликает во всякое, вводит текст в формы и замеряет, как долго страница реагирует на такие взаимодействия. Попользовался, натравил на пару своих страниц, нашёл несколько внезапных затупов, уже знаю, как чинить.
Понятно, что этот инструмент нужен для рекламы мониторингов от DebugBear, которые будут собирать эту и другие метрики постоянно. Но никто не мешает пользоваться им руками, не подключая мониторинги, для разового аудита сайта.
https://www.debugbear.com/inp-debugger
Нашёл интересный инструмент для замеров метрики INP. Расшифровывается она как Interaction To Next Paint и в 2024 году станет частью Core Web Vitals. Если коротко, то INP равняется количеству миллисекунд, прошедших от пользовательского действия до визуального обновления на странице. Например, пользователь нажимает кнопку, вы обрабатываете клик, шлёте запрос на сервер, ждёте ответа, показываете сообщение на странице. Так вот INP — это значение самой большой задержки после пользовательского ввода на странице. Подробнее можно почитать вот здесь.
Так вот, в INP Debugger вы указываете вашу страницу, автоматика гуляет по ней (есть как десктопная, так и мобильная проверка), кликает во всякое, вводит текст в формы и замеряет, как долго страница реагирует на такие взаимодействия. Попользовался, натравил на пару своих страниц, нашёл несколько внезапных затупов, уже знаю, как чинить.
Понятно, что этот инструмент нужен для рекламы мониторингов от DebugBear, которые будут собирать эту и другие метрики постоянно. Но никто не мешает пользоваться им руками, не подключая мониторинги, для разового аудита сайта.
https://www.debugbear.com/inp-debugger
Debugbear
INP Debugger: Identify Interaction To Next Paint Issues
Test Interaction to Next Paint and see what page elements on your website take a long time to respond to user input.
👍20👏1
GPTBot User-Agent
Как-то раньше не задумывался, но ведь ChatGPT — это такой же краулер, как и другие поисковики. То есть он собирает информацию из страниц в интернете, а значит заходит на сайт с каким-то User-Agent. Если поискать документацию, то с таким:
Ну или расслабиться и ничего не менять. Кажется, что такие меры нужны только сайтам, где контент — способ зарабатывать. NY Times, Medium и прочие издания с платной подпиской, скорее всего, захотят так сделать. Моему блогу это не надо, пускай он влияет на какой-нибудь маленький персептрон в большой нейронной сети.
Кстати, отдавать ботам другой контент — вполне себе рабочий подход для того же OpenGraph, который обычным пользователям в странице как-то и не нужен.
Как-то раньше не задумывался, но ведь ChatGPT — это такой же краулер, как и другие поисковики. То есть он собирает информацию из страниц в интернете, а значит заходит на сайт с каким-то User-Agent. Если поискать документацию, то с таким:
Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; GPTBot/1.0; +https://openai.com/gptbot)
И это значит, что я могу попробовать довериться честности разработчиков OpenAI и добавить в robots.txt исключения для GPTBot, если не хочу, чтобы контент моего сайта использовался для обучения AI-моделей. Если не могу довериться, то можно в принципе на сервере добавить мидлвару, которая будет по User-Agent из HTTP-заголовков находить ботов и отдавать им щедрое ничего.Ну или расслабиться и ничего не менять. Кажется, что такие меры нужны только сайтам, где контент — способ зарабатывать. NY Times, Medium и прочие издания с платной подпиской, скорее всего, захотят так сделать. Моему блогу это не надо, пускай он влияет на какой-нибудь маленький персептрон в большой нейронной сети.
Кстати, отдавать ботам другой контент — вполне себе рабочий подход для того же OpenGraph, который обычным пользователям в странице как-то и не нужен.
Openai
OpenAI Platform
Explore developer resources, tutorials, API docs, and dynamic examples to get the most out of OpenAI's platform.
🤔9👍5🔥3❤1
Как читать hex-цвета
Нашёл у себя в сохранённых старый доклад с dotCSS 2018 года. В нём Дэвид ДеСандро объясняет, как он со своей цветовой слепотой читает цвета по кодам. И сам по себе доклад пятилетней давности зародил у меня в голове много мыслей:
1. Чтобы работать с цветами, совсем не обязательно их видеть так же, как большинство. Достаточно знать математику работы с цветом. У нас ведь всякие цветовые палитры вполне себе описываются математически, доступность тоже.
2. HEX — супер-сложный формат для людей, но очень понятный для машин. Не просто так последние годы делается упор на работу сначала с HSL, потом с OKLCH. Если для HEX нужно запомнить как цветовой круг, так и произвести в голове некоторые вычисления для высчитывания яркости и насыщенности, в новых форматах всё довольно интуитивно, запоминать нужно только цветовой круг.
3. Как же всё-таки здорово, что в современных DevTools и IDE рядом со значением цвета рисуется квадратик с самим цветом. Это экономит кучу времени.
4. Чтобы переход на OKLCH произошёл, нужно, чтобы его поддержали графические редакторы. Как в 2018 году, так и сейчас разработчики копируют цвета, потому что так удобно и быстро. Если редактор показывает hex-цвет, то в коде тоже окажется hex-цвет. Да и не должны разработчики и дизайнеры разговаривать на разных языках, когда делают один интерфейс.
5. Я хочу научиться делать такие же красивые переходы в слайдах, как у Дэвида.
https://youtu.be/eqZqx6lRPe0
Нашёл у себя в сохранённых старый доклад с dotCSS 2018 года. В нём Дэвид ДеСандро объясняет, как он со своей цветовой слепотой читает цвета по кодам. И сам по себе доклад пятилетней давности зародил у меня в голове много мыслей:
1. Чтобы работать с цветами, совсем не обязательно их видеть так же, как большинство. Достаточно знать математику работы с цветом. У нас ведь всякие цветовые палитры вполне себе описываются математически, доступность тоже.
2. HEX — супер-сложный формат для людей, но очень понятный для машин. Не просто так последние годы делается упор на работу сначала с HSL, потом с OKLCH. Если для HEX нужно запомнить как цветовой круг, так и произвести в голове некоторые вычисления для высчитывания яркости и насыщенности, в новых форматах всё довольно интуитивно, запоминать нужно только цветовой круг.
3. Как же всё-таки здорово, что в современных DevTools и IDE рядом со значением цвета рисуется квадратик с самим цветом. Это экономит кучу времени.
4. Чтобы переход на OKLCH произошёл, нужно, чтобы его поддержали графические редакторы. Как в 2018 году, так и сейчас разработчики копируют цвета, потому что так удобно и быстро. Если редактор показывает hex-цвет, то в коде тоже окажется hex-цвет. Да и не должны разработчики и дизайнеры разговаривать на разных языках, когда делают один интерфейс.
5. Я хочу научиться делать такие же красивые переходы в слайдах, как у Дэвида.
https://youtu.be/eqZqx6lRPe0
YouTube
dotCSS 2018 - David DeSandro - Read color hex codes
Filmed at https://2018.dotcss.io on November 8th in Paris. More talks on https://dotconferences.com/talks
How does a colorblind designer work with color? Not with his eyes! Instead David relies on reading color hex codes. He shares his process into understanding…
How does a colorblind designer work with color? Not with his eyes! Instead David relies on reading color hex codes. He shares his process into understanding…
🔥14👍2
Forwarded from HolyJS — канал конференции
#видеозаписи
Весной многим понравился доклад Никиты Дубко про текущее состояние PWA.
А в этот #ТяжелыйПонедельник у нас двойная премьера: опубликовали сразу и видеозапись доклада, и его текстовую версию на Хабре.
Так что теперь его можно хоть посмотреть, хоть прочитать — как вам удобнее.
Весной многим понравился доклад Никиты Дубко про текущее состояние PWA.
А в этот #ТяжелыйПонедельник у нас двойная премьера: опубликовали сразу и видеозапись доклада, и его текстовую версию на Хабре.
Так что теперь его можно хоть посмотреть, хоть прочитать — как вам удобнее.
🔥22👍6😍1