Вопрос: при изменении какого CSS свойства на 0.01px визуально видно изменения на экране?

#tip #css

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

Напомним, Anthony Fu форкнул и портировал пакет shiki.js на ESM. Данная библиотека предназначено для синтаксической подсветки фрагментов кода, аналог highlight.js. Использует hast для токенизации и VS Code Oniguruma, которая написана на C и компилируется в WebAssembly. Данная часть переписана Anthony на ESM, является tree-shakable и работает и в Node.js, и в браузере.

Использование того же движка, что и в VS Code, позволяет работать быстрее распространенных подсветчиков кода, занимать меньше места и быть более функциональна (например, включает препроцессор для TypeScript TwoSlash нотаций). Доступны множество языков (включая вариации Vue и Vue HTML) и все темы VS Code (на данный момент около 5000). VitePress переехал на новую библиотеку для подсветки блоков кода в декабре 2023 года.

На прошлой неделе владельцы shiki сделали Pull request и забрали себе все улучшения, добавленные Anthony. Теперь он работает над shiki, проект shikiji архивирован.

#antfu #shiki #shikiji #vitepress

Один из вариантов решения записывается в одну строчку

#math

Один из создателей ООП и UML Грэди Буч цитирует создателя Linux Линуса Торвальда

#tip #quote

v-html директива может исправлять ваш контент исходя из его HTML валидности. Имейте в виду.

Например, строка

<p><h2>Hello world</h2></p>

будет преобразована в

<p></p>
<h2>Hello world</h2>
<p></p>

#tip

Release candidate готов (смена репозитория сверху слева)

К версии пакета для Vue 3 проектов и для встраивания в VitePress добавил Web components версию, так что можно запускать на React или простом HTML через <release-timeline />

Просьба потестить. Eсли кто проверит работает ли на Nuxt - буду благодарен

Вижу основное применение в замене changelog проектов в их доках на VitePress. При создании релиза на GitHub генеришь описание, правишь его.

Документация

#releasetimeline #pet

Указаны периметры прямоугольников
Справа вверху - квадрат
Найти площадь внешнего прямоугольника

#math

Кстати, кто не знает, webp формат реально очень сильно уменьшает размер картинок по сравнению с jpeg при том же визуально качестве. Попробуйте. Плюс, улучшится рейтинг на PageSpeed.

Поддержка браузерами достаточная - 96.41% (все, кроме IE)
Можно использовать jpeg как fallback в тэге <picture>

#tip #webp

3 февраля 2014 года Evan You впервые опубликовал новость о новом JavaScript фреймворке Vue.js.

10 лет спустя:

#vuejs #evanyou

Сколькими способами можно расставить 8 одинаковых ладей на доске 8 × 8 так, чтобы ни одна не била другую?

#math

Деструктуризация работает и в v-for цикле в шаблоне. Хотя не всегда это нужно делать.

#tip

Нашел интересную штуку - esm.sh

Позволяет работать с npm пакетами в браузере. Является Декоратором для npmjs.org пакетов

Пример использования:

index.html:

<script type="module">
  import { mountRT } from "https://esm.sh/release-timeline";
  mountRT();
</script>

mountRT:

function mountRT() {
  const app = createApp(App);
  app.mount("#release-timeline");
}

После чего release-timeline как микрофронтенд монтируется на указанный div

При импорте пакета release-timeline автоматически будут загружены все его зависимости, включая Vue.

#lib

Senior фронтендер и баги на проде

#humor

#reactivity #cheatsheet

В марте состоится очная конференция Vue.js в Амстердаме
Фото с прошлогодней

#vuejs #event