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

Объектная парадигма и всё, что нужно о ней знать

В седьмом выпуске нашего открытого курса по JavaScript вместе с веб-разработчиком Василием Новиковым рассказываем про:

• способы создания примитивов с помощью конструкторных функций и простой нотации; 

• доступ к методам строкового объекта и использование метода valueOf для получения примитивных значений; 

• концепции области видимости: глобальную, функциональную, блочную и модульную;

• введение в блочную область видимости, добавленную в ECMAScript 2016, и её применение; 

• понимание лексической среды и замыканий, которые позволяют функциям сохранять доступ к переменным родительских функций.

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

Подписывайтесь на канал AvitoTech в Telegram, там мы рассказываем больше о профессиональном опыте наших инженеров, проектах и работе в Авито, а также анонсируем митапы и статьи.

@container запросы на основании стилей — давно забытое старое, да и сделано убого.

При взгляде на эту новую технологию вспоминается давно забывая спецификация для @extend, на которую все забили, кроме пары плагинов для PostCSS. Как и та спецификация, эта технология — чуть более сложный миксин или функция, копировать — вставить с условиями. Жаль только, что сделана настолько криво. Я конечно не ожидал от приемников создателей flex и grid чудес, но не настолько же.

1: Срабатывая неявно (достаточно иметь свойство с определённым значением), они делают код похожим на минное поле. Нужно либо помнить все свойства, что вызывают запросы, либо жёстко регулировать их применение (ещё один подводный камень который будет в разработке, очень удобно).

2: Какой мыслант гигысли додумался сделать это на основе контейнерных запросов? Ведь совершенно очевидно, что запрос с названием «container» будет принимать... стили.

Иначе выражаясь — переделывать.

Совет о Joomla: использование FileLayout для рендера элементов макета.

Этот механизм используется под капотом Joomla для рендера отображения почти всех элементов интерфейса как фронта, так и админки. Обычно переиспользуемые "запчасти" выносятся в отдельные файлы: кнопки, тулбары, меню, табы и т.д. Для унификации отображения каждого элемента нужны некие данные данные и/или параметры: например, заголовок таба, надпись или onclick для кнопки, CSS класс и т.д.

<?php
use Joomla\CMS\Layout\FileLayout;

/**
 * Method to instantiate the file-based layout.
 *
 * @param   string  $layoutId  Dot separated путь к файлу, включая имя файла относительно base path
 * @param   string  $basePath  Основной путь к папке с макетами
 * @param   mixed   $options   Данные, нужные для работы макета. Registry или массив
 *
 * @since   3.0
 */
 $layout = new FileLayout('layout_file_name', JPATH_SITE . '/path/to/your/layout', ['buttonName' => 'Button name']);
// Рендерим наш макет
echo $layout->render();

Внутрь файла (/path/to/your/layout/layout_file_name.php в нашем случае) передаются данные и параметры для рендера. Получить эти данные можно следующим образом.

<?php
// Это содержимое файла /path/to/your/layout/layout_file_name.php
// Переданные данные приходят в формате Registry. Можно указать значение по умолчанию
$buttonName = $this->options->get('buttonName', 'Default name if value is empty');
?>
<button class="btn btn-primary"><?php echo $buttonName;?></button>

Сделал небольшую страницу-шпаргалку для фронтенд-разработчиков.

Напоминалки и полезные функции для рутинных задач.

Буду рад предложениям, что еще полезного можно добавить)

Инструкция, как перенести сайты и домены с Wix в Рег.ру

Конструктор сайтов Wix прекращает работу в России с 12 сентября 2024 года. Сервис уже предупредил о блокировке аккаунтов российских пользователей и принадлежащих им сайтов. Рекомендуем уже в ближайшее время запросить в поддержке Wix копию сайта для переноса, чтобы продолжить работу и не потерять важные данные. 

Мы подготовили несколько инструкций, как быстро мигрировать с Wix:

1. С помощью функции «Импорт сайта» вы можете перенести сайт на партнерский «Конструктор сайтов». Специальный промокод SITE1R3MFORWIX на тариф «Бизнес» за 1 рубль на 3 месяца.

2. Импорт списка товаров можно произвести с помощью модуля WooCommerce в конструктор «Рег.сайт». Промокод RSREC00000H13L на 3 месяца бесплатного использования тарифа «Развитие». 

3. Если хочется большего, чем конструктор и готовые шаблоны, дарим промокод RegSolutions30 — скидка 30% на индивидуальное решение по созданию сайта в рамках Пакета услуг «Рег.решения».

