TGViewer
Channel Public Channel
mefody.dev

mefody.dev

@mefody_dev

Доброжелюбный бородач про фронтенд, тимлидство, спикерство.
Автор — @dark_mefody

Канал про работу: @mefody_work.

Не размещаю рекламу в своём канале. Даже за деньги. Даже большие.
Subscribers
5.38K
Photos
22
Videos
1
Links
515

Showing posts older than #313 · Back to latest

Older Posts 20 shown
Post #312 4.54K
Сравнение LLM для генерации alt-подписей к картинкам

Дрис Бюйтаерт попробовал 10 локальных и 2 облачных LLM, чтобы оценить, какие из них лучше справляются с генерацией содержимого для атрибута alt у картинок. Он ведёт свой блог уже почти 20 лет, за это время скопилось много картинок без подписей, а это не ок.

Дрис сразу пишет, что облачные LLM справляются очень хорошо, но для него всё равно не очень удобно загружать больше 9000 фотографий непонятно куда.

Среди локальных лучше всех себя проявили MiniCPM-V и разные версии Llama. Правда, Llama даже в этом микротесте галлюцинировала. То есть автоматическую разметку либо нужно всё равно проверять вручную, либо дождаться, когда локальные модели станут точнее.

Ещё один вариант, который рассматривал Дрис — помечать сгенерированные AI подписи в БД и периодически их обновлять. Но тогда нужно и пользователям дать знать, что это автоматическая подпись. К слову, тогда, может, лучше и не подписывать совсем, потому что уже есть скринридеры с подобными функциями.

В общем, как будто мы пришли в тот момент развития LLM, когда облачные решения за счёт своих мощностей вполне себе могут делать опыт чтения статей с картинками для незрячих пользователей чуть приятнее, без вранья в виде галлюцинаций. А вот локальные опенсорсные модели пока ещё подтягиваются. И если выбирать между пользой для читателей и технологической элегантностью, то польза важнее, имхо.

https://dri.es/comparing-local-llms-for-alt-text-generation
dri.es Comparing local large language models for alt-text generation I tested 12 LLMs – 10 running locally and 2 cloud-based – to assess their accuracy in generating alt-text for images.
  • ❤‍🔥 13
  • 👍 8
  • 😐 3
  • 🌚 2
  • ❤ 1
Post #311 4.47K
Doom на TypeScript

Энтузиасты из сообщества Michigan TypeScript смогли запустить Doom на TS. Точнее, они написали и выложили в опенсорс движок для WebAssembly, который работает на типах. И основная новость, на самом деле, в этом. А Doom на типах рендерится ооооочень медленно, ещё и на обычных машинках не запустится, уж больно много памяти надо. Но ведь работает!

https://t.me/artalog/1572
Telegram artalog 🥺 https://youtu.be/0mCsluv5FXA
  • 🤯 27
  • 😁 7
  • 🌚 4
Post #310 3.99K
Переосмысление доступности скрытого текста при поиске

Кристиан Шефер подсвечивает интересную проблему. На одном из митапов он заметил, как незрячий спикер во время навигации по странице пользовался не всякими крутилками и переключалками, а обычным поиском текста по странице, чтобы быстрее перейти к нужному месту. И этот поиск работает только с тем текстом, который не спрятан визуально. А это значит, что всякое написанное в ARIA-атрибутах такому сценарию не помогает. Вообще такое поведение логично, ведь зрячие тоже так ищут по странице что-то, что выражено текстом.

Оказывается, в стандарте HTML есть значение атрибута hidden=until-found, которое по умолчанию ведёт себя как hidden, но когда на элементе фокусируются через ссылку или поиском по странице, hidden убирается. И одним из кейсов применения этого атрибута может быть как раз доступность при поиске по странице.

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

https://schepp.dev/posts/rethinking-find-in-page-accessibility-making-hidden-text-work-for-everyone/
schepp.dev Rethinking Find-in-Page Accessibility: Making Hidden Text Work for Everyone Discover how to enhance accessibility and improve find-in-page search functionality using hidden="until-found" for icon-only buttons and hidden text labels.
  • 👍 35
  • 🔥 16
  • ⚡ 4
  • ❤ 2
