Телеграм канал 'Каморка Геткурсовода 💻'

Каморка Геткурсовода 💻


1'152 подписчиков
423 просмотров на пост

Этот уютный канал посвещён фишкам и нестандартным решениям по дизайнам, интерфейсам и функционалам платформы от Куратора школы Магии Геткурса — Максима Елисеева ;)

Детальная рекламная статистика будет доступна после прохождения простой процедуры регистрации


Что это дает?
  • Детальная аналитика 271'781 каналов
  • Доступ к 124'890'359 рекламных постов
  • Поиск по 494'785'648 постам
  • Отдача с каждой купленной рекламы
  • Графики динамики изменения показателей канала
  • Где и как размещался канал
  • Детальная статистика по подпискам и отпискам
Telemetr.me

Telemetr.me Подписаться

Аналитика телеграм-каналов - обновления инструмента, новости рынка.

Найдено 82 поста

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

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

#полезная_фишка
Видео/гифка, 23 сек, Пост-скроллы.mp4
Равняйсь! Смирно! 🤨

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

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

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

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

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

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

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

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

#наработки
Видео/гифка, 20 сек, parallax.mp4
Что угодно, куда угодно 😜

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

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

#лайфхак #полезная_фишка
Я продолжаю нещадно бороться с багами Геткурса!

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

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

#годнота
Видео/гифка, 5 сек, ezgif.com-gif-maker.gif.mp4
Ссылку в ссылку! 🤨

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

+76668889090



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

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

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


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

#лайфхак
Изображение
Пост откровений 😎

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

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

А каков ваш путь становления? Делитесь в комментариях ☺️
Подобные страшные темы постепенно буду объяснять по-конкретнее 😁

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

Разберем пример с обращением к иконке юзера, который был в предыдущем посте. Чтобы обратиться к иконке юзера и вытащить её из левой панели меню, понадобится такое обращение:
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> 😉

#полезная_фишка
Сложно... но очень интересно 😳

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

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

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

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

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

#полезная_фишка
Изображение
Индивидуализируем свои материалы 😋

У всех разные онлайн-школы и все хотят иметь свой собственный индивидуальный подход к её оформлению. В частности, поменять некоторые системные надписи, которые ставит Геткурс автоматически.

На своём проекте при переходе в Тренинги, я заменил стандартную надпись "Список тренингов" на "Доступные направления", применимую для моей задумки, без JS скриптов.

Главное знать, к чему обратиться ;)

Всё достаточно просто: я скрыл стандартный Геткурсовский заголовок и убрал серую полоску, которая идёт после него:

.page-header h1 {
display: none;
}

.page-header .content-menu {
border-bottom: none;
}

Затем просто добавил собственный блок с Заголовком и стилизовал его в блоке "Область: Page". Вот вам и лайфхак 😁

#лайфхак
Изображение
Друзья, всем хорошего настроения, и отличных выходных 😉

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

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

Найдено 82 поста