Антон One Way | Разработка для онлайн-школ | GetCourse PRO
560 subscribers
223 photos
29 videos
101 links
Оформление и разработка нового функционала школ на GetCourse

По вопросам пишите 👉 @onthewaytothesun
Download Telegram
В чем секрет быстрого запуска?🔜

В энергии кота-бориса? В количестве сертификатов у специалистов?

Любой, кто был созерцателем запусков с переоформлением интерфейсов, знает, что переоформление — дело небыстрое. Сперва дизайнер должен отрисовать все требуемые компоненты, затем дизайн передают разработчику. В процессе разработки в дизайн вносятся правки, что-то разработчик с первого раза реализовать не может, а потом может вдруг выясниться, что с новым дизайном что-то, что раньше работало, работать перестало 😬

Один из способов ускорить запуск — правильно организовать подход к дизайну 🛠

Создание единого UI-кита и компонентов позволяет ускорить работу по всем направлениям. 👌

🔥 Дизайнеру гораздо быстрее собирать интерфейсы, если все организовано в компонентах и для внесения правок не нужно обходить каждый элемент для изменений
🔥 Организатору работ гораздо проще дать оценку макету, если все элементы изображены в натуральную величину и едино. Если же на макете раздела тренингов нет меню, нет элементов геткурса, а новые элементы просто нарисованы на белом фоне, нет ничего удивительного, что после сдачи работ разработичком ожидаемое не совпадает с действительностью
🔥 Разработчику гораздо проще работать с макетами, где для верстки не нужно дорабатывать макет

Какой минимум элементов должен быть в UI-ките?
1. Все разновидности текстовых элементов в переменных
2. Основные цвета
3. Отрисовка всех динамических элементов. Если дизайнер рисует чекбокс, он должен иметь оба состояния, а не только включенный или выключенный вариант


Даже такого минимума хватит, чтобы сократить частоту возникновения спорных ситуаций между дизайнерами и разработчиками. Например, если дизайнер забыл застилизовать какой-либо элемент, разработчик возьмет из его из общего вида в UI-ките и сдаст, в конечном счете, работу более высокого качества

Посмотрите на второй скриншот. Все элементы были добавлены на страницу в течение 15 минут, а благодаря тому, что все элементы прописаны согласно общему стилю, никакой "подгонки" блоков под ситуацию даже не требуется 🐈‍⬛

А часто ли вы видите UI-киты в дизайн-макетах GetCourse?
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥75👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Виджет опроса внутри GetCourse

Будни для работы, а суббота — идеальное время для неспешной доработки пятничных вечерних пет-проектов 😎

Пет-проект — это разработка, идею которой я придумал или где-то вдохновился и которую делаю как концепцию бесплатно и для себя 🖍

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

🤝 Виджет показывает актуальное число проголосовавших и три случайные аватарки голосовавших.

Не имеет обилия запросов к серверам GetCourse, что является достоинством сейчас, когда при большом количестве запросов с вашей страницы у каких-то из них могут случиться "аварийные отключения", и что может быть опасно, если в вашей школе работают разные разработчики или вы ставите различные готовые кодовые решения 🐈‍⬛
Please open Telegram to view this post
VIEW IN TELEGRAM
11🔥8🤯2
🥩 FARSH — конфа для техспецов

Уже скоро, 15 февраля пройдет конференция для техспецов. В отличие от GETC, FARSH будет посвящен обзору технических новинок в рамках платформы GetCourse

Моя тема выступления — Как правильно доработать UI платформы GetCourse и упростить жизнь технического специалиста, сопровождающего проект: демонстрация проверенных способов.

Рассказывать буду об админках, о том, что у них под капотом и какие они бывают.
Таким образом, будут рассказаны механики:
1. Блоков по типу блока таймкодов, которые умеют сами себя перезаписывать, сохраняя ваши настройки
2. Блоков по типу "последний просмотренный\последние просмотренные\лайкнутые"
3. Админки для разделов, какие есть только в шаблоне One Way
4. Механику, с помощью которой можно добавить любую новую сущность для любого контента в гк. Например, добавить для тренингов и уроков возможность устанавливать любые картинки с делением на "пк-картинка" и "мобильная картинка", а также сделать это более надежным способом, чем тем, которым сейчас пользуются все

Помимо обзора технических новинок будут инсайды по гк, дебагу популярных ошибок и советы по тому, как учиться писать подобное самому. При покупке по ссылке вы получите 10% скидки 👇👇👇

