TypeScript и Developer eXperience

В последнее время сразу два видных в IT человека - создатель Ruby David Hansson и создатель Svelte Rich Harris, - заявили, что отказываются от использования TypeScript в своих проектах (Turbo 8 и Svelte 5, соответственно). Показательны слова David Hansson:

..TypeScript просто мешает мне в этом. Не только потому, что он требует явного шага компиляции, но и потому, что он загрязняет код гимнастикой типов, которая добавляет так мало радости к моему опыту разработки, и довольно часто приносит много горя. То, что должно быть легко, становится трудно, а то, что трудно, становится "any". Нет, спасибо!

С моей точки зрения, пользоваться TypeScript надо в меру. Это не строготипизированный язык, и никогда им не будет, и трудности с определением типов в TypeScript разработчикам, например, на Java будут вообще не понятны. Потому что TypeScript - это язык описания интерфейсов. И описывать им нужно только самое необходимое. Основные типы данных, которыми обмениваются между собой элементы системы, пропсы компонентов, - всё то, что не займет много времени и принесёт ощутимую пользу.

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

#typescript #tip

HTML5 и CSS3. Аккордеон.

Фронтендерам за свою жизнь много раз приходится делать "аккордеоны", и каждый раз это какой-то челендж с велосипедами, своими или чужими. Хороший аккордеон нельзя было сделать без JavaScript.

В HTML5 появились тэги details и summary:

<details>
  <summary>Title</summary>
  <p>Some description</p>
</details>

Они позволяют построить элемент "аккордеон" на чистом семантическом HTML, без привлечения JS. Переключение видимости происходит атрибутом open. Следить за состоянием можно подписавшись на событие toggle.

На vue-faq.org используются именно details для организации вопросов-ответов.

По умолчанию данный элемент выглядит как на картинке, с треугольным маркером, однако details и summary допускают глубокую стилизацию, позволяя оформить аккордеон как понадобится - например, убрать маркер, добавить поворачивающийся крестик и анимацию при раскрытии. Соответствующий CSS - в комментариях.

#tip #html

Адаптировал для Реддита и запостил там свою статью Google и Yandex SEO оптимизация для SPA приложений

Как обычно, на таких ресурсах интересны комментарии пользователей.
Первый комментарий - что Bing тоже уже несколько лет хорошо понимает JavaScript
Второй, от false_creek_change, приведу здесь:

Консультант по SEO/a11y на проводе. Не могу передать, сколько раз я сталкивался с SEO-специалистами и/или клиентами, которые клялись, что вам нужен SSR, чтобы поисковые роботы правильно индексировали ваш SPA. Это не так уже почти десять лет. Есть множество гигантских Ecommerce брендов, которые используют SPA уже много лет и имеют чрезвычайно высокие показатели SEO (на ум приходит Walmart). Анекдотично, я лично руководил конверсией сайта .NET MVC Ecommerce со 100 000+ SKU на Vue 2 SPA, и мы действительно увидели улучшение наших SEO-метрических показателей. Это было 8 лет назад.

Мы обычно исходим из следующих соображений:

- Является ли HTML семантическим и доступным (a11y)?
- Предоставляется ли схема через JSON+LD и/или теги?
- Соответствуют ли основные показатели сайта (core web vitals) требованиям?
- Требует ли контент действий пользователя перед загрузкой? Например, если навигация по категориям находится в меню, который по умолчанию скрыт, то такая навигация может не индексироваться. В общем случае, если что-то может быть сделано через SSR, то это же также может быть отображено на стороне клиента и проиндексировано.

Все это Google укажет в Search Console / Lighthouse, чтобы сообщить вам о наличии проблемы.

#seo #spa #google #ssr

На Хабре очередная статья о том, чем 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