Щупальца Vue протянулись к горлу Ангуляра - вышел Analog.js 1.0

Мета-фреймворк на Vite, Nitro, с File-based routing, SSR/SSG и вот таким SFC форматом:

<script lang="ts">
  import { signal } from '@angular/core';

  const count = signal(0);

  function increment() {
    count.update(total => ++total);
  }
</script>

<template>
  <h2>Hello Analog</h2>

  Count: {{ count() }}

  <button (click)="increment()">
    Increment
  </button>
</template>

<style>
  h2 {
    color: red;
  }
</style>

Автор - Brandon Roberts, NgRx maintainer, Angular GDE

Осталось выпустить ReAnalog.js и затем смёржить все три ветки фронтенд фреймворков в одну главную - Vue

#angular #analogjs

Член Vite core команды Patak сообщил, что, возможно, некоторые опциональные возможности Rolldown могут появиться в Vite 6 (релиз ~октябрь/ноябрь). Rolldown по дефолту заменит esbuild, возможно, в Vite 7. А замена и esbuild, и Rollup планируется в Vite 8. На данный момент реальный ETA не определен.

Всё еще очень нескоро, короче.

#rolldown #vite

Microsoft, Amazon (и, вроде, Google) дали корпоративным клиентам из РФ три дня на чтоб собрать вещи с их облачных решений. Пока точно не понятно, кого именно это коснется, но если и у физлиц есть там данные - повод задуматься или хотя бы сделать бэкап на сторону.

#cloud

CSS свойство line-clamp позволяет ограничить текст определенным числом строк.

p {
  width: 300px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

#tip #css

Если вы используете сторонние шрифты (например, Google Fonts), то подключать их лучше не в вашем CSS, а в index.html.

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

#fonts #css #tip

В январе я с удивлением смотрел, как число подписчиков канала достигло 200, сегодня уже 400.
Кажется, что это немного по сравнению с другими, но, имея возможность видеть статистику, могу сказать, что охват целевой аудитории одним постом здесь выше в среднем, чем в соседних чатах на 10К юзеров, и намного выше чем у статьи на Хабре в хабе "Vue.js", несмотря на их дутые "тысячи" просмотров.
Telegram действительно очень эффективный способ распространения информации.

Большой контрибьютор в экосистему Vue.js Anthony Fu опубликовал длинный пост о своем психическом здоровье, вызванным стрессом от ответственности за написанный им open-source код, от которого зависит уже много проектов и разработчиков.

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

#antfu

Amazon недавно купила помещение для своего нового дата-центра в Пенсильвании.

Его отличительной особенностью является то, что вся энергия на сервера и охлаждение будет поступать от стоящей неподалеку 6-ой по размеру в США АЭС.

Мощность AWS дата-центра будет составлять до 1 гигаватта, что составляет 40% от мощности всей электростанции.

Захощенным в дата-центре приложениям можно использовать лэйбл: nuclear-powered

—-

Для справки:
- С мощностью 1ГВт можно обеспечивать электричеством город с населением 1 млн. человек.
- Примерно 40% энергии в дата-центрах уходит на систему охлаждения. Именно поэтому некоторые из них размещают в океанах.
- Все дата-центры потребляют примерно 1.5% мирового электричества.
- Всего в мире около 850 дата-центров. Половина из них находится в США.

#aws

CSS правило mask-image поможет наложить фоновую картинку на SVG изображение, позволяя создавать красивые эффекты на векторе

#css #tip #svg

У v-model есть полезные для input модификаторы:

    <!-- v-model with .lazy modifier -->
    <input type="text" v-model.lazy="lazyValue" placeholder="Lazy input" />
    <p>Lazy value: {{ lazyValue }}</p>

    <!-- v-model with .number modifier -->
    <input type="number" v-model.number="numberValue" placeholder="Number input" />
    <p>Number value: {{ numberValue }}</p>

    <!-- v-model with .trim modifier -->
    <input type="text" v-model.trim="trimmedValue" placeholder="Trimmed input" />
    <p>Trimmed value: {{ trimmedValue }}</p>

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

#input #modifiers #tip

Когда делаешь аккордеон или выпадающее меню (dropdown) на CSS, возникают проблемы из-за невозможности использовать height: auto;. В результате приходится задействовать JavaScript для приемлемой анимации.

В то же время элегантное решение на чистом CSS существует и использует grid-template-rows:

<div class="content">
  <div class="inside">
    Totally arbitrary content! 
  </div>
</div>

.content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 1s;
  overflow: hidden;
}
.content .inside {
  min-height: 0;
}
.content.expanded {
  grid-template-rows: 1fr;
}