Онлайн конференция FARSH

Помимо моего выступления эфир будет заполнен достойнейшими из спецов по GC, каждая тема которого также рекомендуется к просмотру 🤌 Добро пожаловать!
🔥6👍3
🥩 НаFARSHировали супер-папку!

😊 Нажимаете «Посмотреть чаты», затем "Добавить папку" и теперь вы подписаны на все Telegram-каналы топовых технарей в сфере EdTech 😎
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥64👍2
О ФОРС-МАЖОРАХ

Когда я не знаю, что сказать, я просто говорю правду.

Сейчас в 18:45 по Бангкоку был восстановлен доступ к ресурсам One Way Studio после довольно серьезной проблемы.

Что за проблема?

На прошлой неделе с моего устройства периодически возникали проблемы со всеми скриптами, загруженными на мои домены onthewaytothesun.ru и one-way.dev. Иногда браузер давал ошибку из-за таймаута, что означает, что сервер не ответил моему ноуту вовремя. Сервер для всех файлов раньше был на timeweb, известной и хорошей Российской компании. Я подумал, что проблема в Таиланде, т.к. даже поиск в хроме периодически выдает таймауты, поэтому сделал кеширование на Cloudflare (этот сервис "делает копию" моих файлов и я могу подключиться к ним не через питерский таймвеб, а через Сингапур, например, что для меня ближе)

А дальше?

Утро 20 февраля. В канале с бесплатными разработками для taplink поступает жалоба, что один из кодов не работает. Открываю onthewaytothesun.ru — не грузит. one-way.dev грузит через раз. Провожу диагностику — отныне onthewaytothesun.ru открывается только с территории России

Как исправлялось?

Был куплен второй хостинг от зарубежной компании. Все проекты (скрипты, оформления, интеграции) были дублированы на второй сервер. Был добавлен failover (система, которая подключает запасной сервер, если основной недоступен). У нового хостинга другой веб-сервер, другая админка, другое всё. Переписывание части коннекторов, перенос SSL.

В 19 часов по Бангкоку/15 часов по Москве уже все и везде работает без каких-либо ошибок.

Какие выводы?

Теперь, похоже, придется учитывать, что Россия может блокировать трафик из-за рубежа. Зарубежный сервер и домен работают из России, но нельзя точно сказать, будут их блокировать. Так или иначе, но способы решения есть уже сейчас + наверняка IT-сфера постепенно приноровилась бы и к Чебурнету в случае необходимости.

Так как я продавал и раздавал бесплатно свои скрипты, чтобы всё у вас работало за рубежом, найдите в коде onthewaytothesun.ru и замените на one-way.dev. Если живете в России, то проблем вы, скорее всего, даже не заметили 😄


Кому спасибо?

@xDemonME, спасибо за миллионы сохраненных нейронов🫡🫡
6🤯4🤔3👍2🔥2
Как ускорить наполнение уроков и статей в GC

Столкнулся сейчас с ситуацией, когда нужно было перенести гк-статью в гк-урок, а переносить картинки не очень удобно. Казалось бы, у картинки должен показываться айди, по которому я могу быстро добавить ее в урок, ан нет

Написал скрипт, который решает эту проблему. Скрипт можно ставить в расширение userJS — https://chromewebstore.google.com/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld

скрипт:
if (window.userInfo.isAdmin) {
$('.image-box').each(function(){
let hash = $(this).find('img').attr('data-hash');
let $getElem = $(`<span class="image-id-fetcher glyphicon glyphicon-download-alt"></span>`)
$(this).append($getElem);
$getElem.click(function(){
$(this).css('color','red')
let link = `/fileservice/control/account/storage?FileAccountStatStorageFilter%5Bfilename%5D=&FileAccountStatStorageFilter%5Bstat_type%5D=0&FileAccountStatStorageFilter%5Bpath%5D=${hash}`
$.get(link,(data)=>{
var pageDom = $('<x/>').append($.parseHTML(data));
$getElem.replaceWith(`<span class="image-id-fetcher">${pageDom.find(('.gc-file-link')).attr('data-file-id')}</span>`)
})
})
})
}


ксс:

.image-box {
position:relative;
}
.image-id-fetcher {
position:absolute;
bottom:0;
left:0;
cursor:pointer;
}



