Веб-разработка *

Почалось: объявляем старт регулярных хакатонов по $mol!

Промочив горло световухой, Капитан Моль объявляет старт регулярных хакатонов для захвата новых берегов!

Как долго?

В наших месячных странствиях, ваш борт вооружен всем инструментарием экосистемы $mol'a:

• готовые компонуемые кирпичики логики

• децентрализованной базой данных

• возможностью в пару строк переиспользовать компоненты других приложений на $mol'e

Капитан будет рад презентации решений в нашем порту. О нем мы, мольки, расписывали здесь.

Требования

На финишной прямой, каждый фрегат будет допущен к оценке при наличии идеи и её базовой реализации

Основные положения кодекса описаны здесь.

Тема

Игры/тулинг - это может быть прототип игры, либо же инструментарий для их создания.

Например: редактор тайловых карт, генератор уровней и умений..

Призовой фонд

Наш пиратский островок растет. И чтобы оставаться на плову, мы начнем с малого.

В сокровищах мы наскребли 7 тысяч рублей.

В нашей каюте Капитан Моль выделил следующие койки:

• 1 место - 3000р.

• 2 место - 2000р.

• 3 место - 1000р.

Внебортовые селедки мирового океана также проголосуют за понравившийся борт.

• Приз селедочных симпатий - 1000р.

Даты

• Старт 27.10.2023

• Финиш 27.11.2023

Где мы?

Будем рады оказать помощь в ваших начинаниях - не стесняйтесь напрашиваться чат в телеграме и дискорде.

Продолжается перевод книги Vue.js 3 Design Patterns and Best Practices

На данный момент переведено 6 глав:

• Глава 1, Фреймворк Vue 3

• Глава 2, Принципы и шаблоны проектирования программного обеспечения

• Глава 3, Создание рабочего проекта

• Глава 4, Композиция пользовательского интерфейса с помощью компонентов

• Глава 5, Одностраничные приложения

• Глава 6, Прогрессивные веб-приложения

WT Content Image gallery v.1.2.0

Пакет плагинов галереи изображений и видео для вставки в материалы и модули Joomla, а так же везде, где работают плагины группы content. Плагин работает по шорткодам {gallery}...{/gallery} и {gallery tmpl=tmplName}...{/gallery}, где tmpl - макет tmplName.php в plugins/content/wtcontentimagegallery/tmpl.

Что нового?
➕ Атрибуты alt и title из файла labels.txt.

Если Вы вставляете путь к директории с изображениями, то Вы можете указать для каждого изображения атрибуты alt и title в файле labels.txt, который следует положить в директорию рядом с изображениями. В конце строки символ | помещать не нужно.

Содержимое файла должно содержать информацию в следующем виде: имя_файла.webp | атрибут alt | атрибут title. Для каждого файла информация содержится в отдельной строке. Title для изображений можно не указывать, тогда строка будет вида image_2.webp|alt for image_2.

?‍? Joomla 5 ready
Успешно проверена работа расширения на Joomla 5.

Страница расширения GitHub расширения

Вероятная ошибка при обновлении Joomla 4.4.0 через Joomla updater.

На днях вышла новая ветка Joomla 5.0.0, а также версия Joomla 4.4.0.

Некоторые пользователи Joomla столкнулись с проблемами, приводящими к неработающей странице Joomla 4.4.0 и невозможности входа в систему.

После релиза разработчики забыли обновить данные на сервере обновлений и при попытке обновить Joomla ветки 4.3.x на 4.4.0, происходило копирование файлов от Joomla 5 при сохранении базы 4.0. Это приводило к сбою установки без возможности входа в систему. Позже данные на сервере обновлений были обновлены.

В России ограничен доступ к серверу обновлений Joomla (облако Amazon S3), поэтому обычно пакеты обновлений выкачиваются с Github или иными способами.

Но если вы из другой страны и успели поймать этот баг, то вот документация как устранить проблему.

Обновление библиотеки WT Amo CRM для Joomla v.1.2.0

Небольшая нативная PHP библиотека для создания интеграций Joomla и Amo CRM. Для разработчиков.

Что нового?

• Joomla 5 ready. Работа библиотеки успешно протестирована с Joomla 5.

• Удаление старого refresh token. В параметры плагина добавлена кнопка для удаления старого refresh-токен из базы данных.

• Языковые константы. Параметры плагина переделаны на использование языковых констант Joomla. Добавлена английская локализация.

Страница расширения GitHub

Telegram-канал Joomla сообщества

NorrCompetition 2.0.2 – компонент голосований за фото и видео на Joomla 5

Вышла новая версия NorrCompetition версии 2.0.2 – популярного компонента для организации конкурсов и голосований на платформе Joomla.
Ключевой особенностью данной версии является совместимость с Joomla 5 и PHP 8.2. Начиная с этой версии, NorrCompetition можно установить на Joomla 5 без плагина обратной совместимости. Разработчики делают все возможное, чтобы предоставлять качественные услуги и постоянно работают над улучшением продуктов.

Кроме этого, версия идет со следующими улучшениями:

