#статья дня

Пришло время вспомнить ещё одну статью Ахмада Шадида (Ahmad Shadeed, который не раз всплывал здесь и ещё много раз всплывёт). На этот раз – о важности учитывания высоты в разработке сайтов.

https://ishadeed.com/article/responsive-design-height/

Разработчики часто забывают, что посетители редко используют весь доступный экран. Не только по ширине, но и по высоте. А мода в современных макетах диктует вольготное использование вертикального пространства, но с обязательным условием: “Всё должно влезать в один экран!”. Это, коненчо, бред, но мода есть мода.

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

Статья есть в переводе на Хабре: https://habr.com/ru/company/skillfactory/blog/524996/

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

#css #html #перевод #бородач

#заметка дня

Одна из самых раздражающих, хоть и по-своему логичных, вещей в CSS — это тот факт, что стили сопутствующих селекторов подключаются в порядке появления в CSS-файле, а не в порядке, определённом, например, классами или атрибутами.

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

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

Это, кстати, вполне себе одна из причин, почему атомарные классы набирают такую дикую популярность.

Короче, к моей проблеме. Я переписываю "классическое" веб-приложение на React. Таким образом, у меня уже имеется файл стилей, который я хочу использовать как базу. Естественно, я подключаю его в index.tsx:

import * as React from 'react';
import { App } from './App';
import '../src/scss/style.scss';

Мне кажется, с учётом введения вы уже поняли, в чём косяк. Стили, которые я использую в компонентах моего App успешно сбрасываются назад стилями из оригинального style.scss.

Как это победить? Вы не поверите, но в случае Webpack (у меня Rspack, но сути дела не меняет) не нужно ничего дописывать в конфигурации.

Нужно просто импортировать старые стили первыми. Кто бы мог подумать. Как-то так:

import '../src/scss/style.scss';
import * as React from 'react';
import { App } from './App';

Можете расчехлять помидоры, но, думаю, я оказался не один такой. Может кому ещё пригодится 🫠

#webpack #rspack #css

#статья дня

— Да сколько там того фронтенда?

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

Количество шуток в сторону фронтенд-разработки поражает. Да, не всегда от знающих людей, но тем не менее.

Но вопрос-то остаётся открытым. А в самом-то деле, сколько там того фронтенда? Как посчитать?

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

Начать можно с простого: а что такое, собственно, UI? В математическом смысле в последнее время пропагандируется что-то вроде: "Интерфейс это функция состояния".

И так и есть: в модных нынче декларативных фреймворках (и в CSS, кстати, тоже) вы определяете состояния, от которых потом строится интерфейс. Разные состояния — разный результат.

Кстати, вот и подошли: а сколько их, этих состояний? Их считали?

Таки да, считали! Вот, например, статья Винса Спилмана о девяти состояниях UI:

Nothing — Пустой элемент
Loading — Загрузка
None — Ничего не вернулось
One — Одна сущность
Some — Коллекция сущностей
Too Many — Сущностей слишком много, нужна пагинация
Incorrect — Ошибка, неуспех
Correct — Успех
Done — Операция завершена

Посмотрите саму статью, там с иллюстрациями и подробнее.

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

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

В итоге, что-то получается что фронтенда-то того действительно очень много: https://daverupert.com/2024/02/ui-states/

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

Чем раньше вы уложите у себя в голове факт, что делать и учитывать нужно очень много — тем лучше, котаны.

#frontend #ui #state

#фишка дня

Иногда возникает задача поставить перенос строки после строчного (inline) элемента. Без <br/>, без преобразования элемента в блочный.

На помощь приходят псевдоэлементы.

Значение свойства content — «\A» — это Unicode-символ 0x00000A, который, внезапно, являет собой перевод строки.

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

Что это даёт? Ну, например, на десктопе можно показать перевод строки, а на адаптиве – убрать его, очистив content. Конечно, это можно сделать и скрытием <br/>, но мы уже решили, что он лишний.

#css #tricks #unicode #after #newline #бородач

#фишка дня

Правило position: sticky в своё время было одной из самых желанных в CSS вещей, ведь что может быть более декларативно чем “закрепи элемент вот тут когда я доскроллил вот сюда”?

А вот много лет приходилось писать JS для этой цели. Sticky даже становился частью фреймворков.

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

Ответ прост! Поставить «прилипчивый» элемент последним, а родителю задать sticky на высоту контента перед ним. Не элементу!

Вуаля: https://codepen.io/alinaki/pen/rNdYajy

