#видео дня

Что-то меня это видео, найденное Turbojedi, увлекло. Давайте немнго отвлечёмся и посмотрим, как создавались системы букинга авиабилетов: https://youtu.be/8_t41xvPp1w

Из этой презентации вы, например, узнаете, что в ранних системах коды билетов были прямыми указателями на адрес блока на диске в мейнфрейме авиакомпании.

Абсолютно проклято :)

#video #aero

#игра дня

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

Потому что мне они нравятся :)

Итак, вашему вниманию CSS Speedrun. Кажется, в объяснении не нуждается :)

https://css-speedrun.netlify.app/

Я чота был невнимательный в паре заданий (или считал себя дофига умным) и прошёл в итоге аж за 07:25 :(

#css #game

#ссылка дня

Помните, мы звёзды шрифту Martian Mono набирали, чтоб Рома приоритизировал кириллицу?

Пацан сказал — пацан почти сделал же, цитирую: «Ура, доделал базовую кириллицу для всех шрифтов!

Следующий шаг — балансировка визуального веса букв, чтобы всякие Жж и Шш не чернили в наборе».

Значит, скоро пробуем!

Но вот какая ещё новость-то: шрифт Martian Mono теперь есть и на Google Fonts: https://fonts.google.com/specimen/Martian+Mono

Надеюсь, Рома расскажет о процедуре одобрения в каком-нибудь треде, ходят слухи, было непросто.

По-моему, шикарно. Не забываем о поддержке :)

#fonts #martian #mono

#такое дня

А нас замело.

#фишка дня

Короче, рассказываю.

Открываете вы такие ваши девтулзы в Chrome, нажимаете там Cmd-Shift-P (Ctrl-Shift-P) и видите такие панель команд. Ну типа как в Sublime Text, VS Code и прочих ровных редакторах.

И вот там, например, можно сделать скриншот всей страницы, вместе со скроллом, да-да! Просто ищете название нужной вам команды.

А чтобы не теряться и вообще побольше узнать о возможностях девтулзов Chrome, идите сюда: https://www.canidev.tools/capture-full-page-screenshot/chrome

Там много чего такого есть, разбито по категориям. Видео, скриншоты, ссылки на подробности.

#devtools #chrome

#статья дня

Немного восьмибитности не желаете?

Я не так давно выкладывал целый сайт в стиле NES, а тут на глаза попалась статья о том, как сделать скруглённые уголки на блоках немного менее… кхрм, скруглёнными.

В стиле восьмибитных приставок: https://lukeb.co.uk/blog/2022/01/17/pixelated-rounded-corners-with-css-clip-path/

На самом деле в статье очень много информации о том, как использовать clip-path, рекомендую.

Ну и чтобы совсем куце не было, давайте ещё восьмибитных прелоадеров на чистом CSS: https://codepen.io/t_afif/full/PopjYgx

#css #clippath #8bit #preloader

#ссылка дня

Типизирование React-компонентов, рефов и хуков может обернуться большой болью. Особенно если в первый раз. Но к счастью, у нас есть GitHub, который добрые люди используют не только как хранилище кода, но и как идеальный универсальный блог :)

Встречайте: https://github.com/typescript-cheatsheets/react

Буквально, из описания: «Cheatsheets for experienced React developers getting started with TypeScript».

Впрочем, у ребят есть и более привычная веб-версия, разбитая на секции: https://react-typescript-cheatsheet.netlify.app/

Мне, например, недавно понадобилось сделать полиморфичный компонент, который в зависимости от условий мог становиться то ссылкой, то кнопкой (какой прекрасный повод для холивара). Я не нашёл решения непосредственно здесь, зато нашёл в обсуждениях и PR. Что тоже показывает, как удобен GitHub для коллективного блога.

В общем, всем типов, котаны.

#typescript #react

#новость дня

Наконец-то в каталоге 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?