На Хабре очередная статья о том, чем pnpm лучше npm и yarn

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

Второе - скорость. Нужно было недавно десятки раз тестировать полный цикл установки проекта, так выяснилось, что Windows 10 удаляет директорию node_modules медленней, чем pnpm её устанавливает. С точки зрения DX переход с npm/yarn на pnpm по ощущениям это как переход с Webpack на Vite.

#pnpm #npm

Новости от Volar

Уже две недели в его репозитории идет работа над пул риквестом с названием: "feat: migrate to TS plugin and deprecate takeover mode #3788".

Таким образом, идет миграция Volar-a с VS Code extension в TS plugin, что должно позволить улучшить опыт разработчика в других редакторах.

Интересно отметить, что Volar также пытается отпочковаться от Vue экосистемы и стать универсальным The Embedded Language Tooling Framework.

#volar #ide

Вышла новая версия библиотеки shikiji для синтаксической подсветки фрагментов кода

Anthony Fu портировал пакет shiki.js на ESM. Данная библиотека предназначено для синтаксической подсветки фрагментов кода, аналог highlight.js. Использует hast для токенизации и VS Code Oniguruma, которая написана на C и компилируется в WebAssembly. Данная часть переписана на ESM, является tree-shakable и работает и в Node.js, и в браузере.

shikiji использует тот же движок, что и VS Code, работает быстрее распространенных подсветчиков кода, занимает меньше места и более функциональна (например, включает препроцессор для TypeScript TwoSlash нотаций). Доступны множество языков (включая вариации Vue и Vue HTML) и все темы VS Code (на данный момент около 5000). VitePress уже переехал на новую библиотеку.

#antfu #shikiji #vitepress

Solid.js - правильный React.js

#solid #react

Полезные советы Google по улучшению SEO для SPA приложений

#seo #spa #google

Как составлять резюме

Ласло Бока, бывший старший вице-президент Google по работе с персоналом дал несколько советов по составлению резюме. Согласно ему, необходимо в резюме придерживаться стратегии перечисления ключевых моментов (bullet points format), и излагать свой опыт именно таким образом.

Это стало называться X-Y-Z правилом, и Google формулирует это так: "Достиг [X] с показателями [Y], сделав [Z]" ("Accomplished [X] as measured by [Y], by doing [Z]")

Примеры:
- Занял второе место среди 50 участников на JavaScript хакатоне в Сколково, разработав приложение, синхронизирующее мобильные календари.
- Достиг увеличения доходов 15 клиентов малого и среднего бизнеса на 10 % по сравнению с предыдущим кварталом за счет внедрения новых функций программного обеспечения в качестве решений для их бизнес-задач.

#google #resume #tip

Кастомная i18n

Распространенный пакет для интернационализации веб приложений i18next сильно раздут и содержит много редко используемого функционала.

В то же время перевод сайта на несколько языков без необходимости обработки чисел и родов можно провести самостоятельно, написав простой composable с реактивной функцией t().

#i18n #tip

Учим английский

To jump the shark

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

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

#humor #shorts

Новости

- vue-html (как и сотни других поддерживаемых shikiji) в качестве языка блоков кода стал доступен в VitePress с последних версий
- Supabase разрешила использовать Node.js в Edge Functions (можно было только Deno)
- Vue 3.4 перешел в стадию Release Candidate

#supabase #vitepress

Образование

Для жаждущих качественного дополнительного образования - курсы лекций профессоров МГУ по различным предметам прямо из университета на видео и в текстовых материалах. Есть немного IT.

Там же нашел вариант ДВИ (дополнительный вступительный экзамен) по математике на мехмат за 2021 год
Решил 5 из 7.

#learning #msu #video

Скринкаст создания и развертывания Vue 3 вебсайта за 4 минуты с помощью vue-webapp

#vwa #cmv

Reactivity API

Эван потихоньку начинает продвигать Vue 3 Reactivity API за пределы веб приложений

Пример, как это можно использовать в Node.js

const { ref, watch } = require('vue');

// Reactive state
const temperature = ref(75); // in degrees (F)
const soilMoisture = ref(30); // in percentage
const lightsOn = ref(false);
const isWatering = ref(false);

// Simulate sensor data change
setTimeout(() => {
    temperature.value = 22; // Temperature rises
    soilMoisture.value = 15; // Soil moisture drops
}, 3000);

// Turn the lights on if the temperature is too high
watch(temperature, (newTemp) => {
    lightsOn.value = newTemp > 78;
});

// Water the plant if the soil is too dry
watch(soilMoisture, (newMoisture) => {
    isWatering.value = newMoisture < 20;
});

#reactivity

Подсказка, как в VS Code можно открыть в отдельном окне Terminal или Search results

#tip #vscode

Evan You ответил о движении Vue.js в сторону Solid.js

Vue core's reactivity API is stable and mature. It falls in the same paradigm with Solid because the they came from the same roots (tracing back to knockout).

Vapor Mode will make Vue's template compilation output / DOM rendering quite like Solid's, but that doesn't affect the higher level reactivity API or template syntax. You don't need to learn anything new to benefit from it. Ever since Vue 3, our goal has been opt-in adoption and smooth transitions.

Vue core's reactivity API стабилен и вполне развит. Он находится в одной парадигме с Solid, потому что у них одни и те же корни (восходящие к knockout).

Vapor Mode сделает вывод компиляции шаблонов Vue / рендеринг DOM похожим на Solid, но это не повлияет на Reactivity API более высокого уровня или синтаксис шаблонов. Вам не нужно будет изучать ничего нового, чтобы использовать его. Начиная с Vue 3, нашей целью было добровольное внедрение и плавный переход.

#evanyou #solidjs #vapor

Вышла версия Vue 3.4

Есть аналогия, что Vue.js - это Linux для фронтенда

Полностью поддерживается сообществом
Vue.js, как и Linux, не привязан к одной корпорации. Его разрабатывает и поддерживает разнообразное сообщество участников.

Открытый исходный код
Открытый исходный код Vue.js способствует сотрудничеству, позволяя разработчикам по всему миру вносить свой вклад, коллективно улучшая фреймворк.

Постоянные инновации
Vue.js постоянно следит за последними тенденциями в мире front-end, обеспечивая разработчикам возможность использовать передовые технологии.

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

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

#vuejs #linux #release

Основные изменения во Vue 3.4

- Новый быстрый парсер и компилятор SFC шаблонов

- defineModel

- once для watch

- Отрефакторенная и оптимизированная система реактивности. Результат можно увидеть на видео. Код - в песочнице. (На самом деле вызывает удивление, что это не было сделано давно)

- Короткая запись для пропсов (:title="title" можно теперь записывать как :title). Спорное решение.

- Поддержка MathML

Реактивность во Vue рефакторилась после версии 3.1 два раза
В результате, прирост скорости по некоторым направлениям очень значительный

#vue #performance #benchmark

Замер вашей состоятельности как OSS разработчика

https://github-worth.vercel.app/