Промокоды действуют до 10 декабря 2024 года. А если нужно перенести с Wix на Рег.ру не только сайт, но и домен, то сделать это можно по этой инструкции.

Вышел WT JoomShopping Bitrix24 PRO v.3.2.0, плагин интеграции с CRM Битрикс 24

Бесплатный плагин отправки заказов из интернет-магазина JoomShopping в CRM Битрикс24. Плагин передает лиды, сделки, создаёт контакты и повторные сделки. Обеспечивает смену статуса заказа в JoomShopping при изменении стадии сделки в Битрикс 24 (двухсторонняя интеграция).Плагин поддерживает работу с плагином обратной связи Radical Form, что позволяет его использовать не только вместе с JoomShopping.

 v.3.2.0 Что нового?

Прикрепление ссылок на файлы Radical Form. Если в ваших формах обратной связи на Radical Form используется поле для загрузки файлов, то теперь эти ссылки прикрепляются к комментарию лида. Для этого необходима версия Radical Form не ниже 3.2.0.

Настройки для Radical Form. Добавлены настройки данных, включаемых в комментарий к лиду/сделке для Radical Form.

Предобработка данных перед отправкой в Битрикс 24. Добавлена возможность обрабатывать данные непосредственно перед отправкой их в Битрикс 24 в собственных файлах в папке /plugins/system/wt_jshopping_b24_pro/src/Custompreprocess. Для использования этого функционала нужно обладать знаниями PHP и хотя бы минимальными знаниями Joomla API. Вы используете этот функционал на свой страх и риск! Подробнее на странице расширения.

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

Как автоматизировать рассылку транзакционных уведомлений

Настройка уведомлений в сервисе — задача, напрямую не связанная с бизнес‑логикой и написанием кода, к которой часто привлекаются разработчики. Для её решения нужно погрузиться в тонкости настройки DNS‑протоколов (DKIM, DMARC, SPF), протоколов TLS и передачи данных.

Разгрузить команду разработки от непрофильных задач помогает Yandex Cloud Notification Service (CNS) — новый сервис для управления SMS и пуш‑нотификациями. С его помощью можно отправлять уведомления пользователям Android и iOS через FCM, HMS и APNs, передав обновление всех протоколов на сторону провайдера. Сервис включает логирование и мониторинг, его HTTP API совместим с Amazon SNS API.

Возможности для автоматизации email-нотификаций представлены в Yandex Postbox — управляемом сервисе для отправки почтовых уведомлений. Их совместное использование c CNS в облачной экосистеме облегчает мультиканальную коммуникацию с клиентом: если пуш-сообщение не прочитано, можно продублировать его на почту, или же оптимизировать расходы на авторизацию. Вместе сервисы также обеспечивают:

• соответствие стандарту почтовых сообщений RFC5322,

• защищённые протоколы пересылки и наличие настроенных DNS‑записей,

• ролевую модель (RBAC) для безопасного доступа к сервисам на основе политик избирательного управления правами,

• интеграцию с другими облачными сервисами Yandex Cloud (событий, BI),

• возможности выгрузки событий и построения своей аналитики, в том числе с визуализацией в DataLens.

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

Сервис Яндекса умел отправлять письма и SMS двух видов:

• Проблемы с доступностью сайта.

• Сайт снова доступен.

В своём боте я сделал чуть больше проверок:

• Сайт недоступен/снова доступен.

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

• Истекает срок действия SSL-сертификата или домена.

• Изменился конечный адрес (если срабатывает переадресация).

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

Старался от души и сделал полезный инструмент для владельцев/администраторов сайтов.

Пока что всё бесплатно, пробуйте!

Telegram-бот "Мониторинг сайта"

Совет по Joomla: атрибут showon в XML-формах Joomla Form

При создании расширений Joomla порой набирается куча полей, которые загромождают экран. Их можно группировать в fieldset, а можно скрывать, если одно поле зависит от значения другого (как на видео). Разработчики используют в XML описаниях полей атрибут showon.Например, мы спрашиваем у пользователя является ли атрибут JoomShopping цветом и если да, то показываем поле для ввода цвета в HEX (как на видео).

Пример использования:

<field type="radio"
       name="is_color"
       label="Атрибут является цветом?"
       class="btn-group btn-group-yesno"
       description="Если да, то указываем код цвета в HEX или CSS-класс"
       default="0">
    <option value="0">JNO</option>
    <option value="1">JYES</option>
