На сайте Vue есть раздел Examples в котором представлены примеры простых реализаций различных задач, например список с Transition анимацией, таймер на AnimationFrame, древовидный список, TodoMVC и другое

#tip

Deno запустило в open-source 5 дней назад и продвигает свой реестр для JavaScript и TypeScript пакетов - jsr.io

Основные отличия:

- Суперсет для npm
- Поддержка Node, Bun, Deno, Cloudflare Workers и других сред выполнения js
- Автоматическое создание документации
- Рейтинг пакетов
- Встроенная поддержка TypeScript
- Отсутствие необходимости в сборке (ESM формат только)
- Безопасная публикация

#jsr #npm

Число issues у Volar 2.0, он же Vue - Official уже пошло на десятки. Пока вышло четыре патча.

Если у вас что-то сломалось, в VS Code можно откатить расширение на 1.8.27 версию и включить обратно TypeScript Vue Plugin (Volar) расширение

Кажется становится понятен смысл серьезного апдейта софта в пятницу вечером. Автор думает: сейчас на выходных небольшое число пользователей потестит, я баги поправлю, и к началу новой рабочей недели будет стабильная версия.
Не получилось.

#volar

Что означает ACID?

Атомарность
Записи в транзакции выполняются все сразу и не могут быть разбиты на более мелкие части. Если при выполнении транзакции возникают сбои, записи в транзакции откатываются назад.
Таким образом, атомарность означает "все или ничего".

Согласованность
В отличие от "согласованности" в теореме CAP, которая означает, что каждое чтение получает последнюю запись или ошибку, здесь согласованность означает сохранение инвариантов базы данных. Любые данные, записанные транзакцией, должны быть действительными в соответствии со всеми определенными правилами и поддерживать базу данных в валидном состоянии.

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

Долговечность
Данные сохраняются после фиксации транзакции даже в случае системного сбоя.

#db

Жесткий наезд на разработчиков GitLab

В этой статье проводился анализ тяжеловесности сайтов в плане JavaScript кода. В общем зачёте первое место заняли Slack с 55Мб (в несжатом виде), а также react.dev, который при скроле подгружается скриптами и был доведен до 100Мб. Для справки, дистрибутив всего Windows 95 занимал 50Мб.

В конце статьи в разделе "лендинги" похвалили сайт jquery.com, который использует всего 100Кб скриптов, и опустили сайт gitlab.com, который грузит 13Мб JavaScript-a для своего статичного лендинга, и по этому параметру занимает первое место в разделе.

Напомню, GitLab частично написан на Vue. На главной странице обнаруживается Nuxt.js.

Стыд и позор...

#jquery #gitlab #facepalm #benchmark #video

Кто выбирает OS для разработки, Linux в среднем на одном и том же железе чуть быстрей Windows, а Win 10 быстрей Win 11

#benchmark

Во Vue 3 / Vite проектах переменные окружения обычно хранят в .env файлах и получают к ним доступ через import.meta.env.VITE_BACKEND_URL.

Избавиться от ошибок, если вы используете TypeScript, можно через создание src/types/vite-env.d.ts файла с содержимым:

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_PUBLIC_URL: string;
  readonly VITE_BACKEND_URL: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

Также, часто хранить конфигурацию удобней в древовидном формате, и использовать для этого json или js:

// src/config/appSetings.ts

export default {
  baseURL: import.meta.env.VITE_BACKEND_URL,
  publicUrl: "https://mysite.com",
};

//...

import axios from "axios";
import { baseUrl } from "@/config/appSetings"

const instance = axios.create({
  baseURL,
});

#tip #vite #env

Запретить или заменить контекстное меню в браузере (при нажатии правой клавиши "мыши") довольно несложно.

Для этого служит событие contextmenu, слушатель на которое можно повесить на конкретный элемент или весь document

document.addEventListener( "contextmenu", function(e) {
  if ( checkClickInsideTargets(e) ) {
    e.preventDefault();
    toggleCustomMenuOn();
  } else {
    toggleCustomMenuOff();
  }
});

Применение: свое контекстное меню, легкий запрет загрузки картинок или копирования текста

#tip

12 марта 2024 года в Core Web Vitals (основные показатели качества вебсайта) заменят
First Input Delay (FID) на Interaction to Next Paint (INP), который лучше учитывает UX при взаимодействии пользователя с сайтом.

В Google (создатель Core Web Vitals) не раз заявляли, что сайты научились обманывать метрику FID, что давало высокий результат в показателях при плохом пользовательским опыте.

В итоге, как видно на замерах Page Speed, показатели многих сайтов станут неудовлетворительными, в том числе, использующих SSR и гордящихся своими метриками (на картинке выше результаты по nuxt.com). У Vue SPA падение тоже есть, хотя и не такое большое.

#webvitals #nuxt #google

ESlint плагин eslint-plugin-vuejs-accessibility поможет подсказками для доступности

#a11y #eslint

Приложение screenshot-to-code по скриншоту или ссылке на сайт генерит код для HTML/Tailwind CSS, React, Bootstrap или Vue.

Используются GPT-4 Vision и DALL-E 3. Нужно иметь ключ к GPT-4 Vision.

#ai #webdesign

Согласно статистике TGStat, на канале присутствует 16 подписчиц, которых мы искренне поздравляем с заслуженным праздником и желаем больших успехов на ниве IT!

#greeting

Vite для работы с CSS может использовать два препроцессора - PostCSS и Lightning CSS

Последний - относительно новый проект, характеризующийся тем, что часть его написана на Rust, в результате чего он значительно быстрей конкурентов.

Lightning CSS умеет делать трансформацию, минификацию, разбивать на бандлы, работать с CSS модулями и много другого.

—-

Существуют и другие инициативы по переводу js инструментов на Rust - например, OXC project

#lightningcss #rust #oxc

Вчера команда Vite заопенсорсила Rolldown

Сейчас Vite под капотом использует два JavaScript сборщика - esbuild для dev режима и Rollup для билда. Первый - быстрый, но недостаточно функциональный, второй - функциональный, но медленный. Кроме того, они дают иногда несколько разные результаты.

Команда Vite пытается построить единый сборщик, одновременно и быстрый, и совместимый с системой плагинов Rollup. Для этого используются наработки OXC, где ресурсозатратный код Rollup переписывается на Rust для большей производительности.

Rolldown не готов для использования в продакшн.

#vite #rolldown #rollup #esbuild

Stack Overflow Driven Development

(c) Grady Booch

#quote

Авраам родил Исаака; Исаак родил Иакова; Иаков родил Иуду и братьев его...

Немного родословной языков программирования

#lang

Еще немного о языках программирования

Правительство США назвало и рекомендовало к использованию в госструктурах шесть memory safe языков программирования

#lang

23-24 марта 2024 будут очередные 48 часов бесплатного доступа к урокам VueSchool

Зарегистрироваться на них можно здесь

#vueschool #learning