#такое дня

Полку способов центровки элемента относительно родителя прибыло!

inset-area: center;

Нашёл это Темани Афиф aka CSS Challenges и суть-то в следующем: inset-area это часть CSS Anchor Positioning API для поповеров (извините, слово смешное просто. popover, конечно же): https://developer.chrome.com/blog/anchor-positioning-api

То есть предназначено оно чтобы прибить всплывающее нечто к центру элемента. Но каким-то образом протекло наружу.

Демо: https://codepen.io/t_afif/pen/OJYwybK

Обсуждение: https://github.com/w3c/csswg-drafts/issues/10500

TL;DR: не надо это использовать, это просто курьёз, не более.

#css #vertical #center

#заметка дня

Делаешь задачу, наступает конец дня, но осталось совсем чуток? Несчастные 10%?

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

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

И настроение твоё улучшится.

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

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

А ведь почти любой большой проект уже использует CSS-переменные для дизайн-систем и не стесняется.

Но выход есть! И это — расширение Designgui от Джеймса Четвуда.

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

А ещё в ней заложена работа с UI-китами и дизайн системами. Пока только Shadcn UI и Daisy UI, но начало положено: все токены на местах.

Думаю, надо делать такое же расширение, но для анимаций... А то вытаскивать их всё сложнее, обмажутся тейлвиндами... ну да ладно.

Ссылка на вебстор Хрома: https://chromewebstore.google.com/detail/design-gui/ldhbojdgokammocadfgbidodgffnimfj?pli=1

#css #var #color #design

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

Среди моих подписчиков и в дружественных чатах постоянно всплывают вопросы о том, что же такое SVG вообще и кривые в частности. Как с ними работать и какого чёрта они работают не так, как ожидается.

Я уже выкладывал интересный инструмент для понимания процесса создания SVG и его элементов: path, polygon, polyline и т. д. “для самых маленьких”: https://www.tg-me.com/htmlshit/392

Пришло время для ещё одного. Этот инструмент позволяет понять создание сегментов кривой по шагам, включая перемещение пера (M), кривые безье (C), дуги (арки, A) и линии (L). Всё раскидано по координатам и уложено в сетку. Можно менять конкретные числа, а можно — подёргать реперные точки мышкой и увидеть изменение кривой.

https://yqnn.github.io/svg-path-editor/

#svg #path #бородач

#фишка дня

Является ли CSS языком программирования?

Тьюринг-полным — нет. Но CSS — де-факто — это декларативный язык описания интерфейсов, и развитие его идёт в этом направлении довольно чётко.

Впрочем, fizzbuzz на CSS решается даже слишком элегантно: https://codepen.io/SachaG/pen/nwazRo

Так вот, к чему это я. Вы вообще в курсе, что в CSS есть типы? А они есть. И на их основе можно реализовать некоторые математические функции.

Тригонометрические вон завезли недавно, а математические пока только в Safari.

Давайте попробуем исправить это недоразумение и реализуем abs, floor, round, ceil, mod и rem на CSS и его типах. Начнём с модуля:

--abs: max(var(--a), -1*var(--a));

Поняли, что тут произошло? Выбрали максимальное между a и -a. Очевидно, что положительное всегда будет максимальным, его и берём.

Теперь к сути дела. Давайте реализуем round:

@property --round {
syntax: '<integer>';
initial-value: 0;
inherits: false;
}

--round: var(--a);

Вот щас может стать немножечко больно: мы объявили переменную (custom property, для зануд) --round и указали CSS, что её тип — целое число. Теперь браузер возьмёт и... и округлит значение математически при присваивании (опять для зануд: да, это де-факто присваивание).

А как сделать floor — округление вниз? Как-как:

--floor: calc(var(--a) - .5);

А ceil — округление вверх?

--ceil: calc(var(--a) + .5);

Естественно, перед этим надо объявить переменные --floor и --ceil как целые числа.

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

Пока можете подумать, где это применить 😉

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

#фишка дня

Когда-то давно я слышал о таком свойстве, как text-align-last.

Что оно делает? Ну, думаю, всё понятно из иллюстрации :)

Работает с последней строкой индивидуально, позволяя сделать более приятные глазу переходы текста, соответствующие остальной стилистике. Вот хорошая статья на тему: https://www.stefanjudis.com/today-i-learned/how-to-align-the-text-of-the-last-paragraph-line/

С интерактивным примером, как вы любите.

Почему я акцентировал на нём внимание?

Да просто я знал о нём ещё тогда, когда оно толком нигде не поддерживалось. Вот в IE работало, буквально, а в Chrome нет. И как-то все на него забили в итоге.

