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

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

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

внимание, токсичность сильно вредит вашему здоровью, лучше курит
Download Telegram
Forwarded from Frontend Portal
💡 Упрощение группировки данных в JavaScript с помощью Object.groupBy() или Map.groupBy(): на заметку фронтендеру

✔️ #tip by Shripal Soni

➡️ @FrontendPortal | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Frontend Portal
This media is not supported in your browser
VIEW IN TELEGRAM
Свойство scroll-padding

Позволяет остановить прокрутку на определённом расстоянии от края контейнера

Можно воспользоваться сокращённым свойством scroll-padding или альтернативными ему более конкретными свойствами scroll-padding-*

➡️ @FrontendPortal | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Frontend Portal
This media is not supported in your browser
VIEW IN TELEGRAM
CSS table-layout

Свойство предназначено для управления режимом формирования ширины столбцов в таблице

/*Для корректной работы fixed обязательно должна быть задана ширина таблицы */
table {
table-layout: fixed;
width: 100%;
}
/* обрезаем текст, не влезающий в ячейку */
td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}


Основное различие между значениями auto(по умолч.) и fixed заключается в том, как браузер распределяет ширину столбцов в таблице. auto определяет ширину столбцов на основе их содержимого, тогда как fixed определяет их на основе ширины самой таблицы и заданных ширин столбцов

🔜 Подробнее — статья

➡️ @FrontendPortal | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Frontend Portal
Ограничиваем текст заданным числом строк c помощью CSS-свойства line-clamp

Если текст превышает указанное число строк, то текст обрезается и в конце добавляется многоточие. Cвойство работает только в комбинации вспомогательных свойств:
.text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient:vertical;
overflow: hidden;
}


🔜 Поддержка свойства составляет 96.31%

➡️ @FrontendPortal | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Frontend Portal
This media is not supported in your browser
VIEW IN TELEGRAM
🌟 Идеальное центрирование, margin: auto у flex-контейнера

➡️ @FrontendPortal | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
#typescript #рецепт@letmi

сортировка строк


const compareStrings = (a: string, b: string) => {
return String(a).localeCompare(String(b), undefined, {
sensitivity: 'base',
});
};
#typescript #рецепт@letmi

export type {}

Чтобы избежать ошибок и путаницы, TypeScript требует явного указания, когда вы экспортируете тип. Вы должны написать export type, чтобы явно указать, что экспортируемая конструкция существует только во время компиляции.

Пример правильного подхода:


export { default as Breadcrumb } from '@/components/Breadcrumb.vue';
export type { BreadcrumbItem } from '@/components/Breadcrumb.vue';
Forwarded from Programmer memes
Please open Telegram to view this post
VIEW IN TELEGRAM
🧠 почему твои списки задач не работают — и при чём тут выгорание

одна из распространённых причин выгорания и прокрастинации — путаница между тем, что можно закончить, и тем, что закончить невозможно.

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

---

📌 проект — это конечный результат

у проекта есть цель, дедлайн и логическое завершение. он состоит из конкретных шагов, его можно завершить и поставить галочку.

примеры проектов:

- «собрать документы»
- «сделать сайт»
- «пройти курс по JS»

проект можно запланировать, выполнить и закрыть.

---

🔁 образ жизни — это процесс

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

примеры:

- «поддерживать порядок»
- «тренироваться»
- «учиться новому»
- «вести задачи в порядке»

если ты не делаешь это регулярно — это перестаёт существовать. образ жизни — это не цель, а привычка.

---

🚫 ошибка №1 — пытаться решить образ жизни как проект

например:

- «сделаю генеральную уборку — и будет чисто всегда»
- «один раз настрою систему задач — и она будет работать вечно»
- «пройду один курс — и стану продуктивным»

так не работает 🤷‍♀️

образ жизни — это не то, что делается «одним рывком». это то, что требует маленьких усилий каждый день.

---

📋 план ≠ список задач

теперь про списки. часто мы пишем «умные» планы и расстраиваемся, что они не выполняются.

например:

- «пройти медосмотр»
- «отправить документы в налоговую»
- «заняться спортом»

это не задачи. это планы. и мозгу лень их расшифровывать.

---

список задач — это инструкция

список задач — это не доска почёта. это инструкция для уставшего тебя из будущего. желательно — максимально тупая. Как будто ты поручаешь это стажёру без кофеина.

плохой список:

- пройти медосмотр

хороший список:

- найти ближайшую клинику в 2ГИС
- написать им в чат про ближайшие окошки
- записаться
- прийти в назначенное время

плохой список:

- заняться спортом

хороший список:

- собрать сумку в фитнес-зал
- пойти в зал на кардио
- записать это в трекер

---

🧠 почему это важно

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

---

❗️ошибка №2 — писать «умные» задачи

если задача не выполняется 2–3 дня подряд — вероятно, она слишком абстрактна. попробуй переформулировать её как действие(или несколько), которые можно сделать прямо сейчас.

---

🔧 как действовать

1. определи, что перед тобой: проект или образ жизни

если это не имеет конца — это образ жизни. его не надо «делать», его надо встраивать.

2. разбей проект на задачи-действия

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

3. переписывай задачи, которые не выполняются

не надо «дожимать». лучше переписать, чем винить себя за прокрастинацию.


---

основано на книге «Джедайские техники» Максима Дорофеева — и на опыте тех, кто уже пытался «разобраться с жизнью по выходным».
👍1
добро пожаловать в мой блог @mi_state
он для тех, кто устал быть продуктивным.

поговорим про выгорание, тревожность, прокрастинацию, синдром самозванца и ощущение, что всё время надо что-то начинать.

заметки на выдохе, попытки справиться с хаосом удалёнки, настроить границы и сохранить себя🍕
@mi_state
1