Что означает 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

Кроме Rolldown-a команда Vue на прошлой неделе выставила в open source еще один свой грандиозный проект - Vue Vapor, который уже можно попробовать в его песочнице.

Грандиозный потому, что это по сути переписывание бОльшей части фреймворка. При этом Vue API (код для Vue 3, который пишет разработчик) должен остаться тем же самым.

Современные фронтенд фреймворки бывают двух типов - runtime и compile time. Первые работают с Virtual DOM - это такая абстракция на JavaScript, с которой взаимодействует пользовательская программа вместо реального DOM вебстраницы и, грубо говоря, являющаяся его зеркальным отображением. Делается это потому, что работа с браузерным DOM (рендеринг) - очень затратная операция, и фреймворк через Virtual DOM призван её оптимизировать - например, несколько изменений в DOM собрать вместе и зарендерить как одно. Так работают Vue.js и React, они предоставляют в runtime браузера прослойку для пользовательского кода (типа виртуальной машины), который работает только с объектами Virtual DOM.

Compile time фреймворки вроде Solid.js или Svelte не создают этой прослойки, и компилируют пользовательский код в код, который работает с браузерным DOM напрямую. В результате бандл получается меньше, а программа - быстрее. Сложность тут в оптимизации подобной компиляции. Для простых вещей она подходит, но что-то более сложное - и сompile time фреймворки уже могут проигрывать в скорости, и однозначно проигрывают Vue 3 в DX.

Команда Vue хочет хотя бы частично попробовать внедрить compile time реактивность - можно будет указывать, какие пользовательские компоненты компилировать в конечный код (Vapor mode), а для каких использовать обычный Virtual DOM.

#vapor #solid #svelte #vuejs #react

Если кто-то немного прифигел от числа контрибьютеров во Vue Vapor в новости выше (450 на данный момент), то данный твит Эвана всё разъясняет:

Совет: проведите spellcheck вашего репозитория, прежде чем опенсорсить его, чтобы избежать всех PR с исправлениями опечаток.

#tip

Следующая большая Vue.js онлайн конференция пройдет 25-26 апреля 2024 года
Evan You заявлен спикером

Vue.js Live

#event #vuejs

Хм..
Почитал как работают Core Web Vitals и прозрачным прямоугольником на сплэш-скрине смог свести LCP до минимума (ранее был в районе 2 секунд)

Это этим занимаются SEO-специалисты?

#seo #webvitals

Кастомный обработчик ошибок:

try {
   // ...
} catch(e) {
   let url = `https://www.stackoverflow.com/search?q=[js] + ${e.message}`;
   window.open(url, "_blank");
}

#humor

Пример реализации светлой и темной тем на сайте на чистом CSS

<body>
  <label>
    <input id="dark" type="checkbox">
    Dark mode
  </label>
</body>

body {
  --fg: black;
  --bg: white;
  color: var(--fg);
  background-color: var(--bg);
}

body:has(#dark:checked) {
  --fg: white;
  --bg: black;
}

#css #tip