Сегодня на разогреве четверка норвежских девчонок

#video #music #offtop

Вторая часть подкаста с автором Telegram и Youtube каналов As for JS Деми Мурычем

КАЗАНТИП

На Spotify

#audio #murych

ВКАТУН

Меня кличут все вкатуном во фронтенд,
И мне не совсем ясен этот момент.
Да, был я простой гопотою недавно,
Но взялся за ум, и учился я рьяно.

Прошёл в резалтскуле все курсы и тесты.
Их ментор сказал, что айкью мой - за двести!
Глаза мне открыл он, что доки - говно.
Старпёров всех в топку. Владлен - наше фсё.

В CV 5 лет опыта нарисовали,
По трендам последним техстек подобрали.
С эйчаром пофлиртил, тумана пустил
И с левой ноги дверь в айтишку открыл.

И вот я фронтендер один в чьем-то штате,
Зачотнейших тёлок немало тут, кстати ;)
В симсов с ними режусь, что твой мастер йода,
А это, скажу вам, покруче литкода.

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

В проект подключаю я всё, что нарою,
А велосипеды другие пусть строят.
Всегда под рукою Тайлвинд и Танстак,
Сую куда можно я хэтэмэха.

Тайпскрипт, джест, реакт, эсэсэр, некст и свелте -
В моих пакаджухах фронтенд во всем цвете.
В словарном запасе - аджайл с ФэСэДэ,
Блокчейн, графкуэль, серверлес, ЭнЭфТэ.

Девайсы есть модные. Мне по карману
Макбуки, айфоны и дольчегобаны.
На шее голда, от версаче зипун.
Какой же, козлы, я вам, нахер, вкатун?!

#literature #humor #minin

10 советов для написания чистого кода на Vue.js

1. Разумное использование Composition API. Разделяйте большой код на небольшие, многократно используемые компоненты для поддержания модульности и читаемости.

2. Следуйте соглашениям об именовании в Vue. Используйте PascalCase для имен файлов компонентов и, при необходимости, kebab-case для использования в шаблонах.

3. Избегайте чрезмерного использования Vuex или Pinia. Держите временные состояния интерфейса (например, видимость модальных окон) локальными для компонента, а не в глобальном управлении состоянием.

Пример: Используйте ref или reactive для временных состояний.

4. Эффективное использование слотов. Используйте именованные слоты для большей гибкости в многократно используемых компонентах и документируйте их использование.

Пример: Создайте компонент Card с <slot name="header"></slot> для настраиваемых заголовков.

5. Использование Scoped Styles. Используйте scoped стили в <style scoped> для предотвращения конфликтов CSS.

Пример: Применяйте стили, специфичные для компонента, без влияния на другие части приложения.

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

Пример: Вместо жесткого кодирования кнопки, создайте настраиваемый компонент Button, поддерживающий пропсы для различных стилей.

7. Обработка асинхронного кода. Используйте async/await для API-запросов и обрабатывайте ошибки с помощью центральной функции.

8. Документирование пропсов и событий. Ясно определяйте и документируйте пропсы и события, используя аннотации props и emit или TypeScript.

Пример: Используйте defineProps и defineEmits в Vue 3 для ясности и безопасности типов.

9. Линтинг кода. Настройте ESLint и Prettier с Vue-специфическими конфигурациями для обеспечения качества и согласованности кода.

10. Упрощение шаблонов. Избегайте сложной логики в шаблонах; вместо этого используйте вычисляемые свойства или методы.

Пример: Замените `v-if="list.filter(item => item.active).length > 0"` на вычисляемое свойство `activeItems`.

(с) dev.to

#tip #bestpractices

Пример "протекания" стилей во Vue 3 при scoped styles от Artyom Tuchkov

// A.vue
<div class="a" />

// B.vue
<div class="b">
  <div class="a">
    <A /> // oops
  </div>
</div>

Playground

Нужно хорошее семантическое наименование классов, чтобы не попасть в такую ситуацию

#css

Предлагаю поделиться в комментариях тремя вещами, которые делают вашу работу комфортной и эффективной. Что-то неординарное, а не такое банальное и мастхэвное, как Vite, например.

Начну:

1. Remote разработка на мини пк
2. Cursor IDE (AI помощник)
3. @sxzz/eslint-config

#dx

Кто занимается микрофронтендами - познавательная статья Micro Frontends на сайте Мартина Фаулера

#microfrontends #architecture #bestpractices

Комментарии к прошлому посту ярко показывают, стоит ли тащить в свой проект чудо природы под названием FSD.

Модульная архитектура даёт понятную четкую декомпозицию проекта, хорошо разделяя ShoppingCart от UserAccount, например. Позволяя видеть в файловой панели только относящиеся к нужному модулю ресурсы, и работать над модулями независимо.

Общие элементы типа BaseButton можно держать в App, а можно выделить под них отдельный проект (вроде своей дизайн системы) и подключать папкой ui через git submodules. Так же, как и объекты типа api.

Между модулем и однофайловым компонентом есть промежуточные структуры - виджеты типа FileUploader, например, в которых есть чисто их композаблы, утилиты, компоненты, типы. Их удобно держать в своих папках без разделения по поддиректориям.

Довольно сложный вопрос, где держать и как наименовать файлы с бизнес-логикой - как реактивной, так и обычной. Однозначного совета пока нет. Скорей тут надо использовать программерские подходы из обычного ООП.

#architecture