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

Делаем веб лучше

30 окт 2024 в 17:217.3K

Блог компании SpectrВеб-разработка*Карьера в IT-индустрииКонференции

Проблемы конфигурирования frontend-приложений — Александр Широчкин / Ural Digital Weekend 2024

Как frontend-приложения получают конфигурации? Об этом в докладе рассказал Александр. А также он разобрал, почему "нельзя просто так взять и зачитать из env". Помог понять, почему не стоит подключать js с параметрами на этапе деплоя или модифицировать index.html. А также узнать, почему не стоит использовать деплой-скрипты с заменой шаблонных параметров в коде. Познакомил с решениями, которые одобрят самые матёрые спецы по инфобезу.

Ссылка на запись доклада в ВКонтакте.

Ссылка на презентацию: https://goo.su/0LPN6

spectr_dev

30 окт 2024 в 17:156.8K

Блог компании SpectrВеб-разработка*Карьера в IT-индустрииKubernetes*

Kubernetes «на сковородке». Простые советы и сложные рецепты — Игорь Титов / Ural Digital Weekend 2024

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

Kubernetes для всех. Простые советы и сложные рецепты. Экосистема Kubernetes.

Ссылка на запись доклада в ВКонтакте.

Ссылка на презентацию: https://goo.su/VKYkri

spectr_dev

29 окт 2024 в 12:435.4K

Блог компании SpectrВеб-разработка*Тестирование IT-систем*HTML*Тестирование веб-сервисов*

Сайт, готовый ко всему — Никита Дубко / Ural Digital Weekend 2024

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

Вспомните, где вы обычно тестируете свое веб-приложение. Скорее всего, у вас есть несколько вьюпортов, в которых вы быстро проверяете верстку и, возможно, пишете автотесты. И багов от пользователей почти нет — значит, все делаете правильно. Но как вашим сайтом пользуются на самом деле? Что нужно предусмотреть, чтобы сайт работал действительно почти везде?

В докладе вы найдете множество интересных примеров и отсылок. Заходите посмотреть!

Ссылка на запись доклада в ВКонтакте.

Ссылка на презентацию: https://goo.su/NRS

okixisp

23 окт 2024 в 06:006.4K

Блог компании AvitoTechВеб-разработка*JavaScript*Учебный процесс в IT

Что необходимо учесть при поднятии переменных?

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

Из нового выпуска вы узнаете:

что такое поднятие переменных;
три ключевых слова: как объявлять переменные в JavaScript;
два вида типизаций и условия их определения.

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

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

+15

gmtd

23 окт 2024 в 05:545.3K

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

Если у вас в Vite проекте есть данные в json файлах, то иногда удобней работать с json5 (+комментарии и переносы строк, как минимум)

Для этого надо:

Поставить Vite плагин vite-plugin-json5
Поставить расширение json5 для VS Code для подсветки синтаксиса
Чтобы не ругался TypeScript, прописать в index.d.ts:

declare module "*.json5" {
  const value: any;
  export default value;
}

Стало намного удобней.

Бандл не меняется.

JordanCpp

14 окт 2024 в 20:349.3K

Веб-разработка*Программирование*HTML*БраузерыИстория IT

Как бы выглядел Хабр в 1993 году.

Приветствую хабравчане, сидел я вечером за ПК, пил кофе и пришла ко мне идея, как бы Хабр выглядел в 1993 году на html 1.0.

Нашел старые сайты тех лет и попытался в простом варианте воспроизвести Хабр. Вот, что получилось. Довольно забавно:)

<HEADER>
<TITLE>Хабр</TITLE>
</HEADER>
<BODY>
<H1>Хабр</H1>

 <dt>Пришли статью, стань автором! <A NAME=69 HREF="">habr.mail.ru</A></dt>
<A NAME=69 HREF="">Моя лента</A>
<A NAME=69 HREF="">Все потоки</A>
<A NAME=69 HREF="">Разработка</A>
<A NAME=69 HREF="">Администрирование</A>
<A NAME=69 HREF="">Дизайн</A>
<A NAME=69 HREF="">Менеджмент</A>
<A NAME=69 HREF="">Маркетинг</A>
<A NAME=69 HREF="">Научпоп</A>


 <dl>
  <dt><H3>Вышел Linux версии 0.2</H3></dt>
  <dd>
