Подсветка текста при поиске
#js
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
#планирование
понимание задачи - переписать тз своим языком, уточнить моменты, где есть вопросы, согласовать свое понимание с заказчиком
понимание задачи - переписать тз своим языком, уточнить моменты, где есть вопросы, согласовать свое понимание с заказчиком
#сервис
я считаю, что каналов связи с бизнесом может быть несколько, но доступ к информации, клиент должен получить из того канала, куда обратился. либо с ним должны связаться сами с предоставлением этой информации.
а вот прыгание по телефонам и объяснение каждому менеджеру свой запрос - это не про сервис, не про клиентоориентированность и не про заботу (как громогласно любят объявлять многие бизнесы)
я считаю, что каналов связи с бизнесом может быть несколько, но доступ к информации, клиент должен получить из того канала, куда обратился. либо с ним должны связаться сами с предоставлением этой информации.
а вот прыгание по телефонам и объяснение каждому менеджеру свой запрос - это не про сервис, не про клиентоориентированность и не про заботу (как громогласно любят объявлять многие бизнесы)
#vite #typescript
ошибка на @
tsconfig
перезапустить ide
ошибка на @
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)'
Нет смысла говорить о решении до того, как мы договоримся о задаче, и нет смысла говорить о шагах реа-лизации до того, как мы договоримся о решении.
- Эфрат Голбратт-Ашлаг (Efrat Goldratt-Ashlag)'
#планирование
когда у меня справшивают о сроках по задаче, то большинство ошибочно полагает, что это то время, за которое ты напишешь код.
да и что таить, сама иногда забываюсь и оттталкиваюсь от времени кодинга,
НО важно осозновать и помнить для всех, что
в сроки задачи входят:
1. исследование - сюда же погружение, исследование тз, планирование шагов выполнения или продумывание сценариев и архитектуры, заполнение недостатка знаний, аналитика и тд и тд)
2. выполнение задачи - в моем случае - кодинг
3. управление задачей/менеджерство - логирование времени и отчеты, написание тз на заполнение белых пятен коллегами (+ ожидание этих доработок), делигирование (опять же с погружением), внешннее тестирование, код ревью и тд
4. комуникация по задаче - созвоны, планерки, обсуждения задач, мозговые штурмы
ну и еще заложить 30% на риски просадки по любому из пунктов (в общем 30%, не по каждому. хотя зависит от задачи и окружения😁 так что это по ситуации)
когда у меня справшивают о сроках по задаче, то большинство ошибочно полагает, что это то время, за которое ты напишешь код.
да и что таить, сама иногда забываюсь и оттталкиваюсь от времени кодинга,
НО важно осозновать и помнить для всех, что
в сроки задачи входят:
1. исследование - сюда же погружение, исследование тз, планирование шагов выполнения или продумывание сценариев и архитектуры, заполнение недостатка знаний, аналитика и тд и тд)
2. выполнение задачи - в моем случае - кодинг
3. управление задачей/менеджерство - логирование времени и отчеты, написание тз на заполнение белых пятен коллегами (+ ожидание этих доработок), делигирование (опять же с погружением), внешннее тестирование, код ревью и тд
4. комуникация по задаче - созвоны, планерки, обсуждения задач, мозговые штурмы
ну и еще заложить 30% на риски просадки по любому из пунктов (в общем 30%, не по каждому. хотя зависит от задачи и окружения😁 так что это по ситуации)
мне очень откликается подход в обучении:
отталкиваться от текущих задач
отталкиваться от того, чего мне не хватает именно сейчас
для меня бесполезно учить от "ну чтобы было, и когда-нибудь пригодится" - я все равно забуду)
я учу и исследую там, где прямо сейчас чувствую дифицит в знаниях. тогда эти навыки остаются со мной надолго)
отталкиваться от текущих задач
отталкиваться от того, чего мне не хватает именно сейчас
для меня бесполезно учить от "ну чтобы было, и когда-нибудь пригодится" - я все равно забуду)
я учу и исследую там, где прямо сейчас чувствую дифицит в знаниях. тогда эти навыки остаются со мной надолго)
👍2
Forwarded from Настоящий JavaScript
✅ Luhn check
Реализует алгоритм Luhn, используемый для проверки различных идентификационных номеров, таких как номера кредитных карт, номера IMEI, идентификационные номера национального провайдера и т.д.
📂 Подробнее
#сниппет
💛 Настоящий JavaScript
Реализует алгоритм Luhn, используемый для проверки различных идентификационных номеров, таких как номера кредитных карт, номера IMEI, идентификационные номера национального провайдера и т.д.
📂 Подробнее
#сниппет
💛 Настоящий JavaScript
#архитектура
Open-Closed Principle, OCP
задача:
на входе в функцию filteredOrderList мы передаем orders и какую-то функцию filter а на выходе получаем отфильтрованный список ордеров
но в будущем нам захочется изменить логику фильтрации
решение:
а если бы захотелось применять несколько фильтров, то
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
Несколько вариантов использования AbortController'a, о которых мало кто знает, но которые могут быть сподручными при решении задач разработки.
https://kettanaito.com/blog/dont-sleep-on-abort-controller
#архитектура
про нейминг
абстрактный нейминг использовать только тогда, когда неважно, что лежит за этим неймингом - что-то обобщеное (list, item, value, number и тд)
но когда мы работаем с чем-то специфичным, то нейминг должен быть специфичным. например мы фильтруем заказы значит
не стоит конкретизировать с фанатизмом там, где не нужно
пример: если в этом случае нам важно чтобы функция работала именно с провалидироваными заказами, то все ок
но если нам не важно это углубленное уточнение, то стоит его избегать, чтобы не вводить других в заблуждение
про нейминг
абстрактный нейминг использовать только тогда, когда неважно, что лежит за этим неймингом - что-то обобщеное (list, item, value, number и тд)
но когда мы работаем с чем-то специфичным, то нейминг должен быть специфичным. например мы фильтруем заказы значит
const filterOrderList = (orderList) => {
return filteredOrderList
}не стоит конкретизировать с фанатизмом там, где не нужно
пример: если в этом случае нам важно чтобы функция работала именно с провалидироваными заказами, то все ок
const filterOrderList = (validOrderList) => {
return filteredOrderList
}
но если нам не важно это углубленное уточнение, то стоит его избегать, чтобы не вводить других в заблуждение
const validateEmail = (userEmail/customerEmail) // неважно чью почту мы валидируем, важно, что мы в принципе валидируем почту