Защитите себя 👊
Друзья, вопрос с неадекватными заказчиками, которые прошли "модные" курсы и теперь ведут себя так, как им говорили "эксперты", сейчас стоит довольно остро. И ведь некоторым из таких заказчиков вбили в голову, что услуги для старта школы или прочего проекта должны быть бесплатными 😱
И ведь по-любому кто-то попадал в такую ситуацию, что после выполненной вами работы, заказчик просто "уходил в туман", не заплатив...
Я поделюсь с вами лайфхаком, которым я всегда пользуюсь сам, чтобы обезопасить себя от неуплат. НИКОГДА не делайте стили (или скрипты) у заказчика в аккаунте (в блоках, в настройках скриптов и т.д.). Храните весь ваш код в отдельном .css файле на каком-нибудь хостинге и подгружайте его к проекту через удалённое подключение!
В моём случае я подгружаю его из своего собственного аккаунта ГК со своего хранилища (смотрите скриншот). В настройках страницы, выбрав "Показать дополнительные настройки", в разделе "Теги в разделе HEAD" я подключаю CSS файл к странице, и все стили прекрасно отрабатываются на ней.
Вам понадобится такая конструкция:
#лайфхак
Друзья, вопрос с неадекватными заказчиками, которые прошли "модные" курсы и теперь ведут себя так, как им говорили "эксперты", сейчас стоит довольно остро. И ведь некоторым из таких заказчиков вбили в голову, что услуги для старта школы или прочего проекта должны быть бесплатными 😱
И ведь по-любому кто-то попадал в такую ситуацию, что после выполненной вами работы, заказчик просто "уходил в туман", не заплатив...
Я поделюсь с вами лайфхаком, которым я всегда пользуюсь сам, чтобы обезопасить себя от неуплат. НИКОГДА не делайте стили (или скрипты) у заказчика в аккаунте (в блоках, в настройках скриптов и т.д.). Храните весь ваш код в отдельном .css файле на каком-нибудь хостинге и подгружайте его к проекту через удалённое подключение!
В моём случае я подгружаю его из своего собственного аккаунта ГК со своего хранилища (смотрите скриншот). В настройках страницы, выбрав "Показать дополнительные настройки", в разделе "Теги в разделе HEAD" я подключаю CSS файл к странице, и все стили прекрасно отрабатываются на ней.
Вам понадобится такая конструкция:
<link rel="stylesheet" href="ссылка_на_файл_css">
Переносите весь код из файла к заказчику только тогда, когда он вам заплатит 😉 А все работы выполняйте в User CSS расширении, и переносите в файл. Ну а если не платят... весь css файл в ваших руках... и ваша фантазия 😂#лайфхак
ugdj9m1ib371vratx1ks.gif
11.4 MB
Друзья, всем хорошего настроения, и отличных выходных 😉
Неделька выдалась трудоёмкой, особенно когда стартовал сентябрь, и работы навалилось приличное количество) Даже не успел годноты вам запостить.
На следующей неделе поделюсь с вами сочной информацией, а пока, ловите небольшой мем для пятничного настроения 😆
Неделька выдалась трудоёмкой, особенно когда стартовал сентябрь, и работы навалилось приличное количество) Даже не успел годноты вам запостить.
На следующей неделе поделюсь с вами сочной информацией, а пока, ловите небольшой мем для пятничного настроения 😆
Индивидуализируем свои материалы 😋
У всех разные онлайн-школы и все хотят иметь свой собственный индивидуальный подход к её оформлению. В частности, поменять некоторые системные надписи, которые ставит Геткурс автоматически.
На своём проекте при переходе в Тренинги, я заменил стандартную надпись "Список тренингов" на "Доступные направления", применимую для моей задумки, без JS скриптов.
Главное знать, к чему обратиться ;)
Всё достаточно просто: я скрыл стандартный Геткурсовский заголовок и убрал серую полоску, которая идёт после него:
#лайфхак
У всех разные онлайн-школы и все хотят иметь свой собственный индивидуальный подход к её оформлению. В частности, поменять некоторые системные надписи, которые ставит Геткурс автоматически.
На своём проекте при переходе в Тренинги, я заменил стандартную надпись "Список тренингов" на "Доступные направления", применимую для моей задумки, без JS скриптов.
Главное знать, к чему обратиться ;)
Всё достаточно просто: я скрыл стандартный Геткурсовский заголовок и убрал серую полоску, которая идёт после него:
.page-header h1 {Затем просто добавил собственный блок с Заголовком и стилизовал его в блоке "Область: Page". Вот вам и лайфхак 😁
display: none;
}
.page-header .content-menu {
border-bottom: none;
}
#лайфхак
Сложно... но очень интересно 😳
Друзья, этот пост будет в разы сложнее, чем всё то, чем я с вами делился всё это время, но он несёт в себе целую кладезь полезнейшей информации.
Мало кто знает, но большинство всё же догадываются, что Геткурс посылает на страницу какие-либо данные, чтобы правильно обрабатывать запросы пользователей. В качестве примера, один из таких видов данных это объект
В
Таких объектов Геткурс выводит великое множество, в каждом есть много чего интересного.
#полезная_фишка
Друзья, этот пост будет в разы сложнее, чем всё то, чем я с вами делился всё это время, но он несёт в себе целую кладезь полезнейшей информации.
Мало кто знает, но большинство всё же догадываются, что Геткурс посылает на страницу какие-либо данные, чтобы правильно обрабатывать запросы пользователей. В качестве примера, один из таких видов данных это объект
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 году в простом поиске работы и как закрепление своего опыта в вёрстке и программировании. Тогда я и понятия не имел, во что это всё выльется сегодня ;)
А каков ваш путь становления? Делитесь в комментариях ☺️
Друзья, в этом посте я хотел бы узнать у вас, как вы пришли к работе с Геткурсом. Где и как учились, или неосознано пришли к этому, умеете ли вы верстать и обращаться с кодами :)
К примеру, я полностью самоучка, все свои нынешние скилы я прокачал целиком и полностью самостоятельно. Даже мой ВУЗ был не технический, а гуманитарный 😁 В саму компанию Геткурс пришел тогда ещё в 2016 году в простом поиске работы и как закрепление своего опыта в вёрстке и программировании. Тогда я и понятия не имел, во что это всё выльется сегодня ;)
А каков ваш путь становления? Делитесь в комментариях ☺️
Ссылку в ссылку! 🤨
Все мы знаем, что браузеры по разному отображают контент html-документа. Вот и Сафари в IOS не является исключением. Если оставить контакты на сайте в виде номера телефона и обернуть его, скажем, в простой параграф с классом
Многих заказчиков такой подход не устраивает и они просят убрать ссылку с номера телефона. Но как? Если мы даже не писали тег
Существует лайфхак для того, чтобы убрать подобные ссылки с номеров телефонов на IOS, и правильно застилизовать эту часть контента. В настройках страницы, перейдя к дополнительным настройкам, в разделе "Теги в разделе HEAD" нужно дописать метатег со следующими атрибутами:
#лайфхак
Все мы знаем, что браузеры по разному отображают контент html-документа. Вот и Сафари в IOS не является исключением. Если оставить контакты на сайте в виде номера телефона и обернуть его, скажем, в простой параграф с классом
phone
вот таким образом в качестве примера:<p class="phone">+76668889090</p>
То наверняка удивитесь, когда посмотрите результат на устройствах Apple и обнаружите, что это кликабельная ссылка с номером телефона :)Многих заказчиков такой подход не устраивает и они просят убрать ссылку с номера телефона. Но как? Если мы даже не писали тег
<a>
, который отвечает за это? 😳Существует лайфхак для того, чтобы убрать подобные ссылки с номеров телефонов на IOS, и правильно застилизовать эту часть контента. В настройках страницы, перейдя к дополнительным настройкам, в разделе "Теги в разделе HEAD" нужно дописать метатег со следующими атрибутами:
<meta name="format-detection" content="telephone=no">
Это решит проблему с присваиванием ссылок :)#лайфхак
This media is not supported in your browser
VIEW IN TELEGRAM
Я продолжаю нещадно бороться с багами Геткурса!
Записал для вас урок, где мы поборем один из наболевших багов: неправильное отображение количества уроков в тренингах.
Выйдет урок в ближайшие дни в Клубе Магии Геткурса вместе с остальными сочными уроками от меня 😁
#годнота
Записал для вас урок, где мы поборем один из наболевших багов: неправильное отображение количества уроков в тренингах.
Выйдет урок в ближайшие дни в Клубе Магии Геткурса вместе с остальными сочными уроками от меня 😁
#годнота
Что угодно, куда угодно 😜
В одном из предыдущих постов я делился безскриптовой возможностью поставить какой-либо блок в какой-либо блок :) В этом мы затронем менее "болезненный" и более безопасный способ, но с использованием небольшого скрипта, который позволяет это сделать.
На скриншотах выше я создал блок с тарифами и блок с раскрывающимся текстом, который в последствии я хочу поместить под цену во второй блок с тарифом. Как говорится: let's do it! 😉
Сперва я задам обоим блокам классы. Блоку с тарифами я присвоил класс
Наконец-то переходим к самому интересному. Мы скриптом поставим наш блок под цену во втором блоке с тарифом. Блоки с тарифами имеют класс
Хочу отдельно обратить внимание на метод
#лайфхак #полезная_фишка
В одном из предыдущих постов я делился безскриптовой возможностью поставить какой-либо блок в какой-либо блок :) В этом мы затронем менее "болезненный" и более безопасный способ, но с использованием небольшого скрипта, который позволяет это сделать.
На скриншотах выше я создал блок с тарифами и блок с раскрывающимся текстом, который в последствии я хочу поместить под цену во второй блок с тарифом. Как говорится: 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
мы перенесли ещё и скриптовую часть блока, которая заставляет правильно его работать :) #лайфхак #полезная_фишка
This media is not supported in your browser
VIEW IN TELEGRAM
Решил поделиться красотой параллакса :) Сделано на библиотеке
Для оформления первого экрана, подобные решения выглядят очень круто! :)
#наработки
parallax.js
😊Для оформления первого экрана, подобные решения выглядят очень круто! :)
#наработки
Равняйсь! Смирно! 🤨
Наверное чуть ли не у каждого второго пользователя Геткурса возникает вопрос: зачем в уроке столько пустого пространства справа?
Честно говоря, есть на то причины. Функционалом Геткурса мы можем поставить в правое пространство чат между учениками и кураторами, или же заполнить то пространство виджетом и специальным скриптом.
Но ведь бывают ситуации, когда пространство справа нам не нужно совсем, а весь прибитый контент к левой части смотрится так, как будто его гвоздями прибили к левой стороне 😁 Давайте это исправим, и разместим весь контент красиво по центру!
Чтобы это сделать, следует воспользоваться простыми CSS-правилами выравнивания контейнеров по центру. Но не все знают к каким классам эти правила нужно применять, и я с вами поделюсь ими:
#лайфхак
Наверное чуть ли не у каждого второго пользователя Геткурса возникает вопрос: зачем в уроке столько пустого пространства справа?
Честно говоря, есть на то причины. Функционалом Геткурса мы можем поставить в правое пространство чат между учениками и кураторами, или же заполнить то пространство виджетом и специальным скриптом.
Но ведь бывают ситуации, когда пространство справа нам не нужно совсем, а весь прибитый контент к левой части смотрится так, как будто его гвоздями прибили к левой стороне 😁 Давайте это исправим, и разместим весь контент красиво по центру!
Чтобы это сделать, следует воспользоваться простыми CSS-правилами выравнивания контейнеров по центру. Но не все знают к каким классам эти правила нужно применять, и я с вами поделюсь ими:
.container, .standard-page-content div {
margin: 0 auto !important;
}
Благодаря такому правилу весь контент урока будет стоять красиво по центру 😉#лайфхак
Обрезаем полотно 👏
Порой требуется уместить на страницу море информации, из-за чего она превращается в полотно (или как люблю говорить я "в рулон туалетной бумаги" 😁). И ведь действительно, пользователь устанет листать страницу с тучей монотонной информации.
В этом посте я хочу поделиться с вами одной фишкой, которая поможет сократить длину страницы в разы и сделать её элементы более интересными для восприятия. Я буду использовать полезнейшее CSS-правило
В качестве примера, я превратил блок с карточками (а именно блок "Иконка-заголовок-текст") в своего рода "слайдер", уместив все элементы в него, и не растягивая страницу вниз ;)
В качестве второго примера, я взял обычные текстовые элементы в пределах одного блока (это очень важно), и разместил их друг за другом, затем воспользовался магией свойства
Для блока с карточками я использовал следующий CSS:
Для блока с текстом я использовал следующий CSS (хочу обратить внимание, что блок с заголовком это совсем отдельный блок):
К слову, саму панельку скролла можно тоже красиво закастомизировать, но это тема уже для отдельного поста 😉
#полезная_фишка
Порой требуется уместить на страницу море информации, из-за чего она превращается в полотно (или как люблю говорить я "в рулон туалетной бумаги" 😁). И ведь действительно, пользователь устанет листать страницу с тучей монотонной информации.
В этом посте я хочу поделиться с вами одной фишкой, которая поможет сократить длину страницы в разы и сделать её элементы более интересными для восприятия. Я буду использовать полезнейшее 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. Остальные свойства – это просто импровизация для красоты.К слову, саму панельку скролла можно тоже красиво закастомизировать, но это тема уже для отдельного поста 😉
#полезная_фишка