• Masonry режим отображения участников (в виде плитки). Демо можно посмотреть здесь;

• Опция для отключения Open Graph разметки, генерируемой компонентом (это может быть полезно, если на вашем сайте есть другой системный плагин, который генерирует Open Graph, и вам нужно избегать дублирования тегов).

Впервые NorrCompetition был выпущен в 2015 году и с тех пор продукт прошел путь до функционального решения с множеством настроек. Вы можете создавать фото, видео и простые конкурсы.

Подробнее о продукте:

Страница продукта на сайте разработчика
Продукт в российском каталоге SovMart
Как создать голосование за фото и видео на Joomla (урок)

Анимация в Spline 3D

Анимация в Spline предельно упрощена. Настолько, что там нет привычного таймлайна с ключевыми кадрами.

Вместо ключевых кадров здесь используются Состояния (States). Состояния обрабатываются отдельно для каждого объекта. Можно настраивать типы взаимодействий, их длительность, графики и задержки перед стартом.

По типам взаимодействий нужно будет рассказать отдельно. Я использовал для этого ролика Transition.

В Joomla Extensions Directory появился тег совместимости с Joomla 5.

Joomla-разработчики, проверившие совместимость своих расширений с Joomla 5 могут поставить галочку ?

На скриншоте видно, что галочки 2. В Joomla 5 есть плагин обратной совместимости (группа Behaviour, Behaviour - Backward Compatibility), который подключает алиасы старых классов ядра. Таким образом расширения, использующие старое Joomla API могут работать и на Joomla 5 (если одновременно и поддерживают PHP 8.1+). Если же плагин отключён, то можно считать, что Вы прыгнули в будущее и находитесь почти в Joomla 6.

Неожиданно для себя я начал преподавать веб-разработку в государственном вузе. Курс не профильный, для работников медиа. Но большая часть из них уйдет работать в электронные СМИ или даже оснует собственные, поэтому им будет полезно получить общее представление о том, как всё это устроено.

Часов по плану довольно много. За сентябрь я успел дать лабу по сетевой адресации, 2 лабы по HTML, лабу по CSS. На очереди лаба по микроразметке, лаба JS, лабы по различным конструкторам сайтов.

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

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

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

WT Content Image gallery v.1.1.0
Пакет плагинов галереи изображений для вставки в материалы и модули Joomla, а так же везде, где работают плагины группы content. Плагин работает по шорткодам {gallery}...{/gallery} и {gallery tmpl=tmplName}...{/gallery}, где tmpl - макет tmplName.php в plugins/content/wtcontentimagegallery/tmpl.
Что нового?
✔️ Добавлена поддержка видео файлов HTML5. Добавлена поддержка видео файлов HTML5 - mp4, webm, ogv. Все способы добавления файлов в галерею определяют видео файлы. Для тега video согласно спецификации HTML5 нужно указывать атрибут poster - картинку, которая будет показана в качестве заставки до начала воспроизведения видео. Файл poster-изображения для видео должен иметь такое же название, как и сам файл видео и находиться в той же папке. Тогда плагин найдёт и будет использовать его автоматически.

⚠️ Изменения в макетах вывода. В макетах вывода добавились условия по типу элемента: фото или видео. Посмотрите код в стандартных макетах и внесите изменения в свои собственные по образу и подобию.

✔️ Новый макет вывода - Masonry. Для плагина добавлен новый макет вывода - masonry. Для работы этого макета нужно подключить скрипт вручную или с помощью плагина веб-ассета WT Masonry. Данный макет выведет "стену" из фото и видео аналогично социальной сети Pinterest. Для видео по умолчанию добавлено автовоспроизведение. Вы можете скопировать данный макет, переименовать его и внести необходимые Вам изменения в код.

Страница расширения

Кто ты? Маг, воин, продавец кожи или хозяин волшебного паба? Заходи к нам гость, на Alfa Frontend Meetup #2, окунись в атмосферу магической деревушки. Вокруг бурлящие котлы, деревянные щиты, свитки, волшебные карты и кристаллы. Заходи к нам на архитектурный митап о frontend-разработке и послушай наши истории! Расскажем, на стыке каких компетенций находится архитектура — DevOps, Backend, Infrastructure. Поговорим про улучшение Developer Experience с технической стороны, подходах к разработке в frontend, инфраструктуре проекта и др.

В программе:

• Олег Сидоркин, техлид разработки направления автоматизации кредитования розничных продуктов в Альфа-Банке, и его доклад «Как достроить вавилонскую башню. О роли архитектора и системном подходе».

• Иван Артамонов, руководитель группы разработки в Яндексе. Доклад — «Как мы ускоряли time-to-market» о том, как отдел разработки рос, и вместе с тем

• Евгений Мальченко, старший разработчик продуктов в QIWI. Доклад «DevX микрофронтендов»

Приходи к нам 11 октября на Alfa Frontend Meetup #2 и окунись в мир Dungeons & Dragons с бурлящими котлами и бочками с яствами, лотереей на критическую удачу и мерч от Альфа-Банка.

Вышла новая версия JED Checker 2.4.3