Дым и зеркала :)

#css #sticky #бородач

#заметка дня

Практически всегда в различных обучающих видео и курсах по React вы могли наблюдать следующую фразу: “В JSX надо писать className когда вы хотите задать класс HTML-элементу потому что слово class является зарезервированным”.

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

Первый DOM API, построенный на ES3, действительно запрещал переопределение “el.class = smth“.

Но начиная с ES5 (года эдак 2009-11) это исправлено. Да, нельзя присвоить переменной имя class, но свойства объекта никто не запрещал.

Более того, в контексте JSX это не имеет смысла даже относительно ES3. JSX же будет транслирован, возможно даже в “аналоговый” setAttribute("class”, …), что, конечно, работает вообще везде.

А ещё можно вспомнить чёртов htmlFor…

Разработчики React решили отталкиваться не от атрибутов DOM-элементов, а от свойств объектов. Для большинства атрибутов разницы нет. Но есть исключения:

— многословные атрибуты (maxlength, contenteditable) преобразуются в camelCase (maxLength). Обратите внимание на отсутствие дефиса, это тоже легаси первых имплементаций DOM
— SVG не отражает атрибуты как свойства объекта
— Веб-компоненты тоже не отражают, и, более того, могут вообще не документировать свои атрибуты и свойства
— Поля форм могут иметь одинаковые атрибуты, несущие совершенно разную семантическую нагрузку.

Естественно, это очень важно для SSR, пересылать-то приходится атрибуты.

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

На самом же деле разработчики React в начале своего пути решили брать XML-подобные атрибуты, а не DOM. For the greater good.

А потом…

…случился ES6, где стало можно создавать объекты в сокращённой форме: {class}. И вот тут старая добрая проблема зарезервированных слов всплыла с новой силой.

Короче говоря, не доверяйте самым простым объяснениям, даже если они приводят к чему-то похожему на правду. Реальность веселее.

Это был вольный перевод треда от Yehuda Katz с включением Дэна Абрамова.

#react #jsx #бородач

#тип дня

Говоришь такой коллеге: «Ты зачем столько классов насоздавал для такой простой вещи? Используй CSS-переменные».

А он приходит к тебе с картинкой выше и грустный весь.

Что мы делаем в таком случае?

Да очень просто, дополняем интерфейс CSSProperties, чтобы до реакта, наконец, дошло:

declare module 'react' {
    interface CSSProperties {
        [key: `--${string}`]: string | number
    }
}

Пруф: песочница.

Странно, конечно, что это не из коробки всё.

#css #types #react #typescript

#видео дня

Я, конечно, не дизайнер, но Figma пользуюсь, естественно. И постоянно на связи с нашим штатным дизайнером команды.

Иногда мне кажется, что возможности Figma почти безграничны, а потом оказывается, что это и правда так.

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

Вот и я не знал.

Пока не увидел это: https://www.youtube.com/watch?v=3nXbUH9YYgo

Ссылка на обучающий файл из презентации: https://www.figma.com/community/file/1207693268826001427

Сам плагин: https://www.figma.com/community/plugin/735770583268406934/google-sheets-sync

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

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

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

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

#figma #design #prototype

#такое дня

Каждый раз когда тебе кажется, что ты плохой разработчик, помни: скорее всего так и есть это текстовое поле в Google Maps делал разработчик из, очевидно, Google. С зарплатой много выше твоей.

Я, честно, не знаю, как это может кого-то успокоить. Но вдруг.

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

Думаю, все в курсе, что если нужно поставить изображение-заглушку, можно воспользоваться сервисами для т. н. плейсхолдеров: https://t.me/htmlshit/431

Но, помимо задачи поставить временное изображение, существует и задача отобразить что-то, пока грузится основная картинка.

Для этого можно или поставить серое поле, или применить различные техники под общим названием LQIP — Low Quality Image Preview: https://github.com/zouhir/lqip

Например, SQIP: https://github.com/axe312ger/sqip

Произносится сквиб, Гарри Поттер объяснит

Задача показать вместо оригинального изображения что-то передающее хоть какую-то информацию об исходнике.

И вот новое: BlurHash от Wolt: https://blurha.sh/

Результатом генерации является хеш вида LEHV6nWB2yk8pyo0adR*.7kCMdnj (ограниченный набор из 83 доступных символов).

По факту, он и описывает максимально размытое изображение.

Плагины есть под любые мыслимые средства, от Eleventy до Flutter.

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

#css #img #placeholder

#статья дня

Уже известный нам Ахмад Шадид продолжает выдавать шикарное.

Сейчас он осваивает интерактив в своих статьях. В прошлый раз это была статья о размере кликабельных областей в виджетах: https://ishadeed.com/article/target-size

А теперь — о :has(). Мне кажется, в CSS нет более популярного селектора в последние годы :)

