#баг дня

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

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

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

Итак, встречайте: в 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-typenoscript/ts-reset

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

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

#typenoscript #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://news.1rj.ru/str/htmlshit/2

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

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

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

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

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

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

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

Что делать?

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

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

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

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

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

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

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

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

Чтобы настроить и запустить Хому - вам нужно буквально 5 минут: https://news.1rj.ru/str/stoev_bot

#статья дня

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

Вот тут: https://news.1rj.ru/str/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://news.1rj.ru/str/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

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

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

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

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

#баг дня

Встречали ли вы баги, которым восемь лет?

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

Итак, встречайте: https://bugs.chromium.org/p/chromium/issues/detail?id=507397

Суть бага в следующем: для inline-flex контейнера (а ранее и для flex) неверно рассчитывается ширина (а у кого-то и высота) в случае column wrap раскладки (flex-flow). Демо: https://codepen.io/anon/pen/pJLwYp

Смешное хотите? Microsoft Edge, который ещё на старом движке почти от IE, с этим справлялся без проблем. А вот все современные браузеры так или иначе валились.

Исправлено в грядущем Chrome 116.

#bug #chrome #edge #flex

#статья дня

Что делать, если использовать вариативный шрифт очень хочется, но он тяжёлый как мамка читера?

Например, вариативный Roboto весит 785 Кбайт. Да я в 785 Кбайт умещу код стартапа на миллион. Нужна же лишь часть начертаний и глифов, не все!

Стефан Юдис смог уменьшить этот размер до 58 Кбайт используя два инструмента:

Glyphhanger: https://www.stefanjudis.com/notes/glyphhanger-a-tool-subset-and-optimize-fonts/

И Slice: https://www.stefanjudis.com/notes/slice-an-app-to-remove-variable-font-axes/

Первый помогает оставить лишь нужные символы (глифы), а второй — убрать/ограничить оси вариативности.

Прекрасные инструменты, целый новый мир открывают.

#fonts #tools

#фишка дня

Использовать адрес электронной почты вместо логина — тема популярная и очень давняя.

Вот только чтобы автоподстановка в браузере работала корректно, указывать значение атрибута autocomplete нужно не email, а username. Такие дела.

С паролем похожая история. На регистрации надо указывать new-password, а на входе — current-password.

Где же почитать подробнее про все эти правила? Вот тут: https://web.dev/sign-in-form-best-practices/

Ну и в спецификации: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute

Помогайте своим пользователями, браузерам и менеджерам паролей.

#html #autocomplete #form #бородач

#заметка дня

В чатах постоянно всплывает вопрос: «таблица ли это», — ну и картинка макета какая-нибудь.

Так вот, как правило, это всегда таблица. Есть построчное/поколоночное (такое слово есть вообще?) повторение данных — вот даже без сомнений.

Если решили сомневаться — точно делайте таблицу, поставить display flex или grid для адаптации вы всегда успеете.

Вот, посмотрите: https://codepen.io/tomhodgins/pen/akrRqX (тут используется препроцессор eqcss, так что рекомендую смотреть скомпилированный вид, это лишь демонстрация идеи).

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

А ещё таблицы могут вылезти в предпросмотре поиска Гугла или Яндекса, что хорошо скажется на SEO.

#css #table #grid #codepen #таблица #бородач

Изучайте самые востребованные направления в разработке и получите возможность устроиться на работу в лидирующие компании!

На канале факультета программирования  вы найдёте контент, который поможет вам набрать скиллы в программировании: Q&A с преподавателями, гайды, реальный кейсы и мемы.

Погрузитесь в мир кодинга — подписывайтесь на канал факультета программирования! 

#ссылка дня

Комиксы о веб-разработке должны быть нарисованы с помощью веб-технологий и точка! Всё остальное — ересь и подделки!

Во всяком случае, так считает автор блога Comicss: https://comicss.art/

Каждый комик-стрип на его сайте нарисован с помощью CSS и HTML. Буквально.

Потом, конечно, сконвертирован в webp/png, но к каждой картинке можно посмотреть исходный код.

Максимально забавный подход.

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

#фишка дня

Пластмассовый мир победил, XML оказался сильней…

Но почему? Неужели всё настолько плохо?

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

Но погодите, ведь любой компонент в React это просто функция?

А значит, мы можем сообразить их композицию!


const AppProvider = compose(
UserProvider,
ThemeProvider.
MenusProvider,
SupportProvider,
ErrorProvider,
StateProvider,
);


И получить красоту: https://codesandbox.io/s/gprovider-composition-fkn93e?file=/src/App.js

Естественно, подход по своей сути применим ко всем компонентам.

Всё есть функция, котаны.

#react #fp #context #compose #бородач

#видео дня

Да, я нашёл это на Reddit (но я хотя бы признаюсь в этом, в отличие от… 😇).

Оригинальное название — как создать визуальный XOR-эффект на одном только CSS filter и mix-blend-mode (инвертирование по маске, короче). Но для этого стоило бы заодно код переписать в кодпен…

Поэтому делаем так: теперь это видео о том, как использовать Emmet будто ты бог вёрстки.

Эффективность 9000, короче.

#emmet #filter #blend #бородач

#такое дня

Я в отпуске! Имею право запостить что-нибудь странное. Например, риторический вопрос.

Как вы думаете, в Кинопоиске и Яндексе хорошо тестируют? Ну так-то вроде должны, конечно, но, глядя на бесконечный cookie pop-up, у меня закрадываются сомнения.

Всё внимание на тень :) Я вообще сначала думал, что кнопка не работает.

И тянется это уже с полгода...