Frontend case
رفتن به کانال در Telegram
🌀 Чат для общения @frontend_case_chat ♨️ YouTube https://youtube.com/@frontend_case 🤝 Для сотрудничества писать @drabovich_77 Метки на канале: #YouTube - видео и материалы #Articles - полезные статьи #Tasks - задачи по JS #Fichi - лайфхаки фронтенда
نمایش بیشتر1 336
مشترکین
اطلاعاتی وجود ندارد24 ساعت
+57 روز
+1030 روز
در حال بارگذاری داده‌ها
کانال‌های مشابه
ابر برچسب‌ها
هیچ داده‌ای
مشکلی وجود دارد؟ لطفاً صفحه را تازه کنید یا با مدیر پشتیبانی ما تماس بگیرید.
اشارات ورودی و خروجی
---
---
---
---
---
---
جذب مشترکین
اکتبر '26اکتبر '26
اکتبر '260
در 0 کانال‌ها
سپتامبر '260
در 0 کانال‌ها
Get PRO
اوت '260
در 0 کانال‌ها
Get PRO
ژوئیه '260
در 0 کانال‌ها
Get PRO
ژوئن '260
در 0 کانال‌ها
Get PRO
مه '260
در 0 کانال‌ها
Get PRO
آوریل '260
در 0 کانال‌ها
Get PRO
مارس '260
در 0 کانال‌ها
Get PRO
فوریه '260
در 0 کانال‌ها
Get PRO
ژانویه '260
در 0 کانال‌ها
Get PRO
دسامبر '250
در 0 کانال‌ها
Get PRO
نوامبر '250
در 0 کانال‌ها
Get PRO
اکتبر '250
در 0 کانال‌ها
Get PRO
سپتامبر '250
در 0 کانال‌ها
Get PRO
اوت '250
در 0 کانال‌ها
Get PRO
ژوئیه '250
در 0 کانال‌ها
Get PRO
ژوئن '250
در 0 کانال‌ها
Get PRO
مه '250
در 0 کانال‌ها
Get PRO
آوریل '250
در 0 کانال‌ها
Get PRO
مارس '250
در 0 کانال‌ها
Get PRO
فوریه '25
+18
در 0 کانال‌ها
Get PRO
ژانویه '25
+32
در 0 کانال‌ها
Get PRO
دسامبر '24
+50
در 0 کانال‌ها
Get PRO
نوامبر '24
+42
در 0 کانال‌ها
Get PRO
اکتبر '24
+67
در 0 کانال‌ها
Get PRO
سپتامبر '24
+53
در 0 کانال‌ها
Get PRO
اوت '24
+57
در 0 کانال‌ها
Get PRO
ژوئیه '24
+69
در 0 کانال‌ها
Get PRO
ژوئن '24
+88
در 0 کانال‌ها
Get PRO
مه '24
+109
در 0 کانال‌ها
Get PRO
آوریل '24
+1 083
در 0 کانال‌ها
| تاریخ | رشد مشترکین | اشارات | کانال‌ها | |
| 25 اکتبر | 0 | |||
| 24 اکتبر | 0 | |||
| 23 اکتبر | 0 | |||
| 22 اکتبر | 0 | |||
| 21 اکتبر | 0 | |||
| 20 اکتبر | 0 | |||
| 19 اکتبر | 0 | |||
| 18 اکتبر | 0 | |||
| 17 اکتبر | 0 | |||
| 16 اکتبر | 0 | |||
| 15 اکتبر | 0 | |||
| 14 اکتبر | 0 | |||
| 13 اکتبر | 0 | |||
| 12 اکتبر | 0 |
پست‌های کانال
#Articles
Приветствую всех 🖐
Рассмотрим основные моменты работы с текстом, то что надо каждый день :)
У нас будет два популярных вида строки.
Изучение программирование - это не просто! (обычное предложение)
frontendcase@gmail.com (сплошное длинное слово)
Как работает по умолчанию?
Будет просто переносить целиком слова, которые не влазят, а если слово длиннее чем контейнер, то оно поломает вам верстку.
Применим разные свойства:
1) word-break
- break-word - лучший вид переноса, переносит слова целиком которые не влезли и длинное слово режет там где оно не влазит.
- break-all - выполнит жесткий перенос без правил, обрывает слово на том месте, где оно не влезло
2) white-space
- nowrap запрещает перенос слова, все в одну строку
Если у кого есть, что добавить, жду вас в комментариях)
@frontend_case
| 2 | #Articles
Приветствую всех 🖐
Давайте рассмотрим основные способы работы с контентом, который не помещается в заданные размеры :)
1) Классический вариант
У нас карточка товара 200px, а заголовок может быть любой длины, в зависимости от названия товара.
Как сделать чтобы большой заголовок, который введет владелец магазина не ломал нам верстку?
Все просто, примените стили ниже к заголовку.
.title {
text-wrap: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
До:
<h3 class="title">Краски акварельные для рисования</h3>
После:
<h3 class="title">Краски акварельные...</h3>
2) Обрываем текст на определенной строке
У нашей карточки есть так же описание товара и версткой рассчитано, не более двух строк.
Как сделать чтобы описание товара было не более двух строк, которое введет владелец магазина и не сломает нам верстку?
Все просто, примените стили ниже к параграфу, где в свойстве webkit-line-clamp укажите номер строки, на которой нужно прервать описание.
.text {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
До:
<p class="text">
Кастрюля эмалированная цилиндрическая
с деколь. Крышка эмалированная с
пластиковой ручкой. Может быть использована
на всех типах кухонных плит.
</p>
После:
<p class="text">
Кастрюля эмалированная цилиндрическая
с деколь. Крышка эмалированная...
</p>
3) Обрываем середину слова или хэша в нашем случае
Рассмотрим этот способ на примере хэша транзакции
1ce87e92d89f344c4b22e5ff1671fa2998d864f223120f2d4818943b7ca3a96e.
Показывать пользователю всю длину транзакции нет смысла, обычно показывают 6 символов вначале и 6 в конце. Давайте это сделаем )
В countPrefix и countSuffix можно передавать кол-во символов до разрыва и после.
const hash = 1ce87e92d89f344c4b22e5ff1671fa2998d864f223120f2d4818943b7ca3a96e
const truncateHash = (str, countPrefix = 6, countSuffix = 6) => {
if (!str) return "";
const maxLength = Math.round(countPrefix + countSuffix);
if (str.length <= maxLength) return str;
const prefix = str.slice(0, countPrefix);
const suffix = str.slice(-countSuffix);
return prefix + "..." + suffix;
};
truncateHash(hash)
До:
1ce87e92d89f344c4b22e5ff1671fa2998d864f223120f2d4818943b7ca3a96e
После:
1ce87e...a3a96e
Если у кого есть, что добавить, жду вас в комментариях)
@frontend_case | 1 028 |
| 3 | #notFound
👻 Мои 3 варианта для 404 страницы :)
Будет супер, если вы в комментарии кинете фото или фигму с прикольной идеей 404 страницы.
Чтобы мы могли всегда вернуться к этому посту (по хэштегу #notFound), когда в своем проекте потребуется сверстать 404 страницу.
Фигму прикрепил в комментах 👇
@frontend_case | 850 |
| 4 |  بدون متن... | 6 |
| 5 |  بدون متن... | 6 |
| 6 |  بدون متن... | 6 |
| 7 | #notFound
👻 Мои 3 варианта для 404 страницы :)
Будет супер, если вы в комментарии кинете фото или фигму с прикольной идеей 404 страницы.
Чтобы мы могли всегда вернуться к этому посту, когда в своем проекте потребуется сверстать 404 страницу.
Фигму прикрепил в комментах 👇
@frontend_case | 7 |
| 8 | بدون متن... | 1 |
| 9 | بدون متن... | 1 |
| 10 | بدون متن... | 1 |
| 11 | #notFound
👻 Мои 3 варианта для 404 страницы :)
Будет супер, если вы в комментарии кинете фото или фигму с прикольной идеей 404 страницы.
Чтобы мы могли всегда вернуться к этому посту, когда в своем проекте потребуется сверстать 404 страницу.
Фигму прикрепил в комментах 👇
@frontend_case | 1 |
| 12 |  #Fichi
На сто процентов каждый сталкивается с проблемой, что из-за какого то одного элемента поехала вёрстка и появился нижний скролл. Особенно это часто бывает при адаптиве.
Для поиска этого диверсанта, в css пропишите:
* {outline: 1px solid red;}
И вас получится, что-то похожее как у меня на фото, диверсант найден в правом верхнем углу 😎
Пишите в комментариях свои способы. | 1 052 |
| 13 |  #Fichi
⚡️Интересный вид меню или в принципе любого блока. Код будет прикреплен в комментариях. | 1 200 |
| 14 |  #Tasks
У меня к вам вопрос на понимание)
1) Чем отличается map от foreach?
2) см. на скрине, эти два способа в итоге дадут одинаковый результат или нет?
ПОЧЕМУ?
p.s. ответ будет позже в комментариях | 1 400 |
| 15 |  #Fichi
Интересный hover 😎 | 1 339 |
| 16 | #Tasks
Приветствую разработчики)
Предлагаю размяться простой задачкой, но не все так просто)
Кидайте свой ответ в комменты и было бы круто если поясните свой ответ!
const a = [1, 2, 3, 4, 5, 6, 7];
const b = a.slice(3, 6).push(4)
console.log(b); | 1 408 |
| 17 | chartjs.zip | 1 368 |
| 18 |  #YouTube
Графики и диаграммы на JavaScript для начинающих. Chart.js и plugin datalabels. | 1 439 |
| 19 |  #Fichi
Применение фильтра у картинки с прозрачным фоном, как вам? 🤓 | 1 912 |
| 20 | #Articles
Лучшие способы находить уникальные значения!
Есть массив с данными - это оценки выставленные автомобилям по разным вопросам.
const arr = [
{car: {id: 2, mdoel: "Geely"}, question_id: 33, score: 5},
{car: {id: 5, mdoel: "Emgrand"}, question_id: 33, score: 4},
{car: {id: 7, mdoel: "G5"}, question_id: 4, score: 3},
{car: {id: 5, mdoel: "Coolray"}, question_id: 4, score: 5},
]
1) В нашем массиве, есть одинаковые машины с повторяющимся "car.id". Нам нужно получить только уникальные авто.
const uniqueCarIds = [...new Set(arr.map((c) => c.car.id))];
Выполнив это мы получим в консоли [2, 5, 7].
С помощью new Set мы создали новый массив, где каждое значение может появляться только один раз.
Это наверное самый лучший вариант, когда вам надо получить уникальные id.
2) Но что делать, если я хочу получить целиком объект, но только уникальных "car.id", например для того чтобы потом сразу вывести модели этих автомобилей?
const uniqueCars = arr.filter((item, i) => i === arr.findIndex((c) => c.car.id === item.car.id))
Выполнив это мы получим в консоли объекты с уникальными car.id.
Как это работает?
Проходимся по массиву arr с помощью filter и на каждой итерации находим индекс нашего итерируемого эл-та, если он совпал, значит он пока уникальный, а если не совпал, значит уже раньше такие были и это дубляж и он не добавится в новый массив с уникальными эл-ми.
Спасибо всем, кто дочитал до конца😎🖐
У кого есть, что добавить, пишите в комменты)
@frontend_case | 2 006 |