Песочница

#tip #css #accordion

Мир был более безмятежным, когда существовали только HTML, CSS, JavaScript и jQuery. (с)

#quote

Node.js решила не тормозить и включиться в гонку на скорость с остальными JS движками.

Переписывают весь node:fs пакет на C++

Именно работа с файловой системой является бутылочным горлышком.

#nodejs

Группой доброжелателей закончен перевод официальной документации Vue 3 на русский язык. Вторая ревизия, - более качественная, корректная и современная, чем https://v3.ru.vuejs.org.

Пока лежит тут - https://vuejs-doc-ru.vercel.app

#vuejs #docs

Лонгрид о JavaScript

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

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

JavaScript удобен для фронта, для несложных скриптовых блоков кода в SFC. Я предпочитаю начинать обучение детей программированию с простой веб-разработки - сделать страничку, скриптом добавить небольшую анимацию, потом загрузить через fetch прогноз погоды и красиво отрисовать его. Это их сильно заинтересовывает.

На JavaScript можно написать несложный бэкенд API на Express.js или serverless functions, но это его потолок. Использовать его для чего-то серьезного на серверной стороне - ошибка.

Все уже привыкли к зоопарку фронтенд фреймворков, когда учишься писать под конкретный, если хочешь на нем работать. Но это часть айсберга. Многие npm пакеты тоже должны быть адаптированы или сделаны под этот фреймворк, образуя свою "экосистему". И меняя фреймворк надо менять и экосистему.

Есть еще сборщики. Даже для бэкенда их используют. И их не один, и не два, и не три. И чтобы в твоем прикладном коде просто отобразить на странице картинку, ты должен подчиняться правилам сборщика.

А у сборщиков есть плагины, и чтобы отобразить на странице svg иконку, ты должен подчиняться правилам выбранных плагинов. И еще есть js runtime engines - движки. И их тоже уже не только Node.js - Deno, Bun, Cloudflare Workerd, Netlify, Vercel Edge, AWS LLRT, - один другого краше.

Вроде бы уже дно? Нет, у движков и сборщиков есть еще версии, и то, что работает на Node 16, не работает на Node 20, и наоборот.

Всё? Почти. Окружение, включая операционные системы. Нравится удобство Cloudflare workers - пиши под Cloudflare. Supabase? Только Deno до недавнего времени. Хочешь быстрый Bun? Переписывай всё под него. И он на Windows не работает пока, если что. Netlify, Vercel, AWS Lambda - у каждого свои требования и особенности.

Когда изобрели Java у нее был девиз: Write once, run everywhere. Не сильно ошибусь, если скажу, что программу, написанную на С или Java 25 лет назад можно без особых проблем скомпилировать и запустить и сейчас. А как этот слоган применим к JavaScript? Никак. Ты должен ходить везде с чемоданом набитым своим фреймворком, библиотеками под него, сборщиком, плагинами к нему, своим js рантаймом и только по своим хостерам. И всё чтобы было своих определенных версий. И ходить можно только очень небольшое количество лет, после которых ты вместе со всем этим чемоданом безнадежно устареешь.

И самое веселое, что со временем всё не унифицируется и упрощается, а совсем наоборот.

Теперь представим архитектора или техлида в здравом уме, который должен решить, на чем писать нетривиальное серверное приложение с расчетом на работу дольше одного года. В каких случаях он выберет JavaScript? Видны три варианта:

1. Он/его команда больше ничего не умеют
2. Его вынуждают это сделать силой
3. Он не совсем в здравом уме.

TypeScript может давать локальное симптоматическое лечение, но в целом ситуацию только ухудшает.

На бэкенде еще есть возможность выбрать для работы другой язык, но на фронте глобально поможет только создание и внедрение нового языка с нуля, как это было с Java или C#, с продуманными спецификациями языка программирования и виртуальной машины и всех нужных API.

#js #lang #esse

Популярный web фреймворк Remix полностью перешел на Vite в своем create-remix

#remix #vite

Иногда в шаблоне может понадобиться временная переменная - например, в v-for цикле

Для этого можно использовать следующую конструкцию:

<div :set="user = someLongExpression">
{{ user.firstName }} : {{ user.lastName }}
</div>

set - это не какой-то специальный атрибут, можно использовать любое имя. Vue просто выполнит этот код в данном скоупе.

Недокументированные возможности Vue

#tip

Иконки флагов стран в SVG формате - https://flagicons.lipis.dev
Можно выбрать необходимые, но если нужны все, то png формат (sprite) может быть значительно оптимальней.

#flag #svg #lib