Post #309 6.11K
Инструмент поиска утечек памяти fuite

У Нолана Лоусона есть интересный пакет fuite, который помогает искать утечки памяти во фронтенд-приложениях. Наконец-то добрался его потестировать.

По сути достаточно вызвать команду npx fuite https://my-awesome.website/some-page -o ./output.json. После этого утилита запустит безголовый Chrome, а потом долго будет прогонять простые тесты, кликая по ссылкам и возвращаясь назад. В процессе анализирует heap snapshots, подписки на события и всякие доступные через Chrome DevTools Protocol объекты (к сожалению, именно поэтому тестирует по сути только в Chromium), а в конце выдаёт отчёт, где чего протекает.

Так как запускается это всё у вас локально на машинке, то можно хоть на dev-сервер натравить эту утилиту, хоть на продакшен. Я запускал на продакшен. Тестировало долго. Я бы даже сказал, что очень долго. Но нашло в одном проекте утечек на 700 килобайт памяти, а это уже хороший повод потерпеть. Ещё и показывает, где именно протекает, удобно.

https://github.com/nolanlawson/fuite
GitHub GitHub - nolanlawson/fuite: A tool for finding memory leaks in web apps A tool for finding memory leaks in web apps. Contribute to nolanlawson/fuite development by creating an account on GitHub.
  • 🔥 92
  • 👍 16
  • ❤ 5
  • 🤯 1
  • 🌚 1
Post #308 4.36K
Как поиск Google использует Speculation Rules API

Интересные новости. Оказывается, Google Search для двух первых результатов в выдаче в браузерах, которые умеют в Speculation Rules API (а это Chromium-браузеры на данный момент), заранее делает prefetch. Причём, если я правильно помню, когда не задана явно настройка eagerness, то это по сути равно «как только, так сразу». А так как страница поиска довольно хорошо оптимизированная, то в большинстве случаев запросы на первые два сайта идут.

В статье показано, как Google использует API для анонимизации IP пользователей, прятания referer (иначе можно было бы выдачу поиска исследовать) и работы с куками (точнее, их отсутствием).

С одной стороны, вроде бы становится хорошо: LCP у сайтов в топе уменьшается на 67 миллисекунд на мобилках и на 58.6 миллисекунд на десктопах. А это для современного веба много. С другой — не нашёл нигде статистики, как эти сайты с нагрузкой справляются лишней. Ведь по сути сайт в топе выдачи — это популярный сайт. И обращаются к нему часто, то есть владельцы сайтов как-то прогнозируют трафик, чтобы держать какую-то нагрузку. Для большинства сайтов вряд ли один дополнительный запрос от пользователя что-то радикально сломает, но ведь кому-то и сломает.

Для остальных 8 ссылок в поиске работает чуть менее агрессивный prefetch с настройкой "eagerness": "moderate", то есть скачивание начинается по 200мс-ховеру или по опусканию указателя.

Предвосхищая вопросы про рекламу, вроде «Интересно, на рекламу тоже работает такой prefetch?», подозреваю, что нет. Потому что реклама не попадает в число 10 ссылок выдачи, она всегда в дополнение. А ещё за клик по рекламе списывается денежка рекламодателя, хотя, наверное, тут могли бы как-то отделить честный клик от предварительного префетча. В статье про это ничего нет, но я попробовал поиграться с запросом «окна», глядя в девтулзы — не заметил префетча рекламы, а вот органическую выдачу вполне себе браузер скачивает заранее.

https://developer.chrome.com/blog/search-speculation-rules
Chrome for Developers How Google Search uses speculation rules | Blog | Chrome for Developers Learn about how Google Search used the Speculation Rules API to anonymously prefetch search results to improve user experience
  • 👍 31
  • ❤ 2
  • 👌 2
  • ❤‍🔥 1
  • 🤩 1
Post #307 4.88K
Шрифт Martian Mono v1.1.0