В этом есть небольшая беда так нами любимых «the future CSS tip». Наиграешься, разочаруешься, и забудешь :(

Но есть же наш уютный канальчик, мы тут всё вспомним :)

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

#codepen дня

Фокусы с типографикой в CSS весьма ограничены, но даже имея на руках лишь их — можно вытворять эффектные вещи.

Например, комбинируя грид и вертикальный режим вывода текста можно получить забавную змейку, как на демо от Adam Argyle: https://codepen.io/alinaki/pen/VwOJoXY

Я форкаю кодпены, потому что они имеют особенность пропадать.

Заодно демо являет собой хороший пример контейнерных запросов, зажимая размер шрифта в адекватных рамках:

grid
font-size: max(1rem, 15cqmin)
writing-mode: vertical-rl
line-height: 1.1cap

Пользуемся :)

#css #vertical #text

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

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

Кроме шуток :) Оказывается, есть такой инструмент удалённого доступа: noVNC. Это реализация VNC-клиента для браузера.

И в Windows, и в MacOS и уж тем более в Linux есть средства удалённого доступа, поддерживающие этот протокол. На примере MacOS он называется Remote Management.

Ещё не так давно он не поддерживал VNC, но уже некоторое время всё отлично работает.

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

Итак, в чём же была основная сложность?

А в том, что VNC-поток должен шифроваться. И если в обычных браузерах есть Web Crypto API, что позволяет ходить на сервер без HTTPS, то вот браузер в Kindle, пусть и был недавно прокачан (и теперь похож на настоящий), эту самую криптографию не поддерживает.

А мне почему-то очень было интересно посмотреть, как это — дополнительный E-ink экран.

Пришлось генерировать сертификат самостоятельно, на эту мысль меня навёл Роберт Андерберг, показавший саму идею в Твитере:

openssl req -x509 -nodes -newkey rsa:2048 -keyout novnc.pem -out novnc.pem -days 365

...ответив по пути на кучу бестолковых вопросов «ты кто такой»...

Ну и запускаем сервер нашего клиента:

./utils/novnc_proxy --vnc localhost:5900 --ssl-only --cert novnc.pem

И всё проходит прекрасно. К сожалению, на Kindle не поддерживается поворот экрана в браузере. Даже ковыряние в SQLite-базе настроек не помогло...

Но! Можно выключить масштабирование и использовать скроллбары. Или подключить Kindle к Raspberry Pi c медиатекой или умным домом, там разрешение неважно.

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

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

#vnc #remote #eink

#новость дня

Посмотрите на иллюстрацию. Ничего интересного не замечаете?

А здесь происходит ого-го какая драма!

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

Если коротко, есть такой чувак, Андреас Клинг. Долгое время он работал над движком WebKit в Nokia, а потом и над браузером Safari в Apple. А потому немного... в общем, оказался в центре реабилитации.

Выйдя оттуда, ему потребовалось чем-то себя занять (блин, звучит как история BMTH), потому он создал операционную систему SerenityOS. Суть её была в том, чтобы написать Unix-подобную ОС без использования сторонних библиотек. Постепенно вокруг проекта даже образовалось сравнительно большое сообщество.

И вот, разрабатывая просмотровщик HTML-документации, ребята случайно написали браузер. И так получилось, что браузер стал развиваться быстрее чем материнский проект.

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

И вот тут началось самое интересное. Все так наелись монополии Google, что новость взлетела с дикой скоростью. Казалось бы, зачем нам ещё один движок и тем более — браузер? Но запрос есть. Начиная от энтузиастов, заканчивая слабомощными машинами и телевизорами.

В общем, пару дней назад стало известно, что в некоммерческую организацию, созданную под Ladybird, инвестировали 1 миллион долларов. И не кто иной, а Крис Ванстрат.

Не знаете, кто это? А это сооснователь GitHub. И он не один такой. Shopify тоже в спонсорах.

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

И пусть он пока не умеет всего, что умеет Chrome, я верю в его светлое будущее.

#web #browser #ladybird

#заметка дня

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

Лайвкодинг, алгоритмы, большая О — это всё лишь способы напустить дыму, не правда ли? :)

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

Итак, ситуация: пользователь продукта жалуется, что данные в Excel меняют своё местоположение, когда обновляются.

Диагностика проблемы: начиная с колонки BO неверно рассчитывается её порядковый номер.

Решение же на экране, но тем забавнее, что проверяющий пулл-реквест коллега как раз на днях эту же задачу решал на Leetcode: https://leetcode.com/problems/excel-sheet-column-number/

А вот предыдущий код расчёта был достаточно плохо протестирован на граничных значениях колонок... Но много лет работало без проблем :)

