Что такое дизайн-система?

Дизайн-система — это набор правил и компонентов, которые обеспечивают согласованность и масштабируемость интерфейса. Она включает в себя:

- Цветовые палитры: Основные и дополнительные цвета, используемые в интерфейсе.
- Типографика: Шрифты, размеры, межстрочные интервалы и другие параметры текста.
- Компоненты: Готовые элементы интерфейса (кнопки, формы, карточки и т.д.), которые можно повторно использовать.
- Отступы и размеры: Стандартные значения для отступов, размеров элементов и других пространственных характеристик.
- Использование CSS свойств

Шаги по созданию дизайн-системы

1. Определение базовых стилей:

- Нормализация: Использование нормализатора (например, Normalize.css) для устранения различий в стилях браузеров.
- Переменные: Объявление основных цветов, шрифтов, отступов и других значений в виде CSS переменных.
- Базовые стили: Определение базовых стилей для элементов (например, body, h1, p).

2. Создание компонентов:

- Визуальные компоненты: Создание компонентов, которые отображают пользовательский интерфейс (кнопки, формы, карточки и т.д.).
- Абстрактные компоненты: Создание компонентов, которые не имеют визуального представления, но содержат логику и стили (например, компоненты для работы с цветом, типографикой).

Ключевые моменты для запоминания:

- Постоянство: Придерживайтесь единого стиля во всех компонентах.
- Модульность: Разбивайте дизайн-систему на небольшие, независимые компоненты.
- Гибкость: Создавайте компоненты, которые можно адаптировать под различные сценарии использования.
- Тестирование: Регулярно тестируйте дизайн-систему, чтобы убедиться в ее корректной работе.

Пример:

/* variables.css */
:root {
  --primary-color: #007bff;
  --font-family: sans-serif;
}

/* BaseButton.vue */
.button {
  background-color: var(--primary-color);
  padding: 1rem 2rem;
  cursor: pointer;
  ...
}

#webdesign #css

Вышел Deno 2.0 RC, js/ts runtime environment и движок. Развивает проект бывший создатель Node.js Ryan Dahl

- Аналогично Bun, является комбайном, содержащий линтер, тестер, форматер, компайлер и бандлер.
- Отличительная особенность - работа с TS напрямую в рантайме, а не компиляция в js c удалением всех типов как делает Node.js
- Заявляется о полной обратной совместимости с NPM пакетами и Node.js, хотя развивают свой репозиторий typescript-ных библиотек JSR.
- Поддерживает частные npm репозитории.
- Хорошая поддержка Web API
- Интегрировал в себя много утилит типа lodash (как и Bun)
- Можно использовать с Vue проектами
- Имеет свой веб фреймворк, основанный на Preact и со вшитым Tailwind

В общем, далеко не киллер и довольно спорные решения, но конкуренция всегда полезна

Ну и De-no <= No-de если что.

#deno #nodejs #jsr

VueSchool не останавливается в попытках монетизации Vue.js паствы и добавила к себе еще и JavaScript сертификацию

#certification

Вслед за Amazon и Microsoft выкупила на 20 лет атомную электростанцию, чтобы питать ей свои AI ресурсы.

#ai #microsoft

Большая лингвистическая модель выполняет простейшую на первый взгляд операцию. Она предсказывает следующее слово в последовательности слов. Чем больше слов уже включено в такую последовательность, тем проще угадать каждое новое, потому что круг вариантов постоянно сужается. В сущности, функция LLM – это доведенное до немыслимого совершенства автозаполнение.

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

У языковых моделей есть, конечно, дополнительные уровни программирования и этажи – например, слой RLHF (оптимизирующее обучение с человеческой обратной связью) и так далее. Суть в том, что языковую модель натаскивают выбирать такие продолжения лингвистических конструкций, которые в наибольшей степени устроят проводящих тренировку людей.

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

Первые LLM-модели (или GPT-боты, как их тогда называли) были чисто реактивными. Им требовался человеческий вопрос. Но количество стремительно переходило в качество, и с какого-то момента бот переставал ждать вопросов и начинал генерировать их самостоятельно, основываясь на анализе заданных ему прежде. А после отвечал сам себе, стараясь избежать внутреннего подзатыльника от себя же. Человек для подобной тренировки больше не был нужен.

Приход AI в сферу лингвистических процедур привел ко множеству радикальных культурных сдвигов.

Самый пугающий (и быстрее всего закрывшийся для публичного обсуждения) эффект был связан с эволюцией политической власти.

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