Приятный релиз для любителей шрифтов с лигатурами. У «Злых Марсиан» есть свой моноширинный шрифт, Martian Mono. Мне он нравится не только за приятные и читаемые формы символов, но и за уважение к многообразию языков в мире. У меня есть свой тест для шрифтов: смотрю на букву Ў. Если что, это не просто «У» с шляпкой, а 22-я буква беларусского алфавита, а я иногда в личных проектах пишу комментарии на беларусском языке (і што вы мне зробіце? гэта мая родная мова, дзе хачу, там і выкарыстоўваю). Очень многие хорошие кириллические шрифты на этом тесте ломаются.

В версии 1.1.0 появилось ещё больше символов из разных языков мира. И новые программистские лигатуры.

https://github.com/evilmartians/mono/releases/tag/v1.1.0
GitHub Release v1.1.0 · evilmartians/mono Changelog 2025-02-10, version 1.1.0 Fixed: ¬ (logical not) alignment. Fixed: ÷ (divide character) interpolation issue. Added more coding ligatures: <-, >>=, <<=, ‌>>>=, &gt...
  • ❤ 65
  • 👍 26
  • 😁 8
  • 👏 2
  • 👌 2
  • 🎉 1
Post #306 4.67K
Любопытное применение CSS-импортов в вебе

Эрвин Хофман подсвечивает большую проблему в современном вебе. По статистике Веб-Альманаха за 2024 год на 18.86% сайтов есть @import в CSS. Причём на 15.16% это подключение чего-то стороннего. Чаще всего — веб-шрифтов, fonts.googleapis.com в статистике лидирует.

Почему это проблема? Потому что @import блокирует рендеринг. Браузер видит @import в CSS-коде, идёт качать новые стили, в это время много какие процессы уходят на перекур. И только после того, как новые стили скачаются, можно продолжить остальное важное для рендера страницы. В случае со сторонними доменами тратится ещё и неприличное время на DNS-резолвинг, рукопожатия лишние и прочее междоменное. Ну и заодно любезно сливаются данные о пользователе, которые можно достать из запроса даже к CSS-файлу.

А вот был бы старый надёжный <link rel="stylesheet" href="another.css">, таких проблем бы не было. У браузера есть так называемый preload scanner, который умеет для оптимизации скачивать ресурсы заранее. Ещё и приоритет ресурсу можно выставить повыше, если стили очень важные.

В общем, если у вас есть в команде внутренние KPI на ускорение сайта, при этом в коде есть CSS-импорты — уберите их, с высокой вероятностью полезные метрики вырастут.

https://calendar.perfplanet.com/2024/the-curious-performance-case-of-css-import/
Web Performance Calendar The curious (performance) case of CSS @import Nearly one in five websites is secretly sabotaging its own performance through a single CSS feature that's been known to be problematic for over a decade. Based on our analysis of over 16 million mobile websites, there's a good chance you might recognize…
  • 👍 73
  • ❤ 10
  • 🔥 10
Post #305 4.53K
hyphenate-limit-chars

Одно из недавних моих открытий в мире CSS-спецификаций. Думаю, про свойство hyphens: auto, которое включает перенос на новую строку для длинных слов, вы знаете. Точнее, просит браузер, если у него есть правильные словари, включить эти самые переносы. Использую редко, потому что мне в целом не нравится, когда в веб бездумно переносят то же самое, что есть на бумаге.

Но, оказывается, есть ещё одно полезное свойство, которое не даёт браузеру переносить слишком короткие слова. Если записать hyphenate-limit-chars: 10 4 3, то вы говорите браузеру:
- не переноси слова, которые короче 10 символов;
- при переносе оставляй на первой строке не меньше 4 символов;
- при переносе оставляй на второй строке не меньше 3 символов.

Можно написать короче, hyphenate-limit-chars: 10, если вам важен контроль только над длиной слов.

Хоть и пользуюсь автопереносами в вебе я редко, там, где всё-таки пользуюсь, мне этот маленький файнтюнинг прям будет полезен. Да, только для Chromium-браузеров, но прогрессивное улучшение никто не отменял.

