#такое дня

Итак, крик души. Кипим до сих пор. Не я первый, не я последний.

Задача простая и сравнительно типичная: вендоризовать библиотеку. Т. е. не просто импортировать в проект, а:
1. импортировать нужное
2. написать адаптер для использования
3. собрать
4. тришейкнуть
5. транспилировать в es3 (поясню ниже)
6. сделать функцию-адаптер доступной в глобальном скоупе

Оказалось, в 2022 году это не так-то просто!

Сразу скажу, что речь о пакете semver, нам нужно было сравнение версий.

Начнём хотя бы с того, что он в commonjs, что уже ну такое. В общем, поехали.

Берём rollup, берём swc. Почему swc? Потому что быстрее чем babel и tsc. Почему не esbuild? Потому что swc умеет собирать в es3 (Google AppsScript в рабочей конфигурации — это es3). Теперь надо соединить rollup и swc.

Добро пожаловать в ад!

Ищем плагины, находим следующий: rollup-plugin-swc3. Почему его? Ну, альтернативы не работают с современным rollup 🙂

Но у него есть минус! Он не поддерживает глобальный конфиг swc, нужно писать внутри определения. Следующий минус — в конфигурации по-умолчанию не транспилирует node_modules, ну ок, передали пустой массив в exclude.

И тут мы понимаем, что semver — в commonjs, а не esm. swc в commonjs не умеет, давайте ещё плагин, находим официальный commonjs. Работает из коробки, ура. Поехали дальше.

Очевидное решение для модулей в старом JavaScript — это IIFE (самовызывающаяся функция). Ну ок, включаем в rollup режим iife.

Ага, сказала шведская бензопила.

Собрать-то собрали, но функция-адаптер так и осталась внутри! Почему? Потому что rollup — он для сборки библиотек. Хотите глобальный скоуп — лезьте в него ручками намеренно.

Что же делать? Решение есть, плагин rollup-plugin-iife. Он возьмёт наш es-модуль (да, режим сборки в rollup придётся поменять), вернёт функцию-адаптер из iife и присвоит её значение переменной, а скоуп уже ваша забота.

Так, сделали, собрали — не работает. Почему? Ну, например, в es3-реализации от Google AppsScript (на самом деле, от Mozilla, потому что движок Rhino) в объекте не может содержаться ключ default, зато может — 'default'. Да-да, строкой — можно, а иначе default — зарезервирован. Не очень стандартный JS, ага.

Беда, что делать?

Находим официальный плагин replace, проходимся по коду и заменяем нужное. Там ещё и геттеры-сеттеры пришлось заменить, потому что swc их транспилировать не умеет... ну не суть.

Естественно, ещё нужен nodeResolve для импорта пакетов из node_modules...

Собрали, работает. Теперь охота переименовать файлы. И тут начинается веселье.

Плагин iife не умеет работать с файлами, ему на вход только директорию подавай. Ну ок, потыркались, решили не делать переименование файла, сразу назвали как надо (вполне себе решение, чо вы).

Захотелось минимизировать, вроде swc умеет. Включаем. Отваливается iife. Опять. Выключаем. Не очень-то и хотелось.

Захотели на вход несколько файлов — rollup не умеет, только объединять конфигурации в массив. Ну ок, вынесли общие конфиги в переменные, сделали массив.

Уфф, закончили. Работает. Врагу не пожелаю.

Да ладно бы только с rollup такая проблема! Шаг влево-вправо от того, как видят типичные задачи разработчики бандлеров — и вот вы уже страдаете. Чуток нестандартная платформа — страдаете. Разделение бандла на части по определённой схеме — страдаете. Полифиллы — страдаете. Начитались дифирамб турбопаку — а они даже в SCSS не научились (и в плагины тоже). Опять страдаете.

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

За вредность.

P. S. зато тришейк заработал из коробки. Ня.

#rollup #swc #bundle

#продолжение дня

После написания вчерашней заметки я решил попросить небезызвестный ChatGPT сделать мне этот самый конфиг Rollup по следующему техзаданию: «Generate rollup config to vendorize compare function from semver package using named iife export and swc compiler to es3».

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

#продолжение дня

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

И да и нет.

ChatGPT действительно предоставил мне конфиг, который ещё с полгода назад был бы минимально рабочим. Сейчас этот конфиг не заработал, потому что был использован ныне сломанный rollup-plugin-swc вместо rollup-plugin-swc3.

ChatGPT не определил при этом, что импорт swc должен быть именованный и не настроил компилятор на проход по node_modules.

Но при этом система подсказала, что плагин rollup-plugin-iife не нужен! Потому что при указании name в output результат работы IIFE-конструкции будет присвоен переменной.

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