</field>
<field type="color"
       name="attr_color_code"
       label="Код цвета в HEX"
       showon="is_color:1"/>

Если поле is_color имеет значение "1", то поле с атрибутом showon="is_color:1" будет видно пользователю. Поддерживается логика И, ИЛИ, НЕ и несколько полей в условии. Работает даже для текстовых полей. Например, если не заполнен пароль для подключения к внешнему сервису - нет смысла показывать все остальные поля.

Почитать: Официальная документация Joomla по атрибуту showon.

Также использовать этот атрибут можно в пользовательских полях Joomla. Во вкладке "Параметры" поля укажите правило следующим образом field + ID:

field36:value1

где 36 - это id поля, от состояния которого зависит видимость данного.

Совет по Joomla: как изменить вывод полей в админке?

Сегодня в Joomla-чате встретился вопрос:

Можно ли как-то убрать поля "Описание" и "Без описания" у пользовательского поля "Медиа (media)"?

Это поле типа AccessibleMedia, которое создаётся плагином группы Fields. Поле этого типа создаётся в админке для материалов, контактов и любых других компонентов, поддерживающих. В нём всегда есть поле для заполнения атрибута alt и галочка "без описания".

В админке Joomla действуют ровно те же правила, что и во фронтенде: практически всё можно переопределить в папке html шаблона. Шаблон админки Joomla по умолчанию - Atum. Поле AccessibleMedia использует для рендера layout joomla.form.field.media.accessiblemedia. Это dot-separated путь в папке layouts в корне сайта. Значит мы берём файл layouts/joomla/form/field/media/accessiblemedia.php и копируем его в папку html шаблона админки: administrator/templates/atum/html/layouts/joomla/form/field/media/accessiblemedia.php. Всё. Дальше в скопированном файле делаем всё, что хотим, не боясь при обновлении Joomla потерять наши исправления. В данном случае можно вывести рендер одного поля вместо трёх.

BigInt и работа с числовыми значениями в JavaScript — в шестой серии открытого курса по JS

Это курс от инженеров AvitoTech — вместе с фронтендером Василием Новиковым разбираемся в базовых технологиях веб-разработки в JavaScript.

В новой серии изучаем, как проводить разные операции с помощью BigInt, на какие особенности нужно обращать внимание в полученных результатах, как определить безопасные целые числа и что делать, если числа оказались вне безопасного диапазона.

Приятного просмотра!

Совет по Joomla: использование методов плагинов в любом месте Joomla 4 / Joomla 5.

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

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

<?php
use Joomla\CMS\Factory;
use Joomla\CMS\Component\ComponentHelper;
use Joomla\CMS\Plugin\PluginHelper;

// Получим параметры компонента
$component_params = ComponentHelper::getParams('com_mycomponent');
// Получим имя плагина-провайдера
$plugin_name = $component_params->get('data_provider');
// Проверим, а включён ли плагин?
if(PluginHelper::isEnabled('system', $plugin_name))
{
     // Загрузим плагин
     $plugin_provider = Factory::getApplication()->bootPlugin($plugin_name, 'system');
     // Получим данные из него напрямую
     $external_data = $plugin_provider->getExternalData($any_id);
}

Обновление компонента SW JProjects v.2.0.0

Компонент позволяет создать свой собственный каталог расширений Joomla (и не только) и предоставляет возможность скачивания, в том числе с использованием лицензионных ключей. Для разработчиков Joomla есть возможность для каждого расширения указать сервер обновлений, changelog url для отображения изменений прямо в панелях администратора сайтов ваших клиентов.

v.2.0.0. Что нового?

Joomla 5 ready. Сделан большой рефакторинг. Компонент переписан на архитектуру расширений Joomla 5 и работает без плагина обратной совместимости.

Новый дизайн. Для большинства разделов обновлён дизайн. Вы также можете создать свои собственные макеты и выбрать их в настройках компонента.

Оглавление в документации. Теперь при чтении документации вам доступны все разделы, связанные с данным расширением.

Плагины для вставки проекта в контент. Добавлено 2 плагина: контент плагин и плагин кнопки редактора. Контент плагин позволяет превращать non-SEF ссылки вида index.php?option=com_swjprojects... в SEF. А также обрабатывает шорт-коды вида {swjprojects project_id=1 tmpl=your_tmpl_name}. Таким образом вы можете вставлять информацию о проектах везде, где работают плагины контента. Плагин кнопки редактора позволяет легко вставлять ссылки или шорт-коды с выбранным макетом.

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

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