Компонент позволяет проверить на возможные ошибки и соответствие требованиям Joomla Extensions Directory расширения, которые Joomla-разработчики хотят опубликовать в официальном маркетплейсе расширений Joomla.

Что нового?

• удалена поддержка устаревшей Joomla 3.7

• много исправлений для поддержки Joomla 4.4 и Joomla 5.0.

Узнать подробнее и скачать эту версию можно:

• на странице GitHub releases

• Страница JED

Также welcome в телеграм чат русскоязычного Joomla-сообщества

Видео на канале Joomla NXT от TechJoomla: Зависимые пользовательские поля Joomla: как использовать

При создании расширений Joomla у разработчиков есть возможность скрывать или показывать поля в зависимости от значений других полей (conditional fields). Это реализуется в XML-файле формы расширения (модуля, плагина или компонента) с помощью атрибута showon="тут условия" (ссылка на документацию для разработчиков расширений).

Однако, начиная с версии Joomla 4.3 появилась возможность указать атрибут showon для пользовательских полей из интерфейса CMS. Теперь в Joomla можно создавать более гибкие интерфейсы форм без погружения в код. Синтаксис для создания условных полей может показаться немного сложным и это видео поможет вам лучше понять, как все это работает.

Спикер: Olivier Buisard (SimplifyYourWeb). Видео на английском языке.

Также welcome в телеграм чат русскоязычного Joomla-сообщества

Препарируем Feature Slices Design и находим родовые травмы
https://youtu.be/tNx05dfFHRU

Стандартизированная декомпозиция, но..

• Распыление каждой бизнес-фичи по всему проекту

• Нечёткие сомнительные правила

• Тонны бойерплейта на синглтонах

• Ограниченная масштабируемость и гибкость

Поблагодарить, Обсудить.

Быстро что-то показывает, но...

• Тупит на простых действиях из-за дозагрузки

• Полурабочее состояние при нестабильном соединении

• Отзывчивость сильно зависит от загруженности сети и сервера

• Состояние гонки реакций на действия пользователя

• Полностью ломается в оффлайне

Митап для тех, кто только перешел или думает перейти на Go

Вечером 25 мая в Петербурге пройдет встреча для разработчиков всех уровней и тимлидов, чьи команды уже меняют или планируют использовать Golang в коммерческой разаботке. В программе три доклада:

• To Go or not to Go — обзор ключевых парадигм языка.

• Функции, методы и интерфейсы в Gо: особенности и идиомы — посмотрим, как писать функции без побочных эффектов, и когда это не работает.

• Эффективно используем Go в команде — какие средства языка помогут сделать продукт тестируемым, процесс ревью плодотворным, а будущий рефакторинг — спокойным.

  Участие бесплатное. Для очного присутствия необходимо зарегистрироваться и доехать до м. "Площадь Ленина".

  Чтобы посмотреть трансляцию или запись, поставьте напоминалку под видео на Youtube.

Форма обратной связи для вебсайтов на статичных хостингах

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

В то же время есть удобный способ обойтись без сторонних сервисов и остаться только на статике - отправка сообщения обратной формы в Телеграм через его API

1. Создается Телеграм-бот и частный канал, в котором бот будет администратором (в Гугле много инструкций)

2. Отправляется сообщение в этот канал через следующий вызов:

const response = await fetch(
    "https://api.telegram.org/bot502515erterterterb9Ke5_Xv8cJRRt9sjv_ZfLyHPkQ224rE/sendMessage",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json;charset=utf-8",
      },
      body: JSON.stringify({
        chat_id: "333537552",
        text,
      }),
    }
  );

chat_id - id канала, как получить - тоже в Гугле

P.S. Как замечено в комментариях, данный метод подходит для некритичных сообщений с сайта в Телеграм канал

Рабочее место фулстека

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

Есть еще хороший вариант распараллелить рабочие процессы. Берется такая вот коробочка (помещается на ладони). За 13 тысяч рублей можно взять неплохой процессор, 16Гб оперативки и 256 SSD

1. На нее с основной машины переносится база данных, вебсервер и другие [микро]сервисы. Это уже даст облегчение

2. Затем на нее ставится репозиторий исходного кода. С основной машины подсоединение идет в VS Code через SSH Remote connection. В итоге и бэк и фронт (Node.js) запускаются на твоем минисервере, и твой ноут больше не греется и не пытается взлететь с помощью бешено вращающихся вентиляторов

3. Опционально: исходники на рабочем ноуте, но подмаунтены на сервер.

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

   Работать стало на порядок производительней (MySQL и вебсервера крутятся на Linux быстрей и надёжней, да и Nodе.js), комфортней и тише. Кулер в мини-пк включается только на пару секунд при загрузке ОС.

• Бэкендеры представляют себе фронтенд как тривиальный мапинг ответа сервера на HTML.

• Фронтендеры представляют себе бэкенд как тривиальный мапинг запросов клиента на SQL.

Если всё так тривиально, то откуда ж берётся вся сложность?!?

Кажется я знаю, как решить все проблемы программирования: надо бэкендеров посадить пилить фронтенд, а фронтендеров - бэкенд.