Vite при сборке использует ES modules и ряд других относительно современных технологий. Если вам нужна поддержка старых браузеров, включая IE 11, то для этого у Vite есть плагин plugin-legacy

#vite #legacy

Codeium, всё-таки, мощь

Сгенерил все что надо, распарсил, собрал и положил куда надо, создав внутренний цикл исходя из контекста. Причем, контекст (бэкенд) написан на другом языке.

Комбинация для вызова инлайн чатбота - CTRL+SHIFT+I

#codeium

Google Firebase сдался и добавил в свои сервисы SQL базу данных (облачную PostgreSQL) в форме Firebase Data Connect.

Пока в виде preview сервис можно попробовать бесплатно. Потом собираются брать плату и за саму базу, и за API доступа к ней.
Вряд ли Google с такими политиками сможет конкурировать с Supabase.

На данный момент это две основные площадки, с которыми фронтендер или мобильный разработчик может без излишних усилий сделать удобный облачный бэкенд, как без логики (с простым CRUD доступом), так и с ней (Functions, Auth), и оставаясь в рамках стандартов (не сильно привязываясь к проприетарным решениям провайдеров сервисов).

#firebase #supabase

Устоявшийся в DDD (domain-driven design) паттерн CQRS (Command and Query Responsibility Segregation) или CQS (Command and Query Segregation) - разделение команд и запросов - может сделать программу более понятной и поддерживаемой.

Смысл его в разделении логики работы с данными на часть, которая просто запрашивает данные (query), и часть, которая их изменяет (command).

Query:
- Не изменяет состояние системы. Никаких сайд эффектов
- Контекст запроса хранит нужные для её выполнения данные (пейджинг, фильтры и т.п.)
- Возвращает результат

Command:
- Изменяет состояние системы
- Ничего не возвращает
- Хорошо описывает предметную область, как действия пользователей над системой
- Контекст команды хранит нужные для её выполнения данные

Например, пользователь при регистрации вводит email, его надо валидировать и сохранить. В случае следования CQS необходимо разделить логику на две части (сделать две функции) - валидация (проверка корректности и наличия такого email уже в базе данных) и сохранение.

В аспекте Vue.js computed работает как реактивный query, watch - реактивный command

#architecture #ddd

С добрем утром, компутерщики

Vuejs Amsterdam 2019

#evanyou #video

Во Vue-FAQ добавилась статья, описывающая используемые структуры для Vue 3 проекта - Flat, Atomic, Модульная, FSD, микрофронтенды, с небольшим сравнительным анализом.

#architecture #vuefaq

#meme #js

Сегодня последний день трехдневной конференции vueconf.us в Новом Орлеане, США

Билеты на нее начинались от $900

#event

Во Vue 3 есть важная и нередко используемая конструкция, у которой нет имени. Это то, что обычно называют "композабл с глобальными рефами".

Но:
1. Это не композабл по определению
2. Там не обязательно рефы
3. Они не "глобальны"

В общем случае структура данного объекта - экспортируемые из ES модуля реактивные данные и функции для работы с ними.

Функционально они заменяют "сторы" Pinia. Называть их тоже stores двусмысленно и нелогично. Вообще, молиться на "глобальный стейт" после появления идеи JavaScript signals и их всевозможных реализаций, включая Vue Reactivity API, архаично.

Мне кажется, самое подходящее название для данной конструкции - [реактивный] бизнес объект (РБО). В них инкапсулируется логика предметной области и приложения, они не привязаны к конкретным компонентам, и по аналогии с другими языками и фреймворками, этот паттерн - Business Object - выглядит вполне подходящим.

Кроме того, позиционирование именно как "бизнес объект" будет требовать явного отделения от него инфраструктурного слоя - работы с Backend API, например. То есть, стимулировать использование лучших практик и наработок из других сфер разработки ПО, еще более переводя Vue.js из фреймворка для небольших проектов в разряд enterprise level решений.

#architecture #vuejs #reactivity #rbo #composables

Несколько лет назад нужна была анимация для синхронизации данных с сервером для немецкой системы высшего образования, сделалась вот такая кнопка / прогресс-бар.

Есть варианты на Vue 2, Vanilla JS и Web components. Может кто-то захочет проапгрейдить до Vue 3.

