#фишка дня

...для маководов.

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

defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="spacer-tile";}'; killall Dock

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

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

P.S. а ещё доком можно управлять с клавиатуры, нажмите fn + ⌃ + F3 и дальше стрелочками.

P.P.S. есть разделитель поменьше!

defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="small-spacer-tile";}'; killall Dock

#mac #dock #feature

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

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

Оказалось, изобретать ничего не нужно — уже есть https://jsonhero.io/

Сгруппирует по категориям, покажет связанное, отобразит картинку.

Удобно.

#json #viewer #бородач

#такое дня

Меня одного задолбали недоделанные технологии?

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

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

1. position: sticky

Мы его ждали много лет. С таблицами правило стало работать только после того, как в Chrome полностью движок таблиц переписали. А теперь... а теперь ещё несколько лет будем ждать, чтобы получить возможности навесить нужные стили на «прилипший» элемент. Слухи о псевдоклассе :sticked так и остались слухами.

Что мы делаем? Конечно же считаем скролл ручками!

2. element.scrollIntoView

Шикарная вещь! Просто гениальная по своей сути. Что может быть приятнее, чем просто указать, как именно нужно автоматически доскроллить до элемента и где остановиться. Вот только...

Вот только где offset, я спрашиваю? Почему нет такой простой вещи?

Но ведь есть scroll-margin-top, скажете вы...

Ага, вроде и есть. Но у меня нифига не вышло. А что если мне нужен разный в зависимости от ситуации? А если динамический? Что если у меня на одном варианте AB-теста есть sticky-заголовки, а в другом — нет?

Что мы делаем? А опять ручками:


const line = document.querySelector(`[data-id=${id}]`);

if (line) {
const p = line.getBoundingClientRect();
window.scrollTo(p.left, p.top + window.scrollY - 40);
}


Раздражает. Зачем таким вообще заниматься?

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

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

#заметка дня

В чате вчера разразилась целая баталия по поводу того, можно ли вкладывать в кнопки aka button что-то помимо простой разметки для текста с иконкой.

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

Так вот, семантически вкладывать div в a в 2023 году весьма верно. А вот вкладывать div в button — уже нет 🙂 Потому что button принимает только фразовый контент, коим div не является. Ссылки даны на кодпен, копируйте оттуда в валидатор и смотрите сами.

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

И решение это — растянуть псевдоэлемент, принадлежащий ссылке или кнопке, на весь контейнер: https://codepen.io/IhorPower/pen/YzRqzyL (пример от подписчика).

Чуть позже разберем бенефиты такого решения, а пока доброе утро, котаны :)

#css #trick #a11y

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

Разобраться в концепциях Git просто не только лишь всем. Кто-то схватывает на лету, кто-то продирается сквозь ветки и листья документации. Кто-то забивает на всё, использует UI любимой IDE и ничего сложнее git pull origin master не разруливает.

Но насколько проще было бы, если появился бы симулятор происходящего под капотом. И ведь такой есть!

И называется он git-sim, вот так вот буквально.

Нужно разрулить конфликтный cherry-pick? Слить несколько веток вместе? Посмотреть последствия reset, stash, rebase? Да запросто! Просто вместо git команда пишете git-sim команда и наслаждаетесь.

Ах да, ссылки на примеры от авторов (много видео и иллюстраций): https://initialcommit.com/tools/git-sim

И на GitHub проекта: https://github.com/initialcommit-com/git-sim

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

#git #sim #tool #бородач

#codepen дня

Как понять режимы смешивания (блендинга, mix-blend-mode) в CSS?

Можно, конечно, обмазаться математикой и сидеть дёргать ручки в DevTools, а можно открыть сегодняшний кодпен: https://codepen.io/jh3y/pen/OJXrVME

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

Если кому интересно, что это за интерфейс управления такой — это dat.GUI: https://github.com/dataarts/dat.gui

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

#mix #blend #css #бородач

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

Итак, где-то с полгода назад я писал о правиле text-wrap: balance и инструментах, которыми такое поведение можно настроить. Что же это такое?

Думаю, лучше, чем на видеоиллюстрации, объяснить будет сложно. Просто... приятнее читать.

Так вот, почему вспомнил? Ну, для начала, свойство приземлилось в Chrome 114, о чём блог разработчиков Хрома не преминул упомянуть: https://developer.chrome.com/blog/css-text-wrap-balance/

Но упомянули-то аж в апреле, а пост-то почему щас только?

Так это, вышла версия 1.0 библиотеки React Wrap Balancer!

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

Всем work-life balance, котаны!

#css #balance #react #typography