Привет, Хабр!
Ядро Linux набирает обороты. Я расскажу как устроено ядро и почему многие энтузиасты выбирают Linux.
   </dd>
   <dd>
   <A NAME=69 HREF="">Читать</A>
    </dd>
 </dl>

 <dl>
  <dt><H3>Ричард Столман хоронит Windows</H3></dt>
  <dd>
В данной статье я приведу 10 причин, почему windows 3.1 и последующие её версии не будут иметь успеха.
   </dd>
   <dd>
   <A NAME=69 HREF="">Читать</A>
    </dd>
 </dl>

 <dl>
  <dt><H3>В программном обеспечении всё плохо</H3></dt>
  <dd>
 Программы тормозят, новые версии требуют всё более мощного железа им уже не хватает 386 процессора на целых 20mhz.

   </dd>
   <dd>
   <A NAME=69 HREF="">Читать</A>
    </dd>
 </dl>

  <dl>
  <dt><H3>Почему С самый лучшмй языка программирования</H3></dt>
  <dd>
Всем приве

+12

MarieSuperhero1

14 окт 2024 в 07:117.1K

Блог компании Яндекс ПрактикумВысоконагруженные системы*Веб-разработка*Системное администрирование*DevOps*

Новые курсы Яндекс Практикума для специалистов с опытом

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

«Эксплуатация и разработка в Kubernetes» — за 3 месяца освоите и примените на практике технологии оркестрации контейнеров. Программу составляли инженеры и тимлиды, которые давно работают с Kubernetes. Благодаря этому, вы будете учиться только тому, что на самом деле пригодится в работе. Ближайший старт — 17 октября.

«Apache Kafka для разработки и архитектуры» — 3-месячный курс для тех, кто хочет влиять на масштабируемость и надёжность систем. С этой технологией вы будете работать с более сложными продуктами и сможете повысить грейд. Есть бесплатная вводная часть. Ближайший старт — 21 ноября.

«Архитектура программного обеспечения» — за 6 месяцев освоите лучшие практики архитектуры и научитесь решать сложные архитектурные задачи. Есть бесплатная вводная часть. Ближайший старт — 24 октября и 28 ноября.

«Мидл Android-разработчик» — 5-месячная программа для Android-разработчиков с опытом. Курс фокусируется на углублении технических навыков, изучении передовых паттернов и технологий, а также на освоении инструментов и методов, применяемых в реальных проектах. Ближайший старт — 14 ноября.

mihailgok

12 окт 2024 в 14:2911K

Веб-разработка*CSS*JavaScript*HTML*Финансы в IT

Калькулятор финансов - теперь можете посчитать свои средства и данные сохранятся локально на устройстве)

Предтеча другого, более крупного проекта, который будет потом)

Clevertec_dev

11 окт 2024 в 11:566.3K

Блог компании ClevertecВеб-разработка*JavaScript*Проектирование API*ReactJS*

Как в нативе: эти Web API поднимут ваше веб-приложение в стратосферу

С ними даже можно сыграть в Техасский Холдем😂

Салют, на связи Clevertec. Сейчас наша команда разрабатывает веб-версию банкинга с использованием React. С помощью Web API даем пользователям фичи, которые они привыкли получать в нативных приложениях. Отрываем от сердца список решений 😉

- Web Share API – для обмена ссылками, текстом и файлами с другими приложениями на устройстве. К примеру, удобно отправить чек об оплате в мессенджере, не покидая банковское приложение.

- Contact Picker API позволяет делиться контактами из своего списка. Можно использовать для перевода по номеру телефона. Не нужно вводить цифры вручную – поле автоматически заполнится контактом из телефонной книги.

- Media Capture and Streams API в нашем случае позволяет отсканировать QR-код с помощью камеры устройства. Нажимаешь на “Сканировать QR” – открывается окно с камерой, она считывает код и переводит пользователя в дерево платежей.

