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

#event #offtop

Чтобы узнать реальный размер какого-либо npm пакета в бандле можно воспользоваться сервисом pkg-size.dev

Он удобней bundlephobia.com, которая большую часть времени недоступна.

#npm #tip

Самое время узнать, за счет чего главная лендинговая статичная страница GitLab смогла набрать 13Мб в скриптах

На скриншоте бандлофобии разрезолвились не все пакеты

Первая тройка тяжеловесов:

1. @nuxtjs/i18n - 2.5Mb
2. slippers-ui (GitLab's Marketing Design System) - 1.8Mb
3. vue-mermaid-string (построение диаграмм) - 1.1Mb

#gitlab #optimization #nuxt #i18n

Полезные фичи VS Code:

Сочетания клавиш:
ALT + ←/→ - Идти к прошлому/следующему месту редактирования
ALT + ↑/↓ - Переместить строку/выделение
SHIFT + L - Выделить строку
SHIFT + ALT + ↑/↓ - Дублировать строку/выделение
SHIFT + ALT + ←/→ - Расширить/сузить выделение

CTRL + SHIFT + P => поиск команды по названию

Настройки:
Profiles
Sticky Scroll

Расширения:
Codeium
Code Spell Checker
Todo Tree
Favorites

Следует учитывать, что многие расширения (например, популярное Import Costs) очень сильно жрут ресурсы компьютера и тормозят редактор

#vscode #tip

Вариативный шрифт (variable font) предоставляет возможность в рамках одного шрифтового файла самостоятельно плавно регулировать такие параметры, как: ширина, вес, курсив, наклон, оптический размер, длина засечек, контраст, свойства нижнего и верхнего регистра и т.д.

Вариативные шрифты давно поддерживаются операционными системами и браузерами.

Попробовать

#fonts

FormKit выпустил небольшую библиотеку для Drag-and-Drop функционала - @formkit/drag-and-drop

<script setup lang="ts">
import { useDragAndDrop } from "@formkit/drag-and-drop/vue";
const [parent, tapes] = useDragAndDrop(
  [
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ],
  }
);
</script>

<template>
  <ul ref="parent">
    <li v-for="tape in tapes" :key="tape" class="cassette">
      {{ tape }}
    </li>
  </ul>
</template>

Ранее он же сделал легкую библиотеку для работы с датами Tempo

#dnd #formkit #lib

Немного OSINT-a в ленту.

Давайте еще поизучаем результаты исследования бандла лендинга GitLab, потому что это интересно и познавательно.

Первая тройка тяжеловесов:

1. @nuxtjs/i18n - 2.5Mb
2. slippers-ui (GitLab's Marketing Design System) - 1.8Mb
3. vue-mermaid-string (построение диаграмм) - 1.1Mb

На третьем месте хорошая библиотека для генерации налету диаграмм по тексту mairmaid . Я тоже хотел поставить её на Vue-FAQ, поставил, посмотрел насколько она просадила размер бандла и производительность в браузере, убрал и заменил генерацию налету на статичные заранее сгенеренные ею картинки ради UX.

На втором - slippers-ui, это гитлабовский относительно небольшой (20 компонент) UI kit. Без какого- либо тришейкинга и оптимизации, естественно. Очень много, с учетом того, что любая современная UI библиотека весит в несколько раз меньше.

Ну и победитель - то, за что так любят Nuxt. Это когда он берет что-то хорошее и делает его еще лучше. В этот раз он взял vue-i18n, естественно, для интернационализации.

Используя pkg-size.dev смотрим сперва на vue-i18n, отключив учет peer dependencies:

Install size: 2.8MB / 6 packages
Bundle size: 73KB minified (23KB gzip) / 9 modules

Очень неплохо для i18n библиотеки

То же с @nuxtjs/i18n:

Install size: 61MB / 239 packages
Bundle size: Не собрался (ошибки)

Error: Process exited with code 1
✘ [ERROR] No matching export in "node_modules/unicorn-magic/default.js" for import "toPath"

Bundlephobia тоже дала ошибки при сборке

Самая простая реализация i18n пишется в один composable. Но на Nuxt-e всё намного серьезней.

#nuxt #optimization #i18n #gitlab

В AI расширении к IDE Codeium появился GPT-4 в ограниченном варианте

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

#codeium

Области, где Vue.js был первым

Техническое влияние

- Первый, кто реализовал реактивность на основе глубокого отслеживания
- Первым объединил идею однофайловых компонентов с инструментами сборки
- Первым объединил в Composition API реактивность в стиле Signals с современными моделями компонентов
- Первым исследовал использование компилируемого сахара реактивности для Signals
- Уникален в плане поддержки как шаблонных так и Virtual DOM функций рендеринга.
- Впервые применил концепцию прогрессивного фреймворка: последовательные, но постепенно адаптируемые слои.

#vuejs #evanyou

29 выступлений с прошедшей в феврале конференции Vuejs Amsterdam 2024

#event #video

Doom на CSS

#css

Создатели UI библиотеки chakra-ui для React создали еще одну приятно смотрящуюся библиотеку для различных фреймворков, в том числе и Vue - Ark

Отличительные особенности - headless, a11y

Основана на другой их UI библиотеке - zag.js, которая работает на технике конечных автоматов состояния

Разрабатывает команда из Нигерии

#ui #lib #headless #arkui

Optimistic UI

С появлением и распространением концепции Single Page Application появилась возможность разрабатывать "толстый" клиент и управлять состоянием приложения.

Стратегия Optimistic UI предполагает, что, разработчик знает, что должно случиться в результате выполнения инициированной пользователем операции, и может сразу обновить интерфейс так, как если бы операция выполнилась успешно. А в это время в фоновом режиме выполнить соответствующий AJAX запрос или иную асинхронную операцию.

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

#optimisticui #ux

"JS беспредел"

В главной роли - Деми Мурыч

#js #video #murych #vuefaqpictures

Вышел ESLint Configuration Migrator

Предназначен для перевода предыдущих вариантов конфига ESlint (.eslintrc, .eslintrc.json, .eslintrc.yml) в новый "flat config" формат - eslint.config.js

Данный формат стал основным начиная с ESlint 9.0

#eslint

Одно из самых полезных нововведений CSS - конструкция of S

.container :nth-child(2 of .highlight) {
  color: red;
}

Позволяет выбрать определённые элементы из списка селекторов

<body>
  <div class="container">
    <span>1</span>
    <span class="highlight">2</span>
    <span>3</span>
    <span>4</span>
    <span class="highlight">5</span>
    <span class="highlight">6</span>
  </div>
</body> 

Выберет с "5"

#tip #css

#video #humor

Задача хорошей программы делать сложное простым.

Грэди Буч

#quote

Два самых значимых улучшения в грядущем Vue 3.5 связаны с оптимизацией реактивности

- PR#9511 - улучшает работу с большими reactive массивами (которые сейчас обслуживаются как все объекты - через Proxy), что должно дать многократное ускорение при работе с ним и оптимизацию по памяти

- PR#10407 - в целом в два раза уменьшает использование памяти на реактивном коде

#vuejs #optimization

Ember.js переходит на Vite, baby

#vite #ember

Мы уже писали пару раз о применении Reactivity API пакета вне Vue фронтенд приложений.

Вот новая библиотека/starter-kit, которая использует Vue Reactivity API для упрощения создания VS Code расширений. Путем отображения VSCode extension API (которая основана на event driven архитектуре) в композаблы. Несколько понижается производительность, значительно повышается DX.

Пока что Vue Reactivity API выглядит лучшей "реализацией" JS Signals.

#vscode #reactivity