На днях 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

На конференции Google I/O был озвучен новый функционал, который стал доступен веб разработчикам в 2023-2024 годах:

HTML and CSS
The inert attribute
Size container queries and container query units
New color spaces and functions
The :user-valid and :user-invalid pseudo-classes
CSS Subgrid
Trigonometric functions in CSS
CSS :has() selector
Complex nth-child selectors in CSS with the 'of S' syntax
New range syntax for media queries
The linear() easing function
CSS Nesting
Relaxed parsing for CSS Nesting
Lazy-load offscreen iframes
Declarative Shadow DOM
CSS offset-position and offsetpath values
The Popover API
align-content on block layout

JavaScript and Web APIs
Import maps
modulepreload
Offscreen canvas
Constructable stylesheets
Compression streams
The Origin Private File system
Array fromAsync() static method
ArrayBuffer transfer() and transferToFixedLength()
groupBy() functions
Promise.withResolvers
intl.Segmenter

Видеообзор

#google #html #css #js

У штатного логгирования в JS есть несколько уровней.

console.debug() отлично подходит для второстепенных логов, поскольку они попадают в раздел Verbose в инструментах разработчика и по умолчанию скрыты.

При необходимости, их можно сделать видимыми.

#tip #js

Какое-то странное сравнительное исследование Tailwind и CSS

#css #tailwind

Еще один известный JS видеоблоггер сравнил SSR и JSX с возвратом к PHP

Вдогонку к этому мему

Maximilian Schwarzmüller - популярный и интересно объясняющий спикер, известен тем, что много лет назад в курсе по Vue 2 заявил, что похоже на то, что React и Angular имели секс, и в результате получился Vue, вобравший в себя лучшие качества обоих.
Сейчас специализируется на React и Next.js.

#jsx #ssr #php #maximilian

Через пол часа начинается митап от MSK Vue.js

Смотреть онлайн трансляцию можно по ссылке: https://youtube.com/live/7SWzCjDPtoQ

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

#event #offtop

Чтобы узнать реальный размер какого-либо npm пакета в бандле можно воспользоваться сервисом pkg-size.dev

Он удобней bundlephobia.com, которая большую часть времени недоступна.

#npm #tip

Самое время узнать, за счет чего главная лендинговая статичная страница GitLab смогла набрать 13Мб в скриптах

На скриншоте бандлофобии разрезолвились не все пакеты

Первая тройка тяжеловесов:

1. @nuxtjs/i18n - 2.5Mb
2. slippers-ui (GitLab's Marketing Design System) - 1.8Mb
3. vue-mermaid-string (построение диаграмм) - 1.1Mb

#gitlab #optimization #nuxt #i18n

Полезные фичи VS Code:

Сочетания клавиш:
ALT + ←/→ - Идти к прошлому/следующему месту редактирования
ALT + ↑/↓ - Переместить строку/выделение
SHIFT + L - Выделить строку
SHIFT + ALT + ↑/↓ - Дублировать строку/выделение
SHIFT + ALT + ←/→ - Расширить/сузить выделение

CTRL + SHIFT + P => поиск команды по названию

Настройки:
Profiles
Sticky Scroll

Расширения:
Codeium
Code Spell Checker
Todo Tree
Favorites

Следует учитывать, что многие расширения (например, популярное Import Costs) очень сильно жрут ресурсы компьютера и тормозят редактор

#vscode #tip

Вариативный шрифт (variable font) предоставляет возможность в рамках одного шрифтового файла самостоятельно плавно регулировать такие параметры, как: ширина, вес, курсив, наклон, оптический размер, длина засечек, контраст, свойства нижнего и верхнего регистра и т.д.

Вариативные шрифты давно поддерживаются операционными системами и браузерами.

Попробовать

#fonts

FormKit выпустил небольшую библиотеку для Drag-and-Drop функционала - @formkit/drag-and-drop

<script setup lang="ts">
import { useDragAndDrop } from "@formkit/drag-and-drop/vue";
const [parent, tapes] = useDragAndDrop(
  [
    "Depeche Mode",
    "Duran Duran",
    "Pet Shop Boys",
    "Kraftwerk",
    "Tears for Fears",
    "Spandau Ballet",
  ],
  }
);
</script>

<template>
  <ul ref="parent">
    <li v-for="tape in tapes" :key="tape" class="cassette">
      {{ tape }}
    </li>
  </ul>
</template>

Ранее он же сделал легкую библиотеку для работы с датами Tempo

#dnd #formkit #lib