- Web OTP API открывает возможность автоматически вставлять код из смс. Например, для подтверждения оплаты на телефон приходит сообщение. Внизу экрана появляется модальное окно с подтверждением вставки. И после нажатия на “Разрешить” код отображается в поле ввода.

Подробнее про этот опыт использования Web API мы рассказали в отдельной статье. Что вы думаете о Web API, какие используете? Расскажите в комментариях, будем взаимно полезны друг другу.

okixisp

7 окт 2024 в 12:257.6K

Блог компании AvitoTechВеб-разработка*JavaScript*Учебный процесс в IT

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

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

способы создания примитивов с помощью конструкторных функций и простой нотации;
доступ к методам строкового объекта и использование метода valueOf для получения примитивных значений;
концепции области видимости: глобальную, функциональную, блочную и модульную;
введение в блочную область видимости, добавленную в ECMAScript 2016, и её применение;
понимание лексической среды и замыканий, которые позволяют функциям сохранять доступ к переменным родительских функций.

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

+19

LeninIvanov

4 окт 2024 в 12:405.2K

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

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

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

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

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

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

sergeytolkachyov

17 сен 2024 в 08:525.5K

CMS*Веб-разработка*Open source*PHP*Joomla*

Совет о 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>

mihailgok

15 сен 2024 в 10:128.3K

Веб-разработка*CSS*JavaScript*HTML*

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

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

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

runity

11 сен 2024 в 15:097.1K

Блог компании РунитиХостингВеб-разработка*Облачные сервисы*

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

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

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

С помощью функции «Импорт сайта» вы можете перенести сайт на партнерский «Конструктор сайтов». Специальный промокод SITE1R3MFORWIX на тариф «Бизнес» за 1 рубль на 3 месяца.
Импорт списка товаров можно произвести с помощью модуля WooCommerce в конструктор «Рег.сайт». Промокод RSREC00000H13L на 3 месяца бесплатного использования тарифа «Развитие».
Если хочется большего, чем конструктор и готовые шаблоны, дарим промокод RegSolutions30 — скидка 30% на индивидуальное решение по созданию сайта в рамках Пакета услуг «Рег.решения».

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

sergeytolkachyov

9 сен 2024 в 16:047.6K

Веб-разработка*Open source*PHP*Joomla*CRM-системы*

Вышел 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

SomeEditor

6 сен 2024 в 11:016.3K

Блог компании Yandex Cloud & Yandex InfrastructureВеб-разработка*Мессенджеры*Облачные сервисы*

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

Настройка уведомлений в сервисе — задача, напрямую не связанная с бизнес‑логикой и написанием кода, к которой часто привлекаются разработчики. Для её решения нужно погрузиться в тонкости настройки 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.

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

Pontific

3 сен 2024 в 08:035.6K

Веб-разработка*Тестирование веб-сервисов*Веб-аналитика*Облачные сервисы*

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

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

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

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

Сайт недоступен/снова доступен.
Изменился заголовок сайта.
Может выручить, если в какой-то момент вместо сайта появится заглушка "домен не прилинкован к директории" или что-то в этом роде.
Истекает срок действия SSL-сертификата или домена.
Изменился конечный адрес (если срабатывает переадресация).

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

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

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

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

Вот так выглядит проверка сайта в Tg-боте

sergeytolkachyov

30 авг 2024 в 08:165.4K

CMS*Веб-разработка*Open source*PHP*Joomla*

Совет по 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 поля, от состояния которого зависит видимость данного.

sergeytolkachyov

29 авг 2024 в 06:256.4K

CMS*Веб-разработка*PHP*Joomla*

Совет по 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 потерять наши исправления. В данном случае можно вывести рендер одного поля вместо трёх.

vvroschin

26 авг 2024 в 09:237.7K

Блог компании AvitoTechВеб-разработка*JavaScript*Учебный процесс в IT

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

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

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

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

+12

1 2 ...

6 7

9 10 ...

14 15

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

Ближайшие события

Вклад авторов