GitHub расширения

Joomla Extensions Directory

Подключение к этому сайту не защищено...

Когда веб-браузер не может «договориться» с веб-сервером о способе шифрования данных, сайт не открывается, а на экран выдаются сообщения: «Подключение к этому сайту не защищено. Этот сайт не может обеспечить безопасное соединение», «Не удаётся открыть эту страницу. Подключение было сброшено» или даже «Не удаётся получить доступ к сайту. Превышено время ожидания ответа от сайта».

В последнее время причиной таких нестыковок стала активация алгоритма согласования криптографических ключей Kyber768 в веб-браузерах, построенных на платформе Chromium. После включения этого механизма изменяется запрос, отправляемый веб-браузером для установки защищённого соединения TLS 1.3, но ещё не все серверы «умеют» правильно его обрабатывать, что приводит к досадным отказам в обслуживании.

Если попасть на веб-сайт всё-таки необходимо, то можно временно отключить в веб-браузере механизм Kyber768. Например, в Microsoft Edge для этого надо:

1. Набрать в адресной строке текст:edge://flags/

2. Набрать в строке поиска текст:TLS 1.3 hybridized

3. Изменить значение параметра «TLS 1.3 hybridized Kyber support» с Default на Disabled

4. Перезапустить веб-браузер

В других веб-браузерах поиск настройки отличается только текстом в адресной строке: chrome://flags — для Google Chrome, vivaldi://flags — для Vivaldi, и т. д.

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

Как JIT в PHP 8 ускоряет парсинг CSV-файлов

С выходом PHP 8 появилась одна из самых мощных функций — JIT-компиляция. Она ускоряет выполнение PHP-скриптов, и это особенно полезно при парсинге больших CSV-файлов.

JIT компилирует opcode в машинный код, который выполняется напрямую на процессоре. В результате скомпилированный код используется в циклах, исключая повторную интерпретацию.

Как это помогает при обработке файла:

1. Ускорение циклов: Цикл обрабатывает строки файла быстрее благодаря компиляции его тела в машинный код.

2. Оптимизация работы со строками: Функции типа fgetcsv становятся эффективнее, что особенно важно при сложной обработке данных.

3. Снижение накладных расходов: JIT минимизирует затраты на вызов функций, делая их выполнение более быстрым.

Можно провести эксперимент: подготовить CSV-файл с 10 миллионами строк и запустить PHP-скрипт — с включенным JIT и без него. Получится, что включение JIT позволит сократить время на парсинг файла примерно на 33%.

Больше деталей и пример скрипта найдете в Телеграм-канале Саши Шутая, нашего руководителя отдела PHP.

Плюсы шаблона Saga для микросервисной архитектуры

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

Например, вы разработали систему для покупки билета на самолет. В нем три сервиса: оплата, уведомление, бронирование. Сервис успешно списал деньги, выслал уведомление о покупке, но возникла ошибка на этапе бронирования. Как откатить изменения, когда у нас три независимых сервиса? В монолитном приложении нас бы спасли транзакции ACID. А в случае с микросервисами — Saga. 

Принципы работы Saga:

1. Разбиение на шаги: Saga состоит из шагов (транзакций) в каждом микросервисе, таких как списание средств и бронирование.

2. Компенсирующие транзакции: если один шаг не удался, запускаются компенсирующие действия для отмены изменений предыдущих шагов.

3. Асинхронное выполнение: шаги могут выполняться асинхронно, а при ошибке запускаются компенсирующие транзакции.

Стратегии реализации:

• Оркестрация: один сервис или оркестратор управляет всем Saga, что упрощает реализацию, но создает единую точку отказа.

• Хореография: каждый микросервис сам управляет своими транзакциями и компенсирующими действиями, что делает систему более децентрализованной, но усложняет управление.

Читайте больше про веб-разработку в канале нашего руководителя отдела PHP Саши Шутая.

Почему PWA лучше нативных приложений?

Прогрессивные веб-приложения полюбили крупные мировые бренды: маркетплейсы (AliExpress), крупные сетевые компании (Starbucks). А в России к ним присмотрелись банки, когда столкнулись с ограничениями сторов. Неограниченный доступ клиентов к услугам стал мощным преимуществом веба.

А какие еще плюсы у PWA для бизнеса и пользователей?

