Vite позволяет использовать новый более производительный и функциональный компилятор SASS через эту опцию:

export default {
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler'
      }
    }
  }
}

Дефолтным его не делали пока потому, что это breaking change, но в Vite 6 он будет по умолчанию.

В любом случае, чистый CSS3 со своим современным функционалом уже вполне покрывает все основные потребности стилизации.
Рекомендуется к использованию.

#vite #css #optimization

Заспорил тут в Твиттере с создателем FormKit Justin Schroeder, который с чего-то призвал отказаться от использования ref в пользу reactive

На аргумент о ShallowRef он привел ShallowReactive, и стало интересно, как сильно они отличаются

В итоге получился вот такой бенчмарк на Stackblitz по замеру времени изменения разных массивов

ShallowRef не использует JavaScript Proxy, отсюда такая эффективность

С одной стороны, ужасно, как Proxy уронил общую производительность в JS

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

#optimization #benchmark

Glyph

Правильный редактор на Rust и OpenGL

#ide

Немного английского и solid.js

Solid — используют, чтобы выразить одобрение или похвалу. Когда что-то «solid», это значит, что оно надёжное, качественное и выполнено на уровне. Применяется для описания людей, идей, поступков, работ и вообще всего, что заслуживает респекта. Например, если друг помог с переездом, можно сказать: «That was solid of you, man.» В переводе на человеческий - «красава, брат». Слово можно использовать в самых разных ситуациях. Крутая идея? Solid. Хороший матч в футболе? Тоже solid. Новый альбом любимой группы? Определённо solid! По сути, «solid» - это не просто «нормально» или «приемлемо», это «так держать» и «на высоте». Это не какой-то экстравагантный восторг, а скорее спокойное признание качества. Solid - это как лайк, но с оттенком взрослого одобрения.

#solidjs

Автор 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