Дальше — больше. ChatGPT не смог настроить транспиляцию get-set shorthand'а для swc (это плагин @babel/plugin-transform-property-mutators), предложив несуществующую настройку. Потом предложил взять babel, я отказался.

После этого ChatGPT написал собственный плагин для rollup. Он оказался нерабочим, но дал мне пару идей, как исправить ситуацию. И я пока ещё в процессе 🙂

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

Ну ок, ок. Не любого человека, а меня конкретно.

#chatgpt

#опрос дня

Помните, я возмущался тем, что вложенность в CSS это ужасно?

Я не собираюсь менять своего мнения, но тут такое дело...

Короче, nesting собираются ввести в стандарт. Но есть проблема.

Никак не могут выбрать синтаксис!

Так что CSSWG в блоге WebKit решили выкатить опрос на общественное суждение: https://webkit.org/blog/13607/help-choose-from-options-for-css-nesting-syntax/

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

Изъявите свою волю 🙂

А там посмотрим.

#css #nesting

#вопрос дня

Мастера Prettier, помощь нужна.

Есть код. В коде есть длинные строки, например, логирование. В коде есть чейнинг, есть деструктурирование объектов, есть аргументы-объекты и так далее.

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

Конфиг printWidth установлен в 120 символов и Prettier ничтоже сумнящеся вытягивает все ваши объекты и чейнинги в одну строку, хотя вроде как они все гораздо меньше 120 символов в ширину, что отвечает настройке.

Как сделать так, чтобы он перестал это делать? Комбинировать с ESLint? Задавать ignore-pattern?

#новость дня

У LastPass утекли бекапы зашифрованных паролей и секретов: https://blog.lastpass.com/2022/12/notice-of-recent-security-incident/

Срочно идите меняйте мастер-пароль, если вы используете LastPass. Срочно меняйте пароли на всех сервисах, где нет 2FA. Да и там тоже меняйте 🙂

Веселье!

#codepen дня

Звание воскресного кодпена дня забирает… пустой кодпен. С его прекрасными цитатами.

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

Вообще, цитаты на CodePen появились достаточно давно и иногда бывает действительно забавно.

#фишка дня

Полтора года назад я разгонял тему про реализацию виджета аккордеона. Ну или collapsible, иначе говоря: https://t.iss.one/htmlshit/591

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

Но тут такое дело... в Firefox уже достаточно давно можно было анимировать высоту ячейки грида через grid-template-rows: https://t.iss.one/htmlshit/834

И вот теперь, наконец, можно и в Chrome и в Safari! Ура, дамы и господа!

Codepen c примером: https://codepen.io/chriscoyier/pen/wvxwgae

Счастье есть, короче говоря.

#css #accordion #collapsible

#эксклюзив дня

Первый эксклюзив канала! Версия 1.0RC шрифта Martian Mono!

Вижу, не все в курсе. Короче, дело такое. Роман Шамин, арт-директор небезызвестных Evil Martians когда-то пообещал ускорить разработку кириллицы для их шрифта за 1000 звезд на Git Hub. Ну так вышло, что мы с вами все ему в этом помогли.

Дело было ещё в июле, набрали быстро. В начале декабря появилась информация, что скоро можно пробовать… И вот мы здесь!

С пылу с жару, я получил сообщение от Романа меньше часа назад, 1.0RC: https://www.dropbox.com/sh/311fqf72c5xbsqq/AAA3BhXhzklDOstIeqCjNJGea?dl=0

Тестируем, оставляем отзывы в комментариях к посту (или потом в issues на Git Hub, как пойдёт).

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

#font

#статья дня

...заодно и #библиотека дня

TL;DR: Компонент-балансировщик текста для React, не оставляющий висячих слов и делающий текст приятнее для чтения: https://react-wrap-balancer.vercel.app/

Если не поняли, что это — смотрим видеоиллюстрацию к посту.

Теперь основная часть, собственно, статья: https://www.ctrl.blog/entry/text-wrap-balance.html

Автор вышеуказанного компонента рассказывает о короткой истории балансировщиков текста, сравнивает версию от газетчиков New York Times и версию от Adobe.

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

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

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

#css #react #font #rendering #fouc

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

Как прорекламировать свои возможности в разработке и заставить потенциальных работодателей взять у вас заказ?

Можно холодными звонками, можно рекламой, можно через open source-проекты... А можно ещё пилить удобные визуальные инструменты для сообщества!

Например, как генератор CSS-сетки (всё же придётся писать гридов) https://grid.layoutit.com/ от Leniolabs. И у них ещё много есть подобных. Впрочем, тоже open source.

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

#css #grid #tool

#итоги года

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

