Лайфхак

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

#ai #cursor #tip

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

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

#literature #creative

Немного нигерского драм-н-бэйса для разогрева перед следующим постом

BADDADAN

Yo, walk with the rupa-pum-pum
From a guy diss the programme, shot a slam-slam
Dem say dem a badman, mi haffi arks which one
When we ah fire shot, pull pin and fling bomb
Dem dead, we haffi trample dem like King Kong
Dargs pull up at your foot and none of dem nah sing-song
Balaclava pon face, 'matic inna hand
We nah have time fi waste with the rupa-pum-pum
Shot a slam, we badda dan
Badda dan, badda dan, badda dan

Nobody badder than we

#video #offtop #music

Начинаем подкасты с автором 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