Этот скрипт генерирует у всех блоков картинок кнопочку. Нажатие на кнопочку запустит процесс поиска айди картинки по ее хешу (в это время иконка будет гореть красным). Как только поиск закончится, вместо иконки появится айди, который удобно копировать. Итого вся статья была перенесена за 2 минуты благодаря скрипту, написанному за 10 минут
👍11🔥2
Разбор нового дизайна страницы оплаты от GetCourse

Ни для кого не секрет, что GetCourse готовит обновление дизайна платформы. В моем аккаунте уже появилась возможность включить новый вид страницы оплаты. Не могу знать, является ли это частью глобального редизайна, но, во-первых, событие это само по себе значимое, а, во-вторых, я подготовил для вас обзор на новую страницу. Обзор текстово-графический, доступен по ссылке

P.S. Обзор сугубо комплиментарный, новости без ложек дёгтя, так что не пугайтесь и не пейте корвалол перед прочтением
👍8🔥63
Об источниках вдохновения

Во время обсуждений задач по прокачке личных кабинетов мне периодически задавали вопрос: "можете что-то посоветовать из опыта? Виджет какой-нибудь полезный".

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

Сейчас я потихоньку собираю свой курс по общей фрилансерской грамотности, в который входит, например, обучение коду. Однако на этапе курса по HTML оказалось, что я не могу писать в пунктах ответов на вопросы угловые скобочки "<". Сервер геткурса не пропускает их, потому что вставка кода в то место небезопасна и может сломать страницу. Но мне-то нужно🤷‍♂️

Решить эту проблему помог довольно коротенький скрипт.

$(`form[action*="/pl/teach/questionary/update-testing?id="]`).submit(function(event) {
event.preventDefault();
$(this).find('textarea').each(function(){
$(this).val($(this).val().replaceAll('<','&lt;').replaceAll('>','&gt;'))
})
$(this).unbind('submit').submit();
})

$( document ).ajaxComplete(function( event, xhr, settings ) {
setTimeout(function() {
$('.js__btn-variant').each(function(){
let $btn = $(this)
if ($btn.html().indexOf('&lt;')!==-1) {
$btn.text($btn.html().replaceAll('&lt;','<').replaceAll('&gt;','>'))

}
})

}, 10);

})


Этот скрипт подменяет "<" на символы "&lt;", когда мы сохраняем вопросы в редакторе тестирования. Таким образом, на них не ругается сервер геткурса и всё исправно сохраняется (а также это никак не сломает страницу, как ни старайся). В момент же загрузки пунктов тестирования происходит обратная подмена символов "&lt;" на "<", благодаря чему ученики смогут видеть HTML -теги.
🔥10👍2👏21
Еще виджеты, которые подошли лично моему курсу ввиду его методологии:
1. Опросник. Так как тема курса — все подряд, я даже сам не знаю, о чем рассказать в следующий раз. По этой причине я просто поставил опросник, в котором ученики смогут проголосовать. Что победит, то и выйдет раньше в качестве урока
2. Редактор кода с админкой. Я ненавижу рутину, опечатка в которой может стать фатальной, поэтому я просто сделал редактор, который на опубликованной странице сам сформирует мне красиво оформленный блок кода, а редактирование такого блока допускается простым ctrl+c ctrl+v
3. Таймкоды с админкой. Я сделал новую, третью версию этой концепции и теперь она сама подбирает за меня ссылку. Мне не нужно копировать ее со страницы, достаточно смотреть видео с компа и переписывать число минут и секунд, даже не задумываясь о пересчете


Теперь как минимум для школ по программированию есть что посоветовать😎
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9🏆31
This media is not supported in your browser
VIEW IN TELEGRAM
Пятничная разработка этой недели — специальный виджет, который позволяет устанавливать пк и мобильную картинку на тренинги и уроки, а также позволяет нативно донастроить картинку по части размеров и пропорций 😎

Виджет хранит информацию с настройками в теме геткурс, благодаря чему все картинки грузятся мгновенно и не грузят дополнительно геткурс лишними запросами, а также хранит промежуточные результаты редактирования в localStorage, чтобы обойти сохранение геткурсом своих тем раз в 15 минут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍82
Потрясающая новость — теперь в приложении GetCourse работает код, вставленный в head.

Что это значит?

