Вышел "мета-фреймворк" SolidStart 1.0

Filesystem routing, Server Functions, Client Render Mode, SSR, SSG, Out-of-Order-Streaming, Optimistic UI, Key Based Cache/Invalidation, Progressively Enhanced Forms, API Routes, Parallelized Nested Route Data Fetching, Single Flight Mutation, Islands(experimental), Suspense, Transitions

#solidjs #solidstart

Новости от Микрософт

В новый Windows будет вживлен Copilot. Функция Recall будет записывать все ваши действия, включая непрерывные скриншоты, прогонять потом всё это через AI, чтобы товарищу майору вам легко было по промпту найти что-то из вашего прошлого.

Почему-то для демонстрации переводчика был выбран именно русский язык.

Изменится и персональное железо: к CPU и GPU добавится NPU - Neural Processor Unit, для частичной обработки AI вычислений.

Также Микрософт двигается в сторону ARM и делает на них свои новые лэптопы. Пора продавать акции Intel

#ai #windows

На конференции Google I/O был озвучен новый функционал, который стал доступен веб разработчикам в 2023-2024 годах:

HTML and CSS
The inert attribute
Size container queries and container query units
New color spaces and functions
The :user-valid and :user-invalid pseudo-classes
CSS Subgrid
Trigonometric functions in CSS
CSS :has() selector
Complex nth-child selectors in CSS with the 'of S' syntax
New range syntax for media queries
The linear() easing function
CSS Nesting
Relaxed parsing for CSS Nesting
Lazy-load offscreen iframes
Declarative Shadow DOM
CSS offset-position and offsetpath values
The Popover API
align-content on block layout

JavaScript and Web APIs
Import maps
modulepreload
Offscreen canvas
Constructable stylesheets
Compression streams
The Origin Private File system
Array fromAsync() static method
ArrayBuffer transfer() and transferToFixedLength()
groupBy() functions
Promise.withResolvers
intl.Segmenter

Видеообзор

#google #html #css #js

У штатного логгирования в JS есть несколько уровней.

console.debug() отлично подходит для второстепенных логов, поскольку они попадают в раздел Verbose в инструментах разработчика и по умолчанию скрыты.

При необходимости, их можно сделать видимыми.

#tip #js

Какое-то странное сравнительное исследование Tailwind и CSS

#css #tailwind

Еще один известный JS видеоблоггер сравнил SSR и JSX с возвратом к PHP

Вдогонку к этому мему

Maximilian Schwarzmüller - популярный и интересно объясняющий спикер, известен тем, что много лет назад в курсе по Vue 2 заявил, что похоже на то, что React и Angular имели секс, и в результате получился Vue, вобравший в себя лучшие качества обоих.
Сейчас специализируется на React и Next.js.

#jsx #ssr #php #maximilian

Через пол часа начинается митап от MSK Vue.js

Смотреть онлайн трансляцию можно по ссылке: https://youtube.com/live/7SWzCjDPtoQ

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

#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