Команды VS Code
- Emmet: Balance (outward)
и
- Emmet: Wrap With Abbreviation
помогут быстро обернуть блок кода в шаблоне в новый тэг.

Можно назначить им сочетания клавиш.

#vscode #tip

Лидом разработки VS Code является швейцарец Erich Gamma - один из авторов легендарной, вышедшей более 30 лет назад книги Design Patterns: Elements of Reusable Object-Oriented Software ("Gang of four")

Он - одна из причин успеха редактора

Вот Erich рассказывает, на каком JS фреймворке написан VS Code и почему.

#vscode #designpatterns

Сегодня vue-faq.org - один годик

#vuefaq

Чтобы сделать работу в SOHO комфортной, полезно иметь Мини ПК как локальный сервер

На нем можно не только крутить Linux, базу данных, вебсервер, docker и другие сервисы, но и работать из VS Code в режиме Remote Development (по SSH). Это сильно разгружает основной комп/ноут.

Для сравнения, открываем небольшой Vue 3 проект локально:
- RAM: 2000Mb, CPU: 10%-50%

Тот же самый удаленно:
- RAM: 600Mb, CPU: 10%-20%

То есть, нагрузка распределяется очень неплохо, и на ноуте с 16Gb памяти можно запускать несколько экземпляров VS Code и работать вполне комфортно (помним про профили).

Я пожадничал и взял Мини ПК на Ryzen 7, в результате часто слушаю работу вентиляторов. Сейчас бы не задумываясь купил Intel N100 - он бесшумный и мощи хватало бы. 16Gb памяти - оптимально

Итого, качественный сетап фулстека: ноут - $400, мини ПК - $200, хороший большой основной монитор- $250, монитор попроще - $150, всякая периферия. За всё около $1000.

Ну или бэушный макбук можно взять за эти же деньги...

#minipc #vscode

Как выяснилось, за последний год в мире API клиентов случилась почти что революция

Вышел в open source Yaak (React, Tauri), релизнулся и активно развивается вполне достойный Bruno (Next.js, Tauri) и наконец-то появилась десктопная версия Hoppscotch (Vue 3, Tauri).

Hoppscotch пока в альфа версии, но вполне хорошо работает и решены проблемы с прокси для запросов. Дистрибутив занимает всего 10Мб (у Yaak 120Mb, у Bruno - 40Mb). На скриншоте, сколько они отъедают памяти в холостом режиме. Ну и просто какой-то бенефис Tauri.

Yaak и Bruno полностью оффлайновые, поэтому их UI работает очень быстро, Hoppscotch синхронизирует данные в облаке, поэтому есть небольшая задержка, но в целом хорошо.

По функционалу с большим отрывом лидирует Hoppscotch, за ним - Bruno

Мир устал от жирного, жадного и неповоротливого online-only Postman-a. Попробуйте эти клиенты и забудьте Postman как страшный сон.

#hoppscotch #yaak #bruno #api #tauri #postman

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

Допустим, есть уже костяк сайта - с хедером, сайдбаром, какими-то элементами. Хочется его одеть во что-нибудь красивое и готовое.

Умеренное, гармоничное, с продуманной цветовой палитрой, типографикой, размерами по золотому сечению и всем остальным. Чтобы было сделано профессионалом, короче.

awwwards и подобные ресурсы превратились в сайто-свалку, где что-то приличное уже не найти

#webdesign

Я нашел выключатель Volar-a

#volar

В SFC можно иметь две script секции

Одна - основная, вторая (не setup) - например, для экспорта TypeScript типов:

<!-- UserProfileComponent -->
<script lang="ts">
export interface UserProfileProps{
  username: string,
  // etc...
}
</script>

<script setup lang="ts">
defineProps<UserProfileProps>()
</script>

Также в ней можно экспортировать provide/inject ключи.

#tip

В Бразилии штрафы за использование VPN для обхода блокировок - $9000 в день.

Это чтобы вы поняли, в какой свободной стране вы живете.
Пока.

#offtop #vpn

На этом сайте можно создать анимированный SVG для скелетона

skeletonreact.com

#svg

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

А если его нет - то можно попасть совсем на неприличные деньги, время. а иногда и бизнес

#webdev

В программном коде тоже есть свои ритмы, линии, гармония и музыкальные инструменты

#video #offtop

Вы задумывались, почему c fetch-ем нужно два раза ждать?

const response = await fetch(url);
const data = await response.json();

Ведь JSON.parse() - синхронный

Этот факт обычно используется сторонниками axios в свою пользу.

На самом деле, это продуманное поведение, дающее больший и более гибкий функционал.

fetch() резолвит свой промис как только получит все заголовки (HTTP headers), а непосредственно body ждет уже response.json()

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

Или определить, какой контент принимать после получения заголовков.

#fetch #axios

Интересный Youtube канал по Vue - LearnVue

Последнее видео - про новый функционал Teleport-а во Vue 3.5

#learning #video

Различные виды жизненных циклов разработки ПО

(сделайте "Open GIF")

#sd

Ликбез от @vuejs_ru и Artyom Tuchkov

ref и reactive позволяют создать реактивную переменную, но имеют некоторые отличия:

Ref:
- позволяет удобно и просто перезаписать переменную целиком: example.value = 123, при этом сохранив реактивность;
- может быть использован с примитивами (string, number, boolean и т.д.);
- представляет из себя геттер и сеттер в случае с примитивами (без Proxy);
- в случае с объектами просто вызывает reactive и передает обработку ему;
- обязательно имеет контейнер, в котором хранит значение (.value), о котором нельзя забывать.

Reactive:
- работает только с непримитивными значениями (объекты и массивы);
- использует Proxy и глубокую реактивность по умолчанию;
- не может быть просто перезаписан целиком по аналогии с ref, потому что потеряется реактивность;
- удобен для группировки связанных значений в общий объект (чтобы не создавать отдельные независимые переменные для связанного состояния);
- поддерживает ref unwrapping (https://vuejs.org/guide/essentials/reactivity-fundamentals.html#additional-ref-unwrapping-details), а значит в него можно положить другие ref’ы, и они раскроются (не нужно будет писать лишний .value) внутри объекта;
- иногда может быть удобнее в типизации - для него не нужно использовать отдельный тип MaybeRef<T>, как в случае с обычным ref (например, если хочется иметь объект, который может быть как реактивным, так и нет, то типизация и работа с reactive будет в целом выглядеть удобнее).

В общем случае можно просто использовать ref, если это кажется проще, но про reactive тоже полезно помнить, потому что его особенности могут рано или поздно пригодиться.

Полезные ссылки:
1. https://vuejs.org/guide/essentials/reactivity-fundamentals.html

2. https://vuejs.org/guide/extras/reactivity-in-depth.html#how-reactivity-works-in-vue

3. https://stackoverflow.com/questions/61452458/ref-vs-reactive-in-vue-3/65262638#65262638

PWABuilder безо всяких капаситоров и других сложных механизмов может обернуть ваше PWA в webview для Apple Store, Google Play и других магазинов нативных приложений.

Но, соответственно, и функционала меньше.

#pwa

Немного новинок в ваш reset.css

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p, li {
  text-wrap: pretty;
}

Первый делает многострочные заголовки выглядящими более органично (переносы)

Второй - при переносе учитывает семантику слов (не разделит переносом the apple, например)

#css

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

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

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