#фишка дня

Показать цвет белее белого? Легко!

На самом деле не белее, а ярче, но кого это волнует? Ну ладно, многих...

Так вот. Многим, если не всем, знаком волшебный термин HDR: High Dynamic Range (здесь ссылка на технологию для видео). В последние годы ей прожужжали уши, наверное, всем.

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

Так вот, ближе к делу. Если правильно сформировать HDR-видео, например, QR-кода, то оно будет показано ярче остального экрана! Например, глядите сюда (точно — обладатели айфонов и недревних макбуков): https://notes.dt.in.th/HDRQRCode

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

Вполне можно применять в билетных сервисах...

Ну и чуток технических подробностей и ещё одно демо: https://github.com/dtinth/superwhite

Такое вот милое прогрессивное улучшение (если, конечно, найти способ генерировать HDR-видео ffmpeg-ом)...

#hdr #video #ios #macos

🔥 Главная в России конференция про Kubernetes®

22 июня 2023 года состоится Kuber Conf — конференция для всех, кто работает с Kubernetes®. Вас ждёт 9 докладов, 12 спикеров, 180 минут техноконтента:

➡️ технические доклады, продуктовые обзоры, лучшие практики от разработчиков и экспертов по контейнерным технологиям;
➡️ создание сервисов и решение бизнес-задач с помощью Kubernetes в финтехе, e-commerce, HoReCa и не только;
➡️ неформальное общение с профессиональным сообществом, встреча старых друзей и новые знакомства.

Регистрируйтесь по ссылке, чтобы получить доступ к онлайн-трансляции Kuber Conf’23!

#баг дня

Ух, как я люблю такие баги!

Какие — такие?

А такие, которые произошли из-за фич, создававшихся для чего-то хорошего, а теперь используемых чтобы за вами, вот да, тобой конкретно, шпионить!

Итак, встречайте: в Chromium-based браузерах неверно реализован document.fonts.check().

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

Но Chrome и иже с ними проверяют этим методом наличие локальных шрифтов. То бишь, установленных у пользователя: https://bugs.chromium.org/p/chromium/issues/detail?id=1416842

Почему это плохо?

Да потому что этот метод активно используется для фингерпринтинга (снятия отпечатков) браузеров и, соответственно, пользователя!

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

#chrome #bug

#такое дня

В TypeScript де-факто "сломано" использование конструктора Boolean() в методе filter.

Поглядите на иллюстрацию, не кажется ли вам, что выведенный тип filtered ну не должен быть таким? Фильтр через конструктор Boolean() является достаточно популярным способом очистки массивов от falsy-значений (null и undefined туда же, очевидно).

Какие есть решения? Ну, в issue на GitHub их много, те же тайпгарды например: https://github.com/microsoft/TypeScript/issues/16655

Ну и есть весьма популярное решение — ts-reset: https://github.com/total-typescript/ts-reset

Автор патчит тип метода filter чтобы вывести верный тип массива.

Я, честно, не знаю, стоит ли фильтр по Boolean() того, но почему бы и нет.

#typescript #boolean #tool

#фишка дня

Эмулируем различные особенности зрения легко и просто!

Если залезть в Chrome DevTools, нажать на меню "три точки", выбрать Rendering и найти раздел Emulate vision deficiencies, можно легко понять, как видят ваш сайт, например, люди с искажённым цветовосприятием. Дальтоники.

Список эмулируемых особенностей:
1. Нечёткое зрение (тут и близорукость, и дальнозоркость подойдёт)
2. Протанопия (нет красного)
3. Дейтеранопия (нет зелёного)
4. Тританопия (нет синего)
5. Ахроматопсия (нет цвета)

Начиная с Chrome 112 есть возможность имитировать пониженную контрастность (для имитации катаракты, например): https://developer.chrome.com/blog/new-in-devtools-112/#reduced-contrast

#a11y #chrome #devtools #бородач

#красивое дня

Если вам скажут, что разработка сайтов это не искусство — покажите этому... человеку вот такое: https://codesandbox.io/s/enter-portals-9m4tpc

Я уже минут двадцать просто залипаю.

А секрет-то "просто" в блендинге сцен... Даже документация есть: https://github.com/pmndrs/drei#meshportalmaterial

Вообще, обратите внимание на упомянутую библиотеку drei: это набор полезностей под react-three-fiber на которых можно собирать прекрасное.

#webgl

#такое дня

Я пропустил, что каналу исполнилось 5 лет! 30 мая 2018 года я поменял кое-что в жизни: https://t.me/htmlshit/2

Интересно, куда делось сообщение номер 1... Ну не суть.

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