https://developer.mozilla.org/en-US/docs/Web/CSS/hyphenate-limit-chars
MDN Web Docs hyphenate-limit-chars CSS property - CSS | MDN The hyphenate-limit-chars CSS property specifies the minimum word length to allow hyphenation of words as well as the minimum number of characters before and after the hyphen.
  • ❤‍🔥 37
  • 👍 27
  • 🔥 7
  • ❤ 2
  • 🎉 1
Post #304 4.28K
CTF для конференции «Я люблю фронтенд»

Уже сбился со счёта, сколько лет помогаю делать конференцию «Я люблю фронтенд» в составе програмного комитета. Не буду говорить, что программа там классная. Не буду намекать, что можно будет 15 февраля подключиться посмотреть в онлайне или прийти офлайн (если успели ухватить билет).

Но для меня одна из самых любимых частей этого события — ежегодный CTF для фронтендеров, который мы готовим к конфе с 2021 года. Многие же говорят, что пришли в айтишечку, чтобы делать игры (а потом что-то пошло не так). А мы вот прямо сейчас доделываем ещё одну игру, которая стартует сегодня в MTk6MDMgKEdNVCszKQ==.

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

P.S. Авторы игры не несут ответственности за тильт и батхёрт во время решения задач
  • 🥰 19
  • ❤ 11
  • 💔 7
  • 👍 5
Post #303 4.47K
Сохранение интерактивности страницы во время View Transition

Я несколько раз в подкасте жаловался на то, что у прекрасного View Transition API есть один существенный недостаток: пока идёт анимация перехода, страница перестаёт быть интерактивной. То есть кнопки не нажимаются, ховеры не срабатывают и так далее.

В целом, оно и логично. Во время перехода по сути у вас одна картинка превращается в другую. Не очень понятно, куда клик должен проваливаться.

И вот Брамус поделился простым, но интересным решением.


::view-transition {
pointer-events: none;
}


Во время перехода на странице создаётся псевдоэлемент ::view-transition, который накладывается поверх вьюпорта. И ведь в CSS уже давно есть способ убирать с элементов обработку событий указателя. Классно! Классно же, да?

Увы, есть нюанс. Сниппет действительно хороший, если вы используете VTA для анимации чего-то внутри документа. Карточка, которая превращается в другую карточку, например. А вот если вы сам документ и анимируете, то ничего не получится. То есть этот сниппет удобен как раз для того, чтобы не весь вьюпорт замораживать, а только ту область, которая анимируется.

У меня в проекте переключение темы сделано через VTA, и там этот сниппет, к сожалению, не применить, потому что тема переключается на всём документе единомоментно. Но я уже поигрался с тем, чтобы анимировать внутри страниц таким образом — нравится.

https://www.bram.us/2025/01/29/view-transitions-page-interactivity/
Bram.us View Transitions Snippets: Keeping the page interactive while a View Transition is running The ::view-transition root overlay captures all clicks … but you can undo that.
  • 🤔 17
  • 👍 11
  • ❤ 5
  • 😁 2
  • 💯 2
  • ⚡ 1
  • 🤩 1
Post #302 4.62K
Кнопка «Вверх» с индикатором прогресса

Мануэль Матузович собирает популярную на различных сайтах кнопку «Scroll to top» на HTML и CSS. Кнопка из коробки доступная (потому что ссылка), заодно показывает, сколько процентов страницы уже прочитано пользователем. «2-в-1, только сейчас в нашем онлайн-магазине, ещё и бесплатно!»

Заранее предупрежу, что использует она под капотом современные возможности браузеров вроде Scroll Timeline API и @property, но это не мешает прогрессбар прикручивать как прогрессивное улучшение.

https://matuzo.at/blog/2025/scroll-to-top-button
Manuel Matuzovic Building a progress-indicating scroll-to-top button in HTML and CSS I'm a frontend developer in Graz, specialized in HTML, accessibility, and CSS layout and architecture.
  • 👍 34
  • ❤ 12
  • 🔥 6
  • 🏆 2
  • 🐳 1
  • 🌚 1
