#такое дня

В 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.iss.one/htmlshit/2

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

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

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

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

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

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

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

Что делать?

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

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

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

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

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

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

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

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

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

#статья дня

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

Вот тут: https://t.iss.one/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.iss.one/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, у меня закрадываются сомнения.

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

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