Автор Pinia делится секретом костыля для создания private переменных в сторе

Путем построения еще одного стора

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

Private state - это инкапсуляция и возможность использовать принципы ООП

#pinia #oop

Неплохая статья о Vapor

#article #vapor

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

#webdesign

Иногда стоит заглядывать сюда и убивать монстров (стартовый проект на Vue 3 в CodeSandbox)

icones.js немного реабилитирована

#tip #chrome

#minin #humor #meme

У Джонсона радость - Volar набрал 1000 звезд на GitHub

Репозиторию почти два года

#volar

Кто еще учился играть на гитаре только для того, чтобы сыграть Nothing Else Matters?

#offtop #music #video

Нашлась еще одна Vue 3 - нативная UI библиотека от китайцев - Varlet

Легковесная, material design 2/3, 5К звезд, много фич

Кто-то пробовал?

#ui #lib

Немного эстетики визуального SQL и теории множеств

#sql

Во Vue есть малоиспользуемая конструкция для связки JS переменных и CSS свойств, иногда более удобная, чем v-bind в style секции:

<template>
  <div class="text">Hello, Vue!</div>
</template>

<script setup>
import { ref } from 'vue';

const color = ref('red');
</script>

<style scoped vars="{ colorVar: color }">
.text {
  color: var(--colorVar);
}
</style>

Данный синтаксис - первая версия реактивных CSS свойств во Vue 3

Затем Эван сделал вариант с v-bind(), который решает некоторые ограничения vars

#css

Как же раздражает эта тормозная SSR гидратация, когда вроде все появилось на странице, а еще ничего толком не работает.

Такое ощущение, что в последнее время она везде проникла. Особенно, в Google-овские сервисы. Тот самый Google, который всегда пропагандировал мгновенно-отзывчивый интерфейс.

Google sign-in.
Открывается окошко входа, кликаешь кнопку своего аккаунта - хер там. Ждите, товарищ. Чего ждать? Неизвестно. Никаких лоадеров. Просто секунды считай. Кликай время от времени.

Другие в прошлом приличные сайты тоже превращаются в черт знает что.

Самый большой минус фронтендерского SSR - это вот этот отвратительный UX

Ретарды делают ретарды.

#ssr

Vue унизили...

Да еще и где - на LogRocket. Опять она только для маленьких проектов и не поддерживает TS

Правда, когда я запускал их варианты landing page, у меня Vue был на первом месте и локально в LightHouse, и на PageSpeed.

Ну и статичный лэндинг ничего не говорит о том, как все это будет быстро работать с динамическими данными.

#benchmark

Свершилось

Codeium форкнул VS Code и делает альтернативу Cursor - Windsurf Editor. Уже можно загрузить и попробовать.

Codeium, начавшийся как проект пары индусов, сделавших расширение для VS Code для интеграции AI агента, дорос до полноценного хед-офиса в Кремниевой долине с большим количеством индусов и своего продукта.

AI агент как расширение IDE сильно ограничен в функционале, поэтому нужна бОльшая интеграция в IDE. Это реально имеет значение. И теперь у Codeium есть аналог курсоровского Composer-а - Cascade - киллер-фича подобных систем.

У Codeium были отдельные преимущества перед Cursor, со "своим" IDE он вполне может его обойти.

Cursor как-то сильно ограничил и закрыл функционал в своей бесплатной версии в последнее время. Codeium же всегда давал очень много в своей бесплатной версии, а Pro стоит в два раза дешевле, чем у Cursor.

Также большой минус Cursor - сильное отставание от выхода новых версий VS Code, до трех месяцев. Посмотрим, как с этим будет у Codeium.

#au #cursor #windsurf

Сегодня открылся Vuejs Forge

Это workshop где бесплатно можно типа поучаствовать в тренировочных сессиях, поработать на проектах и получить некое менторство

Все забито рекламой, но, возможно, кому-то какую-то пользу получить можно

#learning

Оптимизатор Элон сразу взял быка за рога.

Мир вздрогнул.

#musk

В чате vuejs_ru вчера прошла короткая дискуссия о вредности и ненужности :deep(). Типа его можно заменить на установление путем JS в 2 строчки класса на внутреннем компоненте.

Попросил привести пример в случае, если container query во внешнем компоненте меняет flex-direction во внутреннем - абсолютно реальный use-case.

Возможно, конечно, но две строчки CSS превращаются в кучу громоздкого уродливого JS с огромными потерями в производительности.

:deep() - это инструмент, пользоваться им надо умело, и не будет никаких проблем. Если ты постоянно пытаешься, ограничивая инструментарий, сделать защиту от дурака, то ты этих дураков и плодишь.

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

CSS всегда на порядки быстрей JS в браузерах. И поэтому использование JS вместо CSS как минимум очень сильно бьет по производительности, да еще и замусоривает скриптовую секцию вашего SFC.

Когда мне надо в проекте сделать свой небольшой UI kit, я обычно size=large в BaseButton передаю не пропсом, а CSS классом. Потому что эта штука принадлежит именно уровню представления - то есть, CSS. И потому что приложение так будет работать быстрее, а SFC получается проще, чище и понятней.

Да, это нельзя TS типизировать для получения подсказочек в IDE. Но мир не сошел с ума на этих подсказках, кому-то надо просто писать производительные читабельные приложения, и заглядывание во внутреннюю документацию или исходник компонента вполне решает проблему подсказок.

TS для разработчика, а не разработчик для TS.

#css