Хорошее чувство, в общем.

#leetcode

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

В дополнение к недавнему посту про курс Брамуса Ван-Дамма посвящённого CSS-анимациям по скроллу, хотелось бы приложить его расширение для Chrome, позволяющее их отлаживать.

На иллюстрации, например, отладка всё того же проекта AirBnb: https://www.airbnb.com/release

Ссылка на расширение находится на сайте, посвящённом скролл-анимациям вообще, что само по себе максимально полезно: https://scroll-driven-animations.style/

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

#css #scroll #animation

#фишка дня

Одна из знаменитых проблем Safari на iOS — это утечка скролла. Условно говоря, показали вы модалку, скроллите её — а фон тоже скроллится. В Safari 16, впрочем, проблема была решена.

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

Например, скролл в любом плавающем или просто переполненном элементе очень даже протекает наружу, в итоге скроллите вы колесом (или пальцем) textarea, доходите до конца — и начинает прокручиваться остальной документ.

Я устал придумывать синонимы слову скроллить.

Так вот, уже достаточно давно существует свойство overscroll-behavior. Оно позволяет не только запретить цепочку событий прокрутки, но и отменить пограничные эффекты!

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

Демо: https://mdn.github.io/css-examples/overscroll-behavior/

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

Ах да, Safari... как обычно, поддержка только-только появилась, с 16 версии. До того приходилось мучаться.

В любом случае, свойство очень удобное, пользуемся.

#css #scroll #overscroll #бородач

#ссылка дня

У канала есть небольшое, но всё же уютное сообщество — @htmlshitchat.

И сегодня один из подписчиков прислал на наш суд свой тренировочный проект: простой клон React.js

Собственно, вот он: https://github.com/MarufZak/react-simplified

Помимо непосредственно view-слоя библиотеки представлены ещё headless ui-kit и простая админская панель. То есть, проект вполне себе рабочий.

А теперь слово автору. Какова была мотивация, какими ресурсами пользовался и зачем это всё вообще?

Мотивацией стало сделать свой open-source проект. До этого я делал contributions в проекты как earthworm, reactjs-interview-questions, kamranahmedse/developer-roadmap и тд, фиксил проблемы с a11y.

Я подумал, зачем бы не сделать свою либу, долго думал и остановился на react.
Читал статьи из build-your-own-x , отличные ресурсы. Но копипастить не стал, брал только идеи.

Копался в самом коде реакта, хотя некоторые вещи даже не нашёл. А также читал статьи из канала Будни разработчика, что помогло написать headless ui kit 😉.

Это был мой side проект, но работал я над ним практически каждый день. Спустя 2 месяца я понял, что никакая магия за реактом не стоит, только умный подход к разработке без каких либо custom language syntax, отдельное спасибо разработчикам из facebook.

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

Также я понял что AI справляться не может с такими проектами (да, я многое обсуждал с chatGPT, но толка было мало, возможно я делал неверные промпты).

День за днём делать повседневную или почти одинаковую работу на работе наскучило, а open source меня как будто оживил как разработчка. Всем советую!

#community #opensource

#статья дня

Кто из вас, котаны, использует контейнерные запросы в реальных проектах?

Лес рук...

А ведь всего несколько лет назад запрос на изменение разметки в зависимости от ширины родителя, а не окна (viewport-а), стоял очень остро. Вот мы их получили и... молчание.

Этим же вопросом не так давно задался Крис Койер, создатель CodePen: https://frontendmasters.com/blog/weve-got-container-queries-now-but-are-we-actually-using-them/

Ну и что же, ответ не заставил себя ждать!

Филип Валтон из команды Google Chrome выпустил статью на тему: https://web.dev/blog/how-to-use-container-queries-now

TL;DR
В статье описывается максимально прагматичный подход, в котором пользователи старых браузеров получат мобильную разметку, а современных — все плюшки контейнерных запросов.

Идея, кстати, не нова. Когда вышли финальные версии Flexbox и Grid-ов, многие разработчики и деврелы буквально советовали верстать мобильную разметку, а потом сверху накладывать грид. В итогу худшее, что происходило с пользователями IE 9-11 — они видели мобильную разметку. Ничего страшного же.

Ну что, пользуемся?

#css #cqw #containerqueries

#фишка дня

Давайте что-нибудь наболевшее.

Вот, например, если установить атрибут translate="no" на тег, содержащий название компании, то он не подвергнется автоматическому переводу (типа Google Translate): https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate

Удобно, если ваша компания называется "Clean Beam" или ещё какая-то подобная глупость.

