Лайфхак

Если у вас закончилась триальная подписка на Cursor, зайдите в него с другого Googlе аккаунта

#ai #cursor #tip

на vue писать довольно просто
берешь и пишешь, прям вот так
но если бывший ты реактер -
никак

денис любил ужасно пинью
глобальный стейт денис любил
но как-то понял всё и пинью
убил

#literature #creative

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

Часть 1

ХАКЕР

На Spotify

#audio #murych #podcast

Нумерологи предсказывают в следующем году полную жопу...

#math

Полезные советы по написанию "чистого кода"

1. Используйте осмысленные имена
2. Следуйте принципу единственной ответственности (SRP)
3. Избегайте излишних комментариев
4. Делайте код читабельным
5. Пишите юнит-тесты
6. Будьте аккуратны с зависимостями
7. Организуйте структуру своего проекта
8. Используйте единый стиль форматирования
9. Избегайте хардкода значений
10. Ограничивайте размер функций

Согласен со всеми пунктами, кроме пятого.

#tip #bestpractices

PrimeVue написан на JS (не TypeScript), в Options API стиле.

#lib #typescript

Человек пытается привить реактерам правильное и красивое

React SFC

P.S. Предлагаю зафлешмобить и наставить ему GitHub звёзд

<template>
  <div>
    <h1>Counter</h1>
    <button onClick={() => setCount(count + 1)}>Increment</button>
    <p $if={count > 0}>Count: {count}</p>
    <p $if={count === 0}>Start counting!</p>
  </div>
</template>

<script lang="ts">
import { useState } from 'react';

const [count, setCount] = useState<number>(0);
</script>

<style>
button {
  padding: 10px 20px;
  font-size: 16px;
}
</style>

#react #sfc

Иногда при создании своих UI компонент не обязательно использовать громоздкие Vue библиотеки, достаточно стилизации CSS фреймворка.

Например, минималистичный BeerCSS

CSS фреймворки подходят как минимум для прототипирования и вдохновения. Также их можно использовать с unstyled компонентами, типа Radix Vue

#css #lib #ui

Неплохой список ссылок на полезные ресурсы для веб разработчиков

#tip

Эван напрашивается на мем про гуся...

#evanyou #js

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

#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