как делает ми | frontend
8 subscribers
63 photos
14 videos
1 file
53 links
транслирую, как пишу фронт на vue

p.s. все, что здесь описывается, через неделю потеряет свою актуальность, потому что я уже делаю рефакторинг :з

p.p.s правильного нет, есть удобное

внимание, токсичность сильно вредит вашему здоровью, лучше курит
Download Telegram
Forwarded from Простой HTML | Программирование
Это я пялюсь на свой код, который написал полгода назад

#минуткаюмора
Подсветка текста при поиске


export const highlightText = (text, search) => {
if (!text){
return ''
}

if(!search){
return text
}

const regex = new RegExp(search, 'gi')
return text.replace(regex, matchedTxt => {
return `<span class="highlight">${matchedTxt}</span>`
})
}

v-html="highlightText(point.place, search)"

.highlight{
font-weight: 600;
}


#js
Неразрывный пробел

 

#html
#планирование

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

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

а вот прыгание по телефонам и объяснение каждому менеджеру свой запрос - это не про сервис, не про клиентоориентированность и не про заботу (как громогласно любят объявлять многие бизнесы)
#vite #typescript

ошибка на @


npm install --save-dev @types/node


tsconfig

{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": [
"ES2020",
"DOM",
"DOM.Iterable"
],
"skipLibCheck": true,
"allowJs": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"paths": {
"@/*": [
"./src/*"
]
}
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"vite.env.d.ts",
"src/shared-kernel.d.ts"
]
}


перезапустить ide
#цитата

Нет смысла говорить о решении до того, как мы договоримся о задаче, и нет смысла говорить о шагах реа-лизации до того, как мы договоримся о решении.


- Эфрат Голбратт-Ашлаг (Efrat Goldratt-Ashlag)'
Forwarded from Programmer memes
Учимся правильно делать сообщение об ошибке

8️⃣ Programmer memes
Please open Telegram to view this post
VIEW IN TELEGRAM
#архитектура #javascript

обратить внимание на объекты-значения из DDD
#планирование

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

НО важно осозновать и помнить для всех, что

в сроки задачи входят:
1. исследование - сюда же погружение, исследование тз, планирование шагов выполнения или продумывание сценариев и архитектуры, заполнение недостатка знаний, аналитика и тд и тд)
2. выполнение задачи - в моем случае - кодинг
3. управление задачей/менеджерство - логирование времени и отчеты, написание тз на заполнение белых пятен коллегами (+ ожидание этих доработок), делигирование (опять же с погружением), внешннее тестирование, код ревью и тд
4. комуникация по задаче - созвоны, планерки, обсуждения задач, мозговые штурмы

ну и еще заложить 30% на риски просадки по любому из пунктов (в общем 30%, не по каждому. хотя зависит от задачи и окружения😁 так что это по ситуации)
мне очень откликается подход в обучении:
отталкиваться от текущих задач
отталкиваться от того, чего мне не хватает именно сейчас
для меня бесполезно учить от "ну чтобы было, и когда-нибудь пригодится" - я все равно забуду)

я учу и исследую там, где прямо сейчас чувствую дифицит в знаниях. тогда эти навыки остаются со мной надолго)
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Luhn check

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

📂 Подробнее

#сниппет

💛 Настоящий JavaScript
#архитектура
Open-Closed Principle, OCP

задача:
на входе в функцию filteredOrderList мы передаем orders и какую-то функцию filter а на выходе получаем отфильтрованный список ордеров

но в будущем нам захочется изменить логику фильтрации

решение:


// Базовый класс для фильтров
class OrderFilter {
filter(orders) {
throw new Error("Метод 'filter' должен быть переопределён в наследнике");
}
}

// Фильтр по статусу
class StatusFilter extends OrderFilter {
constructor(status) {
super();
this.status = status;
}

filter(orders) {
return orders.filter(order => order.status === this.status);
}
}

// Фильтр по сумме
class AmountFilter extends OrderFilter {
constructor(minAmount) {
super();
this.minAmount = minAmount;
}

filter(orders) {
return orders.filter(order => order.amount >= this.minAmount);
}
}

// Функция для отфильтровывания заказов
function filteredOrderList(orders, filter) {
return filter.filter(orders);
}

// Пример использования
const orders = [
{ id: 1, status: 'completed', amount: 150 },
{ id: 2, status: 'pending', amount: 200 },
{ id: 3, status: 'completed', amount: 300 },
{ id: 4, status: 'cancelled', amount: 100 },
];

// Создаем экземпляры фильтров
const completedFilter = new StatusFilter('completed');
const amountFilter = new AmountFilter(200);

// Применяем фильтры
const completedOrders = filteredOrderList(orders, completedFilter);
const highAmountOrders = filteredOrderList(orders, amountFilter);

console.log('Completed Orders:', completedOrders);
console.log('High Amount Orders:', highAmountOrders);


а если бы захотелось применять несколько фильтров, то


class CompositeFilter extends OrderFilter {
constructor(filters) {
super();
this.filters = filters;
}

filter(orders) {
return this.filters.reduce((filteredOrders, filter) => {
return filter.filter(filteredOrders);
}, orders);
}
}
const orders = [
{ id: 1, status: 'completed', amount: 150 },
{ id: 2, status: 'pending', amount: 200 },
{ id: 3, status: 'completed', amount: 300 },
{ id: 4, status: 'cancelled', amount: 100 },
];

// Создаем экземпляры фильтров
const completedFilter = new StatusFilter('completed');
const amountFilter = new AmountFilter(200);

// Объединяем фильтры
const combinedFilter = new CompositeFilter([completedFilter, amountFilter]);

// Применяем комбинированный фильтр
const filteredOrders = filteredOrderList(orders, combinedFilter);

console.log('Filtered Orders:', filteredOrders);
Forwarded from FrontEndDev
AbortController не только для fetch

Несколько вариантов использования AbortController'a, о которых мало кто знает, но которые могут быть сподручными при решении задач разработки.

https://kettanaito.com/blog/dont-sleep-on-abort-controller
#архитектура

про нейминг
абстрактный нейминг использовать только тогда, когда неважно, что лежит за этим неймингом - что-то обобщеное (list, item, value, number и тд)
но когда мы работаем с чем-то специфичным, то нейминг должен быть специфичным. например мы фильтруем заказы значит
const filterOrderList = (orderList) => { 
return filteredOrderList
}


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

const filterOrderList = (validOrderList) => {
return filteredOrderList
}

но если нам не важно это углубленное уточнение, то стоит его избегать, чтобы не вводить других в заблуждение

const validateEmail = (userEmail/customerEmail) // неважно чью почту мы валидируем, важно, что мы в принципе валидируем почту
на заметку - попробовать схлопнуть фильтрацию, в которой мы будем передавать только колбэк