Авторы: Carol Vorderman, Craig Steele, Claire Quigley, Daniel McCafferty, Martin Goodfellow
Количество страниц: 224
Год издания: 2018
👍Python может использоваться для создания компьютерных игр от головоломок до экшенов с качественными звуковыми эффектами и трехмерной графикой. Каждая глава в книге показывает, как создать полноценную рабочую игру простыми шагами. Авторы учат использовать свободно доступные ресурсы, такие как PyGame Zero и Blender, для добавления анимаций, музыки, прокрутки фона, трехмерного пейзажа и других элементов в игры.
Если программирование напоминает волшебство, то веб-скрапинг — это очень сильное колдунство. Написав простую автоматизированную программу, можно отправлять запросы на веб-серверы, запрашивать с них данные, а затем анализировать их и извлекать необходимую информацию. Новое расширенное издание книги знакомит не только с веб-скрапингом, но и поможет собрать любого вида данные в современном Интернете.
В части I основное внимание уделено механике веб-скрапинга: как с помощью Python запрашивать информацию с веб-сервера, производить базовую обработку серверного отклика и организовать автоматизированное взаимодействие с сайтами. В части II исследованы более специфичные инструменты и приложения, которые пригодятся при любом сценарии веб-скрапинга.
Уже давно настала эра 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 или например умеете верстать, ну или просто у вас есть желание как-нибудь помочь с разработкой проекта, милости прошу в мою потрынделку.
В кратце - да, старый добрый, с блекджеком и шлюпками.
Привет Пикабу ! На связи команда облачной лоу-код платформы Нодуль, где вы можете строить самые гибкие автоматизации бизнес-процессов и создавать собственные приложения, не беспокоясь об инфраструктуре для их поддержания. Не важно, заняты вы фронтендом, бекендом или только начинаете осваивать JavaScript – в этой статье вас информация о бесплатном инструменте, который сэкономит вам кучу сил и времени.
Интерфейс платформы
Недавно в узле JavaScript, который может быть частью ваших разработок, появился ИИ ассистент, который готов закрывать весь объем работ, связанный с кодом:
написание
отладка ошибок
объяснение кода
дальнейшая модификация
Как воспользоваться ИИ ассистентом?
Ассистент находится внутри JavaScript узла. Общение происходит в диалоговом окне ‘AI Chat’. В свою очередь, нейронка Нодуля обладает следующими навыками:
Возможность видеть ваш сценарий и структуру узлов
Способность анализировать уже имеющийся код в ноде JavaScript, откуда ассистент и был вызван
Доступ к структуре данных по левую сторону от JS узла.
Сценарии использования
Прелесть AI ассистента на Нодуле в том, что он совершил семимильный шаг по пути реализации нашей миссии: теперь создание собственных микросервисов или построение сложных автоматизаций доступно даже тем, кто до этого в жизни с кодом не взаимодействовал! Рассмотрим 3 сценария использования, чтобы это доказать.
Сценарий #1 Работа с HTML
Рассмотрим сценарий, где нам нужна форма для сбора данных, которая будет доступна по webhook url. Такое решение может пригодиться в тысяче разных случаев. Сначала мы заполняем форму, а дальше информация передается куда вздумается: либо на другую ветку автоматизации на Нодуле для дальнейших преобразований, либо в иную систему. Как насчёт построить такой сценарий без написания и строчки кода?
форма для компоновки емейла для рассылки по базе данных пользователей
Шаг 1. Отправим ИИ ассистенту запрос
Привет! Добавь к моему коду скрипт для создания HTML кода для формы с названием ‘создать емейл’. В ней должны быть следующие поля для заполнения: ‘тема письма’, ‘обзор’, ‘заголовок’, ‘апдейты платформы’, ‘полезные материалы’, ‘другие новости’. Снизу расположи кнопку ‘отправить’. Оформи HTML красивым дизайном и форматированием. Верни результат в виде JSON объекта “html”
Шаг 2. Заменяем наш код на полученный результат.
Шаг 3. Запускаем один раз наш сценарий.
Так JavaScript модуль вернет нам “html” JSON объект для использования его в webhook response, где помимо этого мы меняем параметр типа контента на text/html для корректного отображения формы по ссылке из нашего входного webhook.
Теперь, открывая ваш webhook url, вам отобразиться форма для сбора данных.
Шаг 4. Отправка полученных данных.
Единственное, что остаётся, это сделать так, чтобы полученная через форму информация передавалась на webhook другого сценария для дальнейшей с ней работы. Естественно, писать сами мы ничего не будем:
Теперь наша форма становится полностью активной и готовой принимать входящую информацию. Можно передать полученные значения на сценарий, который сразу же зафиксирует их, к примеру, в Google таблицу.
Сценарий #2 Доступ к NPM пакетам
В мире насчитывается более миллиона NPM пакетов (готовые приложения для программистов, которое они добавляют в свой код), доступ к которым вам может обеспечить ИИ ассистент на Нодуле. Предположим, в вашем сценарии понадобился актуальный обменный курс USD/EUR для осуществления торговли в разных валютах и предоставления актуальной информации на сайте для клиентов. Нежели мучать себя поиском нужной API и чтением документации, озвучьте ваш запрос следующим образом:
Для реализации задачи ассистент использует NPM библиотеку axios для отправки HTTP-запроса GET к ExchangeRate-API, который предоставляет последние обменные курсы. Он получает обменный курс 1 доллара США к 1 Евро и возвращает его в формате JSON.
Корректный результат не всегда достигается с первого раза: иногда получаем ошибки, иногда пустые значения на выходе. Главное не забывать, что отладка ошибок – это тоже не наша забота. Чтобы все было исправлено, попросите ИИ добавить в код console.log для детализации серверного ответа. Далее, возвращаете любую ошибку в чат с ИИ – и новый код перед глазами!
Сценарий #3 Преобразование данных
Также вы можете забыть о головной боли при преобразовании данных, таких как, например, форматирование даты. Вам ведь знакомо, когда системы отдают дату в одном формате, например, "YYYY-MM-DD", но другая система должна их принять в другом – “DD MMMM YYYY”
Результат преобразования полученной через webhook даты формата ‘2023-07-11’:
Аналогичным образом ИИ может помочь вам преобразовывать строки, агрегировать данные, фильтровать, сортировать, трансформировать, соединять, разделять, удалять дубликаты, проводить статистический анализ и даже анализировать текст.
Альтернативный режим использования
В предыдущей части статьи мы обращались к ассистенту через диалоговое окно, но есть еще один вариант, который будет полезен для более предметной отладки какой-то части кода, или для просьбы объяснить, что в нем происходит:
Сообщество лоу-код энтузиастов
В настоящее время сообщество платформы Нодуль активно набирает обороты и специалисты в области low-code присоединяются к нашему чату, где команда проекта рада фидбеку и готова помочь со всеми вопросами!
Важная ремарка: платформа находиться в бета и предоставляет бесплатный доступ для всех желающих!
Решил изучить css и сделал адекватную страницу для игры, решил сделать как можно интереснее сайт и приятнее. Ссылку на сайт оставил, кому интересно глянуть можете посмотреть
Привет! С последней публикации прошел почти месяц и недавно состоялся публичный релиз доски со стикерами.
Если честно я не думал, что настолько долго всё затянется (почти 3 недели ушло на релиз), ныть не будем, всё есть в чендж логе, если вам интересно посмотреть на то, как реально двигался проект и куда уходит время помимо основного функционала, велком Change log
Стоит отметить, что львиную долю съели дополнительные подготовки такие как дашборд, соглашения, лимиты, про которые я вообще не собирался думать в процессе реализации mvp и считаю это абсолютно правильным, только когда стали доступен рабочий функционал, только когда уже релиз на носу, стоит потратить на это время.
Итак, что есть на текущий момент - сервис работает, стикеры создаются =) всё это доступно онлайн, с телефона не работает.
Лого нет =) не до него.
Львиная доля подготовки завершена, в идеале бы еще заиметь ci\cd так как уже начинает напрягать ручной деплой, и я концентрируюсь на функционале - а именно линиях, которыми можно будет соединять стикеры. Помимо линий в очереди стоят:
Привет, пикабушники! Хотел поделиться интересной идеей – почему бы нам не создать свою собственную социальную сеть, вдохновленную популярным (уже нет) пикабу? Уверен, здесь есть много талантливых людей, и мы можем совместно сделать нечто удивительное!
Я хочу, чтобы социальная сеть ориентировалась на мнение пользователей, в особенности, когда появляются инновации.
Меня зовут Миша, и я могу взять на себя разработку приложений для Android, могу также попытаться сделать веб и настольные (Windows, Linux, Mac) приложения ну и для IPhone, но в этом мало у меня знания и ещё меньше опыта. И я хотел бы попросить у вас помощь в этом
Тем не менее, даже если у вас, дорогие друзья, нет опыта разработки, но есть желание помочь и имеются интересные идеи, то можете тоже присоединиться!
Предлагаю использовать Telegram(Discord?) для общения, так как это более удобный и быстрый способ (мне известный)
Если вы заинтересованы, оставьте комментарий или напишите в группу. Давайте воплотим эту идею в реальность вместе!