#новость дня

Наконец-то в каталоге npm появилась возможность посмотреть код пакета! Даже с подсветкой.

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

Впрочем, к библиотеке на скрине понятие «говнокод» неприменимо 😉

#npm #node

#статья дня

Нельзя было не затронуть эту тему. По новостным ресурсам пронеслось, что AI-инструменты для художников начали запрещать или ограничивать на известных сервисах. Что художники начали объединяться против и так далее.

Но как дела обстоят на самом деле? Может ли нейросеть, условный Midjorney, заменить иллюстратора уже сейчас?

Короткий ответ — и да, и нет. И Злые Марсиане попытались дать нам ответ на этот вопрос в своей статье: https://evilmartians.com/chronicles/midjourney-vs-human-illustrators-has-ai-already-won

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

#midjorney #neural #picture

#статья дня

Все любят хорошие статьи по SVG.

От базового понимания координат и viewBox, через transform к clipPath и его анимации с помощью GSAP. Вот так вот просто.

Каждый шаг стильно иллюстрирован и ёмко разжёван: https://www.cassie.codes/posts/swipey-image-grids/

#svg #viewbox #clippath #gsap

#заметка дня

#js #focus #scroll

Представим, что вам нужно акцентировать внимание на элементе. Элементе формы, скажем. Например, вывести его в область зрения пользователя. Какие есть варианты?

Очевидно, focus. Ведь для этого и предназначено. Вот только focus ведёт себя непредсказуемо в разных браузерах: в Chrome и Safari элемент выводится на центр экрана, а Firefox — до минимально необходимого уровня, суть — вниз. А ещё всё это происходит резко.

Решение проблемы — передача запрета скролла в метод focus и вызов scrollIntoView вместо этого.

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

А ещё можно передать параметр, отвечающий за вид прокрутки: behavior. Итого, behavior: smooth подвинет элемент к нам плавно. Правда, для Safari и IE придётся подключать полифилл (см. комментарий в примере).

Итого, получаем: https://codepen.io/alinaki/pen/mdPwdxy

Мой пример — дополненный оригинальный от Smashing Magazine: https://twitter.com/smashingmag/status/1299325085111783425

Ещё близкое к реальности применение — скролл по секциям: https://codepen.io/aaroniker/pen/WNNLRYb

#css #scroll #scrollintoview

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

Мозаики (паттерны) это всегда прекрасно. Но соблюсти симметрию, чтобы заполнить поле, может быть не совсем тривиально.

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

И такой есть!

https://patternico.com/

Можно заполнить встроенными иконками (Font Awesome или Line), а можно загрузить свои. Есть даже ссылка на вариант конструктора с эмодзи :) Правда, там убогонькие Emojione, но вдруг кому ок.

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

#pattern #background #generator

#ссылка дня

И вдогонку пусть будет ещё один проект с мозаиками, на сей раз на чистом CSS. Код каждой можно сразу скопировать.

https://css-pattern.com/

P. S. То ли в пропорциях дело, то ли лейбл наверху бесит, но реализация scroll-snap на сайте почему-то раздражает.

#css #pattern

#такое дня

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

И вот сегодня приехал MacBook Pro 13 TouchBar M2 24 GB RAM 512 SSD.

Новый 14 на M1 Pro брать не стал, слишком мне не нравится их дизайн. Ждать M2 Pro тоже смысла не увидел.

Первое впечатление — не тормозит скролл в Preferences! Понятно, зачем Apple такие мощности — чтобы писать плохой код.

И ещё он холодный. Рукам на палмресте не очень приятно, но колени будут рады.

И кстати, с топкейса снята фаска! Это значит, он больше не острый и углы не будут коцаться так быстро. Если кто-то не понял — объясню в комментариях. Правда, я не уверен, когда они это сделали — может, ещё в 2020, с нормальной клавиатурой.

Производительность смысла обсуждать нет. И даже с развёрнутым Docker батарея у коллег держит полтора рабочих дня. На Intel — 2 часа, чтоб вы понимали.

Не вижу смысла в дальнейших подробностях, но с Webpack теперь можно не уходить.

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

Пока я переносил данные с одного ноутбука на другой, Intel, естественно, сел.

Я подключил его к монитору, туда-сюда, продолжил...

И внезапно обнаружил, что MacOS пошарила клавиатуру и курсор между двумя ноутбуками и, соответственно, монитором!

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

#vscode дня

Если вы умеете пользоваться поиском — вы уже миддл. Если поиском с заменой — смело называйте себя сеньором.

Я щас не шучу, know your tools!

Огромное количество разработчиков вообще с трудом понимает, что код — это просто текст, без подсказок IDE не справляются. Но не будем о наболевшем.

Сейчас я вам покажу нечто, что выведет поиск кода на новый уровень: расширение CodeQue!

Ссылка: https://marketplace.visualstudio.com/items?itemName=CodeQue.codeque

Я иллюстрацию файлом приложу, ибо иначе мелко. Но в чём соль: вы можете искать код, который напоминает тот, что написан в области поиска!

Например, в примере — ищем div, внутри которого есть ещё div с атрибутом className, установленным через clsx. Или ещё, можнот найти все формы, внутри которых есть select (необязательно, HTML-тег или компонент).

Я честно говоря сразу вообще не понял, нафига это надо — есть же RegExp.

Но потом ка-а-ак понял!

#search #extension

#такое дня

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

Задача простая и сравнительно типичная: вендоризовать библиотеку. Т. е. не просто импортировать в проект, а:
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