Платформа для разработки приложений Meteor.js решила использовать Vite. Также свою документацию они перевели на VitePress

Это интересно тем, что именно там работал Evan You, когда создавал Vue. Делать свой фреймворк он начал еще до трудоустройства в Meteor, и это было одной из причин найма, однако компания далее решила не интегрировать Vue.js в свои разработки.

К счастью.

#vite #evanyou #meteorjs #vuejs #vitepress

Интересное объяснение работы промисов через анимированные диаграммы (англ.)

#js #promise

Попались на глаза как-то исходники одного расширения к VS Code.
Автор использует reactive, ref и watch из Vue, чтобы организовать в нём реактивность. UI части нет.

Еще один пример использования Vue реактивности в Node.js приложении.

Вообще, Reactivity API как библиотека для удобного определения асинхронных связей между несколькими обычными переменными, обладает самостоятельным функционалом и может использоваться вне Vue.js фреймворка и фронтенда в целом.

#reactivity

Несколько фактов о JavaScript

Интерпретированный язык
Код JavaScript выполняется браузером или движком JavaScript, а не компилируется в машинный язык. Это делает его легко переносимым на различные платформы. Современные движки, такие как V8, используют технологию Just-In-Time (JIT) для компиляции кода в непосредственно исполняемый машинный код.

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

Динамическая типизация
JavaScript - слабо типизированный или динамический язык, то есть нам не нужно заранее объявлять тип переменной, и он может меняться во время выполнения.

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

ООП на основе прототипов
В отличие от объектно-ориентированных языков, основанных на классах, JavaScript использует прототипы для наследования. Это означает, что объекты могут наследовать свойства и методы от других объектов.

Автоматическая сборка мусора
Сборка мусора в JavaScript - это форма автоматического управления памятью. Основная цель сборки мусора - освободить память, занятую объектами, которые больше не используются программой, что помогает предотвратить утечки памяти и оптимизировать производительность приложения.

Сравнение с другими языками
JavaScript занимает особое место по сравнению с такими языками программирования, как Python или Java, поскольку он является одним из основных языков для веб-разработки.

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

Связь с TypeScript
TypeScript является надмножеством JavaScript, что означает, что он расширяет JavaScript, добавляя в язык новые возможности, в первую очередь аннотации типов. Такая связь позволяет считать любой корректный JavaScript-код также корректным TypeScript-кодом.

Популярные фреймворки Javascript
React известен своей гибкостью и большим количеством плагинов, разработанных сообществом, а Vue - чистотой и интуитивностью, высокой степенью интеграции и отзывчивостью. Angular, с другой стороны, предлагает строгий набор спецификаций для разработки JS корпоративного уровня.

#js

Вчера Vite стукнуло 4 годика...

#vitest

Неплохая статья о "Cобытиях жизненного цикла компонента"

#article

Подбирайте для своих данных подходящую структуру, в зависимости от операций над ними.
Это сильно влияет на производительность

В примере ниже Array.includes() примерно в три раза медленней, чем Set.has()

// setup:
const userIds = Array.from({ length: 1000 }).map((_, i) => i)
const adminIdsArray = userIds.slice(0, 10)
const adminIdsSet = new Set(adminIdsArray)

// 1. Array

let num = 0
for (let i = 0; i < userIds.length; i++) {
  if (adminIdsArray.includes(userIds[i])) { num += 1 }
}

// 2. Set

let num = 0
for (let i = 0; i < userIds.length; i++) {
  if (adminIdsSet.has(userIds[i])) { num += 1 }
}

#js #optimization

#meme #react

Хорошая статья про типизацию языков программирования

Кратко:

Слабая/сильная(строгая): в слабой можно складывать строку с числом. В сильной - нет.

Динамическая/статическая: в статической типы переменных и функций должны быть известны на этапе компиляции

Явная/неявная: при явной все типы надо прописывать явно. Почти всегда равнозначна статической типизации.

#pl #js

Недавно получилось сваять прото-калькулятор для сложения двух чисел на чистом HTML + CSS, и тут попадается реализация игры Wordle тоже только на HTML + CSS.

Вообще, HTML5 и CSS3 - довольно функциональные языки. В веб-програмировании обычно всё, что можно реализовать на них (в первую очередь - анимации), лучше делать на них, чтобы разгрузить JavaScript и улучшить производительность приложения, читаемость кода и поддерживаемость проекта.

Два вышеуказанных примера в это "обычно", естественно, не входят.

#tip #html #css

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

Следующий media query ограничит действие :hover правила только на системы с "мышкой" или трэкболом.

@media (hover: hover) {
    .card:hover {
        /* Add hover styles.. */
    }
}

——
Коллекция интересных :hover эффектов

#tip #css

Хорошая статья о том, что такое движки и рантаймы JavaScript

#js #runtime #article

Эван посоветовал не использовать в своих проектах недокументированные возможности Vue вроде:

<SomeComponent @vue:mounted="someMethod()">

#evanyou #video #tip

Сегодня начинается двухдневная online конференция Vue.js Live
Можно присоединиться

#event #vuejs

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

Потратил пару часов, поставил XRay. Если кому релевантно, вот тут туториал. В видео есть полезные советы, включая ссылку на заграничные облачные сервера по $3/month и оплатой рублями.

https://habr.com/ru/articles/728836/
https://www.youtube.com/watch?v=xGwedrFDgw8

#vpn

Evan You на Vue.js Live конференции рассказал, что в его планах сделать Vapor mode режимом по умолчанию. Отказ от Virtual DOM при этом будет поэтапный, и на это должно уйти несколько лет. Основные трудности будет предоставлять перевод таких компонент, как Transition, KeepAlive и др.

Если это произойдет, Vue.js будет, наверное, единственным фронтенд фреймворком, позволяющим работать как с Virtual DOM, так и без него.

Ранее Эван также заявлял, что API фреймворка для разработчиков при этом не изменится.

#evanyou #vapor #event