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

2023-06-05 13:46:49 #дополнение дня

В чате и комментариях к посту о scroll-margin-top и scroll-padding-top был обнаружен один факт, который насколько очевиден, настолько же и внезапен.

В общем, как было сказано, scroll-margin отновится к элементу, в то время как scroll-padding — к контейнеру со скроллом, то бишь, к родителю.

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

При этом отрицательный отступ всё ещё возможен (Полина, привет), поскольку "смотрит" он внутрь элемента.

Чудны дела, в общем, котаны. Открыть/Комментировать

2023-06-05 10:30:39 #заметка дня

Чем отличаются auto-fit и auto-fill в гридах?

Отвечает Александр Друзь.

Функцию repeat используют чтобы не писать повторяющиеся определения колонок или строк. Помимо конкретного их числа, можно задать и автоматическое их заполнение при помощи пресловутых auto-fit и auto-fill, сравните на иллюстрации. Тут можно было бы и закончить :)

Так в чем же разница, словами? :)

При использовании repeat движок гридов создает столько колонок или строк, сколько вообще может уместиться в заданные рамки. Отличие fit от fill буквально в том, что fill задаст контенту минимально возможный размер, сохранив "фантомные", незаполненные, в примере, колонки. А fit — заполнит (впишет) контент, схлопнув те самые фантомные колонки.

В общем, всё довольно просто.

#css #grid #repeat Открыть/Комментировать

2023-06-04 13:16:59 #фишка дня

Накидали секций, поставили к ним якоря, поставили ссылки вида #anchorName в навигацию, включили scroll-behavior: smooth; чтобы плавненько все было и...

...и ваша секция уехала под шапку ко всем чертям. Что же делать?

Спокойно. Есть три варианта.
1. Если ты живешь в 2012, можно подвинуть якорь вверх с помощью position: relative и отрицательного top. Или всячески играть полями. Но мы живем в 2023, так что...
2. scroll-padding-top на html (а часто, на родителя секций) или...
3. scroll-margin-top на любую из секцию, за которой якорь закреплен.

В чем отличие 2 от 3?

Ну, очевидно, в области применения. Разом на всех во 2 случае или индивидуально в 3.

Важно понимать, что на обычный скролл это не распространяется. Только якоря или snap: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html

#css #scroll #snap #anchor Открыть/Комментировать

2023-06-03 12:08:31 #фишка дня

Как подсказать пользователю мобильного устройства, что сейчас произойдёт при отправке формы?

Места на экране мало, ещё и клавиатура съест.

Очень просто! Использовать атрибут enterkeyhint!

Спека: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute

Поддержка: https://caniuse.com/?search=enterkeyhint

Пользуемся!

#mobile #form #html #бородач Открыть/Комментировать

2023-06-02 12:05:10 #библиотека дня

Или надо завести тег #компонент дня? Что-то я не знаю даже. Короче.

Если ты пользуешься VS Code (а кто нет? Я, кстати, переехал), да и вообще любым другим редактором кода, то наверное уже привык к разделенным панелям в интерфейсе. Как правило, тот же вскод можно не только делить как угодно, но и изменять размер панелей.

Итак, два кандидата: https://github.com/bvaughn/react-resizable-panels и https://github.com/devbookhq/splitter. Как вам будет удобно.

Первый гораздо мощнее, есть пример правильного подключения server-компонента и вообще Брайан Вон ровный тип

Вообще, я где-то видел адаптированный из вскода компонент, но не могу найти. Там хороший пример адаптации чистого дом-компонента на классах был...

#react #component Открыть/Комментировать

2023-06-01 18:09:30 #статья дня

Самая имбовая статья рунета на тему оптического выравнивания иконок: https://habr.com/ru/companies/badoo/articles/333992/

Математика не стареет! Вечнозелёная статья, люблю такие.

Что не так с выравниванием вообще?

Если расположить некоторые объекты по их геометрическому центру (например, по пересечению диагоналей описанного прямоугольника), то визуально будет казаться, что всё очень и очень плохо. Например, одно из оснований треугольника будет явно перевешивать (первый же пример в статье).

Что же делать? Ну, например, описывать не прямоугольник, а круг.

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

Я себе на случай смерти хабра статью даже сохранил. Надо, кстати, проверить, а что там в Figma.

А вот сервис для проверки соответствия визуального центра геометрическому: https://javier.xyz/visual-center

#optics #geometry Открыть/Комментировать

2023-06-01 11:48:34 #такое дня

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

Одной из неочевидных вещей является хранение текстур в памяти.

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

Но это полбеды, некоторые устройства (да-да, вы поняли) выделяют ну максимум 128 Мбайт на хранение текстур, мешей... да всего. Нужно быть очень аккуратным.

Вот к чему это я. По Telegram опять несётся волна стикеров, вызывающих падение клиента. Багам уже с год, но почему-то действий ведётся мало.

https://bugs.telegram.org/c/16633
https://bugs.telegram.org/c/16842

Причина максимально банальна, о чём я сказал выше: распаковка текстур.

Например, в одном из пакетов каждый кадр видеостикера — огромный красный квадрат размером 15000x15000 пикселей. Итого, каждый распакованный кадр займёт 600 Мбайт и весь стикер — до 27 Гбайт. А сжать его можно до нескольких килобайт же. Красота.

В общем, картиночки — страшная сила, котаны. Открыть/Комментировать

2023-05-31 20:12:30 #статья дня

Что произойдёт, если посетитель вашего сайта или веб-приложения отключит куки?

Давайте перефразирую: обернули ли вы в try-catch все ваши вызовы localStorage, sessionStorage, IndexedDB? Нет? А почему?

Почему я до сих пор в тестовых вижу сырые вызовы localStorage? Опустим тот факт, что многие там ещё и токены хранят…

Так вот: если пользователь отключит куки, он получит такое веселье, как на скриншоте выше. И пустой экран заодно. Оно вам надо? Обработайте ошибку и предупредите нормально.

Ошибаются все, даже MDN. Вот собственно обзорная статья об этом: https://blog.tomayac.com/2022/08/30/things-not-available-when-someone-blocks-all-cookies/

Я тоже огрёб как-то раз, забыв обернуть localStorage в try-catch и выкатив код на продакшен. Оказалось, среди клиентов много параноиков.

Ну что делать.

#cookie #localStorage #бородач Открыть/Комментировать

2023-05-31 12:46:01 #фишка дня

Как тестировать асинхронный код, собственно, fetch, не имея доступа к интернету и не поднимая локальный сервер?

Не знаю, зачем вам это может понадобиться (тесты, опять же), но Data URL придёт на помощь!

Просто подставьте что-то вроде 'data:,\uFEFF{"name":"htmlshit"}' вместо URL в fetch и наслаждайтесь.

\uFEFF это BOM символ. Технически, его можно не включать.

#fetch #data #trick Открыть/Комментировать

2023-05-21 10:23:33 #инструмент дня

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

И вот тут нам поможет сниппет для DevTools под названием Capo.js: https://github.com/rviscomi/capo.js

Порядок применения:
1. Берёте capo.js, значит
2. Солите его блять Загружаете как сниппет в девтулзы: https://developer.chrome.com/docs/devtools/javascript/snippets/
4. ...
5. Наблюдаете диаграмму в консоли! Она отобразит текущее и желаемое положение вещей.

А кому охота подробностей, тому вот сюда, на эту презентацию Виталия Фридмана:



#css #js #performance Открыть/Комментировать