Vue-FAQ
920 subscribers
556 photos
90 videos
548 links
Канал сайта https://vue-faq.org
Информация о Vue.js, фронтенд разработке и не только

Contacts: @RuslanMakarov
Download Telegram
Итоги года от Cloudflare Radar

Начнем год с позитива.
Как мы и оценивали пару месяцев назад, Vue в целом в два раза отстает от React. Успех Nuxt, конечно, грандиозен.

Исследовались top 5000 доменов. Неточности однозначно есть (с тем же Laravel, наверняка), но в целом должно быть правильно

#benchmark #vue #react #stats
Vue-FAQ pinned a photo
Visual Studio Code for the Web

Если в любом репозитории на github.com нажать на клавиатуре "." (точку), то этот проект откроется в веб версии VS Code

Удобно, если надо изучить или запустить проект не клонируя его локально.

JetBrains ранее заявил, что такие дешёвые понты его не интересуют.
Во `vue-webapp` builder реализована опция по добавлению кастомного i18n
Дао программиста

По долгу работы мне приходилась искать людей в штат и просто на выполнение отдельных задач. Могу сказать, что 90% кандидатов отсеивается после беглого просмотра их резюме, даже если оно содержит нужные ключевые слова (у меня, не экстраполирую свои методы на весь рынок наёмного труда).

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

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

Естественно, его скиллы и опыт должны быть релевантны твоим, чтобы выводы были более-менее достоверны. И эмпатироваться надо не в человека, конечно, а в тот образ, который он создал своим резюме. Но разве оно не похоже на автопортрет?

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

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

Наверняка вышесказанное применимо к людям любой профессии, но, кажется, что именно у программиста выражение своих умений и экспертизы на бумаге наиболее эффективно. Как может домработница вербализовать в письме аккуратность, с которой она протирает от пыли растения? Или водитель то, как плавно он управляет машиной, и как заранее видит потенциально опасные ситуации на дороге и предпринимает необходимые действия?

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

Сайт - это ведь тоже часть резюме. Как он сделан, как работает, как выглядит, сколько выдает на PageSpeed. Меняешься ты, меняются твои требования к сайту, который есть суть отражение тебя. И там можно уже разместить кратко какие-то рабочие use cases, информацию о сторонних проектах, об open source деятельности - всё, что также формирует твой образ в профессиональном аспекте.

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

Маленький принц каждое утро приводил в порядок планету, ты приводишь в порядок резюме. Чувствуешь ответственность за каждую букву в нём. Ведь это не просто слова, - за какими-то могут стоять серьезные повороты твоей жизни, за какими-то - миллионы долларов профита или, наоборот, банкротства, проплывшие мимо тебя по реке времени. Всё это оставило свои штрихи - и на тебе, и на резюме.

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

Резюме программиста - это Путь его движения к гармонии. Не зря его синоним - Curriculum Vitae, - переводится как "Ход жизни".
Custom directives

Кастомную директиву можно задать непосредственно в script setup компонента.

Её имя должно быть в camelCase и начинаться с v.

#tip
Как фронтенд фреймворки себя позиционируют (на своих главных страницах):

Реакт - это библиотека
Vue - прогрессивный
Nuxt - интуитивный
Svelte - кибернетически усовершенствованный
Solidjs - простой и производительный
Angular - дающий уверенность
$mol - микромодульный
Meteor.js - не требующий борьбы с собой
jQuery - многофункциональная библиотека
Qwik - создавайте приложения мгновенно
Ember.js - для амбициозных вебразработчиков
Alpine.js - новый, лёгкий фреймворк
Работа с шрифтами

Сайт fontsource.org позволяет установить как npm пакет множество open-source шрифтов, в том числе с Google fonts.
Шрифты интегрируются в бандл, что имеет свои плюсы и минусы.

npm install @fontsource-variable/inter


import { createApp } from "vue";
import '@fontsource-variable/inter';

import App from "./App.vue";
...



#fonts #lib
Хорошие бесплатные наборы иконок в SVG формате

- icones.js.org
- iconbuddy.app (есть ограничение на скачивание)
- svgl.app - бренды
- flaticon.com - не все бесплатно, большой поиск
- pictogrammers.com - Material Design

#icons #lib
Вышла вторая редакция проекта PLB (Programming Language Benchmark) по тестированию производительности решения типовых задач на различных языках программирования

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

Как видно, все языки программирования находятся примерно на одном уровне, за исключением Elixir, PHP, Perl, Python:CPython и Ruby.

Bun не показывает чудес по отношению к Node.js+JIT

В реальных задачах данная производительность обычно играет глубоко второстепенную роль после DX (удобства работы с языком), задержек в работе с UI, сетью, базой данных и прочих накладных расходов.

#benchmark
AI помощник Codeium (бесплатный аналог Copilot) показывает статистику своей помощи в непосильной программерской работе.

Нормально помог.

#codeium #ide
На просторах Рунета обнаружился еще один сайт, посвященный бесплатному обучению программированию на Vue:

https://vib-online.ru/

Автор выкладывает материал в виде глав учебника
К сайту прилагается Telegram канал: "Fronend для взрослых"

#learning #vib
Пара неочевидных вариантов работы с Reactivity API

Типа, стор:

const counter = reactive({
count: 0,
increment() {
this.count += 1;
},
decrement() {
this.count -= 1;
},
});


То же, с рефом:

const counter = reactive({
count: ref(0),
increment() {
this.count.value += 1;
},
decrement() {
this.count.value -= 1;
},
});
`defineModel` модификаторы

defineModel может применяться с модификаторами, например:

const [count, countModifiers] = defineModel({
set(value) {
if (countModifiers?.number) {
return Number(value);
}
return value;
}
});
// true if the .number modifier is used
console.log(countModifiers?.number);


Также возможна типизация модификатора:

defineModel<number, 'number'>({ ... }) - второй аргумент - тип модификатора

Пример в песочнице

#tip