Ведь в чем заключается классическая демократия?

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

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

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

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

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

#ai #quote

3 и 4 октября будет проходить ViteConf 2024
Онлайн и бесплатно
Там бывают интересные доклады

#vite #conf

Миллиардная компания...

#vuejs

Недавние тесты производительности Vapor

Чудес особых не будет - Vue и так быстр. Хотя на больших сложных компонентах преимущество может быть уже ощутимей.

Поэтому не пишите большие сложные компоненты. Разбиение помогает оптимизировать рендеринг.
Признак хорошего Vue.js кодинга №4.

#vapor #benchmark

Не стоит завидовать программистам с родным английским

включить "отмеченный" из "отмеченный";
включить "vue" из "vue";
включить "использоватьМаршрут" из "vue-маршрутизатор";

постоян маршрут = использоватьМаршрут();

консоль.регистрировать(маршрут.параметры.ид);

постоян свойства = определитьСвойства<{
    рекомендация: Рекомендация;
}>();

постоян htmlДанные = вычисляемое(() => {
    если (!свойства.рекомендация) {
        вернуть "";
    }
    постоян данные = JSON.разобрать(свойства.рекомендация.данные);
    вернуть отмеченный.преобразовать(данные.рекомендация) как строка;
});

#humor

Понадобилось как-то стилизовать содержимое v-html (html, преобразованный из markdown) в нескольких компонентах

Прокидывать всё через :deep() было как-то совсем грустно, поэтому придумал такой вариант

// import в main.ts или так один раз:

<style>
@import "@/app/assets/styles/md.css";
</style>

// md.css
.md {
    table {
        font-family: Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 100%;
        display: block;
        overflow-x: auto;

        td, 
...

на элементе с v-html в шаблоне ставится class="md"

#css

Первый шажок

Или это уже давно?

#vuejs #compositionapi

Новость, о которой на прошлой неделе говорил Эван, и которую не угадал никто (ну и я её явно в опрос не догадался поставить)

Эван создал компанию, которая будет делать "an open-source, high-performance, and unified development toolchain for the JavaScript ecosystem" (ну то бишь как сейчас bun или deno только без js движка), и в первом раунде поднял $4.6 млн за нее (то есть продал инвесторам процентов 10-20 её акций за эту сумму)

Это очень хорошая новость. Я давно говорил, в том числе Эвану, что Vue давно перерос уровень любительского опен-сорса, и ему нужен бэкап в форме бизнеса. Потому что смотреть на депрессивные каминг-ауты Энтони, или нытье Джонсона про mucho trabajo poco dinero, или заброшенный по той же причине Vapor совсем не комильфо.

В итоге, Эван оформил права на Oxc и Rolldown на созданную компанию VoidZero Inc и продал ее часть инвесторам. Vue экосистема не затронута вообще. То есть, работа Эвана над этими новыми проектами за прошлый год оценена рынком миллионов так в 20. Нормально.

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

То, что Эван никому не отдаст Vue, можно было не сомневаться. Его пост настоятельно рекомендуется к прочтению.

Кстати, посмотрите внимательно на сайт voidzero.dev. Это пример того, что может VitePress.

Ну и название зачетное.

#evanyou #vitepress #rolldown #voidzero #oxc

А вы заценили анимацию и вообще весь дизайн сайта voidzero.dev?

Мастерство не пропьешь...

#webdesign #evanyou #voidzero

Начинается онлайн конференция ViteConf
Через пятнадцать минут выступает Эван, должен рассказать о Voidzero

#conf #vite

При верстке кроме flex и grid есть и другие варианты создания адаптивного шаблона

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

Еще одно CSS правило order "меняет" порядок потомков

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

#css

Выступление Evan You на ViteConf 2024
(с субтитрами на русском)

О бандлерах, Vite, Rolldown, Oxc, немного Voidzero и сопутствующих вещах

Неплохое обучающее видео по теме

#evanyou #vite #conf #video

Воскресное видео

#offtop #video

Designing is fundamentally about taking things apart… in such a way that they can be put back together. …Separating things into things that can be composed that’s what design is.

— Rich Hickey. Design Composition and Performance

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

#architecture #quote

Недавно вышел первый публичный драфт спецификации для masonry лэйаута в CSS

Сразу с двумя вариантами реализации

#css #masonry

Этимология слова freelance

Изначально это было 2 отдельных слова: free lance, где lance - это воин. А free lance - это воин-наёмник, который не присягал на службу какому-то одному лорду, а воевал за того, кто ему заплатит.

#meme