Генерация превью для ссылок: получаем данные

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

#bestPractices #esm #ssg

Расширение VSCode для Rush

Некоторые из вас могут знать, что мне очень нравится Rush — утилита для управления Javascript-монорепозиторием от Microsoft. Я рассказывал про неё на прошлогоднем Holy.js.

К сожалению, официальное VSCode-расширение для неё всё ещё находится в разработке, и все действия приходится производить в CLI, поэтому я решил сделать своё.

В нём я реализовал шорткаты для самых частоиспользуемых мной действий.

#tools

Коробка от вендора

У меня тут накопились некоторые мысли и я решил немного побубнить на околоэкономическую тематику.

Как вы относитесь к использованию компаниями вендорских "коробочных решений"? Мне довелось неоднократно наблюдать кейсы, в которых компания за немыслимые деньги приобретает техническое решение, которое должно решить их проблему. После интеграции проходит некоторое время и вдруг выясняется, что эта коробка не очень-то соответствует требованиям бизнеса. Разработчики судорожно пытаются что-то наколхозить сверху, но коробка оказывается весьма неповоротливой, а вендор всячески избегает доработок и улучшения API — их основной целью всё-таки было продать продукт, а не поддерживать его. В моём наивном представлении о мире такая бизнес-модель не имеет права на существование.

Мир фронтенда очень открытый и построен на опенсорсе. В NPM помимо мусорных пакетов можно найти и множество очень крутых вещей, авторы которых умудряются получать зарплату несмотря на работу над опенсорсным проектом.

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

Что вы думаете на эту тему? Возможно ли вендорам пересмотреть свою политику относительно продаваемых решений или крупным компаниям суждено постоянно наступать на грабли и изобретать свои велосипеды?

17 июня буду рассказывать на Я ❤️ фронтенд о своих исследованиях на тему сборки библиотек. Планирую сделать этот доклад сиквелом к своей статье про пакетные менеджеры. Приходите послушать)

Как и обещал, публикую список ссылок к своему докладу на Я ❤️ фронтенд:
- You may not need a bundler
- Pure ESM package
- Named imports in CommonJS
- ESM in NodeJS Typescript
- Types for submodules
- Module resolution: bundler
- Vite library mode
- Пример исправления для поддержки SSR
- Не нужно бандлить библиотеку
- Rollup preserveModules
- ComonJS vs ESM
- Dual Package Hazard
- Валидация package.json
Список не исчерпывающий, так что по любым вопросам добро пожаловать в комментарии)

Наткнулся недавно на такой твит. Очень понравилась формулировка, поэтому делюсь в исходном виде.

Состояние гонки

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

У меня есть ежегодная традиция делать короткие (30-60 секунд) новогодние видосы в After Effects. Видосы довольно кринжовые, но мне кажется, хорошо создают новогоднее настроение. :)

Видос на этот новый год уже готов и дожидается премьеры, а пока можете посмотреть видосы прошлых лет, которые я собрал в плейлист, а также запись вышеупомянутого доклада про Motion-дизайн с Frontend Conf, который в том числе посвящён After Effects.

В поисках рантайма для Typescript

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

Долгое время для запуска таких скриптов я использовал ts-node, который считал стандартом де-факто для решения этой задачи, но недавно наткнулся на утилиту tsx.

На поиск нового решения меня сподвигла кривая поддержка ESM в ts-node (в Node.js 18 у меня не завелось). С tsx тот же самый код запустился без лишних танцев с бубном. В качестве приятного бонуса я получил watch-mode из коробки.

Из минусов обнаружил только отсутствие в tsx проверки типов из коробки. Но, как я уже упомянал, всё ещё только tsc умеет делать проверку типов, поэтому при необходимости придётся запускать его отдельно — именно это по сути из коробки делает ts-node, но на мой взгляд проверка типов должна быть скорее частью пайплайна тестов, а не сборки и тем более запуска, поэтому минус не считаю значительным.

Автор tsx также сделал репозиторий со сравнением различных инструментов для запуска Typescript-кода.

Приходится ли вам запускать Typescript-код без бандлера? Какие инструменты вы для этого используете?

8 июня расскажу на Я ❤️ Фронтенд об инструменте, который используется в нашей компании для сборки микрофронтендов.

В программе:
- ткнём палкой в давным давно мёртвый Create React App
- проследим мотивацию, историю создания, развития и внедрения на ~60 проектов нашего инструментария для сборки
- переймём лучший опыт похожих проектов
- конечно же не забудем проявить заботу к коллегам

Во время моего выступления на Я 💛 Фронтенд с презентацией произошли небольшие проблемки (абсолютно всё, что в ней могло сломаться, сломалось), но, полагаю, ценность доклада от этого не убавилась. Хочу сказать всем спасибо за обратную связь и действительно хорошие и интересные вопросы.

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

Если у вас остались неотвеченные вопросы, с радостью отвечу на них в комментариях😉

А вот и та самая режиссёрская версия доклада, в которой презентация выглядит ровно так, как я её задумывал. Принципиально в ней ничего нового нет, но не зря же я старался)

Пришлось покостылить даже тут)

В бете Safari 18 заявлена долгожданная (по крайней мере мной) поддержка View Transitions API, который уже довольно давно поддерживается в Chromium-based бразуерах и по такому поводу я решил сделать небольшой редизайн главной страницы своего блога.

На мой взгляд эта фича вносит огромный вклад в то, чтобы Web-приложения ощущались как нативные и при этом не требует особых вложений с точки зрения разработки (особенно при использовании Astro).

Если у вас есть классные примеры использования этого API, кидайте в комментарии)