#такое дня

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

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

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

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

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

#codepen #css #nesting #fail

#код дня

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

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

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

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

#такое дня

Я достаточно долго сидел на 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

#фишка дня

Как сделать описания проектов на 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 #бородач

#такое дня

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

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

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

#фишка дня

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

 line-height: 1cap;

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

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

#css #бородач

#видео дня

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

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

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

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

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

#flutter #mobile

#статья дня

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

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

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

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

#svg #tutorial

Бесплатный курс по PostgreSQL от практиков рынка

Присоединяйтесь к бесплатному курсу по основам PostgreSQL от Selectel и Эльбрус Буткемп. Он будет полезен Junior- и Middle-специалистам: администраторам баз данных, разработчикам, DevOps-инженерам и аналитикам.
 
Вы научитесь:
🔹создавать и связывать таблицы,
🔹выполнять базовые операции с данными,
🔹работать с РСУБД.

Бонусы: вы можете получить сертификат о прохождении курса, а также промокоды для практики на мощностях Selectel.

Начните обучение уже сегодня.

Реклама. АО «Селектел», ИНН 7810962785, ERID: 2Vtzqwe2h5J

#доклад дня

Вот так живёшь и не знаешь, что коллега — Василий Рогин — выступил на 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

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

Знаете, что происходит, если в 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

🎡 Встречаемся в Коломенском!

16 августа в Москве пройдёт ИТ-пикник — семейный open-air фестиваль для ИТ-специалистов и их близких. Организаторы: Т-Банк, CodeFest и Мельница. Здесь можно отдохнуть на природе, поговорить о технологиях с теми, кто вас точно поймёт, найти новые полезные знакомства и просто классно провести летний день!

📍 Место: музей-заповедник «Коломенское»
📅 Дата: 16 августа

Что будет:
— Лекции от руководителей продуктов, инженеров, аналитиков и исследователей
— Темы: от научпопа до платформенной инженерии
— Будет весело не только взрослым: для детей приготовят квесты, VR-зоны, игры с роботами и мастер-классы – всё, чтобы провести день так же увлекательно, как и родителям
— Живая музыка: на главной сцене выступят: тима ищет свет, Тося Чайкина, Второй Ка.
– Специальным гостем станет Диана Арбенина — впервые в живом исполнении молодых артистов пройдет ее трибьют-концерт: TRITIA, PLC, ПОЛ ПУНШ, Тося Чайкина и Лилу. И завершит вечер секретный артист.

💬 Как попасть:
Пройдите регистрацию на сайте и укажите свою специализацию (заявки будут проходить модерацию)
После этого на почту придёт письмо со ссылкой для оплаты:
→ 1500 ₽ — пожертвование в благотворительный фонд
→ 1500 ₽ — организационный взнос
Один билет даёт вход для вас, одного взрослого и до двух детей.

🔗 Зарегистрироваться и присоединиться

#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 #бородач

#фишка дня

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

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

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

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

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

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

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

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

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

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

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

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

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

#ссылка дня

Мы тут немного повеселились с 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 #бородач

#баг дня

Одна из моих любимых фишек инструментов разработчика 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 #бородач

😈 Data Dojo | Питер | 26 августа

Это мероприятие Яндекса для сообщества ML-специалистов с обсуждением трендов, разбором реальных задач из соревнований и прикладными кейсами.

Зачем участвовать:

— послушать выступления экспертов: Николай Савушкин, руководитель команды рекомендательных технологий в Поиске, расскажет про генеративные нейросети в рекомендательных системах Яндекса, а Алексей Колесов,
руководитель команды NLP, поделится, какие вызовы стоят перед командой R&D в Яндексе

— разобрать задачи вместе с сообществом

— узнать, как попасть на стажировку и начать карьеру ML’щика в Яндексе

— завести новые знакомства и зажечь на afterparty

Заполняй форму до 20 августа.


Хочешь стать спикером? Поделись разбором ML-задачи через форму до 13 августа. Программный комитет пригласит одного спикера выступить на встрече.

🪷 Самураи действуют поодиночке, но учатся вместе. Присоединяйся.

#инструмент дня

Четыре (охереть) года назад я писал большую серию статей на тему того, как же тестировать WebKit aka Safari на Windows и Linux. Вот, можете почитать: https://t.me/htmlshit/705

Дайте знать, если пора эту серию статей обновить!

И тогда мы остановились на том, что можно просто использовать... Browserstack!

Но не все могут себе позволить даже 150 долларов в год за фриланс-план… или всё же есть выход?

Выход правда есть!

Browserstack активно поддерживает open-source проекты и даёт бесплатные лицензии на год!

Если у вас есть такой — смело топайте на https://www.browserstack.com/open-source и вбивайте там ссылку на репозиторий.

Главное — чтобы была подходящая лицензия. Полного списка я не нашёл, но уверен, что GPL, BSD и MIT точно включены. Я же указал Creative Commons Attribution 4.0 International.

Ах да, что же у меня за проект такой опенсорс? Да просто сайт этого канала: https://github.com/HTMLShit/htmlshit.site

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

Так вот, доступ обновляется каждый год пока репозиторий доступен! У меня, выходит, уже 4 года.

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

Короче, если вы ещё не начали свой проект – чего вы ждёте вообще?

#browserstack #testing

#расширение дня

А что, если история гита может быть представлена не в виде вертикального списка?

А что, если можно правильно использовать анимации, акцентируя внимание на изменениях?

А что, если можно не открывать интерфейс git blame на каждый чих?

Именно так подумал Родриго Помбо и нафигачил прекрасное расширение для Visual Studio Code: Git File History.

Принцип действия понятен по виде, устанавливайте: https://marketplace.visualstudio.com/items?itemName=pomber.git-file-history

Всем git, котаны!

P. S. вы же в курсе, что устанавливать расширения можно из консоли?

Как-то так:

code --install-extension pomber.git-file-history

Если команда code недоступна, решение тут.

#git #history #vscode #бородач