Будни разработчика

#баг дня

Одна из моих любимых фишек инструментов разработчика Google Chrome или Firefox (aka девтулзов) — это возможность сделать скриншот ноды.

Нужен длинный скриншот страницы? Бахаешь на body или html и сидишь довольный.

Нужен лишь кусочек? Не вопрос, выдели нужную ноду мышкой и скриншоть себе на здоровье.

Но не обошлось без проблем. Ну честное слово, вот же вся страница, на экране. Бери да превращай в картинку. Нет...

Если в вашей ноде есть картинки, добавленные через тег img с атрибутом decoding="async" — они потеряются :(

Вот так вот неожиданно. Видимо кто-то где-то промис не разресолвил :)

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

Но неприятный осадок всё-таки остался.

Сейчас ищу формальное описание бага в багтрекере. Если не найду — придётся заводить.

Демо: https://10web.io/blog/how-to-create-a-blog-on-wordpress/

Просто попробуйте сделать скриншот body, не скролля заранее.

Проверено на Chrome 138.0.7204.184. Столько времени прошло с предыдущей проверки...

В итоге, часть картинок может появиться, а часть — нет.

Вообще, я откровенно не люблю ленивую загрузку картинок и контента. Да, помогает на медленном интернете, но абсолютно мерзко и неудобно на нестабильном соединении. Например, в поезде.

P. S. В Firefox 141 баг тоже имеется.

#chrome #bug #async #бородач

#ссылка дня

Мы тут немного повеселились с XSS в разных продуктах и сайтах, результаты удивили. Распространяться я не буду, неприлично, но парочкой полезных ссылок поделюсь.

1. Расширение для Chrome, позволяющее быстро выбрать и вставить XSS-строку в нужное вам текстовое поле: https://chrome.google.com/webstore/detail/bug-magnet/efhedldbjahpgjcneebmbolkalbhckfi?hl=en

2. И репозиторий на ту же тему: https://github.com/minimaxir/big-list-of-naughty-strings

Впрочем, там не только XSS. Помните, например, в чатах люди свои ники пишут с “грязью”? Красиво поломать интерфейс — это туда. Вставить эмодзи, смайлы, управляющие символы.

Ломайте свои интерфейсы сами и избегайте XSS, котаны.

#xss #naughty #injection #бородач

#фишка дня

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

Итак, давайте поясню для тех, кто по ссылкам не ходит.

В азиатских иероглифических языках почти весь ввод с клавиатуры происходит в аккордном режиме или же в режиме т. н. композитинга, общее название — Input Method Editor.

TL;DR: На экране всплывает окошко с символами или их группами и пользователь может что-то выбрать.

На каких-то ОС оно вызывается долгим зажатием клавиши, где-то — по хоткею, а где-то — автоматически и сразу.

Так вот, одно дело азиатские языки (я очень рекомендую посмотреть сам твит), а другое — разные европейские. И речь о диакритических знаках: умляуты, акуты, ударения, птички и шапочки.

Так вот, я не имею финской раскладки, потому буквы ä, å и ö ввожу как раз в режиме композитинга, долгим зажатием «материнской» клавиши.

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

Кстати, выбор Emoji из всплывающего окошка — туда же.

В JavaScript-событиях для этого режима имеется флаг isComposing. Поэтому если вы, как и я в примере на видео, решили реализовать ввод групп символов подобным образом — циклически перебирая поля ввода — стоит об этом подумать :)

Собственно, давайте и пример: https://codepen.io/alinaki/pen/MWMpdvO?editors=1010

И напишите в комментариях, как вы решаете проблему редкого ввода букв с диакритикой у себя в системе. Например, я не помню, как это происходит в Windows, а в Linux я использую клавишу Compose, она работает чуть иначе.

#javascript #composing #event #бородач

#codepen дня

Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с 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 #бородач

#баг дня или история одного апокалипсиса

Знаете, что происходит, если в Firefox ввести в <input type="number"> что-то вроде lol?

Он позволяет.

Да, вы видите эти lol, будто это валидное число. Только вот значение value в DOM превращается в пустую строку. Ну типа «я тебе это показал, но делать с этим ничего не буду». Гениально.