#pet #animation

Реакт выкатил новую экспериментальную штуку - React Compiler, которая позволяет оптимизировать React приложения.

Попробовать можно в песочнице.

#react

——-

23 мая 2024 года состоится MSK Vue.js встреча, на которой приглашенным заморским гостем выступит Денис Чернов с новыми секретами системного Vue программирования

Регистрация на митап

#event

На днях Google подарил всем Speculation API.

Позволяет предварительно загрузить и даже зарендерить любой ресурс:

<script type="speculationrules">
{
  "prerender": [
    {
      "urls": ["next.html", "next2.html"]
    }
  ]
}
</script>

Разработчик может указывать браузеру загрузить в фоне страницу, на которую пользователь с большой вероятностью перейдет. В результате она затем открывается почти мгновенно (VitePress так делает сам по умолчанию, кстати, для следующей статьи)

Наиболее эффективно для SSR (во всех смыслах) и MPA сайтов. SPA от этого сильно пользы не получат, потому как и так быстрые при переходах по сайту.

Работает в Chrome и MS Edge

Пользователи с медленным или платным интернетом аплодируют стоя.

#google #chrome #speculationapi

Сарказм в прошлом посту: "Пользователи с медленным или платным интернетом аплодируют стоя" оказался не понят.

Представим пользователя на 3G или на спутниковом интернете с раздачей через WiFi с тарифом $80 за 1Gb, который зашел на страницу, а владелец сайта сразу же не спрашивая начинает ему грузить половину своего сайта, забивая полностью канал и CPU (рендеринг же).

В презентации сотрудник Google говорит, что они посотрудничали с представителями WordPress, на котором крутится "30% всех сайтов" (его слова), и сделали плагин, который легко позволяет админам WP на первой же странице загрузить и зарендерить хоть все страницы его сайта.

По поводу перформанса он походя тоже выразился: "Ну на сайтах же обычно несколько iframe-ов есть, будет еще один"

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

Теперь такой преграды нет.

#google

Немного занимательной физики в понедельник утром, как математика помогала открывать планеты и антимиры

При наблюдениях за Ураном были замечены его отклонения от "расчетной" траектории, как будто на него оказывали воздействие другие силы, кроме известных (Солнце и остальные планеты). Через 70 лет после первого обнаружения этого математик Леверье смог сделать расчеты, по которым в нужной точке визуально и обнаружили новую планету - Нептун.

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

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

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

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

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

#math #physics #offtop

CSS свойства width и max-width можно объединить через функцию min()

.container {
  width: 100%;
  max-width: 50em;
}

.container {
  width: min(100%, 50em);
}

#tip #css

Прошла большая конференция Google I/O
Обзор JavaScript фремворков от команды Chrome

По Vue немного прошлиcь, но упомянули, что множество реализаций JS сигналов черпают вдохновение во Vue Reactivity API

07:37 - Angular
12:20 - React
20:23 - Next.js
23:20 - Remix
27:35 - Vue.js
29:58 - Nuxt.js
32:37 - Astro
39:16 - Svelte
40:36 - SvelteKit

#event #video #google

Аспект проектирования при основных типах методологий разработки программных систем:

Каскад (waterfall) - заказчик дает четкие требования, по ним строится архитектура системы, программисты делают по ней код.

Гибкая (agile, XP, итеративная) - заказчик дает общие требования, по ним строится прототип архитектуры системы, программисты делают по ней код, систему показывают заказчику, вносятся корректировки, выпускается следующая версия и.т.д по кругу.

DDD (domain-driven design, предметно-ориентированная проектирование) - заказчик и программисты постоянно тесно работают над выработкой четкой модели предметной области, которая затем практически один в один становится скелетом архитектуры программной системы.

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

#architecture

После 20 лет мучений с раскрытием "аккордеона" чистым CSS браузеры (пока только Chrome) скоро подарят нам еще один, самый естественный способ:

height: calc-size(auto);

Песочница

Функция работает аналогично calc(), но может принимать в качестве аргумента auto, min-height и аналогичные параметры.

Раньше мы уже писали о другом pure CSS варианте для аккордеона - через grid-template-row

#tip #css #accordion

Вышел "мета-фреймворк" 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