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

Регулярно на Хабре выходят статьи с рекомендацией использовать moment.js. В комментариях обязательно начинают советовать какой-нибудь dayjs или js-joda, но не потому, что они чем-то сильно лучше, а потому, что первый задепрекейчен авторами.. в пользу luxon.

Что за мания такая у JS-еров использовать раздутые тормозные библиотеки? Есть же быстрый и миниатюрный $mol_time с гораздо более удобным и функциональным API, почти полностью поддерживающим ISO8601, в отличие от всех остальных библиотек.

Что мотивирует людей довольствоваться не самым лучшим решением в индустрии? Я, наверно, странный, но я не могу этого понять.

Sketch-Programming: Минималистичная парадигма для проектирования кода (LLM transpiler)

(https://github.com/DmitryOlkhovoi/vscode-sketch-programming)

Удалось за вечер написать расширение под VS Code, которое на onSave траспайлит псевдокод (так называемый sketch код) и сохраняет.
Пока это POC и не полностью автоматизированный, но в качестве теста уже интересно

// @sketch:reactComponent

Component Count

props add = 0
state count = 0

<div onclick="count += add"> Add {add} </div>
<div>
    Current count: {count}
</div>

Превращает в

import React, { useState } from 'react';

interface Props {
    add?: number;
}

const CountComponent: React.FC<Props> = ({ add = 0 }) => {
    const [count, setCount] = useState<number>(0);

    const handleClick = () => {
        setCount((prev: number) => prev + add);
    };

    return (
        <div>
            <div onClick={handleClick}>Add {add}</div>
            <div>Current count: {count}</div>
        </div>
    );
};

export default CountComponent;

Следуя загруженным в векторное хранилище правилам (OpenAI)
https://github.com/DmitryOlkhovoi/Sketch-programming/blob/main/ReactComponentAskedModelToAddMoreRulesItself.md

К понедельнику постараюсь написать статью и более детально раскрыть тему

Представлен оналайн‑ресурс под названием «Утраченное искусство логарифмов», в котором исследуется полезность, история и повсеместность этого чудесного изобретения, логарифмы, включая то, что они, такое; с некоторыми демонстрациями их основного исторического применения в плоской и сферической тригонометрии.

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

Как не надо использовать Assert, если реализуете подход Design by Contract

Использовать Assert вместо if err != nil { return err}

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

Выполнять вычисления при вызове Assert

Еще одна распространенная и трудно выявляемая ошибка — это выполнение вычислений и присваивание значений переменным прямо при вызове Assert, которые могут быть упразднены при оптимизации кода компилятором:

•  e.g. Assert(i++ > 0, “осторожно, не факт, что в релизе i увеличится”),

•  Assert(call_to_f1(), “осторожно, не факт, что call_to_f1() будет вызвана в релизе”).

Удалять Assert, несмотря на то, что это часть описания контракта

Непонимание, что Assert — это реализация контракта, может привести к тому, что разработчик, незнакомый с DbC, захочет просто удалить проверку. Однако нужно всегда помнить, что срабатывание Assert говорит о нарушении контракта одной из сторон. То есть, если срабатывает Assert, надо прежде всего найти баг и пофиксить. А уж если контракт действительно должен быть изменен, Assert подскажет, где находятся участки кода, на которые нужно обратить внимание.

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

В реализации пакета Go 1.23 fmt-функция Printf всегда возвращает err = nil. И практически все игнорируют возвращающееся значение ошибки, тогда как могли бы проверять постусловие assertion.Assert (err == nil). Так, рано или поздно в последующих версиях можно научить код реагировать на err, отличный от nil.

Как правильно применять assertions, если реализуете подход Design by Contract для улучшения производительности кода в продакшене? Читайте в статье →

Собственные макеты вывода для пользовательских полей Joomla

Мы привыкли использовать механизм переопределения макетов Joomla: скопируй нужный тебе файл макета в папку html шаблона и твори там что хочешь. Это в полной мере относится и к пользовательским полям Joomla.

Joomla ищет макеты рендера всех пользовательских полей в следующем порядке:

• Есть ли файл templates/[template name]/html/layouts/[component name]/fields/render.php , переопределяющий макет вывода полей для конкретного компонента? Да - используем его.

• Нет? Есть ли файл components/[component name]/layouts/fields/render.php в папке компонента? Да - используем его.

• Нет? Есть ли файл templates/[template name]/html/layouts/com_fields/fields/render.php, переопределяющий вывод полей для com_fields? Да - используем его.

• Нет? Используем файл components/com_fields/layouts/fields/render.php Это механизм поиска переопределений файлов макетов.

Вчера столкнулся с тем, что если поле вставлено в текст материала с помощью шорт-кода (кнопкой редактора) вида {field 25}, то переопределения не сработали. Поэтому стал вспоминать как сделать свой макет для поля Joomla.

Файл components/com_fields/layouts/field/render.php копируем в templates/YOUR_TEMPLATE/html/layouts/com_fields/field/etapy-raboty-nad-proektom.php. Обратите внимание, что мы файл переименовали, чтобы в настройках поля видеть его в выпадающем списке. После этого всё заработало как надо.

Благо, переводил уже раньше статью Как происходит рендер пользовательских полей в Joomla?. Потом, порывшись по своему же переводу увидел, что эта особенность работы Joomla в статье уже в ней описана 😂. А также напомнил себе о возможности указывать макет поля прямо в шорт-коде, через запятую: {field 25,etapy-raboty-nad-proektom}.

Стоит ли идти во фронтенд сейчас? Честный ответ разработчика

Артем несколько лет в сфере (вот его история). Сейчас он разработчик в крупном финтех-проекте. Вот его мысли:

— Да, фронтенд перенасыщен. Фреймворков много, технологии постоянно меняются. Все говорят об одном, но пишут по-разному. Но именно это и держит в тонусе — приходится регулярно обновлять знания. Сожалею ли я о своем выборе? Нет. Всегда любил погружаться в математические задачи, а фронтенд затягивает. Можно сутки биться над багом, ненавидеть его, плеваться… А потом решить — и словить кайф. В такие моменты код полностью поглощает, заставляя забыть о сне и еде.

Стоит ли идти во фронтенд сейчас?

— Никогда не поздно. Да, путь у каждого свой, и рынок сейчас нестабилен. Но при глубоком погружении за год можно набрать нужные скиллы и попасть на коммерческий проект.

🔥 Открыт набор на новый марафон!

Сейчас в Clevertec проходит марафон для начинающих фронтенд‑разработчиков. Это возможность погрузиться в профессию, получить реальный опыт и, возможно, стать частью команды. Участие бесплатное. Успей зарегистрироваться!

После выхода Firefox 136 оказалось, что разработчики значительно испортили переработали стартовую страницу (about:newtab). В комментарии к новости о релизе я уже поделился своим решением, но по мере того, как подмечал новые детали, решил завести под это дело отдельный пост и время от времени допиливать его. Коротко о том, что мы исправляем: сетку с шорткатами сделали слишком узкой, слишком высокой, а при наведении курсора подпись «прыгает».

Прежде всего, для этой задачи не помогут аддоны типа Stylus, потому что по соображениям безопасности им запрещён доступ к стилизации внутренних страниц. Нам понадобится папка chrome в профиле FF. Под Windows это \AppData\Roaming\Mozilla\Firefox\Profiles\profile\chrome. Если вы хотите подправить что-то в интерфейсе (стилизовать тулбар, например), создайте там файл с именем userChrome.css. Например, так можно удалить недавно появившуюся кнопку для показа всех вкладок:

#alltabs-button
{
display: none !important;
}

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

Сетка стала узкой и высокой, потому что кто-то из дизайнеров поменял местами промежуток по горизонтали (20px → 0) и вертикали (0 → 20px). Будем надеяться, что хоть сознательно.

Вернём всё как было (ну, или можете установить свои значения):

ul.top-sites-list
{
column-gap: 20px !important;
row-gap: 0 !important;
}

Длинные заголовки при наведении мыши прыгают потому, что включается (при наведении, да!) режим переноса по словам. Пожалуйста, никогда так не делайте в пользовательских интерфейсах. Я не страдаю эпилепсией, но даже меня затошнило. Что уж говорить о более сенситивных личностях.

Исправляем:

.top-sites-list .top-site-outer .title .title-label
{
white-space: nowrap !important;
-webkit-line-clamp: none !important;
}

Ну и, наконец, шорткат можно сделать чуть побольше. Размеры его элементов рассчитываются на основе переменной, которая имеет значение 32px. Если добавить 4 пикселя, шорткат будет выглядеть, КМК, поприятнее:

:root
{
--size-item-large: 36px !important;
}

P.S. Пользуясь случаем, хочу попросить рекомендаций: чем вы пользуетесь в качестве главной страницы? Чтобы там были шорткаты (с полноценными preview, которые зачем-то убрала Мозилла), погода, калькулятор и что-нибудь ещё? Думаю, не запилить ли свой аддон со всем этим блэкджеком.

$mol_hack: finality

Вот и подошёл к концу первый хакатон по $mol, где нужно было переписать не хитрое научное оупенсорс приложение (Github, Online) на самый инновационный веб-фреймворк. Так что встречайте финалистов:

🥁🥁🥁 🥁🥁🥁

1. ₽150K получает PavelZubkov (PR, Online). Он сделал не только наиболее полное и качественное решение, но и не большой PR в $mol.

2. ₽75K получает reatailret (PR, Online). Он прислал достойное оригинальное решение в виде PWA приложения, но оно всё же не дотягивает до лидера по многим факторам: от неработающей авторизации, до расположения файлов не по фен-шую.

3. ₽50K получает Lyumih (PR, Online). Его решение было самым ранним, но, как ни печально, так и осталось недоработанным. Даже не смотря на часть кода взятую у PavelZubkov.

✨✨✨ ✨✨✨

Решение dukinm (PR) существенно основано на некорректно расположенных файлах от PavelZubkov, а правки носят в основном косметический характер. Однако, он единственный, кто написал хоть немного тестов и комментариев!

Сводная таблица с анализом решений

Спасибо всем участникам за хорошую битву. Те, кто ещё не умеет в $mol, нервно грызут ногти из-за упущенной возможности.

Запускаем бесплатный онлайн-марафон по фронтенд-разработке. Будет как в «Рокки» 

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

Как записаться?

Заполни анкету по ссылке в профиле и скинь другу. Заявки принимаем до 26 марта.

Что будет?

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

Это уже четвертый марафон — после каждого наша команда фронтенд-разработчиков растет.

Кого ждём?

Начинающих веб-разработчиков (JS, React), которые уже изучали теорию и хотят прокачаться на практике в условиях, максимально близких к реальному проекту. Главное — желание кодить. Подойдут:

- студенты профильных вузов

- выпускники курсов

- самоучки

Важное условие: приглашаем участников из Беларуси и России.

Что дальше?

После 26 марта отправим на почту инструкции и первые задания. Старт марафона 1 апреля (это не шутка). До связи, Рокки. 

Как мы сокращали количество запросов по фичам в API

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

Одна из основных сущностей в коде — это BotUser. То есть пользователь, который появился в приложении (зашёл хотя бы раз), имеет имя и Telegram ID

За ~полгода проекта у нас добавилось много фич, привязанных к пользователю. Практически все сопоставляются 1 к 1 по ключу User ID. Например, квизы, бонусные дни, купленные страницы, купленный карточки апгрейдов, тариф и т.д.

Раньше для каждой новой фичи мы добавляли новый запрос в API с фронтенда. И вот мы заметили, что на каждый заход пользователя стало уходить >10 запросов в API ⚠️.

Примерно вот так:

GET /users/user
// Response
{
  "tgUsername": ...,
  "tgId": ...,
  ...
}

GET /users/features/quizzes/completed
// Response
{
  "completedQuizzes": ...,
}
   
GET /users/features/pages/bought
// Response
{
  "boughtPages": ...,
}
   
GET /users/features/rates/rate
// Response
{
  "userRate": ...,
}

При этом, на каждый запрос мы проверяли авторизацию. В Telegram это делается с помощью хеша от Telegram + проверка подписи токеном бота

Следовательно, на каждый запрос мы делали JOIN пользователя, брали бота (сущность Bot) из кэша и мэтчили подпись (+ логгировали). Это лишняя нагрузка

Сейчас подсобрали все фичи в один запрос. Теперь, на каждый заход пользователя получается только один GET /app/account/data, который возвращает данные пользователя вместе с данными фичей:

GET /app/account/data

// Response
{
  ...
  "user": ...,
  "completedQuizzes": ...,
  "boughtPages": ...,
  "currentRate": ...,
  ...
}

За одно перепроверили, что:

• не подгружаем связанные сущности, где не нужно (one-to-one, one-to-many);

• если подгружаем сущности, всегда делаем это одним JOIN'ом (а не бегаем по 2-3 раза в БД, как любит делать Hibernate);

• берём общие часто запрашиваемые данные из кэшей.

Это позволило снизить нагрузку на сервер и БД. К посту прикрепляю график загрузки части наших серверов по CPU до и после оптимизации.

---

Если вам понравился пост или оказался полезным, поставьте, пожалуйста лайк ❤️. Это мотивирует делиться опытом из разработки. И, как полагается, у меня есть Telegram-канал, в котором я рассказываю про разработку, развитие SaaS-сервисов и управление IT проектами.

В Joomla 4 и Joomla 5 появилась концепция Web Assets и WebAssetManager, с помощью которого можно управлять подключениями css, js файлов, подключением. Все css и js файлы включаются в общий реестр ассетов, затем выстраивается граф зависимостей и в итоге на генерируемую страницу подключается только то что нужно на данной странице.

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

Одним из таких плагинов веб-ассетов является WT JSwiper.js. Плагин добавляет в Joomla Web Assets Registry ассет популярного скрипта swiper.js, который потом легко можно использовать в коде:

use Joomla\CMS\Factory;

$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
// Локальный файл
$wa->useScript('swiper-bundle')->useStyle('swiper-bundle'); 
// Подключение из CDN
$wa->usePreset('swiper-bundle-remote'); 

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

👍 Стало: теперь в макетах расширений мы просто пишем $wa->useStyle('my.style'); и за необходимостью подключения нужного ассета (в данном случае CSS с иконочным шрифтом) следит Web Asset Manager. Если мы снимем один модуль с публикации, то нужный ассет подключит другой модуль.

Поскольку плагин - расширение Joomla - его можно обновлять обычным для Joomla способом и всегда иметь самую свежую версию любимого js-скрипта или веб-ассета на всех своих сайтах и сайтах ваших клиентов.

В этой версии, кроме обновления собственно ассета до версии 11.2.5 к нему добавился пока что частичный перевод документации Swiper на русский язык.

• Скачать WT JSwiper.js для Joomla

• Документация Swiper.js на русском

Также будет полезно:

• Статья на JPath.ru Как правильно подключать JavaScript и CSS в Joomla 4

• Статья на Хабре: Использование WebAssetsManager Joomla 4 (Joomla 5) и добавление собственных пресетов с помощью плагина

• Чат русскоязычного сообщества Joomla

Представлен проект Scroll Buddy — анимация на полосе прокрутки.

«Вместо скучной полосы прокрутки я подумал, что было бы забавно иметь анимированную фигурку, которая ходит вверх и вниз по краю страницы, когда вы прокручиваете. Это первый прототип, который я сделал. Собираюсь сделать скейтбордиста, скалолаза или белку следующим», — пояснил авто проекта.

В начале года я опубликовал статью про гибридное кэширование.

Прошло уже больше месяца, а стабильная версия nuget-пакета Microsoft.Extensions.Caching.Hybrid так и не вышла.

Я не делаю прогнозы по датам выхода, но хочу порассуждать на тему того, чего ожидаю от стабильной версии. И чего — точно нет.

Начну с последнего — каких изменений я не ожидаю

Изменение состава и сигнатур текущих методов. Если следить за выходом новых версий пакета Microsoft.Extensions.Caching.Hybrid, можно заметить, что методы объекта HybridCache не меняются уже давно. Из этого можно сделать вывод, что в стабильной версии мы увидим тоже самое, что наблюдаем сейчас.

Какие изменения я ожидаю увидеть

Удаление объекта из кэша по тегам. На момент написания статьи метод RemoveByTagAsync вообще не имел реализации. Сейчас в версии 9.2.0-preview.1.25105.6 он реализован и вполне себе работает, так что в релизную версию явно войдёт.

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

  await cache.GetOrCreateAsync(
    "someKey",
    async ct => await SomeFuncAsync("someKey", ct),
    options,
    ["tag1", "tag2", "tag3"],
    cancellationToken);

  await cache.GetOrCreateAsync(
    "someKey",
    async ct => await SomeFuncAsync("someKey", ct),
    options,
    ["tag1", "tag4"],
    cancellationToken);

Представим, что метод GetOrCreateAsync вызывается несколько раз с одним и тем же ключом, но разным набором тегов. Теги будут присвоены только при первом попадании объекта в кэш, то есть в момент его извлечения из хранилища. Когда проектируем приложение, не всегда заранее известно, в какой из вызовов GetOrCreateAsync объект будет извлекаться из кэша, а в какой — из хранилища. Оно и логично — метод специально создали так, чтобы мы не задумывались об этом. Соответственно, сейчас при вызове этого метода мы не можем определить, какой из наборов тегов ляжет в кэш.

И тут у меня два варианта развития событий: или логика поменяется и теги будут перезаписываться всегда — независимо от того, берётся объект из кэша или хранилища. Или при написании программы нужно будет следить, не передаём ли мы разные наборы тегов.

$mol_hack - mobile science app hackathon

Наш давний друг Женя Блохин, учёный-химик из Питера, попросил нас помочь с простым мобильным оупенсорс клиентом для научной БД. Он сделал ставку на фреймворк $mol, чтобы поддержать отечественные технологии и показать их научному сообществу во всём мире.

Чтобы добиться самого высокого качества, мы проводим онлайн хакатон с призовым фондом в ₽300K, который будет справедливо поделён между всеми участниками. Задача очень простая: нужно переписать не хитрое научное оупенсорс приложение с VanillaJS на $mol - TypeScript фреймворк мирового уровня.

Подробности будут на этом канале 23 февраля, когда хакатон начнётся. У вас будет неделя до 2 марта, чтобы неспеша вылизать своё решение. А ещё через неделю мы распределим места и объявим победителя, чей форк будет влит обратно в основной репозиторий. Да, у нас всё будет в открытую на платформе GitHub, чтобы каждый мог убедиться в справедливости судейства.

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

Разница между масштабирование и зумом в CSS. Зум работает так же, как и масштабное преобразование, но в отличие от масштабирования, он влияет на макет страницы. Другими словами, макет страницы пересчитывается с учётом нового размера масштабируемого элемента.

Судьба плагина обратной совместимости в Joomla

Некоторых разработчиков и вебмастеров интересует останется ли плагин обратной совместимости в Joomla 6. Этот плагин был создан для того, чтобы сделать переход от версии к версии более гладким и бесшовным.
Подробнее почитать о роли плагина можно в официальной документации на manual.joomla.org: Compatibility Plugin.

Устаревший код МОЖЕТ быть перемещен в плагин совместимости. Плагин обеспечивает более плавное обновление между основными версиями. Он содержит код из предыдущей версии, который может сломать сайт после обновления, поскольку расширение использует устаревший код. Расширение полностью совместимо только тогда, когда оно работает без проблем с отключенным плагином совместимости.

От версии к версии часть кода ядра Joomla помечается как устаревшая, а затем, спустя некоторое время удаляется из основного ядра и МОЖЕТ быть перемещена в плагин обратной совместимости. Эта концепция появилась при переходе от Joomla 4 к Joomla 5.

Важным уточнением является то, что для новой мажорной версии (joomla 3, joomla 4, joomla 5 и т.д.) плагин содержит устаревший код предыдущей версии. То есть для Joomla 5 это код из Joomla 4. Для Joomla 6 - код из Joomla 5.

Таким образом расширения, использующие методы и функции ядра Joomla и всё ещё работающие даже с плагином обратной совместимости на Joomla 5 в Joomla 6 скорее всего работать уже не будут. В Joomla 6 из плагина обратной совместимости будет удален код, поддерживающий обратную совместимость с Joomla 4. Таким образом стабильно работать в Joomla 6 будет то, что сейчас стабильно работает на Joomla 5 с отключённым плагином обратной совместимости.

Чат русскоязычного Joomla-сообщества

Joomla-разработчикам: обращение к методам модели в HtmlView напрямую

Когда-то, давным-давно в одной далёкой галактике кто-то решил, что было бы неплохой идеей ввести в Joomla косвенный доступ к методам модели (MVC) для получения данных, добавив метод AbstractView::get(). Этот метод извлекает модель и затем запускает get(). Простыми словами, когда мы во View (файл HtmlView нашего компонента) видим конструкцию $this->item = $this->get('Item') это означает обращение к методу getItem() модели для текущего View.

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

Новый способ выглядит так:

// Файл HtmlView компонента

    public function display($tpl = null)
    {
        $model = $this->getModel();
        $this->items = $model->getItems();

        parent::display($tpl);
    }

Старый подход (то есть метод get() во View) будет удалён в Joomla 7. Памятуя о релизном цикле Joomla, это означает, что:

1. осенью 2025г выйдет Joomla 6.

2. 2 года она будет основной веткой. Joomla 5 будет в режиме поддержки

3. через 2 года, в 2027 выйдет Joomla 7, в которой будет удалён этот метод.

4. но Joomla 6 будет ещё 2 года в режиме тех.поддержки и в ней (до 2029 года) этот метод останется.

Таким образом у разработчиков есть от 2,5 до 4,5 лет (на момент написания этого поста) на то, чтобы сделать этот рефакторинг.

Пруф [5.3] Deprecate AbstractView::get() #44162

Чат русскоязычного Joomla-сообщества

Расширенные алерты в Amvera Cloud

Сегодня мы выпускаем функционал расширенных алертов.

Теперь каждый наш пользователь сможет получать уведомления в специальный бот, если:

1. Проект ушел в ошибку.

2. Произошло превышение ОЗУ или ЦПУ выше заданного порога

3. Сработала Liveness или Readiness проба.

4. Произошла ошибка сборки или запуска проекта.

5. Встретилась заданная фраза в логе.

Amvera Cloud — это облако для простого деплоя приложений через git push. Встроенный CI/CD, бэкапы и мониторинг позволяют развернуть проект тремя командами в IDE и не думать о настойке инфраструктуры. Amvera проще, чем использование VPS или Kubernetes-кластера.

А ты такой холодный: представим технологии Rust-дебаггеров в виде айсберга

На верхушке айсберга видим технологии DWARF, PTRACE и ELF, а внизу — набор более редких технологий. 

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

PTRACE — системный вызов, который позволяет одному процессу (tracer) управлять и исследовать другой процесс (tracee).  

ELF (Executable and Linkable Format) — формат исполняемых двоичных файлов. 

DWARF (Debugging With Arbitrary Record Formats) — стандарт, описывающий формат .debug_xxx секций в ELF.

Что касается «подводных» технологий, упомянутых на картинке: применяя закон Парето, можно смело сказать что 80% знаний необходимы, чтобы реализовать только 20% функционала (и не самого важного). Но если хотите узнать о них больше, напишите в комментариях.

Подробнее о PTRACE, ELF и DWARF, а также о функциях, которые они реализуют в отладчиках на Rust, читайте в статье.

Совет по Joomla: показ уведомлений Joomla.renderMessages.

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

use Joomla\CMS\Factory;

$html = 'Message';
Factory::getApplication()->enqueueMessage($html, 'warning');

Чаще всего в качестве сообщения используются языковые константы, чтобы пользователи могли получать сообщения на своём языке:

use Joomla\CMS\Factory;
use Joomla\CMS\Language\Text;

Factory::getApplication()->enqueueMessage(Text::_('SOME_LANG_CONSTANT'), 'info');

Рендер сообщений Joomla во фронтенде.

Здесь нам потребуется файл подключённые файлы ядра core.js и messages.js. Немного выдержки из кода:

/**
* Рендер сообщений, отправленных через  JSON
* Используется некоторыми javascript, в частности validate.js
*
* @param   {object}  messages JavaScript объект, содержащий сообщения для рендера.
* Пример:
*    const messages = {
*        "message": ["Это будет зелёное сообщение", "И это тоже"],
*        "error": ["Это будет красное сообщение", "И это тоже"],
*        "info": ["Это будет синее сообщение", "И это тоже"],
*        "notice": ["Какое-то информационное сообщение", "И это тоже"],
*        "warning": ["Оранжевое сообщение", "И это тоже"],
*        "my_custom_type": ["Такое же как инфо-сообщение", "И это тоже"]
*    };
* @param  {string} selector CSS-селектор контейнера для рендера сообщений
* @param  {bool}   keepOld  Удалить предыдущие сообщения? Да, если true
* @param  {int}    timeout  Таймаут исчезновения сообщения в миллисекундах
* @return  void  Метод ничего не возвращает
*/

Вот как это выглядит на практике:

Joomla.renderMessages({
    message: [Joomla.Text._('COM_SWJPROJECTS_USER_KEYS_KEY_SUCCESSFULLY_COPYED')]
});

Теперь мы видим, что в качестве сообщения мы и в Javascript можем использовать языковые константы. Для этого мы используем метод Joomla.Text._() (по аналогии с Text::_() в PHP). Но Javascript откуда-то должен получить значения этих языковых констант. И для этого в php коде нашей страницы мы должны позаботиться о нём и добавить нужные для js языковые константы с помощью метода Text::script().

use Joomla\CMS\Language\Text;

Text::script('SOME_LANG_CONSTANT_SUCCESS');
Text::script('SOME_LANG_CONSTANT_FAIL');

Таким образом я смогу получить в js доступ к значениям языковых констант SOME_LANG_CONSTANT_SUCCESS и SOME_LANG_CONSTANT_FAIL.

Источник

База по JavaScript

Если вы только начинаете (или хотите начать) изучать JavaScript, то для вас есть подборка обучающих материалов. Все они доступны бесплатно. Регистрироваться, оставлять контактные данные или оформлять подписку тоже не нужно.

• Как использовать типы данных в JavaScript? Переменные, ввод и вывод информации — изучаем основы, пишем первую программу и разбираемся с базовыми операциями;

• Функции в JavaScript: учимся писать структурированные программы — осваиваем функции и возвращение значений из них, а заодно разбираемся с return и областью видимости в JavaScript;

• Как создавать HTML-элементы в JavaScript — рассказываем, как работать с командами для создания элементов и стилями на странице.

Если вы новичок, после прочтения материалов можете попробовать решить задачу про JavaScript-функцию (чур, не подглядывать в решение).

Новые фичи JS, о которых стоит знать

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

JS развивается каждый год, но многие продолжают писать код, как привыкли, не используя свежие возможности языка. Я стараюсь бороться с этим и внедрять новшества в свою повседневную работу и недавно пошел посмотреть что там нового подвезли в ECMAScript 2024 (ES15). А там оказалось довольно много интересного.

Например, новые методы массивов. Раньше методы вроде .sort() и .reverse() изменяли исходный массив, что могло привести к неожиданным багам.

const arr = [4,1,6,5]
const sortedArr = arr.sort()
console.log(sortedArr) //[1,4,5,6]
console.log(arr) // [1,4,5,6] оригинал также изменился

В ECMAScript2024 (ES15) были добавлены новые методы, которые позволяют работать с копиями массивов не трогая оригинал без дополнительного кода:

const nums = [1, 2, 3];
const reversedNums = nums.toReversed();
console.log(reversedNums); // [3, 2, 1]
console.log(nums); // [1, 2, 3] оригинал не изменился

Точно так же работают новые методы .toSorted() и .toSpliced(). Они делают код более предсказуемым и чистым.

Также, я с огромным восхищением прочитал про Temporal - новый объект для работы с датами и временем. Например, меня всегда поражало , что в Date месяцы индексируются с 0 (январь – это 0), а вот дни месяца начинаются с 1. Temporal фиксит эти проблемы и теперь можно:
✅ Создавать объекты только с датой или только со временем
✅ Удобно складывать и вычитать даты
✅ Работать с часовыми поясами без боли
В общем делать все, для чего мы раньше тащили в проекты всякие moment и day.js.

К огромному сожалению Temporal пока не поддерживается в браузерах, но когда выйдет – работа с датами в JS станет в разы удобнее.

Если вам интересны такие обновления подписывайтесь на мой Telegram-канал!

🔗 t.me/+qbK9ZPuAocI2MWUy

Там делюсь продакшн-опытом,новостями из мира веб-разработки и разбираю реальные кейсы. Подписывайтесь! 🚀

Событие Pizza, Bugs & Fun приближается - 22 февраля 2025 года

Уже несколько лет в мире Joomla проводятся мероприятия "Pizza, Bugs & Fun" (#PBF), где каждый может посвятить несколько часов своего мозгового времени тому, чтобы наша любимая CMS стала ближе к идеалу.

Видео из этого поста рассказывает об организационных вопросах, которые пригодятся для участия в PBF:

• как создать аккаунт в Mattermost (чат международного Joomla-сообщества)

• как создать аккаунт в Joomla! Documentation

• как написать статью в Joomla! Documentation

• как создать аккаунт на GitHub (у разработчиков обычно уже он есть)

• как настроить патч тестер

• как протестировать патч

• как получить вознаграждение

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

Каждый помогает тем, что он умеет:

• кто-то пишет недостающую документацию,

• кто-то пишет код,

• кто-то тестирует как исправлены ошибки или сделан новый функционал.

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

На момент написания данного поста в репозитории Joomla 752 открытых Issue (как правило это баги) и 223 Pull request (PR, исправление багов и новый функционал). Все PR обязательно тестируются минимум двумя участниками сообщества, дабы в конечный код движка не проскочила ошибка.

Если каждый из участников только нашего сообщества сделает даже одно тестирование, то, боюсь, PR и Issue на всех не хватит 😀

Смотреть видео

Сайт

Joomla по-русски: чат сообщества

Совет по Joomla: программный рендер модулей

Модули порой удобно использовать в местах, которые в Joomla не всегда предназначены для этого 😀. Например, в переопределениях макета. Из материала делаем посадочную страницу: часть инфы находится в самом материале, часть - в полях, а часть удобно вывести модулем. При этом модуль этот должен находиться между телом материала и данными из пользовательских полей.

Для реализации берём в руки ModuleHelper и приступаем.

<?php
use \Joomla\CMS\Helper\ModuleHelper;

$modules = ModuleHelper::getModules('landing-masonry');
if(!empty($modules))
{
    foreach ($modules as $module)
    {
        // рендерим всё, что нашли в позиции landing-masonry
        echo ModuleHelper::renderModule($module);
    }
}

А что если посложнее?

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

Вид карточки товара JoomShopping. Все тексты, кроме описания товара - одинаковые во всех товарах. Описание товара уникальное для каждого товара.

Но! В этот же аккордеон нужно было добавить и описание товара JoomShopping. Поэтому я сделал с помощью своего модуля WT Quick links следующее.

1. Создал модуль типа WT Quick Links, в котором в список элементов занёс все нужные тексты.

2. Не стал назначать модуль какой-либо позиции. В шаблоне JoomShopping захардкодил id модуля. Хотя лучше было бы назначить модуль в некой уникальной позиции, которая встречалась бы только в нужном нам месте на сайте.

3. Программным способом в данные модуля добавил нужные данные из JoomShopping так, как мне нужно (в начало списка - описание товара).

4. Отрендерил модуль с помощью ModuleHelper в product_default.php шаблона JoomShopping.

<?php
use Joomla\CMS\Helper\ModuleHelper;
use Joomla\Registry\Registry;

// Модуль id 136 - Доставка, оплата и гарантии в карточку товара + ОПИСАНИЕ ТОВАРА JoomShopping
$module = ModuleHelper::getModuleById('136');

$module_params = new Registry($module->params);
// Формируем новые параметры модуля перед рендером. 
$new_module_params = [];
$i = 1;

// Помещаем описание товара в самое начало

if (!empty($this->product->description)){
    $new_module_params['fields']['fields0'] =  (object) [
        'item_header' => Text::_('JSHOP_DESCRIPTION'),
        'item_text'   => $this->product->description
    ];
}
// Переименовываем все остальные ключи массива элементов из модуля
foreach ($module_params->get('fields') as $key => $value)
{
    $new_module_params['fields']['fields' . $i] = $value;
    $i++;
}
$new_module_params = new Registry($new_module_params);
// Соединяем старые и новые параметры модуля.
$module_params->merge($new_module_params);

$module->params = $module_params->toString();

// Всё готово! Рендерим модуль.
echo ModuleHelper::renderModule($module);

Вот писал я про то, как установил на TV-приставку Linux и подключил к ТВ как к монитору.
Ну и "чтобы зря не пропадало" - а дай-ка посмотрю один известный сейчас сериал, на сайте, посвященном этому самому сериалу.
(потому что смотреть можно только в браузере, а браузер на Андроиде на этом сайте жутко тормозит)

Но и тут всё начинает сразу же тормозить, процессор под 100%, память забита, всё еле шевелится. Зато можно удобно посмотреть в Инспекторе, что за дела происходят.

А там зоопарк! Во-первых, куча скриптов тянет рекламу с каких-то левых адресов, куча следилок типа webvisor, всё это в фоне работает и грузит систему.
И вот такое:

То есть, получается, оно еще и Ютуб смотрит фоном, то ли показатели накручивает, то ли видео копирует.
Причем вроде как под моим аккаунтом - я же в Гугле залогинен?

Хорошо, что всё было завернуто через xray, с его настройками: стоило забанить всю эту рекламно-следильную мудрость и даже ютуб - и волшебным образом тормоза исчезли.
Сайт превратился в простой одностраничник, а видео стало просто показывать как видео.

Я конечно понимаю что сам смысл этого сайта в том чтобы делать деньги на показах и накрутках, но совесть надо иметь? Не на 100% же процентов грузить, вплоть до невозможности работы?

⚡️ ПОЧЕМУ JAVA ТАКАЯ БЫСТРАЯ?

Есть много языков, которые не компилируется в машинный код, а исполняются на виртуальной машине или интерпритаторе - C#, Python, JavaScript и так далее, но самый быстрый из них Java.

😮 Почему?
В начале 2000-х на рынке JVM существовало несколько ключевых игроков:

• Sun Microsystems HotSpot

• IBM J9

• Oracle JRockit

• Excelsior JET

Но в декабре 2006 года, с выходом Java 6, HotSpot вырвалась вперед, разгромив конкурентов, благодаря JIT-компиляции.

🤔 Как работает JIT?
Just In Time компиляция — это механизм, который компилирует часто исполняющиеся участки кода в машинный код во время выполнения программы, что значительно ее ускоряет.

Рассмотрим метод:

public void exampleMethod(int value) {
    if (value > 0) {
        // Исполняется часто
        System.out.println("Positive value");
    } else {
        // Исполняется редко
        System.out.println("Non-positive value");
    }
}

1. При первом вызове exampleMethod JVM интерпретирует байт-код

2. Если exampleMethod вызывается многократно с положительными значениями, JIT-компилятор определяет это как "горячую точку"

3. После достижения порога вызовов этой точки с условием value > 0 компилируется машинный код для метода

4. Если позже будет вызван метод с отрицательным значением (что не ожидалось), произойдет uncommon trap, и управление передастся интерпретатору для обработки этого случая

☕️ То есть, JVM в рантайме определяет путь, который чаще всего проходит программа, и именно этот путь компилируется нативно и максимально оптимизируется.

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

👨‍💻 Джуниор

Joomla Web Services Collection For Postman

Разработчикам мобильных и WEB-приложений (и не только) весьма и весьма пригодится готовая коллекция для Postman. В коллекцию добавлены endpoint для REST API Joomla, с параметрами и примерами запросов.

Коллекция составлена трудами французского Joomla-разработчика Alexandre J-S William ELISÉ.

Смотреть коллекцию

Чат русскоязычного Joomla-сообщества

Разработчик под ником jslegend представил онлайн версию игры Duck Hunt в HTML5, написанную с помощью библиотеки JavaScript KAPLAY - Duck Hunter.

Игра доступна в браузерах на ПК, управление мышкой.

Нам нужно больше capacity: как растет вместимость в слайсах на Go

Чтобы выяснить, во сколько раз Go увеличивает внутренний массив элементов в слайсах, проведем небольшой тест. Добавим один элемент к уже заполненным слайсам:

На графике видно, что в районе 200 элементов увеличенный слайс вмещает уже 400 элементов, а в районе 800 — 1200, то есть вместимость выросла сначала в два раза, потом — в полтора. 

В коде рантайма можно найти простую формулу: если в слайсе capacity элементов было меньше 256, то вместимость увеличится в два раза. Если больше 256, то на четверть. Таким образом мы пытаемся экономить память.

Существует забавная константа для вычисления вместимости: три четвертых от 256. Разработчики на Go посчитали, что так происходит более плавный переход от фактора 2x к фактору 1.25

Почему на графике образовались «ступеньки» вместо привычной кривой и что еще нужно знать о слайсах Go-разработчику — читайте в статье →

Совет по Joomla: метод debug() для отладки лейаутов

В Joomla есть понятие layout. Это кусочек вёрстки, который можно многажды использовать в любом месте сайта: как в панели администратора, так и во фронтенде. Можно рассматривать лейауты как оторванные от контекста элементы дизайна. Находятся они в папке layouts в корне сайта. Также, в случае с модулями они могут находиться в папке tmpl модуля. А в случае с плагинами - в tmpl плагина.

Их можно переопределять в шаблонах, в чём и заключается одна из главных фишек Joomla. Лейауты чаще всего рендерятся с помощью классов LayoutHelper или напрямую FileLayout. Писал о них ранее тут и тут.

А вот как увидеть какой именно файл переопределения используется? Сколько их вообще есть и по каким путям идёт поиск макетов? Для этого есть метод debug() (и у LayoutHelper и у FileLayout).

<?php
/**
* Method to render a layout with debug info
*
* @param   string  $layoutFile   Dot separated путь к файлу относитеьлно basePath
* @param   mixed   $displayData  Объект с данными для рендера
* @param   string  $basePath     Base path, где будет поиск файлов лейаутов
* @param   mixed   $options      Дополнительные опции для FileLayout
*
* @return  string
*
* @since   3.5
*/
public static function debug($layoutFile, $displayData = null, $basePath = '', $options = null)
{
 // Так проще показать параметры метода.
}

То есть мы в можем проверить следующим образом:

<?php
/**
 * Получаем параметры баннера
 */
$wt_custom_menu_item_banner = $menu->getParams()->get('wt_custom_menu_item_banner');

echo \Joomla\CMS\Layout\LayoutHelper::debug(
        ($wt_custom_menu_item_banner?->pluginlayout ?? 'default'),
        ['wt_custom_menu_item_banner' => $wt_custom_menu_item_banner],
        JPATH_SITE.'/plugins/system/wt_custom_menu_item_banner/tmpl'
    );

И увидим результат как на скриншоте в начале поста.

Чат русскоязычного Joomla-сообщества.

Как вы знаете, китайская LLM deepseek-R1 работает не хуже chatGPT-o1, но стоит в 20 раз дешевле. А знаете ли вы, что сама модель вообще бесплатная, её можно скачать себе и запустить на своём железе?

Мне стало интересно, как это делать, можно ли как-то запустить прямо на макбуке, и оказалось, что это делается буквально в два клика (конечно, полная модель на ноут не влезет, но дистиллированная - вполне).

Возможно, все уже это умеют, но расскажу для тех, кто, как и я, был в танке, так что держите инструкцию.

Для этого надо установить ollama, например так:

brew install ollama

и запустить

ollama serve

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

Дальше скачать и запустить модель. Это делается тупо одной командой.

ollama run deepseek-r1:8b

8b - это количество параметров (8 миллиардов). Другие варианты:
1.5b
7b
8b
14b
32b
70b
671b

Но понятно, что 671b на макбук не влезет, понадобилось бы больше 400 гигов видеопамяти. Зато 1.5b можно и на мобилу запихнуть.

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

Но это не очень юзер-френдли, поэтому дополнительно можно запусть web-интерфейс, например в докере одной командой

docker run -d -p 3000:8080 --add-host=host.docker.internal:host-gateway -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:main

После чего на http://localhost:3000/ видна веб-морда, похожая на chatgpt.

Прикол китайской модели еще в том, что там показан процесс думания. Его можно посмотреть прямо в этом веб-интерфейсе.

Понятно, что это скорее побаловаться - на ноуте влезает только дистиллированная модель и то нещадно тормозит (макбук M1 pro). Для полноценной работы нужно нормальное железо или облако.

По-моему, это очень круто: если вложиться в железо, можно очень быстро и просто поднять у себя самый топовый чат и не посылать больше свои секреты ни в OpenAI, ни в Китай.

Приглашаю вас подписаться на мой канал в telegram

Смотрите второй выпуск подкаста с Димой Бабиным, автором канала SIBERIA CAN CODE 🔥

В нем Дима поделился с командой Cloud.ru своим опытом работы в IТ и экспериментом с резюме на GitHub.

Также в выпуске:

• как использование нейросетей может улучшить код и почему оно не может заменить ревью;

• проблемы и перспективы JavaScript, Typescript и React;

• что ждет frontend-разработку и PWA;

• почему атмосфера в компании играет ключевую роль в удержании сотрудников.

👉 Посмотреть подкаст также можно на YouTube и RUTUBE.

Что написать на Go, если «вывод суммы на экран» вы уже переросли

На этот вопрос нашел ответ Игорь Горбунов. Он разрабатывает платформу базовой станции в YADRO и второй год изучает Go. Когда стандартные задачи ему надоели, он придумал челлендж: построить приложение, похожее на утилиту ping в UNIX-подобных системах.

Первым делом разработчик набросал список требования к приложению, чтобы опираться на него в процессе работы:

• Возможность запросов Echo-Request по протоколам ICMP и ICMPv6 и поддержка IPv4 и IPv6 со стороны ping.

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

• Возможность менять из командной строки размер отправляемых запросов и их количество.

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

Получилось ли у Игоря реализовать настоящий ping и какую проблему ему так и не удалось решить — читайте в статье.

E-mail шаблоны Joomla 5: добавление и просмотр своих переменных

В Joomla 5 появились настраиваемые email-шаблоны, как системные, так и сторонних компонентов. Их нельзя (пока что) добавить самостоятельно, они добавляются расширениями при установке. Но их можно отредактировать в Система - Шаблоны - Шаблоны писем. В настройках шаблонов писем (кнопка настроек компонента в верхнем правом углу) мы выбираем формат писем текст или HTML. Тогда становятся доступны настройки макетов шаблонов писем Joomla. Эти глобальные параметры можно переопределить в каждом конкретном email-шаблоне. Таким образом для каждого из email-шаблонов можно указать свою вёрстку и настройки логотипа.
Это, конечно, требует отдельной подробной статьи...

Для разработчиков: как добавить свои переменные для e-mail шаблонов Joomla?

Полезны окажутся 2 триггера для плагинов: onMailBeforeTagsRendering и onMailBeforeRendering.

onMailBeforeRendering - триггер, который позволяет добавлять свои шорт-коды для строковой замены в плагине. Отдать туда надо массив вида [ variable_name => variable_value ]. Из админки свои переменные нужно добавлять уже с фигурными скобками: {variable_name} заменится на variable_value. Аргументом $event плагина является экземпляр класса BeforeRenderingMailTemplateEvent, в котором есть кроме прочих 2 метода: getTemplate() (получение объекта мейлера, куда можно добавлять свои данные) и getTemplateId() (получение id шаблона письма вида com_users.registration.admin.new_notification), по которому мы определяем нужный ли это для нас email-шаблон или нет. Аналогично контексту в контент-плагинах.

Также полезное свойство класса для передачи данных из плагина в лейаут письма для рендера - $layoutTemplateData. Это ассоциативный массив.

// Получаем текущий мейлер 
$mailTemplate = $event->getTemplate();
$data = [
   'variable_name' => 'variable_value'
];
// с Joomla 4 для всех типов писем. 2-й аргумент - plain - текстовый формат письма 
$mailTemplate->addTemplateData($data, false);
// с Joomla 5.2 - для HTML-писем
$mailTemplate->addLayoutTemplateData($data);

// пример из ядра Joomla
// Add additional data to the layout template
$this->addLayoutTemplateData([
    'siteName' => $app->get('sitename'),
    'lang'     => substr($this->language, 0, 2),
]);

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

Чат Joomla-сообщества в Telegram

Мой личный Telegram-канал

Быль.
Во времена древние приходит к нам "по знакомству" один важный клиент и просит помочь - заказал он типа сайт, а сайт получился какой-то плохой. Вот оценить, почему? Ведь в офисе у вебстудии всё было очень хорошо, а тут деньги заплатили, на хостинг выложили - а там г... какое-то.

Идем смотреть. Сайт - куча красивых картинок, десяток страниц, на каком-то "PHP хостинге" - и тормозит, потому что картинки - на весь экран, в формате BMP.

А времена - когда аналоговый модем 57600 кбит/с - роскошь. И вот тянуть эти мегабайтные BMP по модему...

Обьяснили, "мягко говоря, неоптимально сделан сайт", вроде понял.
Спрашиваем: а как так получилось, вы когда смотрели - что видели?
Да, говорит, в вебстудии на компьютере запустили, всё очень красиво, быстро, чётко было...

Зачем люди ссорится будут, пошли по знакомству проблему утрясать.
А там действительно, "вебстудия" в одно лицо, стоит навороченный комп, сидит молодой человек дизайнерской наружности и ваяет красивое. Фотошоп, Корел, вот это всё.
Прикручивает к какой-то CMS, всё - картинками, большими, красивыми, и рамки вокруг текста картинками (кто помнит как это делалось до CSS border).
И вот прямо как в Windows сохраняет - в BMP, так и прикручивает. БезУчетаРегистра.TXT имен файлов.

- У меня - говорит - всё работает! Вот, видите, быстро и красиво!
- а у клиента на сайте?
- а это у него хостинг там кривой, на дурацком юниксе, это не моя проблема!
- но почему картинки в BMP??
- а что, работает же? В PSD не работает, в jpg мылится.
- про то, что File.TXT и file.txt - разные файлы, знаешь?
- у меня - одно и то же, а у него там хостинг кривой!

В общем, "я художник, я так вижу!". Человек освоил Фотошоп, Ворд, и стал вебмастером.
Еле убедили, что в его же интересах изучить еще jpeg и доработать сайт, а то клиент нервный, еще из этих, малиновых пиджаков, может обидеться и предьявить за развод.
Ну вроде как доработал потом.

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

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

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

(это все к вопросу о пуристах, требующих быстрые легковесные программы и сайты на HTML)

Установка "вечной" темы на хабре

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

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

Сперва я подумал: "Наверняка это защита от отслеживания в Firefox. Попробую добавить хабр в исключения". Не сработало. Но все равно казалось что проблема кроется где-то рядом. У меня куча всяких расширений, блокировщиков и прочей ерунды. Что-то из этого могло удалять какую-нибудь сессию, куку или что-то еще, о чем я и не слышал. Решил проверить на хроме и edge: на одном тоже куча расширений, на втором — ни одного. Проблема оказалась и там.

Подумал: "Когда тёмная тема только появилась, там был анонс о ней в духе беты, мол кликни и получи эксклюзивную темную тему, которой еще нет на хабре". Я тогда кликнул, не понравилось, вернулся на светлую. Может быть дело в этом, и я привязал свой акк на веки-вечные к темной теме?

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

Шли дни, менялись сезоны, пока в какой-то момент мне не потребовалось ковыряться в куках браузера по не связанной с данной проблемой теме. Одновременно с этим опять слетела тема и во мне снова что-то дернулось, потому что ну бесит же. Решил спросить у GPT без всякой надежды на решение очень уж специфичной проблемы. Он не сказал ничего нового в общем-то, но предложил проверить в браузере срок действия кук на хабре и мол если дело в этом, то тут уже ничего не сделать, срок валидности кук определяет сам сайт. Средствами фф проверить срок действия кук у меня не вышло, но я ведь как раз ставил расширение "Cookie-Editor", позволяющее читать и редактировать значения кук. Открыл я его на хабре и нашел куку "theme", на вкладке "advanced" которой была вожделенная дата истечения куки, совпадающая тем самым днем.

Я сменил тему еще раз, и посмотрел как изменилась кука — число перепрыгнуло на неделю вперед. Т.е. срок действия настройки темы на хабре: 1 неделя. После этого тема вновь устанавливается на "системную", а в системе у меня стоит темная тема. Я решил провести эксперимент, и отредактировал эту дату, поменяв 2024 на 2025 (не меняя число и день недели, очевидно день недели будет неверным, но главное, что дата заведомо далеко впереди). Идёт уже третья неделя, тема не слетает, а я счастлив. Поставил expiration date на 3000-ый год.
Не знаю, есть ли еще кто с такой проблемой, если есть — надеюсь им поможет этот пост.
Но вообще, возможно для этой куки хабру стоит отмерить какой-то больший срок жизни.

UPD. Ув. @Mirnin подсказал в комментах где в Firefox можно найти срок годности куки:
Инструменты разработчика → Хранилище → Куки. Там же его можно и отредактировать, без всяких расширений.

🌐 HTTP-метод QUERY: новый метод для поисковых запросов

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

Можно использовать GET и передавать всё в URL:

GET /feed?q=foo&limit=10&sort=-published&filters[]=status:active&filters[]=type:post

Но URL дефакто имеет ограничения по длине, а кодирование сложных параметров становится громоздким.

Второй вариант — использовать POST и передавать параметры в теле запроса. Однако POST не предназначен для таких операций: он не кэшируется и не является идемпотентным, что усложняет работу с CDN и повторную отправку запросов.

Именно поэтому появился новый метод QUERY. Он позволяет отправлять поисковые параметры в теле запроса:

QUERY /feed

Content-Type: application/json
{
  "q": "foo",
  "limit": 10,
  "sort": "-published",
  "filters": ["status:active", "type:post"]
}

При этом QUERY сохраняет все преимущества GET: он безопасный, идемпотентный и кэшируемый. Cочетает поддержку тела запроса с возможностью кэширования.

Метод официально получил статус PROPOSED STANDARD, что означает скорое появление поддержки в браузерах и веб-фреймворках.

Если вам интересны подобные посты, подписывайтесь на tg-канал Cross Join

Представлен проект капчи DOOM CAPTCHA, где нужно убить минимум трёх монстров на карте secret level E1M9 в режиме Nightmare. Стрейфиться нельзя, управление - стрелки вперёд. назад, вправо, влево, стрельба - пробел.

В сети появился онлайн-скринсейвер Screensaver Chess, который решает шахматные головоломки.

Обновления января 2025 года в Amvera Cloud

Многие ждали, писали, но нет, мы цены повышать не будем!)

Зато сразу после 1 января праздников, ориентировочно 13—17 января

1. Выкатим новый фронт. Надеемся, все станет понятнее.

2. Появятся преднастроенные RabbitMQ и Memcached.

3. Расширенные алерты и пробы. Можно будет настроить алерты на падение проекта, превышение заданного потребления ОЗУ и CPU и появления определенных ошибок в логах. Дополнительно появятся liveness и readiness пробы.

4. Мы вводим SLA. Осенью 2024 были инциденты с падением сервисов. Мы готовы нести ответственность за безотказность работы сервиса. Начиная с января 2025, если наша надежность окажется ниже 99,5% в месяц, можно будет претендовать на компенсации с нашей стороны.

SLA действует с 1 января 2025

Amvera Cloud — это облако для простого деплоя приложений через git push. Встроенный CI/CD, бэкапы и мониторинг позволяют развернуть проект тремя командами в IDE и не думать о настойке инфраструктуры. Amvera проще, чем использование VPS или Kubernetes-кластера.