Друзья, всем хорошего настроения, и отличных выходных 😉

Неделька выдалась трудоёмкой, особенно когда стартовал сентябрь, и работы навалилось приличное количество) Даже не успел годноты вам запостить.

На следующей неделе поделюсь с вами сочной информацией, а пока, ловите небольшой мем для пятничного настроения 😆

Сложно... но очень интересно 😳

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

Мало кто знает, но большинство всё же догадываются, что Геткурс посылает на страницу какие-либо данные, чтобы правильно обрабатывать запросы пользователей. В качестве примера, один из таких видов данных это объект gcAccountUserMenu, в котором содержится информация о текущем пользователе страницы.

В items этого объекта хранится довольно полезная информация, к примеру, iconUrl который содержит линк на нашу с вами аватарку в системе. Обращение к ней в объекте в данном случае будет такое:
gcAccountUserMenu.items[0].iconUrl

Вы можете использовать вашу фантазию и придумать применение такой информации 😉 И скажу сразу, можно устроить грандиозные механики и контент для страниц!

Таких объектов Геткурс выводит великое множество, в каждом есть много чего интересного.

#полезная_фишка

Подобные страшные темы постепенно буду объяснять по-конкретнее 😁

Вытаскивание информации из объектов данных Геткурса может понадобиться, когда вы разрабатываете свои сложные пользовательские интерфейсы или любые другие механики.

Разберем пример с обращением к иконке юзера, который был в предыдущем посте. Чтобы обратиться к иконке юзера и вытащить её из левой панели меню, понадобится такое обращение:

gcAccountUserMenu.items[0].iconUrl

Допустим, при разработке интерфейса вам нужно вставить картинку текущего юзера в ваше собственное место в интерфейсе. Рекомендую использовать по назначению тег <img>. Дадим ему класс, к примеру user-img, и целиковая картина с тегом будет выглядеть так:

<img src="image" class="user-img">

Обратите внимание, в атрибуте src я поставил заглушку в виде слова image. Это важно для того, чтобы избежать ошибок в работе JS. Далее, мы определяем наш тег изображения с нашим классом в переменную и через переменную обращаемся к его атрибуту src, чтобы в итоге поставить туда наше изображение юзера из объекта. Всё вместе это будет выглядеть так:

let userImg = document.querySelector('.user-img');
userImg.src = gcAccountUserMenu.items[0].iconUrl;

И таким образом картинка текущего юзера вставится в ваш тег <img> 😉

#полезная_фишка

Пост откровений 😎

Друзья, в этом посте я хотел бы узнать у вас, как вы пришли к работе с Геткурсом. Где и как учились, или неосознано пришли к этому, умеете ли вы верстать и обращаться с кодами :)

К примеру, я полностью самоучка, все свои нынешние скилы я прокачал целиком и полностью самостоятельно. Даже мой ВУЗ был не технический, а гуманитарный 😁 В саму компанию Геткурс пришел тогда ещё в 2016 году в простом поиске работы и как закрепление своего опыта в вёрстке и программировании. Тогда я и понятия не имел, во что это всё выльется сегодня ;)

А каков ваш путь становления? Делитесь в комментариях ☺️

Ссылку в ссылку! 🤨

Все мы знаем, что браузеры по разному отображают контент html-документа. Вот и Сафари в IOS не является исключением. Если оставить контакты на сайте в виде номера телефона и обернуть его, скажем, в простой параграф с классом phone вот таким образом в качестве примера:
<p class="phone">+76668889090</p>

То наверняка удивитесь, когда посмотрите результат на устройствах Apple и обнаружите, что это кликабельная ссылка с номером телефона :)

Многих заказчиков такой подход не устраивает и они просят убрать ссылку с номера телефона. Но как? Если мы даже не писали тег <a>, который отвечает за это? 😳

Существует лайфхак для того, чтобы убрать подобные ссылки с номеров телефонов на IOS, и правильно застилизовать эту часть контента. В настройках страницы, перейдя к дополнительным настройкам, в разделе "Теги в разделе HEAD" нужно дописать метатег со следующими атрибутами:
<meta name="format-detection" content="telephone=no">

Это решит проблему с присваиванием ссылок :)

#лайфхак

Я продолжаю нещадно бороться с багами Геткурса!

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

Выйдет урок в ближайшие дни в Клубе Магии Геткурса вместе с остальными сочными уроками от меня 😁

#годнота

Что угодно, куда угодно 😜

В одном из предыдущих постов я делился безскриптовой возможностью поставить какой-либо блок в какой-либо блок :) В этом мы затронем менее "болезненный" и более безопасный способ, но с использованием небольшого скрипта, который позволяет это сделать.