Встречайте: https://ishadeed.com/article/css-has-guide

Да, стоит напомнить, что :has официально поддерживается во всех мейнстримных браузерах, но тот же Firefox ESR или Safari 15 его не поддерживают, так что применяйте вдумчиво.

#css #has

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

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

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

А что, если можно не открывать интерфейс 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 #бородач

#фишка дня

Сейчас возвращается мода (и, по-моему, это правильно) на сохранение состояния вашего веб-приложения в адресной строке браузера.

Буквально — используя параметры строки запроса (query string parameters).

Ну то есть что-то вроде https://buy.that?title=Product&action=buy&config=2&amount=3, классические GET-параметры, но управляемые с фронта.

А вот как позволить клиенту обновить страницу, сохранив эти параметры? Желательно, без лишней работы и без использования JS вообще.

А очень просто!

<a href="">Reload</a>

Да, вот так просто! Самое классное, что абсолютно валидно и есть в спеках: https://stackoverflow.com/questions/5637969/is-an-empty-href-valid/43340108#43340108

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

Не пишите лишнего, котаны!

#http #html #trick #бородач

#заметка дня

Не знаю, как вас, но меня очень раздражает то, что в React Router состоянием скролла надо управлять самостоятельно.

Перемещаешься по роутам, а скролл на месте остаётся. Ну типа, што.

К счастью, решение что для v5 React Router, что для v6 одинаковое:

function ScrollToTop() {
    const { pathname } = useLocation();

    useLayoutEffect(() => {
        document.documentElement.scrollTo(0, 0);
    }, [pathname]);

    return null;
}

И потом вставляете его в контекст роутинга:

<BrowserRouter>
    <Routes>
         ...
    </Routes>
    <ScrollToTop/>
</BrowserRouter>

Но вот я это всё по привычке написал и решил всё-таки посмотреть документацию. Ну бывает. И вот что там: https://reactrouter.com/en/main/components/scroll-restoration

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

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

По-моему, очень круто. И хорошо, что решение официальное.

#react #router

#фишка и #статья дня

Надоело проигрывать битву z-index? Используй BFG от CSS: infinity.

Ладно, кроме шуток (хотя я и не шутил). С помощью infinity можно гарантировать верно скруглённые углы на прямоугольниках, мы с вами уже рассматривали алгоритм для веба и Flutter: https://t.me/htmlshit/1565

Вместо

  border-radius: 9999px;

...пишем:

  border-radius: calc(infinity * 1px);

А ещё в CSS общепринятое «если что-то поделить на ноль, получится бесконечность» вполне себе закреплено на практике:

calc(infinity) = calc(1 / 0)
calc(1px / 0) = calc(infinity * 1px)

Учителя вторых классов будут нами явно недовольны.

В общем, читаем статью и погружаемся в бесконечность и далее:
https://codersblock.com/blog/playing-with-infinity-in-css/

#css #infinity #math

#такое дня

Невозможно заниматься фронтендом и не знать о существовании ресурса css-tricks.com

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

Автором проекта, кстати, был создатель codepen.io, Крис Койер

Так вот, два года назад он продал проект самому неожиданному покупателю — DigitalOcean.

Казалось бы, где виртуальные сервера, а где — верстка. Но в продаже была своя логика: вокруг DigitalOcean тоже имеется большое сообщество и их статьи-руководства очень хороши. Была надежда, что дело пойдет.

Ну и бабки, конечно, камон.

Но... нет. CSS-Tricks.com де-факто мёртв. Сначала убрали выпускающего редактора, потом и всю остальную редакцию. Последние статьи вышли в начале прошлого года и в них нет вообще никакого смысла.

И вот, наконец, Крис Койер приоткрыл завесу о том, как происходила покупка и как он пытался — внезапно — вернуть контроль над сайтом: https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/

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