И вообще, не забывайте на html ставить атрибут lang с верным кодом языка. Вы не представляете, как бесит, когда финские и шведские сайты это игнорируют, и переводчик иногда отказывается работать.

#html #attribute #translate

#заметка дня

В @htmlshitchat всплыл вопрос: "А как вывести на экране блокировки смартфона виджеты управления музыкой и плейлистом? След, пред и проигрывание/пауза?"

Ведь если просто запустить audio, ничего такого не получится. Да и плейлист нужен же...

Как это часто бывает, автор вопроса сам на него и ответил.

Как это редко бывает, автор вопроса приложил решение!

Итак, весь секрет в MediaSessionAPI: добавляем обработчики действий previoustrack и nexttrack и вуаля.

Даже демо есть! Это прям нечто невероятное: https://codepen.io/ArsGal/pen/bGPbKML

Не стесняйтесь спрашивать и отвечать в чате. Это помогает всем :)

#js #music #controls

#фишка дня

Замотался, но про вас не забыл, котаны!

Вторая, а может и первая, по популярности фигура на сайтах — это звезда. То рейтинг ей поставят, то маской наложат, то конфетти сделают...

Так вот, из поста про треугольники мы уже в курсе, что clip-path можно применять везде. И даже нужно. Так почему бы не нарисовать им звезду?

«Наверное, потому что задолбаешься точки ставить?», — скажете вы, и будете, в целом, правы. Их там вроде... 10? Десять же, да?

Нет! Оказывается, достаточно пяти!

Глядите чо: https://codepen.io/t_afif/pen/jORvmKG

1. Вариант на тригонометрических функциях:

  clip-path: polygon(50% 0,
    calc(50%*(1 + sin(.4turn))) calc(50%*(1 - cos(.4turn))),
    calc(50%*(1 - sin(.2turn))) calc(50%*(1 - cos(.2turn))),
    calc(50%*(1 + sin(.2turn))) calc(50%*(1 - cos(.2turn))),
    calc(50%*(1 - sin(.4turn))) calc(50%*(1 - cos(.4turn))) 
   ); 

2. Упрощённый вариант, когда всё уже посчитано за нас:

  clip-path: polygon(50% 0,80% 100%,0 39%,100% 39%,20% 100%);

Чтобы понять, как это работает, проще сразу загрузить в генератор clip-path: https://bennettfeely.com/clippy/

Вы не поверите, но это буквально совпадает с тем, как вы безотрывно рисуете звезду карандашом ещё со школьных времён!

#css #star #clip #бородач

#фишка дня

Сегодня на ваших экранах новая серия сериала "Не боги горшки обжигают".

На сей раз отличился Kent C. Dodds, которого уж никак нельзя упрекнуть в незнании фронтенда 🙂

Но давайте разбираться. Что же случилось?

Если пройти по ссылке, то можно понять, что случилась типичная для интернет-каталогов ситуация: карточка товара со ссылкой куда-нибудь ещё.

И да, если раньше всем было вообще пофигу на валидацию — рендерит и ладно — то нынче в дело вступают SSR/SSG и они не позволяют гидрацию невалидного HTML 🥁

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

Так что же делать-то? Псевдоэлементы к спасению!

Верстаем как обычно, вставляем просто две ссылки: одну на товар, вторую куда-нибудь ещё. И растягиваем псевдоэлемент первой на всю ширину. Как-то так: https://codepen.io/alinaki/pen/OJdJQyB

Все довольны, котята спасены!

#css #trick #card #validation #бородач

#статья дня

Месяц назад в Берлине прошла конференция, посвященная local-first принципам в вебе.

Если коротко, идеология local-first придерживается первоочередного хранения и обработки данных на, собственно, компьютере пользователя. Но, конечно, не ограничивается этим. Иногда этот подход ещё называют offline-first, поскольку предполагается полноценная работа с данными в отсутствие сети.

Андрей Ситник был на этой конференции и составил краткий обзор докладов. Идеально, чтобы вкатиться в тему: https://evilmartians.com/chronicles/recapping-the-first-local-first-conference-in-15-minutes

#offline #conference #localfirst

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

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

LGTM. Этими буквами выложена дорога в девелоперский ад.

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

Не протестировал ручками? Отказ. Не написал тесты? Отказ. Не добавил номер тачки или ссылку на тред с продактом в слаке? Отказ.

И для этого подойдет вот такой GitHub action: https://github.com/marketplace/actions/pull-request-auto-reviewer

Вырос он из "общественного" проекта все того же Андрея Ситника Slow Reader.

Конечно, чекбоксы не гарантия спасения от ленивых разработчиков. Но это а) напоминание б) взятие ответственности на себя.

#github #action #workflow