На скриншотах выше я создал блок с тарифами и блок с раскрывающимся текстом, который в последствии я хочу поместить под цену во второй блок с тарифом. Как говорится: let's do it! 😉

Сперва я задам обоим блокам классы. Блоку с тарифами я присвоил класс offers, а блоку с раскрывашкой я поставил класс toggler. Далее, через панель разработчика (F12) я нахожу сам блок раскрывашки, который как раз и содержит видимый контент, и скрытый (см. скриншот). Он имеет класс modal-block-content.

Наконец-то переходим к самому интересному. Мы скриптом поставим наш блок под цену во втором блоке с тарифом. Блоки с тарифами имеют класс lt-tsr-block, и значит, чтобы выбрать второй блок, нам надо воспользоваться псведо-классом :nth-child(2) в нашем случае. Ставим блок с JS в самый низ страницы и там добавляем вот такой скрипт, исходя из всех наших данных:

$(function() {

$('.toggler .modal-block-content').clone(true).appendTo('.offers .lt-tsr-block:nth-child(2) .f-price');


})

Таким образом мы перенесем наш раскрывающийся текст в блок с тарифом и он будет работать :) А сам toggler мы можем скрыть в CSS, так как этот блок нам на странице больше не нужен.

Хочу отдельно обратить внимание на метод clone(). Данный метод - аналог метода cloneNode() из обычного JavaScript. В скобках он принимает значение deep. Если не ставить там ничего, то по-умолчанию это значение false, что означает, что скопируется лишь текстовая оболочка без обработчиков. А с помощью true мы перенесли ещё и скриптовую часть блока, которая заставляет правильно его работать :)

#лайфхак #полезная_фишка

Решил поделиться красотой параллакса :) Сделано на библиотеке parallax.js 😊

Для оформления первого экрана, подобные решения выглядят очень круто! :)

#наработки

Обрезаем полотно 👏

Порой требуется уместить на страницу море информации, из-за чего она превращается в полотно (или как люблю говорить я "в рулон туалетной бумаги" 😁). И ведь действительно, пользователь устанет листать страницу с тучей монотонной информации.

В этом посте я хочу поделиться с вами одной фишкой, которая поможет сократить длину страницы в разы и сделать её элементы более интересными для восприятия. Я буду использовать полезнейшее CSS-правило overflow.

В качестве примера, я превратил блок с карточками (а именно блок "Иконка-заголовок-текст") в своего рода "слайдер", уместив все элементы в него, и не растягивая страницу вниз ;)

В качестве второго примера, я взял обычные текстовые элементы в пределах одного блока (это очень важно), и разместил их друг за другом, затем воспользовался магией свойства overflow, которое значительно сократило растягивание страницы вниз.

Для блока с карточками я использовал следующий CSS:
.flex-row {
flex-wrap: nowrap;
overflow-x: scroll;
}

Т.е. я отменил правила переноса флекс элементов и сделал их в одну строку, а затем свойством overflow-x я сделал скролл этих элементов по оси Х.

Для блока с текстом я использовал следующий CSS (хочу обратить внимание, что блок с заголовком это совсем отдельный блок):
.builder {
max-height: 300px;
overflow-y: scroll;
border: 5px dashed #000;
border-radius: 10px;
padding: 15px;
}

Здесь я сделал контейнеру с текстом высоту, не превышающую 300 пикселей, и разрешил скролить этот контейнер внутри себя по оси Y. Остальные свойства – это просто импровизация для красоты.

К слову, саму панельку скролла можно тоже красиво закастомизировать, но это тема уже для отдельного поста 😉

#полезная_фишка

Привет, друзья!
Вы хотели научиться понимать код? А ещё круче - писать его самому? Тогда лучшего повода, чем сейчас, вы не найдёте. Потому что в моём клубе Train IT стартовала Чёрная Пятница 😉

✅ Всегда мечтали не просто конструировать сайты из статичных блоков, а писать их самим?

✅ Добавлять крутые фишки, а, может, даже придумывать свои самостоятельно?

✅ Понимать весь код, с которым вы работаете?

✅ Быть уверенным в своих знаниях и иметь под рукой мощную опору в виде уроков клуба?

Тогда, лучшего повода, чем сейчас, вы не найдёте 😊

❗️СТРАНИЦА РАПРОДАЖИ❗️
👉 https://train-it.ru/blackfriday 👈

Для партнёров клуба эта распродажа ещё выгоднее 🤝

Ознакомиться с уроками по направлениям клуба можно здесь — https://train-it.ru/#current

В Train IT вы получите универсальные знания, которые можете применять везде и не зависеть от платформы. Приобретённые знания сделают вас поистине крутым специалистом.

Если вы хотите повысить свою ценность как крутого специалиста, то почему бы не начать делать это сейчас? 😉