Просто иногда они умирают, растворяясь в новой организации. А иногда — абсолютно ни за что :(

Спасибо, что хоть не закрыли архив.

#молния дня

Как нам всем уже известно, в Евросоюзе Apple даст возможность использовать не только разные браузеры (в смысле, на разных движках), но и разные магазины приложений.

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

Мне иногда пытаются доказать, что Chrome рендерит иначе, но это лишь постобработка.

Ладно, давайте к делу. Какое-то время назад поступила информация, что Apple мстит за эти решения Евросоюзу и хочет отказаться от PWA (progressive web apps) под предлогом, что для разных движков они не могут гарантировать такой же уровень безопасности песочницы.

Следует отметить, что PWA и правда умеют работать абсолютно независимо друг от друга, обладая каждое своим кешем и сервисами. Так что можно смело держать несколько аккаунтов в банках и тех же соцсетях, например.

Так или иначе, решение вызвало неистовую бурю возмущения. В итоге буквально вчера прошло официальное заявление от Apple о том, что PWA останутся, но работать будут все так же на WebKit.

Тут следует отметить, что, хоть на Android прогрессивные веб-приложения могут работать каждое в своем браузере, в магазин могут быть загружены только те, что используют системный движок Chrome WebView.

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

Победа или нет, котаны?

#заметка дня

Интересно наблюдать, как с приходом Bun на сцену JavaScript-сред расшевелились все остальные.

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

В версии 2.12.0 появилась, например, поддержка макросов: https://parceljs.org/blog/v2-12-0/

Что такое макросы? Это код, который выполняется в момент сборки, оставляя за собой константы, регулярки и всё прочее, что можно сгенерировать. В примере выше (из новости) по переданным строкам генерируется регулярка. Удобно, если нужно создать кучку однотипных виджетов, баннеров, сборок под конкретных клиентов.

И вот появились они сначала как раз в Bun.

Ну и LightningCSS тоже не стоит на месте. Если раньше он успешно заменял собой PostCSS, то начиная с этой версии — понимает директиву import и собирает ваш CSS в кучу, без препроцессоров.

Очень ждём поддержку React Server Components, потому что это будет первая "ванильная" реализация. В смысле, не в составе фреймворка.

Пробуем, котаны!

#parcel #bundler #macros

#codepen дня

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

Что я имею в виду: поля ввода, чекбоксы, радиокнопки, кнопки вообще, филдсеты, селекты — они были (и частично до сих пор являются) замещаемыми элементами. Вы указываете браузеру "хочу тут видеть такой-то инпут", а рисуется инпут уже операционной системой, её виджетами.

Сейчас эта грань максимально размывается: поля ввода уже рисуются через Shadow DOM, кнопки каждый оформляет как хочет, fieldset недавно наконец-то избавился от родовых болезней.

И только select до сих пор рисуется совершенно отдельно. Кстати, это одна из причин, почему селекты не видно в трансляции экрана на митингах :)

Возвращаясь к чекбоксам и радио: до недавнего времени по вышеозначенным причинам к ним нельзя было применять, например, псевдоэлементы. Что весьма ограничивало возможности по стилизации.

Теперь же это не так. Google Chrome уже давно не стесняясь разрешает псевдоэлементы на ваших чекбоксах, Safari и Firefox тоже недавно подтянулись.

В итоге, в сочетании с appearance: none можно творить что-то такое: https://codepen.io/alvaromontoro/pen/OJqKGBz

Я, кстати, уже говорил ведь, что в стандарт пытаются пропихнуть атрибут switch, чтобы окончательно распрощаться с чекбоксами?

Вот такое (работает только в Safari TP): https://nt1m.github.io/html-switch-demos/

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

#css #switch #checkbox

#такое дня

Сейчас ASCII-графика это такой арт и способ передачи некоторых мемов. Но в 80х и 90х символы, встроенные в шрифт, использовались сплошь и рядом.

Увидеть игру, собранную целиком на символах из разных шрифтов, было чем-то совершенно обычным. Да и до сих пор в консоли можно увидеть прогресс загрузки из символов "\/|-", образующих спиннер.

Вот казалось бы, 2024 год на дворе. Можно вывести любую картинку. Консоли тоже давно не работают только в текстовом режиме...

Оттого удивительнее, что в Windows до сих пор прогресс загрузки в момент установки системы отрисовывается шрифтами! Segoe Boot, если быть точным.

В Half Life и Counter-Strike символы граффити, кстати, тоже.

Раз они упаковали это в шрифт, значит нам можно и нужно это использовать!

Предлагаю посмотреть забавный пример использования: https://z2r-yt.github.io/Fake-Windows-Update-Screen/

Теперь вы знаете, что делать, когда кто-то забыл заблокировать экран.

P. S. Очень, очень, рекомендую почитать комментарии к коду выше. Это потрясающе.

#font #spinner