Frontend case

#Fichi ⚡️Grid generator https://cssgridgenerator.io/

#Articles Приветствую всех 🖐 Рассмотрим основные моменты работы с текстом, то что надо каждый день :) У нас будет два популярных вида строки. Изучение программирование - это не просто! (обычное предложение) frontendcase@gmail.com (сплошное длинное слово) Как работает по умолчанию? Будет просто переносить целиком слова, которые не влазят, а если слово длиннее чем контейнер, то оно поломает вам верстку. Применим разные свойства: 1) word-break - break-word - лучший вид переноса, переносит слова целиком которые не влезли и длинное слово режет там где оно не влазит. - break-all - выполнит жесткий перенос без правил, обрывает слово на том месте, где оно не влезло 2) white-space - nowrap запрещает перенос слова, все в одну строку Если у кого есть, что добавить, жду вас в комментариях) @frontend_case

#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

#notFound 👻 Мои 3 варианта для 404 страницы :) Будет супер, если вы в комментарии кинете фото или фигму с прикольной идеей 404 страницы. Чтобы мы могли всегда вернуться к этому посту (по хэштегу #notFound), когда в своем проекте потребуется сверстать 404 страницу. Фигму прикрепил в комментах 👇 @frontend_case

#Fichi 👍 На сто процентов каждый сталкивается с проблемой, что из-за какого то одного элемента поехала вёрстка и появился нижний скролл. Особенно это часто бывает при адаптиве. Для поиска этого диверсанта, в css пропишите: * {outline: 1px solid red;} У вас получится, что-то похожее как у меня на фото, диверсант найден в правом верхнем углу 😎 Пишите в комментариях свои способы. 👇 @frontend_case

#Fichi ⚡️Интересный вид меню или в принципе любого блока. Код будет прикреплен в комментариях.

#Tasks У меня к вам вопрос на понимание) 1) Чем отличается map от foreach? 2) см. на скрине, эти два способа в итоге дадут одинаковый результат или нет? ПОЧЕМУ? p.s. ответ будет позже в комментариях

#Fichi Интересный hover 😎

#Tasks Приветствую разработчики) Предлагаю размяться простой задачкой, но не все так просто) Кидайте свой ответ в комменты и было бы круто если поясните свой ответ! const a = [1, 2, 3, 4, 5, 6, 7]; const b = a.slice(3, 6).push(4) console.log(b);

#YouTube Графики и диаграммы на JavaScript для начинающих. Chart.js и plugin datalabels.

#Fichi Применение фильтра у картинки с прозрачным фоном, как вам? 🤓

#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

#Articles Кто попадался на этом? Поговорим о нюансах копирования массивов! Сначала обозначу задачу и укажу на проблему. Есть массив с данными: const arr = [ { full_name: 'Jason Statham', age: 56 }, { full_name: 'Sharon Stone', age: 65 }, { full_name: 'Dwayne Johnson', age: 51 }, ] Мне нужно получить человека с максимальным возрастом. Вот как я это делаю: //Делаю копию массива const sortedArr = arr; //Сортирую свой новый массив, от большего к меньшему и получаю первый элемент. const maxAge = sortedArr.sort((a,b) => b.age - a.age)[0].age В итоге в консоли я получаю правильный ответ 65. console.log(maxAge) НО, есть проблема, если выведу в консоль исходный массив arr, то он тоже отсортируется! //Теперь исходный массив выглядит так const arr = [ { full_name: 'Sharon Stone', age: 65 }, { full_name: 'Jason Statham', age: 56 }, { full_name: 'Dwayne Johnson', age: 51 }, ] Хотя я делал же копию, в чем проблема и как это решить? ============= Проблема в том, что массивы являются ссылочными типами. Когда я создал первый массив arr, то у него есть свой id, своя ссылка в памяти и просто так его значения не скопировать. Т.е. когда я сделал так, const sortedArr = arr, я записал в sortedArr ссылку (путь) к массиву arr, а НЕ скопировал его значения. И когда я как-то меняю новый массив sortedArr, то данные по сути меняются только в arr, а мы просто по ссылке получаем измененные данные. Как сделать полную (независимую) копию массива? 1 способ, он же самый лучший и красивый - это использование оператора spread. //Получаем макс. значение не затрагивая данные массива arr const maxAge = [...arr].sort((a,b) => b.age - a.age)[0].age 2 способ - это использование оператора JSON.stringify(). //Получаем макс. значение не затрагивая данные массива arr const maxAge = JSON.parse(JSON.stringify(arr)).sort((a,b) => b.age - a.age)[0].age Спасибо всем, кто дочитал до конца😎🖐 @frontend_case

