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

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

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

внимание, токсичность сильно вредит вашему здоровью, лучше курит
Download Telegram
Forwarded from Frontend Portal
🌟 Некоторые забавные вещи, о которых вы, возможно, не знали, можно делать с помощью тега <a>

➡️ @FrontendPortal | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
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
💡 Предотвращение цепной прокрутки с помощью overscroll-behavior

Если мы попытаемся выполнить прокрутку, когда граница скроллинга достигнута, то прокрутка будет выполнена в ближайшей родительской области скроллинга, что называется цепочкой прокрутки(scroll chaining)

Мы можем предотвратить цепочку прокрутки, установив для свойства overscroll-behaviour значение contain или none

🔜 Подробнее
🔜 Поиграть можно здесь

✔️ #tip by Shripal Soni

➡️ @FrontendPortal | #CSS
Please open Telegram to view this post
VIEW IN 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