Очередной небольшой шедевр от Anthony Fu - vite-plugin-inspect

Плагин предназначен для дебага плагинов Vite, показывая, как изменяется код проекта при их последовательном применении. Но попутно плагин строит карту компонентов и модулей проекта с их связями и приятной анимацией

#antfu #vite

Вышло обновление Microsoft VS Code 1.85.1

Появилась интересная фича - теперь любую вкладку можно перетащить на десктоп и она откроется в отдельном плавающем окне
Зачем это надо пока непонятно, но очень интересно...

#vscode

Вышел Vite 5.0.9

Из значимых последних добавлений - кэширование работы с файловой системой при отслеживании файлов проекта на изменение. На больших проектах и старых Windows машинах были просадки по производительности.

Также Evan You пообещал Vue 3.4.0 до Нового года (пока 3.4.0-betta.2)

#news #vite #vue

Facebook выпустил новую CSS-in-JS библиотеку - StyleX

Верней оформил для всех то, чем его разработчики пользуются уже давно. Позиционируется данный помощник для React-подобных фреймворков плюс Ангуляр, однако оперирующие html шаблонами Vue и Svelte тоже могут задействовать StyleX, но после предварительной переквалификации их разработчиков.

Код в итоге выглядит примерно так:

import * as stylex from '@stylexjs/stylex';

const colorStyles = stylex.create({
  red: {
    backgroundColor: 'lightred',
    borderColor: 'darkred',
  },
  green: {
    backgroundColor: 'lightgreen',
    borderColor: 'darkgreen',
  },
});

import * as React from 'react';
import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({ ... });

function ReactDiv({ color, isActive, style }) {
  return <div {...stylex.props(
    styles.main,
    // apply styles conditionally
    isActive && styles.active,
    // choose a style variant based on a prop
    colorStyles[color],
    // styles passed as props
    style,
  )} />;
}

StyleX компилируется в атомарные CSS, то есть, можно сказать, стоит на следующем уровне извращений над CSS после Tailwind-а.

Основная утверждаемая выгода от использования StyleX - переиспользование, типизация, будет всё круто на больших проектах. Ну и получение наконец полного Single File Mess файла с js, css и html в одном флаконе.

Объяснение JWT токенов

#video #jwt

Как надо проводить интервью на разработчика ПО

Интересная статья сотрудника Google Wil Wen, в обязанности которого входило интервьюирование соискателей, и которых он провел более двухсот.

В большинстве случаев он давал всего одну задачу, причем давал и тем, кто искал позицию стажера, и на позицию L5 (Senior SWE). То, как испытуемый решал её, определяло его уровень.

Вот эта задача: дан некий массив чисел, например:
a = [ 3, 4, 6, 9, 10, 12, 14, 15, 17, 19, 21 ];
Надо определить функцию f(a, x), которая возвращала бы ближайшее к x наименьшее число массива или -1 в случае ошибки.
То есть, например: f(a, 12) = 12, f(a, 13) = 12

Нужно было написать код, времени давалось около часа. Рабочее решение состоит из примерно 30 строк кода.

Проверяющий смотрел как на техническую сторону - определил ли испытуемый все необходимые тест-кейсы, использовал ли простой перебор или двоичный поиск, знал ли о возможности выхода за пределы Int.MAX. и т.п.

Так и на другие "сигналы" - какие уточняющие вопросы он задавал, как размышлял, какие названия давал переменным и как форматировал код, в каком стиле и темпе писал код и дебажил его, как реагировал на ошибки.

По словам Wil Wen, принятое им по результатам такого теста решение в будущем почти всегда подтверждалось квалификацией человека.

#article #job

Youtube каналы с контентом по Vue

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

John Komarnicki
Lachla Miller
LearnVue
Anthony Fu
VueConf Toronto
VueSchool
VueMastery

#video

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