Они дешевле. Стоимость разработки прогрессивного веб-приложения примерно на 30% меньше нативной разработки. Над ним работает одна команда, а не две.

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

Не ухудшают пользовательский опыт. Технология предполагает, что на рабочем столе размещается PWA со своей иконкой. Это выглядит абсолютно как приложение. Пользователь даже не подозревает, что это самом деле веб.

Не забивают память смартфона. PWA занимает на устройстве на порядок меньше места, чем нативное приложение. Сравните: PWA обычно “весят” единицы мегабайт, а мобильные приложения – десятки или даже сотни мегабайт.

Согласны, у PWA есть не только плюсы.

Большая статья обо всех нюансах PWA vs Native от СТО Clevertec уже готова: PWA vs Native: где приложения для iOS и Android больше никогда не пригодятся

Вышел Go 1.23!

Привет, Хабр!

В этом посте я напишу все основные изменения в новой версии Go:

1. Range-over func

   Эксперимент с range-over func теперь основательно является частью Go

   Подробнее про range-over func читать здесь: https://go.dev/wiki/RangefuncExperiment

2. Телеметрия

   Добавили Go Telemetry для отслеживания работы Go Toolchain. Сами разработчики Golang советуют включить эту опцию, так как она еженедельно будет анонимно отсылать информацию на https://telemetry.go.dev/ для улучшения работы Toolchain

   Подробнее про команду "go telemetry" читать здесь: https://pkg.go.dev/cmd/go#hdr-Manage_telemetry_data_and_settings

3. Таймер

   Изменения также коснулись и "time.Timer" и "time.Ticker"

   Во-первых - "Тикеры" и "Таймеры", не упоминающиеся программой - становятся допустимыми для сборки мусора, даже если не был вызван метод "Stop"

   Во-вторых - теперь каналы "Таймера" и "Тикера" не буферированы. Это объясняется тем, что для вызова методов Reset или Stop не будет устаревших подготовленных значений

4. Unique

   Добавлен новый пакет "unique": https://pkg.go.dev/unique

5. Iter

   Добавлен новый пакет "iter": https://pkg.go.dev/iter

6. Slices

   В пакет "slices" добавили несколько функций, которые работают с итераторами: https://go.dev/doc/go1.23#iterators

7. Maps

   В пакет "maps" тоже добавили несколько функций для работы с итераторами: https://go.dev/doc/go1.23#iterators

8. Structs

   Добавлен новый пакет "structs", который предоставляет новые типы для struct-полей: https://pkg.go.dev/structs

Это и еще многое читайте на официальном сайте Go!

Как создать веб-приложение на базе VK Mini Apps 📱

Написали пошаговую инструкцию, в которой:

• показываем, как создать интерфейс на основе готовых адаптивных VKUI‑компонентов;

• затрагиваем все основные библиотеки социальной сети;

• устанавливаем сертификаты и подключаем проксирующий сервер;

• разворачиваем в облаке и загружаем на платформу VK;

• добавляем приложение в каталог, чтобы его легко находили пользователи.

Особые навыки администрирования не понадобятся. Берем небольшие вычислительные мощности (1 CPU с 512 МБ RAM) и простой Docker-файл.

Начать изучение →

Go: маршрутизация без лишних пакетов

Привет, Хабр!

Недавно я открыл для себя “net/http” - роутер, который изначально есть в Go. В этом посте я опишу его удобство и, возможно, Вы - как и я, начнете его использовать, пусть он и не такой быстрый, как маршрутизаторы, основанные на fasthttp.

1. Не надо подключать сторонние пакеты

Достаточно только написать строку import “net/http”. Не надо подключать сторонние пакеты и тратить время на написание команд в консоли

2. Отличные возможности

В нем есть почти все то, что есть современных маршрутизаторах по типу Chi или GoFiber. Это очень удобно

3. Возможность расширения

Вы сами пишете многие функции. Значит, что не ограничены возможностями роутера

4. Контроль

Многое придётся делать самому ⇒ Вы будете знать, почему и как все происходит

Многое придётся делать своими руками, а в таком случае будете знать, почему и как все работает

Но, конечно, есть минусы:

1. Middleware

Придется писать все middleware собственными руками

2. Скорость

Он не такой быстрый, как роутеры, написанные с использованием fasthttp

3. Ошибки

Думаю, для многих это будет самым большим минусом. Нельзя возвращать ошибки из хэндлеров

Напишите в комментариях каким роутером пользуетесь Вы и почему именно им!