Баг #1398528 в Bugzilla живёт с 2017 года. Проблему признают: Firefox нарушает спецификацию WHATWG, согласно которой input type=number должен принимать только корректные числовые строки. А на деле — буквы, кириллица, эмоджи — всё идёт в бой. Только вот под капотом — пусто. Т.е. ты видишь, что ввёл, но значение не считается валидным. UX? Ну, такое себе.

Почему не фиксят?

Ответ классический: «а что, если у нас локаль с деванагари и арабскими цифрами, и вообще — как различать запятую и точку?». Ну и правда, лучше пусть вводится вся клавиатура, чем разбираться в сепараторах.

А теперь немного цирка из Chrome:

В Chrome <input type="number"> иногда разрешает ввод e, ведь вдруг ты хочешь ввести 1e10 (научную запись). Но если ты просто набрал e, поле становится… валидным. Бинго!

Ещё веселее: 1e- — тоже "нормально", но 1ee — уже нет. Картинку с барабаном вставите сами.

А если ты вводишь 1,5 в локали, где десятичный — это точка, Chrome может забраковать это, а может и нет — зависит от версии, луны и количества кофе у разработчика.

В итоге: у Firefox можно ввести хоть «привет», и он такой: «ну окей, но это не число». Chrome вроде бы фильтрует, но делает это через лунную призму.

Что же мы делаем? Пишем код, блять!

Мораль: в 2025 году проще создать свою валидацию под конкретный случай, чем надеяться, что браузеры когда-нибудь договорятся.
А баг тем временем отмечает 8 лет жизни, всё ещё «NEW», и, судя по комментариям, будет жить

Баг-репорт: https://bugzilla.mozilla.org/show_bug.cgi?id=1398528

Подпишитесь и следите, если вы, как и мы, верите (нет) в чудеса стандартизации.

P. S. тем временем Firefox пробивает дно за дном. В англоязычном интерфейсе выдаёт мне ошибки валидации на финском языке.

P. P. S. я молчу уже о том, что <input type="number"> вообще нахер не нужен и даже вреден: https://t.me/htmlshit/2663

#firefox #bug #input #number

#доклад дня

Вот так живёшь и не знаешь, что коллега — Василий Рогин — выступил на HolyJS с докладом о том, как перенёс фанатские моду Fallout 2 — Nevada и Sonora — в браузер.

Не через стриминг или эмулятор, а с нативным кодом C/C++, собранным через Emscripten в WebAssembly.

Классика жизни.

Проект основан на fallout2-ce — декомпиляции оригинального движка. И вроде бы SDL2 + wasm = счастье, но на практике всё куда интереснее:

🧩 Основные сложности:

1. Цикл игры и цикл браузера не совпадают: приходилось выносить основной луп в requestAnimationFrame, чтобы всё работало без лагов.

2. Asyncify стал ключевым инструментом: позволил «притвориться», что WebAssembly поддерживает sleep() и обычную блокирующую логику, хотя на деле всё идёт через промисы.

3. Проблемы со звуком: в вебе нет привычных потоков, а WebAudio требует костылей вроде SDL_Sleep(1), чтобы не обгонять буфер.

4. Работа с файлами: пришлось изобретать файловую систему с подгрузкой ресурсов по запросу, Asyncfetchfs, IDBFS для сохранений, и обходить баги вроде __syscall_openat, создающего побочные эффекты.

5. Было ещё весело с WebWorker'ами, OffscreenCanvas и SharedArrayBuffer — всё поддерживается, но не вместе и не так, как хотелось бы.

Ссылка на видео доклада: https://www.youtube.com/watch?v=wYJN0pLDPRw
И на PDF: https://squidex.jugru.team/api/assets/srm/878900fe-502b-4b48-a6a9-478d526048dd/holyjs-fallout2-3-.pdf

Fallout 2 — не просто культовая игра, это важный культурный пласт. И круто, что теперь её ответвления (я так понимаю, тут сугубо проблема прав на контент) можно запускать из браузера. Васе большой респект.

А, ну и конечно же, давайте поиграем: https://fallout-nevada.ru/

#game #webassembly

#такое дня

Кто хочет поорать на монитор?

На меня не смотрите, я уже поорал.

Итак, насколько хорошо ты понимаешь даты в JavaScript?

Кто сказал Temporal API? Выйди вон из класса, дедушки разговаривают.

Итак, вашему вниманию квиз на пограничные условия в JS Date API.

Вперёд, делитесь результатами: https://jsdate.wtf/

