Интерфейсизация | Vue, Nuxt, Frontend, IT

2023-03-02 16:01:42 button vs a. Web Accessibility
Когда корректно использовать тег , а когда с точки зрения семантики, доступности контента (Web Accessibility, a11y) и даже SEO?

Используем
Когда осуществляем переход на другую страницу или другую часть текущей страницы. Обязательно используем аттрибут href.

Используем
Когда реализуем какое-либо действие используя JavaScript, например, кнопка удаления комментария в блоге. В этом случае не присходит перехода на другие страницы, меняется только состояние приложения.

Используем
Когда реализуем отправку формы

#a11y #html #frontend

7 viewsedited  13:01

Открыть/Комментировать

2023-03-02 00:30:41 Адаптивно вставляем (embed) видео с YouTube
Иногда требуется вставить на сайт iframe, например видео с YouTube. Для корректного адаптивного отображения видео необходимо соблюдать пропорцию ширины и высоты. Раньше это делали с помощью хаков, например, один из подходов - задавать padding в процентах.

aspect-ratio
В 2021 году начала появлятся поддержка свойства aspect-ratio. Достаточно задать необходимое соотношение.

.youtube-iframe {
width: 100%;
aspect-ratio: 16 / 9;
}

Согласно CanIUse поддержка свойства чуть больше 91%. В случае необходимости, можно сделать fallback с помощью @supports not (aspect-ratio: 16 / 9) Открыть/Комментировать

2023-02-24 23:15:14 State of the Vuenion 2023 (часть 4)

Читаю State of the Vuenion 2023: A Recap of Evan You’s Address at Vue.js Amsterdam 2023. Это статья-конспект по одноименному докладу Evan You на Vuejs Amsterdam 2023. Это часть 4
Часть 1
Часть 2
Часть 3

Vue 2 EOL
Поддержка Vue 2 завершается 31 декабря 2023. Начиная с 2024 года больше никаких обновлений для Vue 2. Как жить дальше - подробнее тут

Совсем скоро релиз Vitepress 1.0
VitePress это SSG (Static Site Generator), продолжатель VuePress. Хорош для статичных сайтов с большим количеством контента. Документация для Vue и Vite работает на нем. Контент пишется в формате Markdown, применяются стили и на выходе имеем статичный HTML. В комплекте много шаблонов, можно расширять функциональность с помощью компонент Vue.

Volar будет фреймворко-независимым инструментом
Volar - расширение для VSCode, обеспечивает поддержку TypeScript для SFC (Single File Components). Улучшена производительность и DX (Developer Experience)

Документация Vue 3
Переведена на китайский упрощенный и японский. Французкий и украинский языки на подходе

Официальная сертификация для разработчиков на Vue.js
Об этом уже писал, скоро больше подробностей Открыть/Комментировать

2023-02-22 22:01:41 State of the Vuenion 2023 (часть 3)

Читаю State of the Vuenion 2023: A Recap of Evan You’s Address at Vue.js Amsterdam 2023. Это статья-конспект по одноименному докладу Evan You на Vuejs Amsterdam 2023. Это часть 3
Часть 1
Часть 2

Q2 - Второй квартал 2023
Квартал будет посвящен SSR
Финализируем Suspense
Подробнее о Suspense
Ленивая гидрация lazy hydration
Прорабатываются идеи запуск гидрации только при наведении мышью на компонент, или гидрировать только компоненты, которые видны в данный момент пользователю
Возможность отмечать биндинги в компонентах как v-ssr-only
Такие биндинги не будут участвовать в процессе гидрации на клиенте
Улученные сообщения об ошибках гидрации Better hydration warnings

Q3 & 4 - Vapor mode
На второе полугодие цель - Vapor mode. Вдохоновленный Solid.js Vapor mode призван ощутимо улучшить производительность. Это альтернативная стратегия для компиляции компонент, на выходе получается более производительный код, используется меньше памяти и требуется меньше кода во время выполнения по сравнению с текущей стратегией использующей Virtual DOM. Дополнительного кода не требуется, это просто дополнительный режим компиляции.

Включить режим можно на двух уровнях
Component level
MyComponent.vapor.vue

Application level
import { createApp } from “vue/vapor”

Работает на стации компиляции
Сперва будет поддержка только Composition API и script setup
Вместо Virtual DOM работает с browser DOM
Компоненты компилируются в вызовы функций, нет объекта Component
Предварительный тест js-framework-benchmark
Vanilla JS: 1.0 (baseline)
Vapor: 1.08
Vue 3: 1.25
Vue 2: 1.82
Многообещающе!

Ознакомится с таблицами результатов теста для разных фрейморков - тут. По ссылке надо будет выбрать для какой версии Chrome замеры. Тест создает таблицу на тысячи строк и измеряет время разных операций с таблицей. Добавление, удаление строк и несколько десятков других метрик. Открыть/Комментировать

