"Frontend", "Front-End" or "Front End"?

Исследование

#frontend

Уже писали год назад об этом каталоге UI библиотек

https://ui-libs.vercel.app/

С тех пор там немного прибавилось библиотек и функционала

#ui #lib

Сегодня зашла в гости вторая скрипка региональной государственной филармонии с мужем

Сыграли "Зиму" Вивальди

С Рождеством

#music #offtop

У Cursor AI в Composer на прошлой неделе (вроде) появилась сильная фича - теперь когда он делает инкрементные изменения в коде, то после каждого шага проверяет ошибки линтинга и исправляет их перед тем, как приступить к следующему действию.

Это помогает не уйти в полные дебри при генерации.

#ai #cursor

Полезный сайт, на котором есть различные инструменты для веб разработки

Например, для создания CSS анимаций или флексбокс генератор

#tool #css

Сравнение производительности систем реактивности Vue 2 и Vue 3

https://stackblitz.com/edit/sb1-ftgjrkge?file=performance.js

Напряг нейронку на примитивные тесты

┌─────────────────────────┬────────────────┬────────────┬───────────┬────────────┐
│ Test Case               │ Operation      │      Vue 2 │     Vue 3 │ Difference │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Small Object            │ Creation       │   282.35ms │  282.63ms │       0.1% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Small Object            │ Updates        │    15.22ms │   43.31ms │     184.6% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ -                       │ -              │          - │         - │          - │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Medium Object           │ Creation       │  1851.82ms │  457.59ms │     -75.3% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Medium Object           │ Updates        │     2.34ms │   19.17ms │     720.8% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ -                       │ -              │          - │         - │          - │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Large Object            │ Creation       │  6744.25ms │ 1808.13ms │     -73.2% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Large Object            │ Updates        │     1.84ms │   25.53ms │    1283.5% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ -                       │ -              │          - │         - │          - │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Object Assignment Tests │ Creation       │   627.95ms │  371.53ms │     -40.8% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Object Assignment Tests │ Updates        │   145.56ms │  155.88ms │       7.1% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Object Assignment Tests │ Assignment     │   192.23ms │   60.92ms │     -68.3% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ -                       │ -              │          - │         - │          - │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Deep Nested Object      │ Creation       │ 12068.51ms │ 2931.10ms │     -75.7% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Deep Nested Object      │ Updates        │     1.93ms │   20.38ms │     958.4% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Deep Nested Object      │ Deep Update    │     7.17ms │   63.64ms │     788.3% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ -                       │ -              │          - │         - │          - │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Wide Object             │ Creation       │  3473.25ms │ 1089.35ms │     -68.6% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Wide Object             │ Updates        │     1.93ms │   26.83ms │    1294.0% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ -                       │ -              │          - │         - │          - │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Complex Updates         │ Creation       │   810.08ms │  422.19ms │     -47.9% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Complex Updates         │ Updates        │     1.98ms │   19.96ms │     908.1% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Complex Updates         │ Complex Update │   196.00ms │   78.74ms │     -59.8% │

AbortController можно применять не только для отмены сетевого запроса, но и для отмены, практически, любых событий, включая setTimeout, анимацию или нажатие на кнопку

const abortController = new AbortController();

button.addEventListener(
  'click',
  () => console.log('clicked'),
  { signal: abortController.signal }
);

abortController.abort();

Иногда это удобней, чем делать отписку-подписку.

#js #tip

// useUserService.ts

function isAuthenticated() {
  return !!user.value;
}

// Component A

<script>
const { isAuthenticated } = useUserService();
</script>

<template>
  <p v-if="isAuthenticated()">hello</p>
</template>

Функции во Vue ведут себя не совсем как функции

В данном примере функция isAuthenticated() ведет себя как computed и будет вызываться каждый раз, когда user изменится или компонент А будет перерисовываться.

Происходит это из-за того, что Vue определяет все реактивные зависимости внутри тела функции и перерендивает компонент, когда кто-то из них меняется.

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

#reactivity #tip #optimization

Лучше жить в деревне с утками,
Чем в столице - с проститутками (с)

#offtop #video

Еще одна UI библиотека на Vue 3 от нашего соотечественника для ознакомления

proxima-vue

В альфа версии, но кода много

#ui #lib

Что-то захотелось редактируемый профиль пользователя на странице сделать через html contenteditable

Потратил кучу времени, что-то получилось, но в итоге переделал на input

Очень неудобно, особенно с системой байндинга и реактивности Vue
Не делайте так.

#html

Проверьте качество кода своего сайта

https://frontenddogma.com/tools/check/

#tool

Options API - это FSD
Composition API с composables - модульная архитектура.
(аналогия)

FSD в основу иерархичного разбиения ставит программный функционал. Модульная - доменные сущности

Можно провести аналогию c физиологией человека

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

FSD же на верхнем уровне разбивает сперва по органам и тканям - кровеносная система, ЖКТ, мышечные ткани, и внутри уже разбивает по доменам - рот и кишечник внутри ЖКТ

Так же и с переходом от Options API к Composition API. Было разбиение по фичам (options), стало - по бизнес / доменным сущностям (композициям).

Так лучше.

#fsd #architecture

Про Container size queries уже все знают. но про Container style queries еще далеко не все

Целью их является стилизация элементов в зависимости от контекста родительского контейнера.

Они позволяют создавать правила, которые применяются только при выполнении определенных условий относительно стиля контейнера.

Это дает возможность создавать более адаптивные и контекстно-зависимые стили и стилизовать компоненты в зависимости от их окружения.

.card {
  /* ...стили для карточки... */
}

@container style(--background-color: #333) {
  .card {
    /* Стили для карточки, когда у ее родителя темный фон */
    color: white; 
  }
}

В планах поддержка проверки функцией style() не только CSS custom properties, но и простых - style(color: green).

Caniuse везде, кроме Firefox

#css

Вчера пришла в голову мысль пересмотреть "Малхолланд Драйв", а сегодня умер Дэвид Линч

#offtop #kino