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

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

В разделе «Цвет» есть возможность активировать три опции: «Светлый», «Темный» и «Автоматический», который выбирается на основе настроек системы. Новый режим «Википедии» несовместим с браузерными расширениями, которые сами делают «Википедию» темной.

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

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

Два основных подхода к разработке UI-китов

1. All-in подход. Подключение компонента вместе со стилями или без них. Здесь любой компонент — это самостоятельная единица, которая уже содержит всё нужное. Внутри этого подхода можно выделить два подвида:

• Инлайн-стили через Styled Components (возможно, добавить просто подключение стилей внутри компонента). Этот метод позволяет писать стили непосредственно в компоненте. При этом стили изолированы, что уменьшает возможность конфликтов между стилями разных компонентов.

• Без добавления стилей (Headless). В этом случае компоненты предоставляют только логику без UI, что позволяет самостоятельно управлять стилями. Для создания подобной библиотеки нужно также ознакомиться с паттерном Compound component.

2. Dependency CSS & Bundle CSS подход. Второй большой подход — когда стили и компонент подключаются по отдельности. В этом случае стили и логика компонента отделены друг от друга.

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

• Bundle CSS предполагает подключение всех стилей сразу и отдельно — компонента. По сути, в этом случае все стили объединены в общий бандл и импортируются в корне проекта. 

Но при написании они схожи, и стили к компоненту подключаются как модули.

О том, как создавать и подключать UI-киты, рассказываем в нашем гайде для начинающих Frontend-разработчиков. Там вы найдете примеры кода и полезные ссылки.

Иван Ярославцев про развитие отраслевого сообщества, три совета молодому digital-агентству

Мы встретились с Иваном Ярославцевым, CEO, Alto и организатором preparty UDW2024. Иван рассказал про свой путь развития отраслевого сообщества и дал три совета молодому digital-агентству.

Ссылка на интервью: https://www.youtube.com/watch?v=PPhhn44Tqug

Ural Digital Weekend 2024 — одна из крупнейших IT-конференций на Урале с насыщенной программой и аудиторией 400+ человек, организованная компаниями Spectr и Тэглайн. Билеты для посещения конференции уже могут приобрести все желающие на сайте Ural Digital Weekend 2024 — https://ural-digital-weekend.ru/. А по промокоду YAROSLAVCEVGIFT10 можно получить приятную скидку.

Опубликовали программу секции «Управление разработкой» Ural Digital Weekend 2024

Доклады секции 

• «Краткий курс по принятию управленческих решений», Александра Прокшина, Авито

• «Синергия тимлида и рекрутера: строим эффективный процесс взаимодействия», Евгений Антонов, Yandex Infrastructure

• «Как создавать идеальные фичи и избегать багов, объединяя тестировщиков и разработчиков», Олег Пендрак, Ozon банк

• «Почему хорошие программисты становятся плохими менеджерами», Фёдор Борщёв, Школа Сильных Программистов

• «Основы Управляемой Эволюции. Как проводить изменения с минимальным сопротивлением», Алексей Пименов, Neogenda

• «Три кита адаптации удаленных сотрудников. Базовые правила для компаний разного масштаба», Алла Стольникова, Directum

• «Самоорганизованные команды: формирование, принципы работы, контроль и адаптация под специфику процессов», Алексей Червон, Магнит

• «Эффективность Шредингера: метрики работы команды разработки, поиск и устранение узких мест в процессах», Полина Таран, Точка

• «Как добиться взаимопонимания между клиентами, менеджерами и программистами», Григорий Кирейчук, KozhinDev

• «Как создать ценность там, где про неё редко спрашивают», Алексей Мезенцев, ITPS

• «Почти универсальные проектные принципы или Как перестать зависеть от методологий», Егор Сизяков, Hawking Bros

• «Стеклянный потолок — проблема или возможность», Андрей Смирнов, X5 Tech

• Специальная тема, Глеб Михеев, Сбер

Билеты на сайте — Ural Digital Weekend.

Опубликовали программу секции «Разработка» Ural Digital Weekend 2024

В секции «Разработка» будут представлены прикладные доклады по направлениям Backend, Frontend, DevOps/SRE, ML/AI, Developer Experience. Большая часть докладов секции рассчитана на middle+ инженеров.

Программу секции сформировал Виктор Корейша, руководитель направления Managed Services в Ozon, ведущий замечательного подкаста о жизни в IT «Кода кода» и нового подкаста «Три тимлида заходят в бар».

Доклады секции 

