🖥 Автогенерация превью с помощью Satori
#backend #satori #vue #nuxt #typescript

В данной статье рассмотрена крайне интересная тема - генерация Open Graph Preview с помощью Satori.
Satori — Библиотека для преобразования HTML и CSS в SVG.

Полные листинги кода с описанием, ссылки на код в Github и примеры, все внутри👍

https://vc.ru/dev/661531-avtogeneraciya-prevyu-s-pomoshchyu-satori

Сокращение типизации в Typescript с помощью Util Types
#frontend #typescript

В данной статье рассмотрим все частоиспользуемые типы, которые преобразуют другие типы (utils types).
Весь материал с примерами, а для того чтобы разобраться с темой нужно не более 5 минут👍

https://habr.com/ru/articles/730906/

Написание E2E-тестов на Playwright
#frontend #e2e #test

В данном туториале рассмотрел написание E2E-тестов на фреймворке Playwright, а также поделился хорошими практиками по написанию E2E-тестов👍

https://vc.ru/dev/715790-playwright-freymvork-dlya-bystrogo-e2e-testirovaniya

https://tokiory.vercel.app/tutorial/playwright

Я уже достаточно давно веду блог про разработку. Сначала я писал на Habr, потом начал писать на vc, затем на Medium.
Переходя с одной платформы на другую, я начал все больше и больше замечать, что форматы данных платформ не подходят мне для написания статей, ведения Devlog'а, а также для того чтобы делиться заметками.

Именно поэтому я сделал свою платформу для ведения заметок, написания статей и devlog'а.

Вы могли заметить, что к последним статьям я начал добавлять ссылки на tokiory.vercel.app.
Мне важно знать, где будет удобнее читать контент, поэтому сделаю тут небольшой опрос)

P.S. На tokiory.vercel.app естественно собраны все статьи в удобной форме, также там есть то, чего нет на других платформах😌

🎉 "Станция Токиори" полностью переработана в "Лог разработчика"

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

Добавлена куча фич✨

- Полностью переработан дизайн 🌈
Старая версия была бледной и до жути минималистичной.
Новая версия взяла все хорошее что было в старой версии и добавила еще больше приятных глазу элементов;

- Переводы на разные языки 🏴‍☠
Блог теперь доступен на русском, беларусском, корейском, английском и казахском;

- Отзывчивая навигация 👀
Теперь в постах, где много заголовков есть навигация, которая будет следить за скроллингом, а также поможет вам ориентироваться в лонгридах;

- Первоисточники 🔗
Теперь можно легко посмотреть на каких других ресурсах была размещена статья.
Если вы привыкли к интерфейсу Habr / VC / Medium, то всегда можно быстро перейти туда.

- Блок сторонних ресурсов 🤝
В своих статьях я часто указываю на сторонние ресурсы, которые использовал для ресерча, теперь превью таких ссылок красуются почти в каждой статье.

- Диаграммы, диаграммы и еще раз диаграммы 👨‍🎨
Я преследую цель объяснять вещи без особой воды, при этом сохраняя неформальность речи, будто объясняю из уст в уста.
Теперь в статьи встроен Excalidraw, который поможет объяснять все еще более доходчиво.
В будущем я планирую написать плагин для Nuxt, который будет нативно интегрировать Excalidraw прямо в статьи.

- Блог стал еще быстрее ⚡️
Все старые баги ушли со старой версией, с новой версией пришли новые баги пришла оптимизация и отличные показатели на Page Speed Insights

- Поддержка для людей с ограниченными возможностями 💚
Теперь абсолютно по всем интерактивным элементам можно перемещаться с помощью клавиши Tab и активировать их с помощью Enter.
В будущем планируется добавить фильтры для слабовидящих, если поступит достаточно запросов🙏

- Стала доступна функция подписчика 💸
Написание статей, разработка блога и многое другое занимает очень много свободного времени.
Контент все еще остается в свободном доступе и распространяется по лицензии MIT.
Подписка в данном блоге - просто еще один способ сказать "Спасибо", а также получить доступ к контенту раньше чем остальные на 2 дня.

- Новый домен 💅
Старый домен будет продолжать работать.
Новым доменом является https://developer-log.vercel.app

Отдельное спасибо:
- Jetbrains, за предоставление лицензии для Open Source проекта 🧠
- Vercel, за предоставление расширенного функционала 💪

Если вы найдете какой-либо баг, то прошу оставить Issue на Github или просто отписать в комменты, вы мне сильно поможете💞

Event Loop в деталях
#javascript

Если вас часто спрашивали на собеседованиях про Event Loop и давали задачки на последовательность выведения console.log, то вам будет интересно👨‍🦳
В данной статье разберем что такое Event Loop, как он работает под капотом и почему он мешает console.log

- https://developer-log.vercel.app/posts/event-loop-details
- https://habr.com/ru/articles/762618/

Приятного чтения 🐈