Кто здесь главный? 🙄

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

Я предлагаю явно выделить сотрудника от учеников :)

У сотрудников и админов проекта есть дополнительный класс у основного .user-profile-link — это класс .worker. Именно через такое сочетание можно повлиять, например, на цвет имени сотрудника или же размер его имени, как это сделано в моём случае (см. скриншот).

Полная конструкция обращения к имени сотруднику в ленте комментариев выглядит так:
.user-profile-link.worker span

Теперь вы можете явно отличить сотрудника от учеников в ленте комментариев ;)

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

Лето вот-вот закончится, сезон отпусков подходит к концу. Кому-то снова на работу, а кому-то снова идти учиться.

Почему бы не совместить одно с другим?

Ведь все мы знаем, что стабильный рост заработка приходит с крепкими и уверенными знаниями. И я хочу поделиться своими знаниями с вами в своём клубе Train IT 😉

Фишка моего клуба в том, что я объясняю сложные темы по HTML/CSS/JS простым языком, показывая материал на практике без скучных и занудных "учебниковых" терминов. В направлении "Веб с нуля" вы поймете всё, что раньше для вас казалось "тёмным лесом", и будете уверенно применять знания вне зависимости от платформы, с которой вы работаете.

❗️Ссылка на клуб: https://train-it.ru

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

Вы всегда можете посмотреть, какие уроки я готовлю для вас, так как на главной странице есть расписание уроков по каждому направлению! Посмотреть направления и расписания можно тут: https://train-it.ru/home#current

Новости моего клуба и полезную обучающую информацию из мира IT вы узнаете из моего второго канала, где мои коллеги по цеху формируют для вас образовательный контент: https://t.me/train_it_official 😊

Если учиться, то учиться качественно и комплексно 😉

Защитите себя 👊

Друзья, вопрос с неадекватными заказчиками, которые прошли "модные" курсы и теперь ведут себя так, как им говорили "эксперты", сейчас стоит довольно остро. И ведь некоторым из таких заказчиков вбили в голову, что услуги для старта школы или прочего проекта должны быть бесплатными 😱

И ведь по-любому кто-то попадал в такую ситуацию, что после выполненной вами работы, заказчик просто "уходил в туман", не заплатив...

Я поделюсь с вами лайфхаком, которым я всегда пользуюсь сам, чтобы обезопасить себя от неуплат. НИКОГДА не делайте стили (или скрипты) у заказчика в аккаунте (в блоках, в настройках скриптов и т.д.). Храните весь ваш код в отдельном .css файле на каком-нибудь хостинге и подгружайте его к проекту через удалённое подключение!

В моём случае я подгружаю его из своего собственного аккаунта ГК со своего хранилища (смотрите скриншот). В настройках страницы, выбрав "Показать дополнительные настройки", в разделе "Теги в разделе HEAD" я подключаю CSS файл к странице, и все стили прекрасно отрабатываются на ней.

Вам понадобится такая конструкция:
<link rel="stylesheet" href="ссылка_на_файл_css">

Переносите весь код из файла к заказчику только тогда, когда он вам заплатит 😉 А все работы выполняйте в User CSS расширении, и переносите в файл. Ну а если не платят... весь css файл в ваших руках... и ваша фантазия 😂

#лайфхак

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

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

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

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

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

Мало кто знает, но большинство всё же догадываются, что Геткурс посылает на страницу какие-либо данные, чтобы правильно обрабатывать запросы пользователей. В качестве примера, один из таких видов данных это объект 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 😊

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

#наработки