• «Сайт, готовый ко всему», Никита Дубко, Яндекс 

• «Проблемы конфигурирования frontend-приложений», Александр Широчкин, Иннотех/Саня об IT

• «Как обрабатывать 5 млн изменяющихся форм в минуту с SLI 99.99%», Кирилл Грищук, Avito

• «gRPC-стримы на практике: к чему готовиться и где применять», Сергей Антоничев, Ozon

• «Обзор возможностей распознавания и генерации трехмерных тел с использованием алгоритмов Искусственного Интеллекта»,  Никита Петрушан, РЦТИ.рф

• «Kubernetes «на сковородке». Простые советы и сложные рецепты», Игорь Титов, Garage Eight

• «Оркестрация с помощью Temporal: как это устроено и как применять на практике», Антон Цитульский, Uzum Tezkor

• «Архитектура надёжности экосистемы», Алексей Мерсон, Т-банк

• «Трассировка микросервисов или когда метрик и логов недостаточно», Руслан Гайнанов, Т1

• «50 оттенков кеширования: от in memory к многоуровневому redis-кластеру», Леонид Ченский, Ozon Tech

• «Frontend Fortified: как стать неприступным для атак», Зар Захаров, VK Музыка

Билеты —  на сайте Ural Digital Weekend 2024.

В кодовую базу Node.js принято изменение, добавляющее возможность выполнения файлов с кодом на TypeScript.

Поддержка TypeScript включается при помощи опции "--experimental-strip-types" и сводится к очистке специфичных для данного языка определений типов, то есть преобразованию перед выполнением исходного кода в JavaScript.

Не связанные с описанием типов возможности TypeScript пространства имён, декораторы, свойства параметров и перечисляемые типы (enum) пока не поддерживаются. Протестировать новую опцию можно в ночных сборках Node.js 23.

Для трансляции задействован компилятор SWC (Speedy Web Compiler), написанный на языке Rust. Чтобы не добавлять дополнительные зависимости к Node.js, задействовано представление компилятора swc/wasm-typescript в промежуточном коде WebAssembly и уже применяемое для тех же целей в платформе Deno.

Это изменение добавлено в ответ на просьбы пользователей реализовать возможность запуска кода на TypeScript без установки внешних загрузчиков и дополнительных зависимостей. В проектах Deno и Bun поддержка TypeScript реализована изначально.

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

В добавленной в Node.js реализации данные возможности TypeScript теряются, в процессе трансляции исходных текстов в JavaScript проверка типов не осуществляется.

Источник: OpenNET.

Леонид Ченский про систему кэширования и топ-3 ошибок в кэшировании

Мы встретились с Леонидом Ченским, руководителем группы разработки в Ozon и спикером секции «Разработка» UDW2024. Леонид рассказала про обучение разработчиков, систему кэширования и топ-3 ошибок в кэшировании.

Ссылка на интервью: https://www.youtube.com/watch?v=yNuAjXKfcMg

Ural Digital Weekend 2024 — одна из крупнейших IT-конференций на Урале с насыщенной программой и аудиторией 400+ человек, организованная компаниями Spectr и Тэглайн. Билеты для посещения конференции уже могут приобрести все желающие на сайте Ural Digital Weekend 2024 — https://ural-digital-weekend.ru/. А по промокоду CHENSKYGIFT10 можно получить приятную скидку.

Александр Широчкин про конфигурирование frontend-приложений, карьеру и блогерство

Мы пообщались с Александром Широченным, руководителем направления разработки в Иннотех, владельцем канала Саня об IT и спикером секции «Разработка» Ural Digital Weekend 2024. Саша рассказал про техлидов, консультации разработчиков, конфигурирование frontend-приложений, карьеру и блогерство.

Ссылка на интервью: https://youtu.be/EKqf7QyEPgA

Блоги Александра:
https://www.youtube.com/@sanya-it
https://t.me/+C0iWBXnutWxjOTky

Ural Digital Weekend 2024 — одна из крупнейших IT-конференций на Урале с насыщенной программой и аудиторией 400+ человек, организованная компаниями Spectr и Тэглайн. Билеты для посещения конференции уже могут приобрести все желающие на сайте Ural Digital Weekend 2024 — https://ural-digital-weekend.ru/. А по промокоду SHIROCHKINGIFT10 можно получить приятную скидку.

Плагин JLSitemap - Phoca Download

