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

Contacts: @RuslanMakarov
Download Telegram
Небольшой роадмап

#roadmap
Инструменты для совместной работы
Разработка программного обеспечения - это социальная деятельность. Научитесь использовать такие инструменты для совместной работы, как Jira, Confluence, Slack, MS Teams, Zoom и т. д.

Языки программирования
Выберите и освойте один или два языка программирования. Выбирайте из таких вариантов, как Java, Python, JavaScript, C#, Go и т. д.

Разработка API
Узнайте о тонкостях и особенностях разработки API, таких как REST, GraphQL и gRPC.

Веб-серверы и хостинг
Узнайте о веб-серверах, а также облачных платформах, таких как AWS, Azure, GCP и Kubernetes.

Аутентификация и тестирование
Узнайте, как защитить свои приложения с помощью таких методов аутентификации, как JWTs, OAuth2 и т. д. А также освоите такие техники тестирования, как TDD, E2E-тестирование и тестирование производительности.

Базы данных
Научитесь работать с реляционными (Postgres, MySQL и SQLite) и нереляционными базами данных (MongoDB, Cassandra и Redis).

CI/CD
Изучите такие инструменты, как GitHub Actions, Jenkins или CircleCI, чтобы узнать о непрерывной интеграции и непрерывной доставке.

Структуры данных и алгоритмы
Освойте основы DSA, изучив такие темы, как нотация Big O, сортировка, деревья и графики.

Проектирование систем
Изучите концепции проектирования систем, такие как сетевое взаимодействие, кэширование, CDN, микросервисы, обмен сообщениями, балансировка нагрузки, репликация, распределенные системы и т. д.

Паттерны проектирования
Освойте применение таких паттернов проектирования, как инъекция зависимостей, фабрика, прокси, наблюдатели и фасад.

Инструменты искусственного интеллекта
Чтобы упрочить свою карьеру, научитесь использовать такие инструменты искусственного интеллекта, как GitHub Copilot, ChatGPT, Langchain и Prompt Engineering.

#roadmap
Пару центов в копилку Tailwind

Tailwind
ориентировочно берет свои корни в Bootstrap с его атомарными классами. Но, во-первых, их было немного. Во-вторых, они не ставили своей задачей замену CSS. В-третьих, их использовали преимущественно для разметки (d-flex, mt-1 и p-2)