2023-02-20 20:02:20 State of the Vuenion 2023 (часть 2)

Читаю State of the Vuenion 2023: A Recap of Evan You’s Address at Vue.js Amsterdam 2023. Это статья-конспект по одноименному докладу Evan You на Vuejs Amsterdam 2023.
Это часть 2, часть 1 - тут

CI экосистема
В 2023 году для core библиотеки Vue прицел на стабильность.

Небольшие, но частые релизы => больше фич для ядра Vue

Настроен запуск интеграционных тестов на ключевых проектах экосистемы Vue (находим больше того, что сломали перед релизом)

Переехали с Jest на Vitest
175 файлов с тестами, 2647 тестов перенесли за день
Время выполнения тестов было 98 секунд против 32 секунд сейчас

Время сборки проекта уменьшилось, спасибо rollup-plugin-esbuild

Q1 - Первый квартал 2023
Первоначальный план для версии 3.3 - релизнуть стабильные версии Suspense и Reactivity Transform

Но в итоге фокус был на более доступные вещи: поддержка типов в

2023-02-19 21:00:59 nuxt/axios. browserBaseURL

Иногда бывает нужно задать разные baseURL для запросов с клиента и сервера. В nuxt/axios в options можно передать как baseURL, так и browserBaseURL, последний будет использоваться для запросов с клиента. Так же можно использовать переменную окружения API_URL_BROWSER для этих же целей. Подробнее тут

{
baseURL: `https://some-internal-server:5000/api`,
browserBaseURL: `https://some-server/api`
}

Это актуально для Nuxt 2. В Nuxt 3 из коробки используется ofmyfetch

Поддерживаю проект на Nuxt 2 - пригодилось. Эксперементирую с Traefik, API запросы из контейнера с Nuxt приложением доходят до сервера, но обратно в контейнер не возвращаются в случае использования API типа https://my-external-server.com/api. Предполагаю, что дело в том, что API сервер находится на том же сервере, и весь трафик маршрутизируется Traefik

#nuxt2 Открыть/Комментировать

2023-02-19 02:30:01 Nuxt 3.2.2. Chunk error handling

Это patch release. В основном исправления багов и улучшение производительности. Однако, этот PR помогает бороться с ошибками при загрузке чанков (chunks). Такая ситуация может возникнуть после деплоя приложения на сервер, когда запрашиваемого чанка уже не будет на сервере. Фича пока экспериментальная, но обещают в следующем релизе утвердить API и включить полноценно.

Добавить experimental.emitRouteChunkError

export default defineNuxtConfig({
experimental: {
emitRouteChunkError: 'reload'
}
})

В этом случае при ошибке загрузки чанка страница будет перезагружена. Работает этот обработчик только при переходе на другую страницу (route navigation). Если необходимо обрабатывать все chunkError, то можно добавить свой обработчик.

Использовать хук app:chunkError

export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.hook('app:chunkError', ({ error }) => {
console.log('caught chunk load error'))
})
})

Обновится можно командой
npx nuxi upgrade --force



#nuxt3 Открыть/Комментировать

2023-02-17 21:00:01 State of the Vuenion 2023 (часть 1)

Читаю State of the Vuenion 2023: A Recap of Evan You’s Address at Vue.js Amsterdam 2023. Это статья-конспект по одноименному докладу Evan You на Vuejs Amsterdam 2023. В первой части о достигнутом, во второй о планах на 2023 год.

Распространение Vue 3
Количество загрузок пакета @vue/runtime-core
Январь 2022: 422 736
Январь 2023: 1 240 932
Почти трёхкратный рост

Поддержка в IDE
10 октября 2022 года выпущен релиз Volar 1.0, для команды разработки путь до этого релиза занял 2 года. Volar - расширение для VSCode, обеспечивает поддержку TypeScript для SFC (Single File Components). Улучшена производительность и DX.

vue-tsc сейчас поддерживает "watch mode" и генерирует заголовочные файлы (type declarations, d.ts) для SFC. Фактически, теперь поддержка TypeScript для .vue файлов такая же как и для файлов .ts.
Скажем спасибо Johnson Chu, автору Volar

Экосистема "взрослеет"
В целом поддержка Vue 3 в различных библиотеках растёт. Evan отдельно отметил: Nuxt, Vuetify, Quasar, VueUse, NaiveUI, PrimeVue. Nuxt теперь имеет стабильную 3-ю версию, я кстати, даже успел поиграть с версиями Nuxt RC. Я фанат VueUse, шикарная база Composables на все случаи жизни. А вот NaiveUI и PrimeVue планирую посмотреть.

Vue 2.7
Релиз Vue 2.7 "Naruto" состоялся 1 июля 2022 года. Завезли фичи из Vue 3, теперь поддерживать Vue 2 проекты станет намного удобнее. DX теперь сравним с Vue 3. Тот случай, когда поддерживать legacy приятно

Поддержка Composition API
×