У меня всё очень плохо 🫠

#js #date #wtf

#статья дня

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

А начинаем мы новый сезон очередной статьёй Джоша Комо! Он тоже вернулся после перерыва и обратил свой взор на базу SVG: https://www.joshwcomeau.com/svg/friendly-introduction-to-svg/

Как всегда, неважно, начинающий вы или давно в профессии: великолепные интерактивные примеры — визитная карточка Джоша.

Возможно, кто-то восполнит пробелы :)

#svg #tutorial

#видео дня

Если вы интересовались прогрессом моего пульта на Flutter, то, собственно, вот он!

Всё работает и на Linux, и на Windows, и на macOS и, конечно же, на изначальной целевой платформе — iOS.

А вот на Android чот не могу разрешения на сеть победить, но я справлюсь.

На десктопе при этом полная поддержка горячих клавиш. Иметь пульт на ноутбуке — это гораздо сподручнее, чем кажется!

Отмечайтесь, интересно ли вам почитать, чем разработка на Flutter напоминает веб-разработку и как оно там вообще.

#flutter #mobile

#фишка дня

Надоело угадывать высоту строки, чтобы текст стал высотой ровно в прописную букву? Say no more!

 line-height: 1cap;

И вы великолепны.

P. S. ещё более вы великолепны, если Safari версии больше 17.2 включительно.

#css #бородач

#такое дня

Никак не мог вчера понять, почему в части проекта аутентификационные попапы отрабатывают нормально, а в другой — нет.

Флоу-то классический, тяжёлый, надёжный как швейцарские часы:

1. Кликнули по кнопке
2. Открылся попап аутентификации
3. Пока пользователь проходит процесс, ждём закрытия окна (а точнее, проверяем свойство closed по интервалу)
4. Как только окно закрылось — обновляем список токенов.

Так вот в некоторых проектах пункт 3 отваливался. Терялся контекст окна и всё тут. Хотя флоу и инструменты везде одни и те же.

Как оказалось, аддон koa-helmet для Koa.js когда-то давно в патч-версию вкинул заголовки CORS и COOP. И врубил их по-умолчанию.

Что такое CORS знают, в общем, все. А что такое COOP?

Это сравнительно новая штука и она устанавливает правила общения с окном, открытым через window.open. И в случае same-origin, достучаться до свойства closed уже не выйдет.

Есть same-origin-allow-popups, но оно совсем новое и мало где поддерживается.

Ну и в какой-то момент старую версию Koa обновили до поновее и получили упс.

Менять поведение в патч-версиях — это мерзко. Но мы уже не в первый раз такое наблюдаем.

#koa #js #backend #popup #coop

#фишка дня

Как сделать описания проектов на GitHub более явными и привлечь внимание читателя там, где это необходимо?

Использовать кастомные цитаты!

Пример: https://github.com/HTMLShit/htmlshit.github.io/blob/master/demo.md

Доступные типы: NOTE, TIP, IMPORTANT, WARNING, CAUTION.

Очевидно, это доступно и в управлении проектами на гитхабе. Для небольших задач — очень хорошо, не нужно переходить в Trello.

Пример синтаксиса:

> [!NOTE]
> Заметка о выпуске

Да, к слову, кто не знает, что за Markdown такой, вот: https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

Я ссылаюсь на вариант от GitHub, потому что он самый популярный. В комментариях есть ссылка на вариант от GitLab.

А вот, собственно, где это нововведение обсуждалось: https://github.com/orgs/community/discussions/16925

Как вам кастомный маркдаун, котаны? Заходит?

#github #md #note #бородач

#такое дня

Я достаточно долго сидел на Ubuntu и использовал WINE для запуска Photoshop CS6 и CC до того, как Figma стала индустриальным стандартом.

Ну и игры, само собой.

Так вот, в среде линуксоидов, особенно начинающих, распространено мнение, что вирусы в WINE не запустятся, потому что то ли WINE настолько хорош, то ли настолько плох, то ли Linux-based OS настолько безопасные.

Так вот, запустятся. Знаменитый WannaCry прекрасно шифрует файлы и каталоги за пределами выделенной WINE папки. Почему?

Потому что диск Z:\ в WINE по-умолчанию замаплен на всю файловую систему Linux.

