Честно говоря, даже не рассчитывал на такой отклик на мой предыдущий пост. 30 подписчиков на Youtube, ценные комментарии и советы, да и просто слова поддержки!
К сожалению, охват моих видео пока не очень большой, хотя видео про STAR приняли очень тепло, судя по лайкам.
На самом деле, затевая эксперимент "Кодим с ChatGPT", я был почти уверен, что сколь-нибудь значимых результатов я не получу. Но похоже, я начинаю сам себя опровергать. Чатбот сумел не просто предложить решение проблемы (например, "сделать форму авторизации"), но и решить абстрактную задачу "сделать форму красивой".
Кроме того, он неплохо разбирается в существующих библиотеках и сумел предложить мне два очень приличных варианта с полнофункциональным календарем. И это притом, что я использую версию 3.5, а не 4. В общем, мне кажется, из всего этого выйдет неплохой результат, но посмотрим. До работающего приложения еще очень далеко.
Одно могу сказать точно: если бы я писал код с нуля, я бы потратил на него раз в 5 больше времени, с учетом исправления всех ошибок, которые иногда допускает chatGPT.
Ну и немного внутренней кухни (кажется, эта рубрика становится постоянной):
Тема для видеоблога выбрана весьма непростая для новичка, ведь мне недоступна опция "перезаписать видео", если в процессе записи что-то пошло не так. Это же chatGPT, который запоминает контекст. То есть, я:
а) не могу просто как ни в чем не бывало заново его просить делать то, о чем уже просил (потому что он "знает", что я уже задавал этот вопрос и его ответ будет учитывать предыдущие ответы)
б) не могу начать новый чат с нуля, потому что для записи следующего ролика мне нужно, чтобы ИИ знал контекст предыдущего.
Приходится танцевать с бубном. Например, после записи я понял, что у меня был косяк с гарнитурой и звук был фиговый. Пришлось на имеющийся видеоряд с записью экрана накладывать новый аудио-видео ряд с голосом и миниатюрной головой. Это вылилось в адок на монтаже, общее время монтажа 17-минутного ролика составило часов 15. Всё для вас, дорогие будущие зрители :)
Спасибо за поддержку, буду рад новым подпискам на канал и идеям по развитию!
Всем привет! На днях я заметил во многих телеграм каналах данный эффект убегающей кнопки при наведении на нее стрелкой мыши, казалось бы, ее невозможно нажать, но в коде есть строка для успешного нажатия, теоретически ее можно нажать, видимо создатель все же знал об этом=) На видео ниже этот самый эффект:
Но вопрос заключается в другом, почему-то никто не размещал код этой кнопки. Я знаю, что этот эффект можно создать самому при помощи обычного JS. Кому не охото париться с созданием или поиском данной кнопки, вот вам размещенный мною пост, там есть все необходимые файлы для вашего сайта.
Всем привет. Добро пожаловать на сегодняшний урок. В сегодняшнем уроке мы научимся создавать конструктор пиксельной графики. Чтобы создать этот проект, нам понадобится HTML, CSS и ванильный Javascript.
Структура папок проекта:
Прежде чем мы начнем кодирование, давайте взглянем на структуру папок проекта. Мы создаем папку проекта под названием «Pixel Art Maker». В этой папке у нас есть три файла: index.html, style.css и script.js. Данные файлы вы можете скачать с моего хранилища нажав сюда.
Видеоурок по созданию:
Всё, теперь у вас есть собственный сайт по отрисовке пиксельных картинок.
Спасибо за лайки, комментарии, подписку и просмотр <3
В своем предыдущем посте я рассказал про проект, который сделал чтобы (в том числе) доказать самому себе, что могу что-то сделать с нуля и до конечного результата. Прошло 6 месяцев с начала запуска и решил подвести некоторые итоги. К тому же и год заканчивается – тоже повод.
Для ЛЛ: сделал сайт и рассказываю с какими проблема столкнулся, какие ошибки допустил, чего добился.
Как не старался написать кратко, но все ровно вышла «простыня». Видимо, нет у меня таланта излагать свои мысли кратко. Пардоньте.
Начну с проблем. Все же писать про позитив легко, а признавать ошибки бывает сложнее.
Проблемы
Как я рассказал ранее, я сильно упростил первоначальную идею и сделал почти классический «джоббоард» (оказывается, есть такой термин среди HR). Так вот, для тех, кто хочет создать подобный проект, знайте – это не лучшая идея. Пообщавшись с HR скажу, что это даже глупая идея в 2023 году. Если уж так хочется играться с вакансиями, то смотрите в сторону HR-агентства. Хотя и там полно своих подводных (и порой острых) камней. В джоббоард большая конкуренция и очень сложно отожрать хотя бы какой-то значимый кусок. Мой западный аналог имеет донора в виде мощной рассылки на десятки тысяч подписчиков. Наличие такого ресурса позволяет работодателю получить не только размещение на сайте, но еще и быть прорекламированным в профессиональном сообществе. За что, кстати, готов произвести оплату. У меня такого ресурса нет и на его построение уйдут годы, если вообще получится сделать нечто подобное.
Признаюсь, что был сильно удивлен тому факту, что буквально через пару дней на сайт полезли боты. Нет, я был готов к тому, что придут всякие поисковики, но вот они как раз и не пришли сразу. А налетели всякие сканеры, накрутчики и прочая мерзость. Через неделю доля паразитного трафика была примерно под 98%. Пришлось заниматься не свойственной для себя работой – «сисдаминством». Поставил и настроил fail2ban, прикрутил к нему несколько фильтров, допилил движок проекта под перманентные баны всех, кто запрашивает страницы, которых у меня нет и никогда не будет, но которые используются для взлома или аутентификации на сайте. В целом, много кого победил, но искоренить зло полностью не получится. Есть море упертых ботов, которые лезут через прокси и пытаются что-то сделать.
Разочаровал Яндекс, который совсем не борется или хотя бы фильтрует роботов, которые работают на понижение поведенческих факторов. В Метрике куча левака, которое можно было бы отсеять. Уходить за Cloudflare не хочется. Тоже надо думать, что с этим делать (или не делать).
Пережил многодневную «атаку» со стороны какого-то левого скрипта, размещенного на Амазоновских серверах. Почему я был ему интересен до сих пор не понимаю. Паразит каждую минуту выкачивал весь сайт с разных ip или долбил его разными запросами. Это на DDOS не похоже, сервер нагрузку держал без проблем, но к чему была такая активность – не понял. Написал саппорту AWS, приложил логи, но там сказали, что ничего криминального не видят. На второй день снова им написал, что скрипт работает по расписанию, что выкачивает весь сайт и все это не нормально. Ответили вопросом, о том, что я хочу от них услышать? Попросил их проверить, что это за ерунда такая и вообще надо бы на кол посадить того, кто так делает. Обещали подумать и разобраться. Я же задолбался смотреть логи с IP от AWS и забанил все их сетки, которые нашел. Через несколько дней трафик от AWS исчез, а саппорт отписался, что поговорил со своим клиентом. На этом все закончилось.
Запросы, которыми был забит почти весь лог-файл.
Идем далее, от нытья к реальным проблемам. Одна из них – нет полной автоматизации по поиску и размещению вакансий. На размещение/модераторство у меня уходит не более 30 минут в день. Тем не менее, я думаю над тем, чтобы тратить на это не более 5 минут в день. Добиться не просто, так как часто цепляю реально не интересные вакансии, в которых нет описания того, что будет делать кандидат или нет вообще информации о работодателе/проекте. Бывают дни, когда вообще нет ничего интересного и это проблема, которую я решил, но пока в ручном режиме и способа автоматизации пока не вижу.
Вообще, я думал, что проект будет интересен компаниям, т.к. они бесплатно смогут разместить свои вакансии, но они на проект не пришли. Хочется надеяться, что пока не пришли. Если придут, то это решит проблему, описанную чуть выше. Повторю все же то, что написал выше: высокая конкуренция и определенная ниша – это не всегда способствует росту. Тот же hh будет интересен работодателю куда больше, чем мой специализированный проект пусть и с полностью целевой аудиторией. Пока компании не могут оценить потенциал моей аудитории и не готовы тратить на нее даже время, не говоря уже про деньги.
Отсюда получаем еще одну задачу: надо раскрутиться! Банальный совет, который лежит на поверхности и который так же банально требует денег. Я делал разные прикидки по бюджету, но в согласие с самим собой пока не пришел. Впереди 2-3 месяца стагнации на рынке труда из-за праздников. Так что пока активно в рекламу вкладываться не хочу. К тому же, я не маркетолог и слить первый бюджет это «как два пальца об асфальт». Много чего уже прочитал, посмотрел Ютуб (а где же еще учиться?) и пока раздираем сомнениями. У кого-то есть идеи на этот счет? Только условия как всегда самые лучшие: денег нет, а результат нужен =)
Ошибки
Когда делал дизайн первой страницы, то ориентировался больше на западный аналог. Проблема только в том, что ресурс у них уже раскрученный и они не нуждаются в некоторых вещах, которые нужны мне для нормальной индексации поисковиками или чтобы пользователи проходили в глубь сайта. Так что первую страницу я загубил, сам занизил ее роль для всех, кто приходит на сайт. Уже внес некоторые корректировки в дизайн, навигацию, но считаю это не достаточным. Здесь еще нужно хорошенько поработать.
Я не делал акцент на телеграм-канале. Считал его нечто дополнительным к сайту. По факту, посмотрел конкурентов из похожих тематик и у многих все наоборот: сайт – это дополнение к телеграм-каналу. Например, у больших тг-кагалов по нескольку постов в день, информация в таком потоке теряется. А на сайте легко найти какую-то статью, она же индексируется поисковиками, ее можно положить в закладки, ее же рекламируют в телеге. И при этом она же может быть и трафиком для тг-канала. Так что и здесь надо поработать. Правда нагрузка вырастает, т.к. вести тг-канал – это, как оказалось, тоже весьма затратное по времени дело. Меня пока спасает автоматизация, т.к. все вакансии с сайта автоматом идут в телегу.
Скромные результаты телеграм-канала.
Далее напишу важную, как мне кажется, вещь. Она тоже на поверхности и описана во многих книгах в том или ином виде. Я ее озвучу так, как это получилось со мной. И я считаю, что ошибка мне сейчас обходится дороже всего. Напомню, что проект мы хотели сделать вчетвером: менеджер и три программиста (фронт и два быка бэка). Менеджер не только принес идею, но еще имел знания по раскрутке проектов, их продвижении. Да и язык у него подвешен правильно. Если надо, то мог уговорить сделать что-то нужное, а может и про инвестиции что-то в голове имел, мог что-то придумать и на этот счет. Фронт мог колдовать не только с кодом, но и с SEO. Ну, а остальные два мушкетера могли и с основным кодом шаманить, и немного в админство поиграть. Что в итоге: проект сделал один человек, который не может сразу заменить всех четверых. Я, конечно, мудак молодец, что сделал проект в одиночку. А как теперь его тянуть одному? Осознание этого приносит понимание того, что проект будет долгим. Просто потому, что ты один впахиваешь за четверых. Поиграть в Д'артаньяна, конечно, получилось. Но без команды все куда сложнее. И моя ошибка в том, что не поговорил хотя бы еще с одним из членом нашей могучей кучки и не предложил ему присоединиться, когда заканчивал проект. Так что вывод: если хотите сделать проект, то не старайтесь все делать в одиночку. В книжках пишут про то, что должно быть минимум 3 человека в команде с разными компетенциями и я с этим сейчас (потирая шишку на лбу) полностью согласен. Да, я делал проект чтобы доказать одно. Но по факту шагнул немного дальше и теперь имею все шансы заработать «орден сутулого». А знаете, что еще плохо в работе одного человека? Тебе не с кем обсудить идею! Второе или третье мнение могут как-то трансформировать идею или вовсе ее отбросить. Иначе ты что-то придумываешь себе, веришь в это, убеждаешь себя в этом, тратишь силы на реализацию, а по факту это все никому не нужно. Некому тебя оставить, одернуть или наоборот - предложить что-то такое, о чем ты сам не думаешь.
Так же сейчас задаюсь вопросом про окупаемость проекта. Раньше думал, что надо просто сделать сайт. Теперь же хочется добиться самоокупаемости. Звучит как очередной вызов, получение некой ачивки. Это не очень больше деньги, так как основные траты — это оплата хостинга. Свою работу пока не считаю. Пожалуй, размещение рекламы спасло бы ситуацию, но трафика не хватает, чтобы получить прописку на приличной площадке для контекстной рекламы. А продавать всякие «казино» совсем не хочется.
Позитив
То, что есть позитив – это основное, что позволяет не бросить это все в корзину.
Главное - проект работает. И даже есть свои достижения. Например, аудитория телеграм-канала выросла в 3 раза! Согласитесь, звучит солидно. Есть только одно маленькое «но»: (Гусары! Не ржать!) рост составил с двух человек до шести =) Прямо так и вижу слайд какой-нибудь мощной презентации с графиком о трех кратном росте и маленькой подписью внизу о реальных цифрах. Все как в рекламных проспектах.
Сделал несколько улучшений, добавил пару разделов, поработал с SEO. В Яндексе стал вылезать по дополнительным запросам. Конечно, это не сильно делает погоду, но это все же трафик. Так же появились идеи для пары других разделов. Это плюс, потому что если будут изменения на сайте, будет рост количества страниц, то это все будет отмечено поисковиками. Пока основную ставку делаю на них. Еще бы добиться того, чтобы Яндекс более лояльно относился к сайту и вообще нормально будет. Пока Гугл ведет более качественную и основную аудиторию.
Из последних крупных обновлений в этом году – раздел с тестами по HTML, CSS, JavaScript и фреймворкам. Еще нужно поработать над несколькими вопросами, возможно, что-то добавить или заменить. Но в целом считаю, что раздел получился. Вопросов достаточно, чтобы они не повторялись, а ответы не идут по порядку. Так что можно проходить тест несколько раз подряд. База вопросов может без проблем дополняться или изменяться. У вопросов есть уровень сложности, но я пока это выключил. Надо над сложными вопросами подольше поработать, чтобы они больше соответствовали уровню знаний сильного кандидата. Из минусов, пожалуй, то, что не показываю правильных ответов. Решил сейчас этого не делать. Бонусом добавил две мульки, которые не видел у других: во-первых, я считаю время, которое потратил человек на тест, а во-вторых, если тестируемый уходит с активной вкладки браузера, то я это фиксирую и в конце теста выдаю ему сообщение. Это все мелочи, но лучше с ними, чем без них.
От проекта получил отклик, который вообще не предполагал. Дело в том, что с текущим местом работы прощаюсь. Это никак не связано с описываемым сайтом. Просто пришло время двигаться дальше (и глубже, ага). И вот один из коллег узнал о моих планах и посоветовал меня знакомым, которые ищут разработчика. Договорились просто устроить разговор между технарями (мной и их тимлидом), а если все срастется, то уже еще раз встретится и сделать все, как полагается. В подробности разговора вдаваться не буду, тут ничего интересного кроме того, что спросили (а кого из нас не спрашивали), что ты делал ранее и можешь ли ты показать свой код. Не будь у меня этой джобборды, я бы показать ничего не мог. Просто потому, что последние годы работы — это все то, что не видят простые люди (т.е. внутренние разработки компании). А код так вообще под всякими NDA и за закрытыми Git’ами живет. Так что показал то, что сделал. Дал доступ к своему гиту, показал код. Тимлид по нему побегал, задавал вопросы по типу «почему здесь так, а не иначе?». После просмотра проекта даже других вопросов не было. Тем более, что ответы мои были не только с позиции разработчика, но и менеджера, сисадмина. Возможно, что ничего в этом такого нет. И обычный фулл-стак разраб легко ответит на все вопросы и по фронту, и по бэку. Но все же мне хочется верить, что мои знания не так безнадежны, как я думал о них ранее. Это интервью несколько подняло (в очередной раз) мою самооценку. В любом случае, очень приятно рассказывать о том, что ты сделал сам и это оценивают те, кто тебя слушают. Жаль только мы по зарплате не договорились: предложили меньше, чем я зарабатываю сейчас. Рынок уже как-то остывает к большим з/п программистам, если смотреть вакансии на сайтах.
Еще сайт подарил мне одну идею. Обдумываю ее уже которую неделю, но делать не рвусь. Очень легко сразу ринуться в код, а потом снова переписывать, менять подходы. Так что рисую стрелочки, кубики, прикидываю все моменты. А уже потом начну действовать.
Хочу сказать огромное спасибо всем пикабушникам, которые перешли по ссылке на сайт из прошлого поста (вас было 64 человека), и кто написал комментарии с советами. Первые показали мне ошибки в навигации сайта и прочее, о чем я писал выше. Вторые дали дельные советы и я к ним прислушался. Мерси вам всем от (так по тексту получилось) Д’артаньяна и его проекта!
P.S. мой единственный (первый) подписчик, кто бы ты ни был, тебе отдельная благодарность просто за то, что ты есть =)
Уже давно настала эра WYSIWYG - редакторов текстов, и при написании наших веб проектов мы конечно же стараемся их использовать по максимуму.
Один из таких редакторов ну просто с сумасшедше-огромной функциональностью - это небезызвестный CKEditor, который недавно (шучу, давно уже) зарелизился замечательной 5-й версией.
Ее мы сегодня и будем импортировать в наш проект на Laravel 10. Скриншотик (и пасхалочка, кто знает тот поймет) внизу.
И активировать его на textarea через ClassicEditor.create().
Но есть нюанс.... что если авторы решат уйти из РФ и ограничит доступ? Или же РКН решит что "ты не пройдешь!" и ... ты не пройдешь. Нужно любить всех своих пользователей, а не заставлять их расчехлять VPN потому что на сайте не работает редактор.
Да и мы ведь серьезный проект пишем! Нам нужно свое! Да еще и желательно с кастомным билдом под наши задачи!
По этому мы пойдем по второму пути - сложному, который делится еще на два.
Назовем их "следовать инструкциям" и "догадаться самим".
Но перед тем как начать - нам нужно собрать кастомный билд с нужными нами модулями и настройками. Что можно спокойно сделать на сайте. Я использовал билд на базе ClassicEditor, выбрал нужные мне модули в том числе и модуль watchdog на будущее (сейчас активировать его в коде я его конечно-же не буду). В общем, качаем билд и распаковываем его в "Новая папка (3)" на рабочке. Он нам понадобится, но несколько позже.
Распакованный архив с кастомным билдом
Следуем инструкциям.
По инструкции на сайте мы берем скачанный билд, копируем его в папку с проектом в директорию public\assets\ckeditor5, импортируем .js файл в blade шаблон и так-же активируем его через EditorWatchdog() или CreateEditor(). Легко и просто, и в принципе все гайды в интернете по интеграции в Laravel пишут нам что так делать правильно.
Но нас то не обманешь! У нас серьезный проект! И ведь действительно, вдруг нам потом понадобится модуль, который мы не добавили в наш билд? Пересобирать заново? Да ну его! По этому мы пойдем своим путем! Поехали!
Догадываемся сами
К нашему счастью в Laravel встроен замечательнейший инструмент под названием Node.js, который мы и будем использовать. И не только его.
Установка
Идем консолькой в папку с нашим проектом и запускаем (не забудь включить vpn)
Сразу нам устанавливается множество зависимостей, однако наш любимый Laravel 10 этот модуль сразу не увидит. Для того чтобы это исправить нам нужно сделать еще кое-что. Поехали интегрировать.
Интеграция
Нам нужно чтобы наш Laravel увидел CKEditor, да собирал его под наши нужды "на лету". Для этого мы будем использовать vite, благо он идет в составе Laravel. У авторов CKEditor для него есть отдельный модуль с названием @ckeditor/vite-plugin-ckeditor5, его и будем использовать. Также нам понадобится модуль @ckeditor/ckeditor5-theme-lark.
Далее ищем в корне нашего проекта файл vite.config.js и вносим в него следующие строки как показано на скриншоте (слева - старый файл, справа - внесенные изменения)
Помните ту конфигурацию, что мы делали на сайте CKE? Она то нам сейчас и понадобится.
Открываем Новую папку (3) и в подпапке src находим файл ckeditor.ts. Это файл с настройками нашего билда. Копируем его в папку с проектом, в директорию resources/js. Также из папки samples копируем style.css в resources/css. И дополнительно создаем файлик editor.js - его мы и будем встраивать в наш шаблон.
Содержимое editor.js
import ClassicEditor from './ckeditor';
ClassicEditor.Editor // Note that you do not have to specify the plugin and toolbar configuration — using defaults from the build. .create( document.querySelector( '#editor' ), { language: 'ru', removePlugins: [ 'MediaEmbedToolbar' ] }) .then( editor => { console.log( 'Editor was initialized', editor ); } ) .catch( error => { console.error( error.stack ); } );
Для наблюдательных - я специально не использовал watchdog здесь. Импортировать его я планирую потом.
Дальше нам нужно загрузить недостающие модули.
Открываем редактором ckeditor.ts и видим вверху множество импортов.
Открываем папку "node_modules/@ckeditor" внутри проекта и ищем недостающие модули. Если такие есть - устанавливаем их через npm install --save %имя_модуля%.
В дальнейшем есть шанс получить следующую ошибку от TailWindCSS (при запуске npm run dev)
[vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly.Please enable a CSS nesting plugin *before* Tailwind in your configuration.
Она вызывается из-за того, что мы используем кастомный css для ckeditor
Чтобы этого не происходило, нам необходимо в файле postcss.config.js в корне нашего проекта добавить следующие строки:
'postcss-import': {}, 'tailwindcss/nesting': {},
как на скриншоте
postcss.config.js
Почти все
Нам осталось только в нашем шаблоне между тегов <head> добавить
И теперь любой <div> или <textarea> с указанием id="editor" будет вызван с редактором CKEditor5.
Запускаем проект через npm run dev и радуемся полученному результату!
Результат
Результат
А Вы заметили пасхалочку на скриншоте?
Все что вам осталось - это настроить дизайн редактора в css файле.
Ну и как-же без ложки дегтя - почему-то конфигурация "language: ru" не срабатывает и редактор остается английским. Возможно не хватает какого-то модуля или же что-то необходимо донастроить. Пока еще не разобрался, но в целом на данном этапе разработки это не сильно критично. Если у Вас есть идеи - welcome!
Update: С языком разобрался. Действительно его необходимо было имортировать. Для этого в ckeditor.ts необходимо вставить строку после импорта { ClassicEditor }
Update2: Также нашел проблему при вставке видео с внешнего источника, например Youtube. В редакторе оно вставляется, а вот в пост не переносится. Лечится доп конфигом там-же в ckeditor.ts в секцию defaultConfig
mediaEmbed: { previewsInData: true }
Исправленная локализация
Надеюсь что данный гайд поможет Вам в проектах.
Если вы хотите немного потрындеть, или быть может знаете Laravel или например умеете верстать, ну или просто у вас есть желание как-нибудь помочь с разработкой проекта, милости прошу в мою потрынделку.
В кратце - да, старый добрый, с блекджеком и шлюпками.