Post #301 4.72K
Время избавляться от BlinkMacSystemFont и -apple-system

Короткий рецепт. Если у вас в стилях подключаются шрифты BlinkMacSystemFont и -apple-system, то удалите их и замените на system-ui. Поищите в фолбеках.

А вот почему так, откуда эти шрифты взялись и безопасно ли их вообще использовать — в посте Стояна Стефанова.

https://highperformancewebfonts.com/read/ditch-BlinkMacSystemFont-and-apple-system
Highperformancewebfonts High-Performance Web Fonts Tools and resources on how to use web fonts without sacrificing page loading speeds
  • 🎉 18
  • ❤ 4
  • 👍 4
  • 🔥 2
Post #300 5.14K
Опция --erasableSyntaxOnly в TypeScript

Вышли релизноуты беты TypeScript 5.8. Там есть разное полезное, но меня зацепила одна конкретная опция. В новом релизе хотят добавить аргумент --erasableSyntaxOnly, который попросит TS ругаться на конструкции языка, несовместимые с Node.js.

Если помните, в Node.js завезли возможность запускать ts-файлики вырезанием типов. И мешать могут енамы, неймспейсы, специальные особенности конструкторов классов. В целом, если вам правда очень хочется запускать ts-код без компиляции и сборки, можно поискать эти мешающие конструкции тем же поиском по файлам, регулярками, но гораздо приятнее, когда на ошибку кто-то укажет явно.

В общем, Node.js и TypeScript идут навстречу друг другу, это здорово.

https://devblogs.microsoft.com/typescript/announcing-typescript-5-8-beta/
Microsoft News Announcing TypeScript 5.8 Beta Today we are excited to announce the availability of TypeScript 5.8 Beta. To get started using the beta, you can get it through npm with the following command: npm install -D typescript@beta Let’s take a look at what’s new in TypeScript 5.8! Checked Returns…
  • 👍 44
  • 🔥 24
  • ❤ 5
  • 💔 3
  • 🥴 1
Post #299 5.56K
create-react-app всё

Я уже пару лет прошу фронтендеров не пользоваться CRA, потому что он устарел, не поддерживается командой разработки и не планировался быть совместимым с React 19. А теперь и сама команда CRA добавила в ридми проекта плашку «Ухадити! Тут никого нет! Используйте фреймворки, не используйте create-react-app!»

https://github.com/facebook/create-react-app/pull/17003
GitHub Deprecate Create React App officially by changing the README, and adding a message on init by orta · Pull Request #17003 · facebook/create… It's probably time to make this project document its status as being deprecated and not recommended for production usage. To change it: I opted to add a header to the README saying its ov...
  • 👍 67
  • 🤣 13
  • ❤ 7
  • 😢 7
  • 🎉 6
  • 🌚 4
  • 💯 2
  • 🐳 1
Post #298 5.37K
Шаблонные литералы в TypeScript

У доктора Акселя Раушмайера вышел очень хороший гайд по тому, как можно полезно применять шаблонные литералы в TS. Это когда вы пишете что-то вроде type TailwindColor = `${BaseColor}-${Variant}`;, а внутри уточняете допустимые типы-значения.

Видел, как при помощи таких «умных» типов делали супер-мощные проверки контрактов с бекендом, прокачивали типы внешних библиотек и в целом сильно улучшали DX (автокомплит — одно удовольствие).

https://2ality.com/2025/01/template-literal-types.html
2Ality Template literal types in TypeScript: parsing during type checking and more In this blog post, we take a closer look at template literal types in TypeScript: While their syntax is similar to JavaScript’s template literals, they operate at the type level. Their use cases include: Static syntax checking for string literals Transforming…
  • 👍 35
  • 🔥 7
  • 🤔 2
  • ❤‍🔥 1
  • ❤ 1
  • 💯 1
Post #297 5.31K
Браузер Lightpanda

Происходит интересное. Думаю, не секрет, что запустить безголовый Chrome — дорого. То есть если вам нужно просто распарсить страничку, то проще дёрнуть её через cURL, если это статика. Но если это SPA, которых сейчас в интернетах много, то тогда уже надо брать какой-нибудь Playwright или Puppeteer.