WINE не только не эмулятор, но ещё и не песочница. Так что осторожнее с этим, и, как минимум, уберите Z:\ из winecfg.

А вообще, это явно признак того, что WINE очень даже повзрослевший продукт.

Такой вот понедельник.

P. S. если кто не в курсе, Valve Proton и Apple GPTK тоже основаны на WINE.

#linux #wine

#код дня

Ладно, стратегия взять вас на понт не получилась, ни одного лайка и, видимо, почти ни одного просмотра ссылки!

Если боитесь смотреть, код, который вешает браузер, на иллюстрации.

Такая себе рекурсия! Куча вложенных блоков, а на них ещё и нестинг. Всего-то 8 раз по 40 вложенных элементов.

Я как-то на большее рассчитывал, если честно :)

#такое дня

Не открывайте этот кодпен, если не хотите повесить ваш Chrome!

https://codepen.io/chasewackerfuss/pen/JKGrJJ

Да-да, не вкладку, а весь браузер. Закрыть-то её можно, но на MacBook на M2 Pro я смог это сделать только через минуту.

Изоляция вкладок, говорили они. Нестинг и анимации не будут влиять на производительность стилей, твердили они... Ха-ха.

У Safari, кстати, всё хорошо. А Firefox сильно тормозит, но не так и не настолько плохо, как Chrome. И весь браузер не вешается.

#codepen #css #nesting #fail

#фишка дня от Jhey

Не только лишь все знают, что в content у псевдоэлементов можно использовать переменные. Это позволяет удобно помечать, например, уведомления. Или те же бейджики на карточках.

Но ведь, как мы уже. недавно выяснили, анимировать можно вообще что угодно!

Потому... разбиваем строку на span-ы и в каждом с помощью ключевых кадров меняем переменные, отвечающие за контент:

button:hover span:after {
  animation: flip 0.2s calc(var(--i) * 0.05s);
}
@​keyframes flip {
  20% { content: '_'; }
  40% { content: var(--c1); }
  60% { content: var(--c2); }
}

Вуаля, вы великолепны!

Естественно, символы надо определить заранее:

  <span
    style="--i: 0; --c1: 'x'; --c2: '$'; --c3: '≈';"
  >C</span>

The Matrix has you.

А, ну и ссылочка на кодпен: https://codepen.io/jh3y/pen/GRLKMPY

#css #var #flip #бородач

#фишка дня

В TypeScript получение keyof [string, number] кортежа даст не "0" | "1", а:
"0" | "1" | "length" | "push" | "toString" | ...

Пу-пу-пу...

Хочешь только индексы?

type IndexKeys<T extends any[]> = Extract<keyof T, `${number}`>;

Теперь IndexKeys<[string, number]> → "0" | "1".

Проклято.

#ts #keyof

#ссылка дня

А как сделать кнопку? А как тулбар? А как сверстать несколько колонок с перекрытием? А если мне анимации стандартные не подходят?

Ни слова больше! Google has us covered!

https://web.dev/patterns/

От простых вещей вроде кнопки или описания кривой Безье для анимации до загрузки файлов, работы с буфером обмена и превращения сайта в PWA.

Хотелось бы больше примеров, конечно, но кому не хочется? :)

#web #app #patterns #бородач

#ссылка дня

Все знают, что в JavaScript возможны утечки памяти, вот только никто их не видел.

Погоди, в смысле, никто? Вот же, целый репозиторий: https://github.com/ufocoder/javascript.memory-leaks

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

Не позволяйте памяти утечь, котаны! И дополняйте примеры :)

#javascript #memory #бородач

#шрифт дня

Microsoft выкатили Kermit — первый в своём роде шрифт, в котором каждая буква анимируется поштрихово, как будто её пишут от руки.

Сделан он студией Underware — и не просто для красоты. Этот шрифт помогает детям учиться читать и писать, показывая, как именно строятся буквы.

И, что особенно приятно — всё это работает и для
кириллицы.

В Office уже есть 4 начертания, в мае обещают добавить ещё 38. Всё это — один вариативный файл без привычного набора Regular/Bold/Italic.

📌 Презентация Kermit на microsoft.design
📌 Тест шрифта и эссе от Underware
📌 PDF со всеми стилями и "анатомией" букв

Если ты работаешь со шрифтами — обязательно посмотри. Это очень крутой пример того, на что вообще способны вариативные гарнитуры.

#font