А потом канал стал способом перестать проводить столько времени в чатах по CSS, объясняя всем и каждому, как вертикально центрировать дивы :)

Спасибо, что вы со мной, котаны и котанессы!

Всем чмаффки.

64% россиян работают за компьютером и проводят как минимум по восемь часов в день пять дней в неделю в сидячем положении. Чаще всего сидячий образ жизни ведут айтишники (96%) и работники финансового сектора (95%).

Низкая активность в течение дня влияет концентрацию, настроение, сердечно-сосудистую систему и опорно-двигательный аппарат. Кроме того, IT-специалист вынужден постоянно смотреть в экран. От этого страдает зрение.

Что делать?

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

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

Сделать это может Хома Стоев - бесплатный Telegram бот. Он учитывает график работы и присылает полезные напоминания.

Итак, с чем работает Хома:

1) Вред сидячего образа жизни можно компенсировать за счет перерывов. Бот сообщает, когда нужно сделать паузу для разминки. Присылает упражнения. Рассказывает, как внедрить в жизнь комбинированную работу стоя/сидя.

2) Профилактика проблем со зрением - гимнастика для глаз. Бот напоминает об этом, отправляя инфографику с упражнениями.

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

4) Для продуктивной работы нужна энергия. Ее основной ресурс - питание. Бот напоминает о поддержании водного баланса и обеденных перерывах.

Чтобы настроить и запустить Хому - вам нужно буквально 5 минут: https://t.me/stoev_bot

#статья дня

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

Вот тут: https://t.me/htmlshit/1638

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

Так, к статье дня. Анастасия Щедрина о том, как работает ESLint и о том, как написать свой плагин для линтинга React-приложения: https://habr.com/ru/companies/domclick/articles/743384/

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

#eslint #react #ast

#фишка дня

Презентации Apple — событие больше культурное, чем технологическое. Даже если они показывают что-то переворачивающее мир. Ясно, что кто не захочет — тот не перевернётся.

Ну, кроме шуток, люди не ставят массово напоминания о презентациях Google и Samsung или Huawei. Не транслируют их построчно.

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

Последняя презентация тоже не обошлась без подобного. Вот весьма забавный пример: размытая виньетка.

Этот эффект очень простой и предназначен для гарантированного выделения элементов управления на любом фоне видео. Собственно, суть понятна в рекламе: https://www.youtube.com/watch?v=TX9qSaGXFyg&t=128s

Так вот, к чему я. Такую виньетку можно легко сделать на чистом CSS: https://expensive.toys/blog/blur-vignette

Секрет в сочетании шести градиентов: линейных и радиальных.

В статье даже конструктор виньеток имеется :)

#css #apple #blur

#статья дня

Итак. Я когда-то вам разгонял про фреймворк RICE. И нет, это не про джаббаскрипт, это про работу. Как сортировать задачи, грубо говоря. Что важно, что менее важно. А что не нужно. Вот тут: https://t.me/htmlshit/1249

Думаете, это просто теория? Вот и народ из Shopify тоже так думал, а в итоге стали переводить своё мобильное приложение на React Native согласно приоритетам, рассчитанным по RICE. Золушки, ага.

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

Собственно, вот оно: https://shopify.engineering/migrating-our-largest-mobile-app-to-react-native

Получилось долго.

#react #native #rice #бородач

#фишка дня

Кому немного зла, близкого к абсолютному? :)

Как превратить вообще все ссылки в вашем проекте в управляемые вашим роутером? В нашем случае, либо Next.js либо react-router. Да очень просто: https://gist.github.com/devongovett/919dc0f06585bd88af053562fd7c41b7

На скриншоте есть ошибка, кто найдет — возьмет с полки пирожок.

Но если я такое увижу в новом проекте... не надо :) Это крайний случай.

#react #router #hack

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

Перфекционисты тут?

Не так давно Андрей Ситник в Твиттере поднял тему красивого кода. В данном случае под красивым кодом подразумевалась сортировка импортов (и экспортов) модулей и методов.

И вот он, ESLint плагин для всяческой упоротой и не очень сортировки импортов: https://github.com/azat-io/eslint-plugin-perfectionist

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

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

А если вы когда-нибудь вообще задавались вопросом, где зона ответственности Prettier, а где — ESLint (или любых других), на эту тему имеется соответствующая статья: https://blog.joshuakgoldberg.com/the-blurry-line-between-formatting-and-style/

TL;DR: всё, что меняет AST (пара постов выше) — зона ответственности линтера. А красотули — форматтера.

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

#js #eslint #beauty