JL Sitemap - компонент для формирования статической XML карты сайта. В результате работы компонента формируется файл или файлсет карт сайта, который не нагружает каждый раз сервер при обращении к нему. Компонент получает данные для формирования XML карты сайта от плагинов. В стандартную поставку входят плагины:

• Плагин поддержки Материалов Joomla.

• Плагин поддержки Меток Joomla.

• Плагин поддержки Контакты Joomla.

• Плагин поддержки K2.

• Плагин поддержки Kunena.

• Плагин поддержки Virtuemart.

Также сторонними разработчиками созданы плагины:

• JoomShopping

• Phoca Gallery

Теперь к этому комплекту плагинов добавился плагин поддержки компонента Phoca Download. Он добавляет в карту сайта ссылки на категории и файлы Phoca Download с учетом того опубликован файл/категория или нет, действуют ли даты публикации, подтверждён файл или нет и т.д.

Плагин имеет сразу 2 релиза:

• Версии 0.9.x созданы для Joomla 3 по старой архитектуре расширений. Возможно будут работать на Joomla 4 и Joomla 5 с включённым плагином обратной совместимости

• Версии 1.х созданы для Joomla 4 и Joomla 5 по новой архитектуре расширений. Если Ваш сайт на Joomla 4 и старше - рекомендуется использовать именно последние версии плагина.

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

Компонент XML-карты сайта JL Sitemap

Компонент Phoca Download

Вышел Astroid Framework v.3.1.0 для Joomla

Обновление популярного шаблона-билдера Astroid для Joomla.

Что нового в отличие от версии 3.0.0?
- Добавлено эелементы бильдера - Виджеты. Более 20 виджетов. (Можно включить или отключить в настройках плагина.) Теперь можно создавать шаблон с помощью бильдера и можно создавать свои виджеты.
- Добавлены Макеты блоков. Можно создать свой блок макетов с помощью элементами билдера и применить его в шаблоне.
- Добавлена Макеты материалов. Макеты материалов можно создать свои и применить его в настройках макетов категории.
- Виды блоков категории (в настройках меню Blog options)
- Удаление генератора тега Joomla в настройках плагина.
- Можно выбирать модуль меню (свой модуль Astroid menu) в настройках шаблона (Не обязательно создать дубликать стиля для каждого языка сайта)

Улучшения
- Fontawesome 6.6.0
- Очистка кода и стабилизация
- Улучшения UI/UX разделов админки шаблона
- Поддержка 3-х сторон для создания виджетов для Astroid с помощью плагинов

Шаблон работает на Joomla 4/5.

Скачать с GitHub

Примечание:
- astroid-framework-3.1.0.zip - только фреймворк
- astroid-package-v3.1.0.Framework-Template.zip - фреймворк и 3 базовых шаблона

Для тех кто хочеть отправить донат или поблагодарить автора
ko-fi.com/astroidframework

Если есть пожелание или предложения по улучшению продукта, то можете оставить их на Github

Эксперты PCWorld сравнили веб-браузеры Google Chrome, Mozilla Firefox, Opera, Microsoft Edge, Brave и Vivaldi по производительности и доступу к данным пользователей.

Главным критерием теста было время загрузки содержимого сайтов, особенно тех, которые богаты графическими элементами и JavaScript.

Тестирование проводилось на ПК на базе AMD Ryzen 5 3600 с видеокартой NVIDIA RTX 3060 Ti, 16 ГБ ОЗУ DDR4-3200 и накопителем Samsung 970 Evo. В качестве операционной системы использовалась Windows 10 версии 22H2.

Для измерения скорости работы браузеров эксперты задействовали инструменты Speedometer 3.0, Jetstream2 и Motionmark 1.3. Первый тест проверяет скорость рендеринга веб-страниц, второй – скорость выполнения JavaScript, третий – скорость отображения графических элементов.

По результатам тестов Chrome занял первое место в тесте Speedometer и второе место во всех остальных тестах, что позволило ему стать лидером среди прочих тестируемых браузеров.

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

Примечательно, что Firefox занял последние места в тестах, но отлично себя зарекомендовал в плане конфиденциальности, практически не собирая информацию о пользователях.

5 библиотек Golang для эффективной разработки веб-приложений

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

1. CHI Router

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

2. Go Fiber

Если Вам не понравился Chi router - есть Go FIber. Быстр, но нет совместимости со встроенным роутером. Если для Вас это не проблема - используйте его. Для меня его преимущества - скорость и возможность возвращать ошибки из хэндлеров

3. Jet templates

