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

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

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

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

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

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

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

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

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

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

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

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

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

В этом посте я хочу поделиться с вами одной фишкой, которая поможет сократить длину страницы в разы и сделать её элементы более интересными для восприятия. Я буду использовать полезнейшее 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. Остальные свойства – это просто импровизация для красоты.

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

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

Равняйсь! Смирно! 🤨

Наверное чуть ли не у каждого второго пользователя Геткурса возникает вопрос: зачем в уроке столько пустого пространства справа?

Честно говоря, есть на то причины. Функционалом Геткурса мы можем поставить в правое пространство чат между учениками и кураторами, или же заполнить то пространство виджетом и специальным скриптом.

Но ведь бывают ситуации, когда пространство справа нам не нужно совсем, а весь прибитый контент к левой части смотрится так, как будто его гвоздями прибили к левой стороне 😁 Давайте это исправим, и разместим весь контент красиво по центру!

Чтобы это сделать, следует воспользоваться простыми CSS-правилами выравнивания контейнеров по центру. Но не все знают к каким классам эти правила нужно применять, и я с вами поделюсь ими:

.container, .standard-page-content div {
margin: 0 auto !important;
}

Благодаря такому правилу весь контент урока будет стоять красиво по центру 😉

#лайфхак

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

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

#наработки

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

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

На скриншотах выше я создал блок с тарифами и блок с раскрывающимся текстом, который в последствии я хочу поместить под цену во второй блок с тарифом. Как говорится: 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 мы перенесли ещё и скриптовую часть блока, которая заставляет правильно его работать :)

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

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

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

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

#годнота

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

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

+76668889090

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

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

Существует лайфхак для того, чтобы убрать подобные ссылки с номеров телефонов на IOS, и правильно застилизовать эту часть контента. В настройках страницы, перейдя к дополнительным настройкам, в разделе "Теги в разделе HEAD" нужно дописать метатег со следующими атрибутами:


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

#лайфхак