Svelte украл у Vue руны

По подозрению Evan You

#svelte #evanyou

Если в DevTools браузера вам нужна только консоль, то плагин vite-plugin-terminal позволяет выводить информацию в терминал (где запущен Vite), таким образом давая больше места странице в браузере. В VS Code его можно "отцепить" в отдельное окно.

#tip

Интересная табличка совместимости современных JavaScript рантаймов с JavaScript (сорри за мой рязанский французский)

https://runtime-compat.unjs.io

#jsre

Case study о вреде Nuxt и ошибках в архитектуре

VueStorefront, предлагавший услуги Frontend-as-a-Service, а именно, фронтенд для онлайн магазинов для подключения к headless e-commerce решениям, так и не смог за 4 года апгрейднуть Nuxt со второй на третью версию и в расстроенных чувствах решил переехать на React и Next.js, попутно сменив название на Alokai

При выборе технологий для магазина Arty-Crafty я долго изучал VueStorefront, но так и не понял, что это за зверь и с чем его едят. Теперь это проблема реактовцев.

#nuxt #ecommerce #vuestorefront

Основные функции фронтенд фреймворков

Фреймворки для веб-разработки - это, по сути, пресобранные библиотеки кода, которые обеспечивают структурированную основу для создания веб-приложений. Они предлагают целый ряд возможностей, таких как:

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

Связывание данных (data binding): Эта функция автоматически синхронизирует данные между пользовательским интерфейсом и базовой моделью, упрощая логику и сокращая ручные манипуляции с DOM.

Маршрутизация: Фреймворки обрабатывают логику маршрутизации, обеспечивая отображение правильного контента в зависимости от навигации пользователя в приложении.

Управление состоянием: Сложные приложения иногда требуют управления состоянием различных компонентов. Фреймворки часто предоставляют встроенные или совместимые решения для этого.

Инструменты разработки (devtools): Многие фреймворки предлагают такие инструменты для разработчиков, как отладчики, горячая перезагрузка и профилирование производительности, что повышает удобство разработки.

Эти функции значительно сокращают количество шаблонизированного кода, упрощают процесс разработки и обеспечивают последовательность действий при разработке.

#frontend

В CSS есть правило color-scheme для реализации цветовых тем на сайте. Не очень удобное, по сравнению с использованием для этой цели CSS переменных.

В последнем Хроме появилась экспериментальная функция light-dark, с которой это делать проще. Но, опять же, для серьезных проектов лучше использовать CSS переменные.

:root {
  color-scheme: light dark;
}

.element {
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}

В Firefox она уже была реализована

#css #tip

Одна из самых серьезных проблем в разработке программных средств — их тучность, или раздутость. Программы просто становятся слишком большими. Это может быть связано с неразумным выбором функций, но чаще всего становится следствием плохой архитектуры. Популярное средство повторного использования кода — наследование, но его работа оставляет желать лучшего, поэтому вместо него зачастую применяются копирование и вставка кода. Не следует сбрасывать со счетов и чрезмерную зависимость от библиотек, платформ и пакетов, тесно связанных со многими другими библиотеками, платформами и пакетами. Раздутость может быть побочным эффектом приемов гибкой разработки. Чтобы справиться с ней, увеличивают численность команды разработчиков, но это порождает еще большую раздутость.
…
Лучший способ справиться с раздуванием программ — не допускать его. Приоритетом при разработке и реализации программы нужно сделать ее «худобу». Следует избегать внедрения в практику раздутых пакетов и инструментов, способствующих раздуванию. Обходитесь без классов. Нанимайте небольшие квалифицированные команды разработчиков. И активно практикуйте удаление кода. Создайте резерв из нескольких циклов разработки с целью удаления ненужного кода и избавления от проблемных пакетов. Радуйтесь, когда количество строк кода в проекте уменьшается. Придерживайтесь принципа наименьшей раздутости.

(с) Дуглас Крокфорд, программист, автор формата JSON и книги "How JavaScript Works"

#quote

Автор Volar Johnson Chu собирается покинуть open source. Стресс и слабое финансирование.

Volar (language-tools) один из основных проектов Vue экосистемы с точки зрения Evan You.

Mucho trabajo, poco dinero...

p.s.: кстати, бетта-тестирование volar 2.0 оказывается было, и показало ошибки, которые потом вылезли и после релиза

#volar

Evan You нанял Johnson Chu на full time позицию фьючерсом.

Viva Volar

#volar

Уже писал про esm.sh, который позволяет работать с npm ES модулями в скрипте HTML страницы. Вот его аналог - esm.run

Вот как с помощью него можно легко отрендерить markdown файл безо всяких фреймворков и генераторов:

<!doctype html>
<script type="module">
  import { marked } from 'https://esm.run/marked';

  document.body.innerHTML = marked(
    await fetch('./README.md').then(r => r.text())
  );
</script>

#markdown #lib

Перевел статью Artem Zakharchenko "Темная сторона Open Source"

#opensource #article #habr

Рабочее место на ближайшую неделю.
+17°С, если что.

А вы помните эмблемку Vue 3.0?

#vuejs #logo

Сегодня в 27.03.24 в 4pm CET состоится голосовой чат в Дискорде с командой Vite
Тема - Vite 5.3
Ссылка

#vite #chat

Pinia cheatsheet (Option stores)

#pinia #cheatsheet

Если всё идет гладко, то ты самый медленный

#video #motivation

Довольно приятная для глаз малоизвестная библиотека UI компонент - Equal UI
Использует Tailwind

#ui #lib

Порядок свойств в js объекте важен для оптимизации js движком, и лучше его сохранять

Такая функция:

function add(a, b) {
  return {
    x: a.x + b.x,
    y: a.y + b.y,
  }
}

на таких объектах:

const o1 = { a: 1, b: 2};
const o2 = { a: 3, b: 4};

будет выполняться в 7-10 раз быстрее, чем на таких:

const o1 = { a: 1, b: 2};
const o2 = { b: 4, a: 3};

#js #optimization