Насколько сильно мне упростила эта библиотека жизнь. Наипростейшее использование темплэйтов в Golang. Если Вам не нравится встроенное их использование, Jet - Ваше спасение

4. Scs

Отличный менеджер сессий. Если Вам надо использовать сессии - Scs

5. CHI Render

Отличная библиотека от тех же людей, что сделали CHI router. Помогает работать с HTTP запросами

На этом все, но могу также порекомендовать такие библиотеки, как testify для упрощения написания тестов и cleanenv для чтения конфига, ведь это так же важно.

Разработчики «Яндекс 360» адаптировали веб-верию «Календаря» для незрячих пользователей.

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

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

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

Ранее команда «Яндекса» сделала доступными для незрячих пользователей веб‑версию и мобильную версию «Диска», а также мобильную версию «Почты». Эти доработки позволяют пользователями с нарушением зрения свободно обмениваться электронными письмами с друзьями и коллегами и работать с облачным хранилищем — сохранять документы и делиться файлами.

Сравниваем Headless- и традиционный подход на примере Strapi CMS и WordPress

Headless CMS — это Low Code Solution для управления контентом.

При первом приближении Headless CMS очень похожа на стандартный подход с Django, Laravel или WordPress с прикрученным JSON API. Но дело в том, что у Headless-подхода есть несколько дополнительных преимуществ.

Выделим главные из них, сравнив Strapi CMS и WordPress:

• Полная и простая кастомизация дизайна
  
  Фронтенд в Strapi — это отдельное приложение. Он не имеет отношения к самой CMS, что дает большую гибкость для создания интерфейсов.

• Скорость отдачи контента
  
  Спорный момент, но Google заявляет, что сайты разработанные с использованием Headless CMS работают быстрее, чем, например, на WordPress.

• Безопасность
  
  У WordPress достаточно много уязвимостей, и поэтому даже простой бэкэнд на нем не совсем безопасен.

• Простота обслуживания и деплоя
  
  Со Strapi всё проще: собираем Docker-образ, пушим изменения кода в репозиторий, и, если настроен CI/CD, всё деплоится без проблем.

• Мультиязычность
  
  В Strapi мультиязычность подключается проще, чем в WordPress. А также поддерживается интеграция со сторонними сервисами для переводов: можно отделить зону ответственности и не пускать переводчиков в систему управления контентом, и в таком случае, они будут использовать свой привычный инструмент.

Если есть, что добавить к плюсам Strapi CMS на фоне WordPress — велкам в комментарии, обсудим. А подробнее о тонкостях работы с Headless CMS пишем в большой статье.

Представлен онлайн-проект Windows 98 Disk Defrag Simulator. На сайте defrag98.com можно посмотреть, как работала система дефрагментации дисковых носителей в Windows 98. На сайте можно выбрать диск для работы утилиты Disk Defragmenter и запустить в режиме симуляции этот увлекательный ретро-процесс.

Работа с Joomla в PHPStorm. Шаблоны (boilerplate) для быстрого создания модулей, плагинов Joomla в IDE.
PHPStorm - среда разработки для PHP-программистов, работающих с кодом как на чистом PHP, так и с такими PHP-фреймворками как Symfony, Laravel, Yii и другими. PHPStorm с 2016 года имеет отличную поддержку Joomla, подсказывает методы ядра, аргументы функций, навигация по коду и всё-всё, что нужно для комфортного кодинга разработчика.

Бойлерплейты Joomla расширений для PHPStorm

Участник нашего сообщества, разработчик Игорь Бердичевский (@septdir) поделился на GitHub своими "плюшками" для работы с Joomla:

• codeStyle - Code formating style

• colors - цветовая схема для PHPStorm

• fileTemplates - шаблоны для расширений Joomla

• options - файл с названиями для шаблонов

• project - шаблон для пустого Joomla-проекта включая задания для сборщика проекта Phing

• templates - Live Templates for files

• watchers - Configuration for File Watcher Этот инструментарий позволяет разработчику в PHPStorm быстро создать каркас нового модуля, плагина, компонента и не тратить время на ручное создание структуры файлов и папок.

Репозиторий JetBrains-PhpStorm на GitHub

Также полезные ссылки:

• официальная документация PHPStorm по работе с Joomla

• Настройка IDE (PhpStorm) для работы с Joomla - большая подробная статья от участника сообщества Дмитрия Рекуна (@b2z)

В продолжение публикации «Загрузка es‑модулей в браузерные приложения» cделал более‑менее практичное веб‑приложение с загрузкой кода из публичных ресурсов (GitHub Pages & jsDelivr).