#Fichi Если возникают сложности, как быстро сверстать адаптивные карточки, то это для вас :) Только установите свои значения расстояния между карточками и соответственно размеры самих карточек.✊

#Fichi Полноэкранный слайдер, в два свойства CSS, как вам? Так же и свайпы работают на мобилке.

#Fichi Не знаю, как вы, но я постоянно забываю, про последние четыре пункта) Оставляю здесь, может пригодится ещё кому-нибудь!

#Articles Рассмотрим классные инструменты, чтобы писать код правильнее) Для этого я вам напомню ложные значения в JS: Пустая строка - "", Ноль - 0, Null, Undefined, NaN, False. 1) Применение логического И "&&" Обычный вариант: if (vip) { setIconVip() } Улучшеный вариант (часто используется в реакте): vip && setIconVip(); //если vip НЕ ложное значение, то сработает функция 2) Операторы "??" и "??=" Их нужно использовать, когда проверяемое выражение равно только null или undefined. Обычный вариант: let name; if (name === null || name === undefined) { name = 'Аноним' } Улучшенный вариант: const name ??= "Аноним"; //если name равно только null или undefined, то присвоится "Аноним" Если результат нужно присвоить в другую переменную: const result = name ?? "Аноним"; //если name равно только null или undefined, то в переменную result присвоится "Аноним" 3) Применение логического ИЛИ "||" const PORT = process.env.NODE_ENV || 3000; //если process.env.NODE_ENV любое ложное значение, то присвоится 3000 порт. 4) Условный оператор "?" Обычный вариант: let ask; if (year < 2015) { ask = "Правильный ответ" } else { ask = "Неправильный ответ" } Улучшеный вариант: const ask = year < 2015 ? "Правильный ответ" : "Неправильный ответ"; 5) Опциональная цепочка "?." Очень крутой инструмент, часто применяется при работе с объектами! Наша задача получить значение класса "elem" если он существует. Обычный вариант: let elem; if (document.querySelector('.elem')) { elem = document.querySelector('.elem').innerHTML; } Улучшеный вариант: const elem = document.querySelector('.elem')?.innerHTML; //Если класс elem отсутствует, то в константу elem вернется undefined и ошибки, которая положит скрипт не будет. Спасибо всем, кто дочитал до конца😎🖐 Эти все примеры нужно подергать в коде, чтобы пришло полное понимание)

#Articles Давайте поговорим о нюансах, которые не рассказывают на курсах :) Вы сверстали сайт, выложили на хостинг, все работает, заказчик доволен все хорошо) Проходит месяц, сайтом уже пользуется достаточное количество юзеров. Все супер! И тут заказчик понимает спустя время, что ему не нравится, как выглядит главное меню и как работает бургер например. Он пишет вам, мол давайте переделаем вот так, деньги не проблема) Вы конечно все переделали, выложили на хостинг. Но тут появляется проблема, пользователи заходят на сайт, а изменений нет. В чем проблема? Все просто, когда вы в первый раз зашли на сайт, браузер закэшировал все файлы сайта, чтобы при каждом новом заходе не качать их заново. Поэтому пользователь не видит ваших изменений, так как у него в кэше хранятся старые файлы. Конечно кэш можно обновить нажав ctrl + F5, но никто так делать не будет. И что тогда делать? Как заставить обновиться кэш у пользователя в браузере? Решение есть! Вам нужно у файла добавить версию, по примеру ниже. И когда вы вносите очередные изменения в продакшн проект, меняйте версию и так браузер будет понимать, что это другой файл и качать его заново. <link rel="stylesheet" href="css/style.css?v=2">