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

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

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

внимание, токсичность сильно вредит вашему здоровью, лучше курит
Download Telegram
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) // неважно чью почту мы валидируем, важно, что мы в принципе валидируем почту
на заметку - попробовать схлопнуть фильтрацию, в которой мы будем передавать только колбэк
дробление одного loop, на много маленьких - тестировать проще
гениально 🥲
Forwarded from Frontend Portal
This media is not supported in your browser
VIEW IN TELEGRAM
💡👩‍💻 Совет по CSS: Используйте табличные цифры для отображения таймеров

Cвойство font-variant-numeric определяет, как будут отображаться числа. При значении 'tabular-nums' числа будут представлены с одинаковой шириной, что позволит им идеально выстраиваться в ряд

✔️ #tip by Shripal Soni

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