И вот команда Lightpanda решила для задач скраппинга страниц (для тех же LLM, например) сделать свой быстрый браузер, который в принципе ничего не рендерит. Естественно, по их бенчмаркам вверху описания проекта браузер работает в 10 раз быстрее и эффективнее по памяти. И внизу страницы написано, что скорее всего большинство сайтов у вас сломается, потому что браузер пока в глубокой бете. Но судя по активности коммитов в репозитории и тому, что этот браузер нужен самой команде для их бизнеса, есть все шансы, что в каком-то удобоваривом виде браузер скоро выйдет из беты. Жду.

https://github.com/lightpanda-io/browser
GitHub GitHub - lightpanda-io/browser: Lightpanda: the headless browser designed for AI and automation Lightpanda: the headless browser designed for AI and automation - lightpanda-io/browser
  • 🔥 36
  • 👍 8
  • ❤ 4
  • 😍 2
  • 🐳 1
Post #296 5.19K
6 CSS-сниппетов, которые должен знать каждый фронтендер в 2025 году

Ох, как же я люблю такие заголовки в статьях. Год ещё только начался, а я уже кому-то что-то должен. Но, тем не менее, Адам Аргайл делится полезными «карапульками», знание которых вам может помочь:
- Анимация через linear().
- Типизированные кастомные свойства.
- View Transitions для переходов между страницами.
- Анимации появления и скрытия диалогов и поповеров.
- Анимация скрытия и раскрытия details.
- Анимированный градиентный текст.

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

https://nerdy.dev/6-css-snippets-every-front-end-developer-should-know-in-2025
nerdy.dev 6 CSS Snippets Every Front-End Developer Should Know In 2025 Toolbelt worthy, powerful, and meaningful CSS you'll need for 2025.
  • ⚡ 20
  • ❤‍🔥 10
  • 👍 9
  • ❤ 7
  • 🔥 4
  • 🥴 3
  • 👏 2
  • 😐 1
Post #295 4.43K
Псевдокласс :empty

Крис Фердинанди напоминает о том, что в CSS довольно давно работает псевдокласс :empty. Всё, что он делает, это ищет элементы, внутри которых буквально ничего нет. Акцентирую на этом внимание: нет ничего, совсем ничего, даже пробела — это важно.

Применять такой селектор удобно для тех случаев, когда с сервера могут прийти любые данные, в том числе пустые. Обычно принято в JavaScript писать логику, проверять данные, в зависимости от этого перестраивать компонент. Со списками — делать фильтрацию. Но если по какой-то причине в код компонента залезть нельзя, а в стили можно, то вот вам и решение: .card:empty { display: none; }

https://gomakethings.com/the-empty-pseudo-class-in-css/
gomakethings.com The :empty pseudo-class in CSS One of my favorite not-so-new aspects of CSS is the :empty pseudo-class. You can use this to target elements that have no children—either child elements or whitespace and text nodes—and style them differently than they would be otherwise. For example, imagine…
  • 👍 31
  • 💯 27
  • 🔥 6
  • ❤ 2
  • 👏 1
  • 🤔 1
  • 🤯 1
  • 🥴 1
  • 🐳 1
Post #294 5.02K
Перевод aria-description

Адриан Розелли продолжает разбираться, как работают различные a11y-фичи в браузерах на самом деле. В этот раз он проверил, как сочетаются атрибут aria-description и автоматические переводчики. У браузеров для пользователей есть функции автоперевода, для пользователей с особыми потребностями эта фича тоже важна.

Увы, оказалось, что только Firefox переводит, и то не везде. Chrome и Safari не переводят совсем. Google Translate, к слову, тоже не справляется.

Поэтому более правильный способ перевода доступных описаний — через aria-describedby, который связывается с реальным элементом в DOM, а там перевод вполне себе работает.

https://adrianroselli.com/2025/01/aria-description-does-not-translate.html
  • 🔥 22
  • ❤ 3
  • 👏 1
Post #293 5.56K
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →