Ну, как обещал. Смотрим на баги Safari в Windows. С опозданием на день, но вы мне простите, надеюсь :)

Подробное описание летит следом, терпение.

#заметка дня

Продолжаем наше сафари по Safari (офигеть каламбур).

Тенденция такова, что вообще никто не любит собирать браузеры на WebKit. Blink компилировать и интегрировать намного приятнее. Остались лишь самые упорные. Ну, с ними и поработаем.

Итак, давайте запустим браузер Epiphany в Windows. Он же GNOME Web.

Установка

Нам понадобится:

1. WSL2: https://docs.microsoft.com/en-us/windows/wsl/install-win10

Не надо бояться, там делов на десять минут.

Кстати, горячо рекомендую попутно поставить WIndows Terminal. И ещё более горячо рекомендую привыкнуть к мысли, что на WSL вообще всё делать удобнее, VSCode вас в этом поддержит.

Могу потом показать, что именно я имею в виду.

2. Я буду производить эксперименты на Ubuntu, так что устанавливаем её из магазина приложений. Более опытные могут брать что угодно.

3. Устанавливаем в Ubuntu epiphany-browser:

sudo apt install epiphany-browser

Возможно, списки серверов, раздающих пакеты приложений (да и списки приложений вообще) нужно будет обновить:

sudo apt update

4. Если у вас версия Windows 10 ниже 20H2, вам потребуется VcXsrv.

Это сервер X Window System. Я намеренно опускаю объяснения, что есть что, для этого есть Википедия, но именно эта штука позволит вам запускать графические приложения Linux в Windows.

Можно ещё XMing, но я в него не умею. Поделитесь.

Если же у вас Windows 10 20H2 или Windows 11, вам даже этот шаг не нужен. Всё заработает из коробки:

В общем, это всё.

Запуск

Можете посмотреть видео выше, а можете — почитать инструкцию:

1. Сначала нужно запустить X-сервер, для этого в составе VcXsrv имеется утилита XLaunch. Стартуем.

2. Она предложит режим работы на выбор, я предпочитаю многооконный полноэкранному.

3. На втором экране выбираем просто запуск сервера, без конкретного клиента (Start no client). Клиент это, собственно, приложение. Логика X-сервера немного перевёрнута с ног на голову, кому интересно — почитает Википедию, а мы двигаемся дальше.

4. Поскольку моё личное железо довольно бывалое (ThinkPad T450s), я решил не пытаться запускать графическое ускорение, оно всё равно для наших целей не нужно. А вот авторизацию стоит отключить (Disable access control), одна машина же.

5. Ubuntu надо указать, где же находится наш сервер окон. Для чего выполняем следующую команду:

export DISPLAY=$(grep -m 1 nameserver /etc/resolv.conf | awk '{print $2}'):0.0


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

grep -m 1 nameserver /etc/resolv.conf | awk '{print $2}'

Просто выводит ваш собственный локальный IP-адрес.

Для этого и нужна вся магия grep и awk. В моём случае получается:

export DISPLAY=192.168.3.1:0.0

В вашем – ваш собственный адрес.

Можно потом и в конфигурацию вашей командной строки внести (.bashrc или .zshrc), чтобы работало сразу при запуске.

6. Ну теперь, пожалуй, надо запустить и сам браузер:

epiphany


Если всё было проделано верно, откроется окно браузера, не совсем похожее на ваши привычные Windows-окошки (что за день, каламбур за каламбуром). Это всё потому, что Epiphany использует так называемые Client-side decorations. Это когда управление окном отрисовывается самим приложением. Мы отвлеклись.

Версия WebKitGTK в моём случае 2.32.3. Это примерно соответствует Safari 14. Внизу баги, которые я проверял на видео:

1. Clip-path и stacking context:
https://bugs.webkit.org/show_bug.cgi?id=140535
https://bug-140535-attachments.webkit.org/attachment.cgi?id=244746

2. Flexbox на summary:
https://github.com/philipwalton/flexbugs
https://philipwalton.github.io/flexbugs/9.3.a-bug.html

3. important и animate:
https://bugs.webkit.org/show_bug.cgi?id=75558
https://bugs.chromium.org/p/chromium/issues/detail?id=552085
http://jsfiddle.net/fFJ3m/1/

И — о чудо — они совпадают с Safari 14.1.2. Уж можете мне поверить.

Засылайте ваши любимые баги в комментарии, посмотрим-с.

#safari #linux #webkit #epiphany

#такое дня

Разбавим увеличившийся накал серьёзности канала краткой демонстрацией умеренного подхода к тестированию UI/UX от Софии Валитовой.

Хороших выходных! Нам ещё многое с вами предстоит проверить.

#codepen дня

Прекрасная работа Стива Гарднера: https://codepen.io/ste-vg/pen/GRooLza

За прошедшие полтора года многие уже, наверное, забыли, что такое самолёты. Этот пример позволит вспомнить 👀

А вообще, если коротко, это очень хороший пример интеграции библиотеки анимации GSAP и 3D-модели в WebGL при помощи Three.js. Код простой, чистый, абсолютно понятный.

И не забывайте, их держит в воздухе магия.

#gsap #scroll #webgl

#видео дня

Если вдруг так получилось, что вам в этот воскресный день дождливо и грустно, советую посмотреть лекцию Жени Обрезкова с детальным разбором настроек конфигурации TypeScript и typenoscript-eslint. Естественно, совсем не обязательно смотреть все два с половиной часа, ведь есть оглавление. Каждый пример демонстрируется в песочнице. Подойдёт всем :)

https://youtu.be/4Vc-O20llVs

#typenoscript #tsconfig #eslint

Глядите, чего я принёс. Запуск WebKit без виртуальных машин! Продолжение Safari-эпопеи.

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

Подробности через минуту.

#заметка дня

Знаете, идти сложным путём иногда не так плохо. Делиться его прохождением – тем более.

Мне в комментарии и ответы накидали ещё вариантов запуска WebKit на Windows без необходимости в виртуальной машине вообще.

И, кажется, я был не совсем прав.

Нет, я не меняю своего мнения о том, что интегрировать WebKit в свои приложения сложно. Но как оказалось, Windows-сборки, хоть и полуофициальные, существуют! И даже работают.

Как обычно, давайте по порядку.

У проекта WebKit существует некий сборочный цех. Портал, на котором скрипт-боты запускают сборки, пересборки и тесты всего проекта под различные операционные системы и платформы.

Конечно, большинство сборщиков работают для iOS, macOS и Linix различных конфигураций, но и под Windows тоже имеются!

Поехали.

1. Давайте пройдём в раздел сборок. Видим список с ответственными за них ботами.

Нас конечно же интересуют с префиксом Win в названии сборщика. Фильтруем.

2. Находится не так много, берём Apple-Win-10-Release-Build.

Можно и Debug, но размер его – мама не горюй.

3. Проваливаемся в параметры сборщика и видим огромное число готовых к употреблению сборок.

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

Но не то чтобы. Оказалось, файлы хранятся не так долго, всего около пары недель. Ну давайте двухнедельной давности и возьмём. Ревизия r280313 не могла уйти далеко.

На момент, когда вы это читаете, архив может уже быть удалён. Поскольку эта версия максимально близка к обсуждаемой Safari 14.1.2, я приложу её отдельно.

Вообще, обещали, что минифицированные архивы будут храниться пару лет: https://webkit.org/blog/7978/introducing-webkit-build-archives/

Видимо, не для всех сборок… надо узнавать.

4. Прямая ссылка скрыта в шаге 12: transfer-to-s3. Находим её в логе, называется S3 URL. Скачиваем архив, распаковываем.

5. Находим в распаковке MiniBrowser.exe и… и запускаем?

Хрен там. Нужен Apple Application Support. Грубо говоря, набор библиотек для запуска.

Как его получить? Установить iTunes. Apple в своём репертуаре, конечно.

Раньше можно было распаковать установщик iTunes и установить библиотеки отдельно, но теперь – не выйдет :(

6. Ну что же, установили iTunes. И вот теперь можно и запустить!

Как и прежде, проверять я буду на:

1. Clip-path и stacking context:
https://bugs.webkit.org/show_bug.cgi?id=140535
https://bug-140535-attachments.webkit.org/attachment.cgi?id=244746

2. Flexbox на summary:
https://github.com/philipwalton/flexbugs
https://philipwalton.github.io/flexbugs/9.3.a-bug.html

В рассматриваемой ревизии этот баг уже исправлен.

3. important и animate:
https://bugs.webkit.org/show_bug.cgi?id=75558
https://bugs.chromium.org/p/chromium/issues/detail?id=552085
http://jsfiddle.net/fFJ3m/1/

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

Оставайтесь на связи. Мы ещё не закончили.

#safari #bug #webkit #windows

Сборка WebKit Apple-Win-10-Release-Build от 27 июля 2021 года.

#заметка дня

У всей этой истории с Safari должен быть happy end.

TL;DR Browserstack.com

Но не все могут себе позволить даже 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

Он немного в анабиозе сейчас, но работа над ним не прекращена.

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

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

#browserstack #safari #windows #test

#фишка дня

Залогиньтесь на GitHub, проследуйте в любой репозиторий и нажмите точку — .. Желательно иметь браузер посвежее.

Просто сообщаю…

#github #feature

После код-ревью. Объяснения последуют через минуту.

#тред дня

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

Сегодня поговорим о код-ревью в треде от Олега Климакова.

Я в чатах всегда рекомендую перед фрилансом попробовать работу в студии или продукте, потому что там обмен опытом происходит максимально быстро. Да, может вы и упрётесь в потолок свой или студии, но зато не будете одни. А код-ревью — как раз один из столпов обмена опытом.

Поехали.

1. Тред про код ревью. Зачем он нужен, как его готовить и как не испытывать эмоции как на картинке.

2. Для начала - зачем это всё?

Если вы работаете в продуктовой компании, то жизненный цикл почти каждого продукта будет соответствовать принципу Парето - 20% времени мы пишем новый код. 80% времени поддерживаем старый.

3. Во время поддержки проекта, мы хотим чтобы все разработчики как можно быстрее вникали в то, что написано. Для этого есть много способов, все они прекрасны и хорошо работают вместе.

4. Способы чтобы иметь хорошо поддерживаемый код:

✅Покрытие тестами
✅Ведение документации
✅Код ревью

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

5. Что даёт код ревью:

➕Проверку кода по многим критериям (неочевидные места, композиция, комментарии)
➕Шаринг знаний о проекте. Не только 1 человек знает что там пишется в другом проекте или части проекта, а все.
➕Шаринг знаний о технологиях. Найти велосипеды и выдать свои

6. Способов поддерживать код «качественным» есть много, но все их нужно правильно готовить. Нужно уметь писать тесты, нужно уметь писать документацию и нужно правильно организовать код ревью

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

7.

❌Ревьюить только джунов и новых коллег
✅Ревью проходят все и проводят все

В коде лидов тоже могут быть ошибки. Джуниор разработчики могут подсмотреть какие-то практики, методы, способы из кода сеньора. Это удобнее чем обучать их в переговорках.

8. Если ревью проходят не все, то в вашей команде это будет восприниматься как источник недоверия. Такую атмосферу следует избегать.

9.
❌Обсуждать на код ревью стиль
✅Настроить у себя на проекте инструменты которые автоматически будут исправлять стиль перед коммитом

В JS это eslint и prettier. Не тратьте время своё и коллег на вкусовщину. Договоритесь заранее и пропишите правила. Если спорите - голосуйте.

10.
❌Ничего не проверять
✅Обращать внимание на композицию, магические переменные, оптимизацию (там где это имеет смысл).

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

11.
❌Агрессия, негатив, «токсичное» поведение в комментах
✅Старайтесь отмечать не только негативные стороны, но и хвалить за позитивные.

Комменты должны быть: «Давай попробуем сделать …» «Может попробуем вынести…» а не в духе: «это плохой код» «перепиши» и так далее

12.
❌ Мердж реквест висит без ревью трое суток
✅ Выработать расписание.

Например вы занимаетесь ревью в начале работы и вечером. Исправления проверяете во время перерывов, пока проект билдится например. Хотфиксы, понятно, работают по-другому.

13.
❌ Ревьюеру запускать код и заниматься ручным тестированием.
✅ Разработчик поставляет уже проверенный код

Если ветка планирует вливаться, то она должна быть проверена тем, кто в ней написал. Ревьюер по умолчанию считает, что написанный код работает как надо

#работа #pr #github #twitter

#статья дня

Вообще, это скорее даже тянет на хештег #фишка.

Есть такой способ навигации по странице, как якоря. Расставляете ссылки формата <a href=“#news”>News</a> и, собственно, раздел: <section id=“news”>bla</section>.

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

Как с этим боролись раньше? А довольно забавным образом.

Вместо всей секции ссылались на некий элемент: <a name=“news”></a>, который сдвигали отрицательным margin или position: relative на величину высоты шапки. Грубовато, но работало!

К счастью, теперь это не нужно! Пруф: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html

TL;DR: scroll-padding-top на :root или scroll-margin-top на целевой элемент.

Прям прекрасно. Очевидно, работает не только для якорей, но и для scroll-snap интерфейсов.

И уже можно использовать.

#css #scroll #margin #anchor

#такое дня

Я не знаю, куда отнести эту дичь, но на HDR-мониторах можно получить цвет белее белого: https://kidi.ng/wanna-see-a-whiter-white/

Звучит как какой-то бред, но посмотрите на видео. Текст и правда кажется белее белого.

Секрет в том, что совсем свежие браузеры поддерживают HDR-видео, но о чём забыли упомянуть – что при этом вся страница переходит в HDR.

Таким образом, можно передать значение фильтра brightness больше 100% и получить эффект слишком яркого белого:

filter: brightness(10);
backdrop-filter: brightness(10);
text-shadow: 0 0 10px #ffffff;

Это надо видеть своими глазами :) Применение? Да пёс его знает, говорю же — такое…

#css #hdr #backdrop

#вопрос дня

Что будет выведено в консоль?

#фишка дня

Когда-то меня дико восхитили ползунки в программах создания музыки: визуально они имитировали фейдеры и триммеры (переменные резисторы) реального звукорежиссёрского пульта, но можно было нажать на них мышкой и двигать мышь куда хочешь после этого по всему экрану. Значения менялись соответственно направлению движения.

Короче говоря, ты не был ограничен активной областью контрола.

Так вот, в инструментах разработчика Chrome Canary появилась утилита Length. Стало возможным изменять числовые значения, перемещая мышь. Принцип такой же, как в музыкальных редакторах и некоторых дизайнерских программах:

- зажали Shift — увеличили шаг до 10 пунктов;
- зажали Alt — уменьшили шаг до 0.1 пункта.
- кликнули — появилось меню выбора единиц измерения.

Красота!

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

P. P. S. оказалось, и сейчас можно скроллить на числе. Я попробовал — мне не понравилось, слишком чувствительно. Тоже можно зажимать Shift и Alt.

#devtools #chrome

#ссылка дня

Кому тут было надо различных эффектов по наведению мыши? Их есть у меня.

Целый репозиторий всяческих :hover-правил: https://github.com/IanLunn/Hover

Название оригинальное: Hover.css :)

Есть и демо-страница: http://ianlunn.github.io/Hover/

Не могу сказать, что вы найдёте какие-то откровения там, но чекнуть стоит. Эффект завёрнутого уголка довольно забавный. Да и общий подход.

#css #hover #github

#фишка дня

Когда разработчикам Microsoft Edge делать нечего, они 3D-модель DOM в Edge DevTools запускают. Да, как в Firefox. Chrome такую штуку не имеет.

Честное слово, с трудом представляю, зачем это нужно… но отладить какие-то проблемы с z-index вполне можно.

Да и… красивое.

Так вот, фишка немного не в этом. Фишка-то в том, что доступ к этому инструменту можно, нажав Ctrl/Cmd-Shift-P и введя там 3D.

Знакомое сочетание?

Да, это командная панель, которую когда-то миру показал Sublime Text и потом потырили все, кому не лень. Вы точно ей пользовались в Atom и Visual Studio Code.

Так вот, эта панель команд и в Chrome DevTools тоже имеется. Теперь не надо ковырять меню в поисках нужного редкого инструмента!

Удобно.

#3d #zindex #edge #chrome #devtools