CSS3 сегодня очень развитый язык с очень богатым продуманным функционалом (#css). Возврат от него к атомарным классам ( = стилям) это как эволюционный регресс от многоклеточных кольчатых червей к одноклеточным амебам. Потенциально влекущий деградацию многоклеточных программеров в одноклеточные.

Есть ситуации, когда атомарные классы как-то решают некоторые возникающие проблемы - например, при отсутствии деления на компоненты. Но для Vue с его компонентным подходом и scoped стилями таких проблем не возникает в принципе. В то же время, все такие проблемы решаются более разумными и элегантными подходами, например, с помощью BEM или CSS modules.

Названия классов в HTML служат одновременно целям программирования и документирования кода. Tailwind отнимает у разработчиков аспект семантики.

Девиз Tailwind: "чукча не читатель, чукча писатель". Зная его можно быстро написать строку классов элемента. Дальше что? Тебе надо подправить margin у внутреннего элемента меню. Ты сперва ищешь этот элемент среди нескольких div-ов. Затем ты вглядываешься в свою портянку и ищешь букву "m". Ты должен внимательно пробежать её глазами, - иногда всю, и иногда не один раз. Это DX.

В CSS ты мгновенно видишь лексему .menu-item, верней даже сперва .menu, потом в ней .item, и так же мгновенно находишь внутри блока margin:. В умных книжках это называется бинарным поиском, его сложность O(log(n)). В случае с Tailwind имеем O(n). Это computer science.

Так же быстро и точно ты перемещаешься в CSS к нужному стилю мышкой, потому что ты перемещаешься по плоскости, по осям x и y. Tailwind допотопен в своей одномерености.

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

При попытке реализации на Tailwind нечто большего чем две темы (светлая/темная) и элементарная адаптивность, код внутри class="" становится огромным и практически нечитабельным и неподдерживаемым.

При росте проекта (увеличении числа html элементов и стилей в них) соотношение O(log(n)) / O(n) -> 0. Тэйлвиндеры по законам Дарвина просто вымрут, не адаптировавшись к новым условия окружающей среды, а вместе с ними и проекты на них. Это биология.

Попытки сделать Tailwind более developer-friendly (@apply, signals etc) просто являются приближением его к возможностям обычного CSS, но через жопу.

При обучении веб разработке при начинании с Tailwind человек упускает из поля зрения весь самостоятельный слой представления веб страницы / веб приложения, со своей архитектурой, семантикой, функционалом. Вместо трехмерного пространства (HTML , CSS, JS) он оказывается в двухмерном, где учится быстро "красить кнопочки".

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

Tailwind делает простое сложным, перемалывая через свою хайповую мясорубку достижения вебдева в области CSS за последние 25 лет, чтобы сделать из них свою нечитаемую простыню. Для чего?

#css #tailwind
This media is not supported in your browser
VIEW IN TELEGRAM
Два совета по работе с Vue.js

#tip
Забавно обнаружить в новостях фотку своего бывшего начальника, вылезающего из автозака в таких носочках...
Media is too big
VIEW IN TELEGRAM
Vue-FAQ Pictures представляет

Путь Мурыча. Часть третья.

ВЛАДИЛЕН

#murych #video #minin #vuefaqpictures
Вышла бетта версия новых Vue devtools

Может поставиться рядом со старой как расширение браузера, но её надо будет отключать, чтобы вернуться в старую

Пока заметен более читабельный UI и нормальные 'Настройки'

В версии браузерного расширения нет всех заявленных фич: Inspect, Graph и других. Только базовые.

В самом проекте используют unplugin-auto-import, unplugin-vue-components и UnoCSS, что как бы, как бы, как бы... ((( 😢

<template>
<div h-full w-full of-auto px8 py6>
<IconTitle
class="mb-5 text-xl op75"
icon="i-carbon-settings-adjust"
text="DevTools Settings"
/>
<div grid="~ md:cols-[repeat(auto-fit,minmax(16rem,1fr))] gap-x-10 gap-y-3" max-w-300>
<div flex="~ col gap-2">
<h3 text-lg>
Tabs
</h3>
<template v-for="[{ name, hidden }, tabs] of categories" :key="name">
<VueCard
v-if="tabs.length" p3 flex="~ col gap-1"
:class="hidden ? 'op50 grayscale' : ''"
>


#vuedevtools
29 и 30 июня 2024 года Certificates.dev бесплатно на 48 часов откроет доступ к тренировочным материалам на соискание ученой степени Certified Vue.js Developer.

Включает в себя теорию, задачи по кодированию и пробный экзамен.

#certification
CSS3 не позволяет использовать конкатенацию при нестинге классов:

.title {
/* не работает */
&--red {
color: red;
}
}


но для любителей BEM есть обходной путь:

.title {
& [class*='--red'] {
color: red;
}
}


#css #bem
Please open Telegram to view this post
VIEW IN TELEGRAM
Новый бандлер Эвана Rolldown еще не вышел, но уже появились бандлеры на его основе - tsdown

Меж тем работа над Rolldown идет активно.
Похоже, это основной проект команды Эвана сейчас.

#rolldown
Вчера в стриме по результатам опроса State of JS 2023 Илья Климов не справился с элементарной математикой, заявив, что недовольных своим фреймворком разработчиков во Vue почти в два раза меньше, чем в React.

На самом деле, исходя из диаграммы именно пользователей, получивших негативный опыт, у Vue больше - 24% против 23.5% у React

Что довольно странно.

Чем вы недовольны, ***?

#vue #react
Легкий, стильный, чисто-vue тоастер с красивой анимацией - vue-sonner

#toast #lib
Сегодня Nuxt 2 всё

End-of-Life

#nuxt
Media is too big
VIEW IN TELEGRAM
Немного воскресной фронтедерской эстетики

#video #offtop