HTML и CSS - языки программирования.

Доказано.

Пример мини-калькулятора, складывающего два числа, заданных в двоичном формате, на чистом HTML и CSS.

#css #html #pl

Сразу после выхода очередного релиза Vitest 1.5.0, вышла новая версия Vitest VS Code extension 0.6. Из нового:

- instant feedback
- .each test declaration
- test tree view
- coverage reporting
- better debugging support
- improved performance

Расширение было не очень популярно, и по сравнению с версией 0.5 было переписано с нуля.

#vitest #vscode

Вышла новая мажорная версия NPM пакетного менеджера PNPM 9.0

Самый удобный менеджер, если у вас проект без изысков типа module federation.

#pnpm #npm #nodejs

Bun всячески пытается привлекать к себе пользователей, в том числе и такими приятными мелкими фишками, как комментарии в package.json

Стандарту JSON5 (который включает комментарии) уже много лет, но он все никак не приживется.

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

#bun #dx #json

Крайнее интервью с Evan You

https://www.youtube.com/watch?v=iSLQXZUsEUc

https://oss.institute/podcast

https://open.spotify.com/show/3UxPfbvNzjdpKPgWa5DNPQ

https://podcasts.apple.com/us/podcast/rebase/id1740522367

#evanyou

Если у вас есть большая строка в JavaScript, и вы с помощью slice() вытаскиваете из нее подстроку, то эта подстрока не даст Garbage Collector-у уничтожить большую строку, даже если вы на нее больше не ссылаетесь. Это верно в V8, где подстрока оформляется как С++ указатель на нужное место в большой строке. В результате при обработке большого числа строковых данных могут происходить утечки памяти. Чтобы избежать этого можно делать копирование подстроки.

Также утверждение, что конкатенация строк - дорогая операция, уже не соответствует действительности. Например, на массиве строк

.join(' ')

будет медленней конкатенации через reduce:

.reduce((acc, c) => acc + ' ' + c, '')

Опять же из-за особенностей V8. Более того, конкатенация будет даже быстрее шаблонов строк (`Hello ${name}`), хотя обычно учат обратному.

В целях оптимизации работы со строками следует избегать мутирующих операций.

#tip #js #optimization

По запросу пользователя добавил в Vite плагине vite-plugin-html-injection возможность указывать, вставлять ли в index.html тот или иной фрагмент кода в зависимости от режима билда (buildModes?: "dev" | "prod" | "both")

{
  name: "Google analytics",
  path: "./src/injections/ga.html",
  type: "raw",
  injectTo: "body",
  buildModes: "prod",
},

#oss #vite

Платформа для разработки приложений 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