Приложение позволяет использовать OpenAI API напрямую из браузера. В приложении задействованы следующие библиотеки:

• Vue

• Vue Router

• Quasar

• OpenAI

Код приложения - здесь, описание - здесь (на англ.).

Отдельное спасибо @SuperCat911 за комменты про importmap - без них бы не получилось юзать OpenAI-библиотеку :)

Кстати, до 4-версии у OpenAI не было браузерной версии API-клиента (только для nodejs). И несмотря на то, что библиотека написана на TS, для браузера они сделали ES-модули, а не UMD-бандл.

Всех приветствую! Вышел релиз MoonShine 2.18.0 (админ-панелm для Laravel) с кодовым названием “Mango Tango”. 🌙

Подробности в статье.

Давайте кратко расскажу что нового:

• @dissnik добавил режим sticky для таблиц ресурса.

class PostResource extends ModelResource { 
  // ...
  protected bool $stickyTable = true; 
  // ...
}

• Появилась возможность заменить шаблонную заглушку аватара профиля на свою

Profile::make()->defaultAvatar("https://ui-avatars.com/api/?name=$name")

• Большие улучшения для импорта и экспорта Просто взгляните на пример трансформации enum в строку при экспорте и обратно при импорте

Enum::make('Enum') 
    ->attach(ColorEnum::class) 
    ->useOnImport(fromRaw: static fn(string $raw, Enum $ctx) => ColorEnum::tryFrom($raw))
    ->showOnExport(modifyRawValue: static fn(ColorEnum $raw, Enum $ctx) => $raw->value)

• @djnew добавил режим поиска для компонента Dropdown

Dropdown::make()->searchable()->searchPlaceholder('Search...')

• asyncSearch с флагом для замены query builder

Чтобы asyncSearchQuery полностью заменял билдер

asyncSearch(asyncSearchQuery: fn($q) => $q->where(..., ...), replaceQuery: true)

Рубрика BugBusters 🐛

• Метрики на небольших экранах

• Скролл в сайдбаре

• Метод onBoot

Новости MoonShine 3.0

• Ядро уже почти готово

• Прошли тесты на реальном проекте с пакетом tenancy (с выходом 3 версии нас ждет новая демка)

• Сейчас идут тесты интеграции MoonShine в Symfony

• После Symfony переходим на фичи 3.0, документацию и всякое вкусное к релизу

Запустили серию интервью в преддверии Ural Digital Weekend 2024. Приглашаем в гости спикеров и организаторов, рассказываем про их опыт и делимся секретами подготовки конференции.

В первом выпуске встретились с Еленой Березкиной, руководителем проектов в GreenData и членом Программного комитета секции «Управление разработкой» UDW2024. Ссылка на интервью: https://www.youtube.com/watch?v=olVhzLFILWY

Лена делится своим опытом в организации сообщества project-менеджеров в Перми, раскрывает секреты комфортной работы в команде и рассказывает о программе конференции.

Билеты для посещения конференции уже могут приобрести все желающие на сайте Ural Digital Weekend 2024 — https://ural-digital-weekend.ru/. А по промокоду BEREZKINAGIFT10 можно получить приятную скидку.

Вышла новая версия Quantum Manager - популярного медиа и файлового менеджера под Joomla 4/5. Отличительной особенностью данного релиза является включение в ядро дистрибутива библиотеки lib_fields (ранее тянулась из внешнего источника при установке), а также интеграция с AcyMailing (компонент для e-mail рассылок). Также исправлены некоторые ошибки.

Что нового?

• [добавлено] - Интеграция с AcyMailing. Это компонент для e-mail рассылок. Теперь можно при формировании писем вызывать медиа поле с Quantum.

• [изменение] - Библиотека lib_fields, теперь часть пакета. Это позволит поставить компонент локально, без Интернет, а также решает проблему блокировки Github в
  некоторых регионах.

• [исправлено] - Создание пустых папок при открытии менеджера, когда добавлялась область "Директория поля».

• [исправлено] - Отображение название областей в конфигурации.

• [добавлено] - Показывается id наименование области в конфигурации.

Quantum Manager работает на Joomla 4 и Joomla 5 (без плагина обратной совместимости), проверен на PHP 8.2+ и полностью бесплатен.

Ссылки:

• Quantum Manager на Joomla Extensions Directory

• Quantum Manager на Github

• Описание возможностей (страница продукта)

Также добро пожаловать в Телеграм чат Joomla для профессионалов.