Удалось ли вам несмотря ни на что достичь поставленных целей или нет, сейчас не важно. Важно, что мы здесь.

Желаю всем выполнения поставленных планов в новом году, котаны!

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

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

Он говорит — Lobster, я говорю — нет. Вон же лигатуры присутствуют, края букв иные. Похоже — но не то.

В общем, стали думать. И тут я вспомнил о сервисе WhatTheFont: https://www.myfonts.com/pages/whatthefont

Даже не использовал никогда. Ну что же, сохранил логотип, загрузил. И... ну и конечно же ни разу не Lobster!

Наиболее близким шрифтом оказался Fourth. Соединение l-s, правда, выглядит иначе, но у шрифта столько настроек лигатур...

В общем, стоящий сервис, можно пользоваться.

А коктейли не всем нравятся, кому-то на вкус как мел.

#fonts #tool

#статья дня

Vite очень быстро набирает обороты. Ещё бы, без необходимости, собственно, сборки на этапе разработки скорость работы (как минимум, старта) увеличивается в десятки раз. Но почему?

Всё просто, Vite и аналогичные утилиты работают с "чистыми" es6-модулями, перезаписывая адреса импорта и предоставляя современному браузеру сделать остальное.

Чувствуете, проблему? Чем больше модулей — тем больше браузеру грузить. Даже локально это может стать проблемой. Собственно, об этом бенчмарки в статье и говорят: https://betterprogramming.pub/is-vite-really-faster-than-webpack-b414f6cc751c

На такой конфигурации Webpack соберёт бандл быстрее, чем браузер загрузит файлы.

Есть ли решение? Конечно, «ленивая» загрузка файлов и модулей!

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

#vite #webpack #rollup

#тред дня

Отличный тред Андрея Ситника о том, что же не так в мире ES-модулей и почему радоваться рано. Тред из конца 2020, но не потерял популярности и сейчас.

Почему вспомнил сейчас? Потому что отлично дополняет предыдущий пост про Vite.

Коротко для фронтенда: реализация модулей в Webpack отличается от стандарта, поддержка браузерами чистых модулей ещё не совсем достаточна, а когда она будет достаточна — встанет проблема доставки до потребителя и генерации карт исходного кода. В общем, от бандлеров избавиться удастся совсем не скоро, а скорее всего — никогда. Но это и не нужно.

https://twitter.com/andrey_sitnik/status/1229753395961044993

Для тех, кто не про твиттер: https://threadreaderapp.com/thread/1229753395961044993.html

#js #es #esnext #webpack #twitter

#фишка дня

Все вы знаете, что в современном JavaScript есть деструктуризация и деструктурирующее присваивание. Грубо говоря:

function f() {
  return [1, 2];
}

const [a, b] = f();

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

let a = 1;
let b = 2;

[a, b] = f();

Да, прекрасно. А если из объекта?

function f1 {
  return {a: 5, b: 6}
};

{a, b} = f1();

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

Обернуть в обычные!

({a, b} = f1());

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

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

Правда, это не значит, что надо так делать всегда.

#js

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

Про caniuse.com говорить никому уже не приходится, это база, которая должна появляться как только ты набрал "c" в адресной строке.

Но иногда кому-то из нас приходится верстать... письма. И вот тут начинается веселье.

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

Для таких случаев придуман https://www.caniemail.com/

Всё то же самое, что Can I Use", но про почту.

Больше никаких "а может?.." Определяете целевую аудиторию — и поехали верстать.

#email #css #html #feature

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

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

Сегодняшнее расширение пытается решить проблему недостаточного контраста на сайтах: https://fixa11y.com/

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

Полезная вещь, короче, надо сказать.

#css #a11y #contrast

#книга дня

Вы помните такую книгу — «Живая типографика»?

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

Короче, сама-то книга выложена автором в свободный доступ: https://t.iss.one/htmlshit/955

Так вот, выпуск был аж в 2007 году. Естественно, тираж давно распродан и переиздание долго назревало.

И назрело! Александра Королькова стартанула канал, посвящённый подготовке второго издания книги! С прекрасными иллюстрациями с описанием процесса. Вот он: https://t.iss.one/livetypography

За чужой работой можно наблюдать бесконечно, не правда же? Процесс интересен чуть ли не больше результата.

В общем, просвещаемся, котаны!

#font #typography #book

#фишка дня

В эфир с ноги врывается Ли Робинсон с простым, но максимально эффективным способом улучшить читабельность ваших таблиц, унифицировав ширину цифр: font-variant-numeric: tabular-nums.

🔨 Как применять? Вот так: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric
👀 Где посмотреть в работе? Вот тут: https://ncaam.vercel.app/66

Пользуемся, отдыхаем.

#css #table #font #monospace