⚙️ Теперь не нужен костыль, который подключал из body код для head. Меньше операций = быстрее загрузка. Так как сам head всегда срабатывает раньше body, в целом загрузка в приложениях станет быстрее в среднем на десятки процентов
⚙️ Теперь разработчикам не нужно беспокоиться об областях видимости при дублировании кода на оба раздела, т.е делать оформления качественными будет проще
⚙️ Теперь во всех оформлениях можно будет починить дёрганное переключение на задания и ответы в приложении более простыми способами. Чтобы дергания не было в моем шаблоне, я подменял полностью весь раздел заданий и ответов и догружал все библиотеки, которых не доставало при замене. Теперь можно будет делать более лаконичные решения для красивого переключения

UPD: Чтобы код работал, в школе должна стоять галочка "Отключить нативный вид страницы тренингов в приложении" в настройках аккаунта
🔥14👍52
1 апреля GetCourse ввел лимиты для запросов к чатиуму, на которых работала функция автоматической установки картинок на тренинги

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

Если у вас грузятся не все картинки — к сожалению, вы среди тех, у кого тоже стоит этот способ. Однако есть и хорошая новость — в ближайшем будущем GetCourse даст на замену старому возможность ставить картинки более оптимизированным способом.

Как только эта возможность появится, в фирменное обновление OneWay оно будет установлено бесплатно, а для всех будет выложена инструкция по установке картинок с помощью нового варианта 🐈‍⬛️
Please open Telegram to view this post
VIEW IN TELEGRAM
4🤯1
Фикс выпустили раньше, чем обещали

Инструкция по тому, как теперь вешать картинки на тренинги:

ℹ️https://teletype.in/@onthewaytothesun/pBTXTcrymfe

UPD: Сервис статей немного подпортил код, код обновлен
Please open Telegram to view this post
VIEW IN TELEGRAM
7🔥2
О ценах, лояльности и продуктивности

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

6️⃣ Первую задачу по оформлению я взял в марте 2022. Тогда мы с женой попали в аварию, в которой грузовик снес весь перед машины, однако уже на следующий день я работал над проектом, несмотря на боль от любого движения (последствия хлестовой травмы). За проект я тогда взял 35-40 тысяч рублей за страницу входа, тренингов и уроков, вид открытого урока и списка курсов, в виду отсутствия мобильной версии в макете я сделал ее сам и адаптировал тогда всё под чатиум.

2️⃣ Второе оформление под запуск для этой организации я делал уже во всеоружии: внедрил все самые передовые технологии для админок и сделал прям на максимум.

📥Помимо оформлений я делал бесплатные фиксы и помогал переносить оформление на другой аккаунт их школы, например, когда 2 апреля в геткурсе сменили принцип вывода числа уроков на тренинге, что привело бы к некрасивому багу в этом проекте, я оперативно ввел все изменения просто так.

3️⃣ Март 2024. Ко мне приносят макет для третьего запуска. Мобильной версии нет, все слои разгруппированы, макет сделан так, будто на его создание наняли непрофессионала. Я расписал ошибки в макете, приложил ссылку на геткуровские требования к макетам (не мое самодурство — геткурсовские), получив в ответ «исправим».

Вместо исправления мне присылают ночью в прошедшую пятницу другой макет. Контент в нем другой, а ошибки — ВСЕ ТЕ ЖЕ. Макет всё также выглядит так, будто его набросал за 20-30 дизайнер баннеров, который никогда не слышал про веб-дизайн. Вежливо отвечаю, что макет опять некачественный, пишу заново правки к макету. Получаю в ответ «исправим», после чего в общем чате спецов по геткурсу появляются сообщения по поиске разработчика для работы по макету

🙃 Еще спустя 5 минут в моей личке: «если поправим ТЗ, за сколько сделаете по времени?»

📌Мораль сей басни такова:

Если вы исполнитель — цените свой труд и не работайте бесплатно и не демпингуйте. Даже если вы всегда работали качественно, вы всегда будете восприниматься как дешевый труд, который легко заменить в случае чего. Даже если на деле это не так
Если вы предприниматель — посмотрите со стороны, как незнание специфики работы и нежелание погружения в них у ответственных лиц может отразиться на качестве результата.
Please open Telegram to view this post
VIEW IN TELEGRAM
16🔥7👍2
Изменения на странице оплаты

У тинькофф кредита убрали атрибут айди. Если ваше оформление использовало айди для скриптов или оформлений и блок тинькофф рассрочки стал отображаться как-то проблемно, замените в коде оформления #tinkoffcredit на .tinkoffcredit-block (можно через ctrl+f найти все упоминания на странице старого обращения и заменить на новое)
10👍1